조건문

<, >, >=, <=
같은지 다른지 확인할 때는 == 혹은 ===

if ( true인 조건 ) {
    true 일 때, 실행하고 싶은 내용.
}

if(darkness > 0.5) {
    /* darkness 변수 값이 0.5보다 크면 아래 코드가 실행된다. */
    ellipse(0, 0, 10, 10);
}
if( 0.25 < darkness && darkness <= 0.5) {
    /* darkness 변수 값이 0.25보다 크고 and darkness 0.5 같거나 작다 */ 
    line(0, 0, 10, 10);
}

추가 응용

기본 도형 => 내가 만들어둔 도형으로 대체하자.

내가 만든 도형 함수를 부를 때, 색깔을 파라미터로 주고 싶다면
이미지의 get() 함수 사용하고
내 도형 함수 안에서 파라미터를 받도록 수정하기.
- ! 이 함수를 다른 스케치에서 가져다 쓸 때도 파라미터를 주도록 유의.

let original_col = img.get(x, y);
renderD(original_col);
// myCircleO(original_col);

캔버스 및 반복문을 키보드 누를 때만 업데이트하고 싶다면.

for() 반복문으로 이미지나 많은 픽셀을 계속 그리면, 성능 저하의 문제가 생길 수도 있음.
draw() 함수 안에 있던 내용을 forDraw() 라는 함수로 빼두기.
key 누르는 이벤트가 발생할 때만, 캔버스 배경을 초기화, 이미지 그리기, 도형 픽셀 그리기.

function keyPressed() {
  currentKey = key;
  console.log(key, currentKey);
  background(0);
  image(img, 0, 0, width, height);
  forDraw();
}
function draw() {
  forDraw();     // 따로 분리한 함수를 호출하기.
  noLoop();
}
function forDraw() {
  /* 여기로 draw() 내용 옮기기 */
}

switch, case 를 이용한 조건문

활용 예시: 값이 계속 업데이트되는 어떤 index 변수를 사용해서 어떤 array의 인덱스로 활용하고 싶다.
- 값을 확인하려는 변수는 switch() 괄호 안에 파라미터로 넣는다.
- 해당 변수가 0인지, 1인지, ... 4인지 비교하는 케이스를 써야한다.

//let randomIndex = ?
switch(randomIndex) {
  case 0:      // randomIndex == 0 인가?
    fill(0);   // 참이면, 실행
    break;     // 다른 케이스 체크 안하고, 바로 조건문 끝내기
  case 1:      // randomIndex == 1 인가?
    fill(50);
    break;
  case 2:       // randomIndex == 2 인가?
    fill(100);
    break;
}

switch(darkness) {
  case 0:  // if(darkenss == 0)
    ellipse(~~~);
    break;
  case 0.25: // if(darkness == 0.25)
    rect(~~);
    break;
}

실습: 조건문 + 내가 만든 알파벳 (이미지 없어도 됨)

예) DOG 라는 알파벳 도형을 만들었다면

조건문 세팅

D 라는 키보드가 입력되면, D 도형을 그린다.
O 라는 키보드가 입력되면, O 도형을 그린다.

해당 도형들을 어디에 그릴 건지?

랜덤한 위치? 특정 위치~ 특정 위치까지 반복해서 그리기?

어떤 인터렉션/애니메이션을 연결할 것인지?

회전? 마우스를 따라가기? 색깔이 바뀌게?

본인의 그래픽 디자인 혹은 모션 그래픽 경험을 살리면 더 좋습니다.

응용 샘플: 텍스트를 이미지로 저장하고, 해당 이미지를 활용하기.

https://openprocessing.org/sketch/1591337
포토샵이나 다른 툴에서 폰트를 활용해 이미지를 만들고 나서, 코드로 응용해볼 수 있는 방향
이미지를 타일/픽셀로 나눈다고 생각하기.
각 타일/픽셀을 도형으로 채우고, 인터렉션을 가미하기.

텍스트 이미지를 실시간으로 변경하고 싶다면?

키보드 Input 입력 칸을 만들면 좋다.
- https://p5js.org/ko/reference/#/p5/createInput
이미지를 미리 생성하고 업로드하는 게 아니라,
- 키보드 입력에 따라 이미지를 새로 만드는 것.
- 장점: 실시간으로 텍스트를 바꿀 수 있다.
- 단점: 그래픽 처리가 빠르지 않다.

반복문, UI를 활용해 이미지 타일의 간격이나 크기를 조정하기.

반복문의 변수를 크게 하면?
여기서도 마찬가지로 조건별로 도형을 그려준다.

Previous이미지 NextGIF 사용하기

Last updated 11 months ago