[p5js] map study


//task: 캔버스에 꽉 차도록 같은 중심을 공유하는 동심원 23개 그리기(단, evenly devided)

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

function draw() {
  for(var i =0; i < 23; i ++){
  var sz = map(i, 0, 22, 0, width); // 0-22까지의  range를 0, width까지의 range로 맵핑.
  ellipse(width/2, height/2, sz);
  }
}

 가장 큰 원이 가려서 안 보이므로, noFill(); 설정.


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

function draw() {
  noFill();
  for(var i =0; i < 23; i ++){
    var sz = map(i, 0, 22, 0, width);
    var col= map(i, 0, 22, 0, 255); //컬러 변수 하나를 또 맵핑한다. 바깥쪽으로 갈 수록 색 변하게. 색 범주는 0-255/ 변화단계는 0-22
    fill(col); //맵핑된 컬러변수를 칠해보자
  ellipse(width/2, height/2, sz);
  }
}

아무일도 안 생김. 

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

function draw() {
  noFill();
  for(var i =0; i < 23; i ++){
    var sz = map(i, 0, 22, width, 0); // 비슷한 문제. 가장 큰 원이 모든 색을 덮으므로 swap 
    var col= map(i, 0, 22, 0, 255);
    fill(col);
  ellipse(width/2, height/2, sz);
  }
}
조금 더 변형하면,



1 2 3 4 5 6 7 8 9 10 다음