【p5.js問題集】線形補完【9問目】

任意の二点を作成し、その距離間に連続して図形を描画してください。
画像においては0と9が任意の点として作成されています。

解答例

function setup() {
  createCanvas(400, 400);
  background(240);
  
  //二点をベクトルで作る
  const vec0 = createVector(20,60);
  const vec1 = createVector(350,300); 
  
  //分割数と割合を決定する
  const div = 10;
  const perCrease = 1/div;
  
  for(let i = 0; i < div; i++){
    
    //lerpの引数の割合を決定する
    let per = perCrease * i;
    
    //lerp関数を使って二点間の位置と割合から位置を取得する
    let newVec = p5.Vector.lerp(vec0,vec1,per);
    
    noStroke();
    fill(200,120,150);
    circle(newVec.x,newVec.y,20);
    
    //番号を表示
    stroke(0);
    fill(0);
    textSize(20);
    textAlign(CENTER,CENTER);
    text(i,newVec.x,newVec.y+20);
  }
}

補足
似たような処理はx位置とy位置を増加させることでもできるが、lerp関数を使うとベクトル間の線形補完が簡単にできるので覚えておくと吉。