[p5.js] 인터랙티브 아트워크 제작

rotate() 함수는 도형을 회전시키는 역할을 하는데,

우리가 일반적으로 사용하는 각도법이 아닌 호도법에 기반하므로

rotate(45)를 입력하면 45도가 아닌 애매한(?) 각도로 돌아가게 된다.

 

각도법을 적용하기 위해선 angleMode(DEGREES) 를 써준다.

function setup() {
  createCanvas(400, 400);
  background("#ececec");
  
  angleMode(DEGREES); // 각도법 적용
}

function draw(){
  push();
    
    translate(200, 200);
    rotate(45);
    rectMode(CENTER);  
    rect(0, 0, 100, 100);
  
  pop();
}

 

 

 

arc는 부채꼴을 만들어주는 함수 (아래 예시는 90도 부채꼴)

arc(0, 0, 200, 200, 0, 90);

 

 

 

lerp는 원하는 타겟값에 점차 다가가도록 만드는 함수이다.

let x = 0;
let y = 0;

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

function draw() {
  x = lerp(x, mouseX, 0.1); //mouseX를 향해 0.1의 속도로 다가간다
  y = lerp(y, mouseY, 0.1);
  background(220);
  
  fill("tomato");
  ellipse(x,y,100,100);
}

 

 

 

lerp 함수 응용 - 원 4개가 줄지어 마우스 커서를 따라오는 예제

let x1 = 0; let y1 = 0;
let x2 = 0; let y2 = 0;
let x3 = 0; let y3 = 0;
let x4 = 0; let y4 = 0;

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

function draw() {
  x4 = lerp(x4, x3, 0.1);
  y4 = lerp(y4, y3, 0.1);
  x3 = lerp(x3, x2, 0.1);
  y3 = lerp(y3, y2, 0.1);
  x2 = lerp(x2, x1, 0.1);
  y2 = lerp(y2, y1, 0.1);
  x1 = lerp(x1, mouseX, 0.1);
  y1 = lerp(y1, mouseY, 0.1);
  
  noStroke();
  background("#000");
  
  fill("#333");
  ellipse(x4,y4,100,100);
  
  fill("#666");
  ellipse(x3,y3,100,100);
  
  fill("#aaa");
  ellipse(x2,y2,100,100);
  
  fill("#eee");
  ellipse(x1,y1,100,100);
}

 

 

mouseIsPressed는 현재 상태가 마우스를 누른 상태인지 판별해주는 p5.js의 기본 제공 함수

pmouseX, pmouseY에는 이전프레임의 마우스 위치값이 들어있다.

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

function draw() {
  
  if(mouseIsPressed) {
    stroke("tomato");
    strokeWeight(3);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  
}

 

randomGaussian 함수는 random과 유사하지만,

랜덤가우시안은 우리가 설정한 특정한 값을 평균치로 해서, 그 뒤에오는 값만큼 커지도록 만들 수 있는 함수

(값이 누적되면 그냥 랜덤함수는 네모난 형태가 되지만, 랜덤가우시안은 동그란 형태가 된다)

 

 

 

randomGaussian을 활용하여 스프레이로 뿌린 듯한 느낌의 드로잉도구 만들기

// 색상팔레트를 미리 구성해놓는다
let colors = [];

function setup() {
  createCanvas(400, 400);
  colors.push("#111");
  colors.push("#555");
  colors.push("#999");
}

function draw() {
  if(mouseIsPressed) {

    //여러번 실행시키는 이유는 브러쉬를 빨리 칠해지도록 하기 위함 
    let count = 0;
    while(count <= 10) {
      brush();
      count++;
    }
  }
}

function brush() {
  let c = random(colors);
  let x = randomGaussian(mouseX, 20);
  let y = randomGaussian(mouseY, 20);
  let s = random(1, 15);
  
  noStroke();
  fill(c);
  ellipse(x, y, s, s);
}

 

결과물