< P5.JS > 기말 작품 아이디어 스케치와 최종 작품

기말 작품 아이디어 스케치

#00 : Nature 에 대한 것

• 사전적 정의
  • 자연, 본질, 근원, 본성
• Nature 에 대한 고민, 생각

• Nature -> 본성 -> 인간 -> 성향 -> 직관적인 성향
  • 같은 뜻임에도 다른 표현방식의 제시로 한가지 표현 방식에만 주목하게 하는 ‘틀짜기 효과’처럼, 인간이 가지는 직관적 사고(보여지는 것에만 의존하는 성향)를 글자와 다양한 사물로 표현해보면 어떤 시각적 모습으로 표현 할 수 있을까?

 

#01 : 아이디어 스케치 1

1-1. 스케치 

• 마치 창문으로 세상 밖의 사물을 볼 수 있듯이, 글자 ‘N’ 으로 보여지는 것과 보여지지 않는 것을 분리하기 위해 표현한다.

  

 

• 글자가 아닌 공간을 클릭하면 마우스 커서 위치에서 파티클이 떨어진다.
• 글자를 클릭하여 움직일 수 있다.

 

#02 : 아이디어 1에 대한 점진적 아이디어 스케치 2

2-1. 스케치

기존 아이디어 1에서 시작한 아이디어 2 스케치.

 

• Nature 단어를 완성 할 수 있는 나머지 글자들을 추가한다.
• 각 객체인 글자들을 클릭해 이리저리 움직일 수 있다.
• 글자 안에 있는 파티클, 즉 그래픽 요소들은 글자를 움직여도 가만히 있으나, 각 글자 객체는 서로 충돌 개념을 가지고 있다. 때문에 마우스로 드래그하여 움직이면, 서로 부딪히며 튕겨나가기도 한다.

 

2-2. 코드 스케치

 

물리엔진 BOX2D 를 사용하여 실험해보자. 

#03 : 아이디어 2에 대한 점진적 아이디어 스케치 3

3-1. 스케치

 

 

• 글자를 클릭하여 움직였을 때, 파티클들도 반응해서 글자를 따라오는 모습.
• 글자끼리 충돌할 때, 힘을 더 가하면 합쳐지는 모습도 구현 가능할까?

 

---

#04 : 새로운 아이디어 스케치_1129

• 수업 중 나온 아이디어 스케치

1. [ 사회적 맥락에서 색이 갖는 편견 ] - Nature 라는 단어가 가지는 색상에서 시작하여, 사회적 맥락에서 색이 갖는 편견에 대해 표현하는 작업 아이디어.

---

 

1. [ 기계의 입장에서 기계가 갖는 자기 정체성 ] - 본질 -> 구성 -> 구조 -> 기계로 시작했다. 기계의 입장에서 보았을 때, 기계가 가지는 자기 정체성은 무엇일까? 기계의 입장에서 자기 정체성을 찾아가는 모습을 구현해보는 것도 흥미롭겠다.

• 팀원 분들의 아이디어 곱하기 : <축적> 이라는 키워드에서 영감을 얻어, 기계입장에서 노동력을 뜻하는 톱니바퀴 모양의 이미지가 위에서 아래로 계속하여 쌓이면서 인간의 편의를 위해 끊임없이 희생하는 모습을 생각했다.

  

  • 캔버스의 크기를 달리하여 생각해보기 : Canvas Size 이와 같이 y축의 크기를 더 깊게 표현한다면, 톱니바퀴(기계의 노동력)가 깊게 쌓이는 모습이 슬프게 느껴질 것 같기도 하다.
  • 외부 라이브러리를 사용하여 생각해보기 : 사운드 요소가 작업에서 의미를 전달하는 것에 많은 영향을 준다고 생각하기 때문에, Sound 라이브러리 혹은 오실레이터 라이브러리 사용.

톱니바퀴를 마우스의 입력으로 움직일 수 있는데, 기계는 이 마우스가 가까이 다가오는 것을 사람의 손길이 닿는 것이라고 생각하여 펄스파 혹은 쏘우파의 생성으로 소음에 가까운 소리를 유발.

 

팀원 피드백_2021/12/07

 

++ 배경색을 밑에는 어둡게 위에는 밝게 주면 좋을 듯.

++ 기존 아이디어와 사운드를 사용하는 아이디어와 다른 주제 같다는

 

---

 

1. [ 바이러스의 시선에서 보는 자기 증식 과정 ] - 자연 -> 동물,인간 -> 세포 -> 바이러스, 바이러스의 시선에서는 자기 증식 과정이 어떻게 보일지에 대한 궁금증에서 시작되었다. 바이러스의 증식 과정을 표현해보는 작업.

   

---

 

원래 아이디어 구상과 표현 방법에 많은 시간과 집중이 필요하여 정말 오래걸리는데, 수업 시간 브레인스토밍에서 짧은 시간안에 아이디어 내기, 내가 생각하기에 완벽하지 않더라도 일단 내보는 키워드, 팀원 분들의 아이디어를 곱하는 과정이 아이디어를 도출하는데 많은 도움이 되었다. 다른 작업을 진행할 때에도 브레인스토밍을 적극적으로 활용해보자...

• 추가적인 아이디어 스케치

1. [ 인간의 손길이 괴로운 자연물 ] - 자연 -> 동물 -> 파괴로부터 시작. 마우스 커서가 화면 정중앙에 있는 자연물에 다가올수록 오실레이터의 진동수가 증가하여, 괴로움을 표현하는 자연물.

   

---

 

1. [ 중력조절 장치 / ‘그들 중 하나’ ] - Dom Slider 를 사용하여, 중력을 조절한다.

 

중력이 작용할 때에는 모두 똑같은 모습으로 놓여져있다. 하지만, 중력조절장치로 중력이 없어지면, 대부분의 블럭들이 무중력 상태로 위로 붙는데 그 중에서 몇몇의 블럭들은 줄에 묶여 더 이상 올라가지 못한다.

 

평소 알고있지 못한 것들이지 없는 건 아니다..

 

 

---

 

1. [ 삶의 두 가지 과정. 사회화 과정과 죽음에 대한 이해과정 ] - 본질 -> 인간 -> 삶 -> 죽음으로부터 시작. 

 

삶이 시작되면 죽음과는 필연적인 관계다. 사회화 과정을 통해 공동체와 살아갈 수 있는 준비를 

하고, 공동체에서 자신이 사라짐을 받아들이는 죽음의 이해과정을 준비한다. 작업에서는 이 주제를 다룬다.

 

가운데에 있는 원은 나 자신이다. 사회화 과정을 거칠때에는 주변의 사물들이 나에게로 다가온다. 그리고 죽음의 이해과정은 나 자신으로부터 주변의 사물들이 떨어져 멀리됨으로 표현된다. 마지막은 디스플레이 화면이 줄어들며 마친다.

---

 

1. [ 변화의 곡선 ] - 중력의 작용으로 어쩔 수 없이 땅을 바라보고 있는 선들은 다른 힘에 의해 본래의 모습을 찾아가려한다. 

마우스의 움직임에 따라 선들은 곡선 형태를 띄운다.

#05 : 아이디어 발전, 진행시키기

• 선택한 아이디어 : [ 중력조절 장치 / ‘그들 중 하나’ ]

• 각 기능의 단계를 나누어 실험해보기.

 

#05_1 : Dom Slider 를 이용한 중력 테스트.

• 첫번째 실험의 목표는 Dom Slider 와 사물의 가속도를 연동시키기 위함이다.

slider = createSlider(0, 10, 0);

let val = slider.value();  let val_2 = map(val, 0, 10, 0.1, -0.1);     background(220);     let gravity = createVector(0, val_2);  myrect.applyForce(gravity);     myrect.chkEdge();  myrect.update();  myrect.display();

슬라이더의 범위를 0, 1까지로 하였을 때 정수 값만 받는다. 1의 단위씩만 값을 받아, 미세하게 조절되어야하는 가속도에는 적합한 숫자 범위는 아니어서 map 함수를 이용하여 숫자 제한을 따로 두기로 했다.  

 

했으나.. 레퍼런스를 다시 찾아보니, createSlider() 함수의 네번째 매개변수로 단위당 이동 크기를 정해 줄 수 있었다. 

 

그리고, 굳이 변수 두개( val, val_2 )를 선언하고 정의 할 필요가 없었다. map함수 첫번째 인자에 slider.value() 값을 바로 넣어주면 된다. 효율적으로 생각하자..

 

let val = map(slider.value(), 0, 10, 0.1, -0.1);

 

첫번째 실험 결과 : https://editor.p5js.org/JungJunHyeok/sketches/QcbtvAlcB

#05_2 : 여러 개의 객체 다루기(질량 더하기).

 

기획에서 생각했던 것은 단일 오브제가 아닌, 여러개의 객체였기 때문에 보다 많은 수의 객체를 다뤄보는 것을 실험해보자. 

 

각 객체의 질량을 다르게 해주지 않았기 때문에, 모든 객체가 똑같이 반응한다.

객체에 질량을 주고 질량에 따라 움직이도록 하자.

 

this.mass = random(0.8,1.5); applyForce(force) {     force.div(this.mass);     this.acc.add(force);   }

 

F = MA, 가속도에 힘을 더하는 것이기 때문에 힘 나누기 질량을 계산해준다.

두번째 실험 결과 : https://editor.p5js.org/JungJunHyeok/sketches/utqbgAS3n

#05_3 : 각 객체들이 물리적으로 충돌하게 만들어보기 (with.Box2D)

 

Box2D의 예제를 그대로 사용하기보다, 기초적인 개념을 이해하여 사용하고자 코딩 트레인 유튜브, The nature of Code 을 통해 학습해보자.

학습방법 : YouTube, The Nature of Code

 

Box2D는 C++ 언어를 기반으로 작성된 물리 엔진이지만, Flash, Javascript, Python, Ruby 등 다양한 프로그래밍 언어에 이식 되어 사용할 수 있다. Java 언어에서는 JBox2D 라는 이름의 라이브러리가 존재하고, 프로세싱은 자바 언어를 기반으로 하기 때문에 이 물리엔진을 사용 할 수 있다고 한다.

 

처음 약간 헷갈렸던 말이 있었다. ‘ 세계 ‘ 와 ‘  픽셀 ‘ 이다. 헷갈리는 대로 넘어갔는데, 가만 살펴보니 

box2D는 컴퓨터 세상의 픽셀 처리 방식을 모른다는 것이고, 현실 세계와 유사하게 몇 미터 떨어져있네.. 하는 등 현실 세상처럼 계산한다는 것이었다. 때문에, 작업을 할때에는 픽셀을 현실 세계로 바꾸는 과정, 현실을 픽셀 세계로 바꾸는 과정이 필요하다.

 

이것을 좀 더 편리하게 변환하고자, 다니엘 쉬프만이 몇개의 기능을 추가한 PBox2D를 사용하는 것으로 보여진다.

 

Box2D에서는 vec2 라는 2차원 공간의 벡터를 사용한다. 기존의 p5js 에서 사용하던 p5.vector와 비슷해보이지만, 사용하는 명칭이 조금 달라보인다.  

Box2D를 사용하기 위해 이해해야 할 중요한 요소들

• world : 물리 엔진 속 세상.
• Body : 보이진 않지만, 기본적인 요소. 위치와 속도가 있다.
• Shape : 그래픽으로 보여지는 것들. 사각형, 원 등등.
• Fixture : body 와 shape을 연결. 

밀도, 마찰, 반발력과 같은 속성을 설정

• Joint : 관절. 두개를 연결시키는 것.

 

---

 

javascript 로 작성된 예제를 살펴보자.

 

예제 : https://editor.p5js.org/javier/sketches/wzLQrzS0t

 

예제에서는 크게  sketch.js,  box.js, boundary.js 로 나눌 수 있다. 

 

• sketch.js 단계 세분화

 

1. box2d 라이브러리를 사용하기 위해 박스투디의 세계를 창조하는 것(createWorld();).
2. 바운더리 생성 ( 일종의 물리적 벽을 만드는 것 ).
3. 객체 생성 ( 물리적 힘을 받는 객체를 만드는 것 ).

• box.js 단계 세분화

 

1. body, fixture 정의
2. fixture 물리 값 정의
3. body 생성
4. body shape 연결

 

1. display 메소드 정의
   1. fixture 의 메소드로 박스의 셰입을 정하는 듯 보인다.

 

 

세번째 실험 결과 : https://editor.p5js.org/JungJunHyeok/sketches/_XCT4pPXzc

기존의 pos, vel, acc 벡터로 객체의 속력을 주었는데, box2d는 중력을 주는 부분이 드러나있어보이지 않는다.. 

 

let timeStep = 1.0  / 30; world.Step(timeStep, 30, 10);

 

이 코드는 어떤 의미일까? 값을 바꿔보니 객체가 떨어지는 속도가 변한다.

timestep 라는 이름 그대로 이 세계의 시간을 조절 할 수 있는 것으로 보여지고, 때문에 이 시간을 느리게 하면 객체가 움직이는 것이 감소하다 보니, 떨어지는 속도도 느려보이는 듯 하다.

#05_4 : 줄에 묶인 객체 만들기.

 

줄에 묶여있는 모습을 구현하기 어려운 점이 있을 줄 알았지만, 생각보다 수월하게 작성했다.

 

if(this.pos.y <= height/2) {       this.vel.y *= -1/2;       this.pos.y = height/2;     } display() {     line(this.pos.x + this.w/2, this.pos.y, this.pos.x + this.w/2, height);     rect(this.pos.x, this.pos.y, this.w, this.w);   }

 

클래스의 메소드로 라인을 만들어주었기 때문에, 객체 입장에서는 나 자신에서부터 시작하여 height 까지(땅까지) 선을 이어주도록 했다. 한가지 추가 된 점은, pos.x 값에 반지름을 더했다는 것이다. 기존의 사각형을 그리면, 왼쪽 상단 모서리가 0,0인 기준 점으로, 사각형의 반지름을 더해야 사각형 가운데서 선이 이어지도록 했다.

 

그리고 사각형이 올라갈 수 있는 범위를 지정해주어서, 마치 벽에 부딪힌 것처럼 튕길 수 있게 했다. 

 

네번째 실험 : https://editor.p5js.org/JungJunHyeok/sketches/lL9uU1y2E

 

좀 더 줄처럼 보이게 하기위해 곡선을 표현 할 수 있을까?

#05_5 : Dom Slider와 오실레이터를 연결하는 기능 실험하기.

let freq = map(slider.value(), 0, 1, 100, 400); if(freq < 201) {     playOscillator();     osc.amp(0.1, 0.1);   }      if (playing) {     osc.freq(freq, 0.1);     osc.amp(amp, 0.1);   }

 

우선, 사인파를 사용했다. 

변수를 선언하고 슬라이더의 값을 원하는 주파수의 최소 값과 최대 값으로 치환한 값을 담았다. 

그리고 슬라이더를 움직여서 주파수(슬라이더의 이동범위)가 변하면, 오실레이터가 동작하게 했다. 

 

다섯번째 실험 : https://editor.p5js.org/JungJunHyeok/sketches/c6ZcAb0Be

---

#06 : 2021/12/07_창작진행_02

 

• 저널링에 앞서 지난 저널링 돌아보기, 리프레시 하기.

10개의 아이디어 대부분이 물리적 충돌 개념이 포함 되어있다. 

지난 주 저널링인 #05_3 챕터에서 Box2D 를 사용하기 위해 1차적으로 공부를 진행했지만, 좀 더 주도적으로 box2d 를 사용하기 위해 2차적인 공부를 진행 할 필요가 있다고 생각한다.

 

10개의 아이디어에서 공통적으로 나타나는 핵심 기능 ?

• 물리적 충돌, 마우스의 위치 값에 따른 사운드 변화, 마우스의 반응하는 인터렉션 요소.

 

10개의 아이디어에서 공통적으로 나타나는 작업 의도 ?

• 인간, 기계, 생물 등에 대한 관계, 두 객체의 관계에 대한 고민.  

 

내 작업들을 보면 조금 추상적으로 보일 수 있다. 작품의 의미가 더 잘 보이게 하려면 어떻게 해야할까?

---

#06_1 : 줄의 높이 달리하기.

 

줄의 묶여있는 객채의 높이를 달리하려면, 처음 객체를 생성할 때 this.pos.y 에 랜덤한 수로 더해주는 메서드를 만들면 된다는 생각을 했다.

 

1. 첫번째 시도.

(위) linerect 클래스 파일

 

(아래) sketch.js 파일

작동결과 : 동작이 안된다. 문법오류는 아닌 듯 보이고.. this.pos.y 가 아직 정의되지 않은 순서 문제인가..?? 아니면 전역변수로 선언된게 아니라 display() 메서드에서 문제가 발생한걸까..?

 

리서치 결과와 디버깅을 위한 시도 : 

결국 함수의 매개변수는 어떻게 하든 지역변수로 처리한다는 걸까..?

 

다른접근 : 생성자 매개변수를 사용하기. 

생성자 매개변수를 사용하는 것도 동작이 안된다.. 어떤게 문제일까..??

디버깅에 참고한 것 : https://jenny-daru.tistory.com/13, https://kathak33.tistory.com/32

 

---

#06_2 : 오실레이터 디버깅.

 

아톰 에디터 라이브 서버로 구동시켜보면, 오실레이터 소리가 나오다고 안 나온다. 이유가 뭘까?

• 아톰 라이브 서버로는 오실레이터의 사운드가 안나온다. 
• 깃 허브에 업로드하고 페이지를 사용해도 오실레이터는 작동을 안한다.

 

오실레이터 라이브러리를 대체 할 수 있는 것을 생각하자.

• 사운드 파일을 제작하여, 재생. 로우패스 필터를 활용하여 오실레이터의 효과와 비슷하게 만들어 볼 수 있다.

 

---

#06_3 : 사운드 파일을 사용하고 로우 패스 필터 적용하기

• 사운드 파일을 사용하고 슬라이더의 값에 따라 로우 패스 필터의 값도 변하게 하기 위해 

슬라이더의 값이 들어 있는 freq 변수를 활용했다.

• 직접 제작한 고음질의 사운드 파일을 사용하려 했지만, 100mb 가 넘으면 안된다고 한다..

 

---

#07 : 창작진행_03

#07_1 : 가독성 유지를 위해 ReFactoring 진행하기.

 

몇 주에 이어 동일한 스크립트에 코드를 작성하다보니, 가독성이 떨어지기 시작했다.

불 필요한 코드는 지우고 함수로 만들어 결과는 유지하되, 가독성을 높이자.

가독성을 높이고자, 한 가지 기능을 수행하는 코드들을 묶어 사용자 정의 함수로 만들었다.

#07_2 : Dom Slider의 위치 값 바꾸기.

이 작업에서 작품의 의미를 표현하는 중요한 슬라이더이니, 더 잘 보일 수 있도록 위치를 바꾸자.

슬라이더의 보여지는 길이는 size() 메서드 함수를 사용하여 바꿀 수 있다.

#07_3 : Dom Slider의 값을 키보드 입력 값으로 조정하는 테스트.

• 마우스의 입력 값으로 조정하는 것도 좋지만, 키보드를 입력하여 조정하는 것이 관객이 체험하는 입장에서 더 좋은 느낌을 줄 수 있다고 생각이 들었다.

 

• 기능을 시험해보기 전 코드 로직 생각해보기.
  • 장치의 입력에 대한 것은 두가지.
    • 변수형과 함수형(keyIsPressed, keyPressed).
    • 변수형은 계속하여 신호를 받을 수 있고, 함수형은 호출될 때 한번 받는다. 그렇다면, 어떤 방법을 사용해야할까?
    • 그리고 부드럽게 만들기위해서는 lerp() 함수로 조금씩 움직이게 해야할까?

 

• 코드 스케치 전 생각했던 로직 : 변수를 선언하여 키보드 입력 값 받고, 입력 값의 범위를 제한하기/슬라이더 값으로 치환.

 

키보드의 입력 값을 받을 spaceVal 변수를 새로 선언하고, 정확한 값을 위해 0이라는 값을 정의해주었다. 그리고 만약 스페이스바가 눌렸다면(키누름,스페이스바 코드), 변수 값에 0.1씩 더하고 누르지 않고 있을 때에는 0.1씩 감소하게 했다. 

 

0.1이라는 수치로 증가하고 감소하게 한 이유는 현재 슬라이더 최대 값이 1이기 때문이다.

그리고 입력 값의 범위를 제한하기 위한 조건문이다.

마지막으로 변수 값을 슬라이더의 값으로 치환해주었다.

미리 기능의 로직을 생각해두고 작성할 코드를 생각해보니, 보다 수월해진 것 같다.

미리 로직을 생각해보고 코드를 작성하자.

• 발생한 문제점.
  • 슬라이더를 키보드 입력으로 제어하는 것은 성공. 그러나, 관객의 입장에서는 모바일 기기로 이 페이지를 방문 할 수 있기 때문에 선택적으로 제어를 할 수 있게 해주어야한다.

• 문제를 해결하기 위해 생각 할 수 있는 것 : 현재 slider.value() 함수로 슬라이더의 값을 제어하고 있다. 인자 값은 변수 spaceVal 값으로 가지고 있기 때문에 키보드 입력에만 반응한다.
  • 토글 스위치처럼, 조건을 주어 상황에 맞게 슬라이더의 값을 바꿀 수 있게 하자.

• 디버깅 후 작동결과 : 생각했던 것처럼, 토글 스위치를 만드니 키보드 입력, 마우스 입력 두 가지 입력으로 제어할 수 있게 됐다.
  • inputtoggle 이라는 변수명의 토글 스위치를 선언하였고, 참일 경우 키보드의 입력 값을, 거짓일 경우 마우스의 입력 값을 받도록 했다.

 

• 토글 스위치의 조건 제어는 키보드 입력에 따라 바뀌게 했다. 하지만 키보드 입력 값이 들어오지 않으면 슬라이더는 바로 마우스의 입력 값만 받기 때문에, 키보드 입력이 끝나면 뚝뚝 끊기는 부자연스러운 모습이 보여졌다. 

  

이 점을 반복문을 사용해 spaceVal 변수 값이 0이 될때까지 변수 값을 줄여주어 부드럽게 만들어 주었다.

작품 제목 : 그들 중 하나 / OneOfThem 작가 이름 : JungJunHyeok Github 저장소 : https://github.com/ted050505/work-in-progress-for-final-assessment- Github Pages : https://ted050505.github.io/work-in-progress-for-final-assessment-/ 최종 회고 :  먼저, 처음으로 작업 과정이 재미가 있다고 느껴졌다. 그 동안의 작업은 남에게 보여주기 위해 시각적으로 꾸미고 기술적으로 치부 시키려는 시간들을 보냈다면, 이번에는 내 자신의 정체성을 찾아가고 성장하기 위해 여러가지의 아이디어 도출부터 그 아이디어가 하나의 작품이 되어가기까지 온전히 나만의 시간을 가질 수 있었다고 생각한다. (나에게 가장 인상적으로 남은것은 머릿 속으로 생각한 것을 코드 스케치로 구현하고, 문제점이 발생했을 때에 스스로 디버깅을 하는 것까지의 과정이다.)  그리고 기존에는 아이디어 하나만을 도출하는 것에도 정말 많은 시간이 필요했지만, 수업시간 진행했던 브레인스토밍과 같이 적은 시간안에 완벽하지 않더라도 일단 내보는 키워드, 팀원 분들 간의 아이디어 곱하기 같은 방식들은 내가 생각하지 못했던 부분들을 채울 수 있었고, 아이디어를 도출하는 것에도 많은 도움을 받았다. 작업 중간중간 refactoring 같은 코드 유지보수 행위 또한 코드의 가독성을 높여주는 효과를 볼 수 있었고, 마치 내 방의 창문을 활짝 열어 환기시키는 듯한 느낌을 주기도 했다. 때문에 작업 환경에 새로운 동기부여를 주고 새로운 영감을 떠올릴 수 있었다. 이번 학기의 저널링 노트는 앞으로 작업 시 어려울 때마다, 이 과정을 기억하고 환기시키기 위해 자주 펼쳐볼 것 같다.