p5.js로 점으로 된 웨이브 패턴 만들기

재밌어 보이는 튜토리얼들을 따라해보고 올릴 예정이다. 추후 여러 튜토리얼끼리 조합하는 것도 해볼 수 있겠다.

// 이번 코드에 쓰일 모듈
class Cell {
  constructor(x0, y0, r, angle){
    this.r = r;
    this.angle = angle; 
    // 시작 x, y 좌표
    this.x0 = x0;
    this.y0 = y0;
  }
  
  update(){
    this.x = this.r*cos(this.angle);
    this.y = this.r*sin(this.angle);
    this.angle += 0.05; // 어김없이 angle을 바꿀 때마다 cos, sin값이 바뀌며 회전한다.
  }
  
  display(){
    // 아래 주석 해제하면 공전궤도와 중앙점에서 포인트까지 이은 반지름 같은게 보임..
    // 말이 어려운데 그냥 해보면 된다.
    // ellipse(this.x0, this.y0, this.r*2, this.r*2);
    // line(this.x0, this.y0, this.x0+this.x, this.y0+this.y);
    fill(0);
    ellipse(this.x0+this.x, this.y0+this.y, 5, 5);
  }
}

 

let grid = [];
let cols = 15;
let rows = 15; 
let loc = 100;
function setup() {
  createCanvas(400, 400);
  // 높이, 폭을 cols, rows 수만큼 등분해줌
  let rowSize = height/rows;
  let colSize = width/cols; 
  
  for (let i=0; i<cols; i++){
    grid[i] = []
    for (let j=0; j<rows; j++){
      // 전형적인 2차원 배열을 만들어서 Cell을 생성해서 넣어주는 코드
      // 이때, i*loc+j*loc가 angle의 값이다. 결과적으로 조금씩 다르면서 그 정도는 규칙적인 할당된다.
      grid[i][j] = new Cell(colSize/2+i*colSize, rowSize/2+j*rowSize, rowSize/2, i*loc+j*loc);
    }
  }
}

function draw() {
  background(225);
  for (let i=0; i<cols; i++){
    for (let j=0; j<rows; j++){
      // update와 display를 각각 해준다.
      grid[i][j].update();
      grid[i][j].display();
    }
  }
}

 

보고 따라한 영상

https://www.youtube.com/watch?v=DNZPyoMBiFw&list=PL0beHPVMklwh3KNAibTZKkHjN4xILaWvE