[p5.js] 변수와 조건문

text() 함수는 화면에 텍스트를 나타낼 수 있도록 하는 함수

// 들어갈 text, x, y
text("내용", 200, 200)

// 캔버스의 크기가 바뀌더라도 항상 중간에 위치하도록 함
text("내용", width/2, height/2)

 

text() 함수를 적용하기 전에

 

//폰트사이즈
textSize(100);

//폰트컬러
fill("red");

//폰트테두리
stroke(0);
strokeWeight(5);

// 첫번째인자: CENTER, RIGHT, LEFT
// 두번째인자: TOP, CENTER, BOTTOM (기본값은 BASELINE)
textAlign(가로정렬, 세로정렬);

 

등의 함수를 이용해서 글꼴 속성을 정의해줄 수 있다.

 

 

 

클릭할 때마다 10씩 늘어나는 텍스트 예제

//전역변수
let value = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background("#ececec");

  
  fill("skyblue");
  textSize(100);
  textAlign(CENTER, CENTER);
  text(value, width/2, height/2);
}

function mousePressed() {
  value = value + 10;
}

 

 

 

클릭할 때마다 줄기가 자라나는 꽃 예제

let h = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  //기존 원점(0,0)을 줄기가 자라나기 시작하는 지점으로 옮김
  translate(200, 300);
  
  strokeWeight(15);
  
  //줄기가 위쪽으로 자라나야 하므로 h값은 마이너스
  line(0,0,0,-h);
  
  strokeWeight(5);
  
  //꽃잎과 꽃 가운데
  push();
    translate(0, -h);
    ellipse(0,-35,40,40);
    ellipse(30,-10,40,40);
    ellipse(-30,-10,40,40);
    ellipse(20,20,40,40);
    ellipse(-20,20,40,40);
    ellipse(0,0,60,60);
  pop();
  
  
  // 줄기 높이 110 이상일 때부터 이파리 보이기 시작
  if(h>=110) {  
    push();
      translate(0, -h+70);
      ellipse(-25,0,50,20);
      ellipse(25,0,50,20);
    pop();  
  }
}

function mousePressed() {
  h = h+10
}

 

 

lerp() 함수는 변화에 중간과정을 넣어줄 때 사용한다.

변하는 비율이 1이면 한 번에 변하고, 작은 값이 들어갈수록 천천히 변하게 된다.

lerp(현재값, 목표값, 변하는 비율)

 

위에 있는 '자라나는 꽃' 예제에 lerp 함수를 적용하여 조금 더 자연스럽게 자라나도록 수정해본다.

let h = 0;
let targetH = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  //자라는 애니메이션 자연스럽게
  h = lerp(h, targetH, 0.1);
  
  //기존 원점(0,0)을 줄기가 자라나기 시작하는 지점으로 옮김
  translate(200, 300);
  
  strokeWeight(15);
  
  //줄기가 위쪽으로 자라나야 하므로 h값은 마이너스
  line(0,0,0,-h);
  
  strokeWeight(5);
  
  //꽃잎과 꽃 가운데
  push();
    translate(0, -h);
    ellipse(0,-35,40,40);
    ellipse(30,-10,40,40);
    ellipse(-30,-10,40,40);
    ellipse(20,20,40,40);
    ellipse(-20,20,40,40);
    ellipse(0,0,60,60);
  pop();
  
  
  // 줄기 높이 110 이상일 때부터 이파리 보이기 시작
  if(h>=110) {  
    push();
      translate(0, -h+70);
      ellipse(-25,0,50,20);
      ellipse(25,0,50,20);
    pop();  
  }
}

function mousePressed() {
  targetH = targetH+30
}

 

 

마지막으로, 꽃을 구성하는 부분을 함수화하여 여러 송이의 꽃을 한 번에 그릴 수 있도록 수정해본다.

let h = 0;
let targetH = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  //자라는 애니메이션 자연스럽게
  h = lerp(h, targetH, 0.1);
  
  flower(300, 300);
  flower(100, 300);
}

function flower(x, y) {
  
  push();
    translate(x, y);
    strokeWeight(15);
    line(0,0,0,-h);
    strokeWeight(5);

    push();
      translate(0, -h);
      ellipse(0,-35,40,40);
      ellipse(30,-10,40,40);
      ellipse(-30,-10,40,40);
      ellipse(20,20,40,40);
      ellipse(-20,20,40,40);
      ellipse(0,0,60,60);
    pop();

    if(h>=110) {  
      push();
        translate(0, -h+70);
        ellipse(-25,0,50,20);
        ellipse(25,0,50,20);
      pop();  
    }
  pop();
}

function mousePressed() {
  targetH = targetH+30
}

 

 

결과물 화면