p5.js 연습 001

현재 마우스 커서의 위치에 따라 주변 원들의 반지름이 결정되고 (마우스 커서와 가까울수록 반지름이 작아짐) 마우스를 클릭 시 전체 원의 반지름이 두배로 커지는 (반지름이 무한히 커지는 것을 방지하기 위해 반지름이 일정 이상 커지면 다시 원상태로 돌아감) 코드

p5.js 코드 보기

var radius = 20;

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

function draw() {
  background(0);
  noStroke();

  for (var i = 0; i <= width; i += radius) {
    for (var j = 0; j <= height; j += radius) {
      ellipseMode(CENTER);

      // r is the radius of each circles
      var r = dist(mouseX, mouseY, i, j) * radius / 200;

      var maxradius = radius * 1.2;
      if (r > maxradius) { 
        r = maxradius;
      }
      ellipse(i, j, r, r);
    }
  }
}

function mouseClicked() {
  radius *= 2;
  if (radius > 320)
  { 
    radius = 20;
  }
}