【p5.js問題集】星形を描く【4問目】

次のような星形を描いてください。
大きさや色は自由とします。

【p5.js問題集】正多角形を描く【3問目】

次のような正多角形を描いてください。
角の数や色、向きなどは自由とする。

【p5.js問題集】正三角形を描く【2問目】

次のような正三角形を作ってください。
向きや色は自由とします。

↓解答例

【p5.js問題】解像度からキャンバスサイズを作成する【1問目】

現在の画面解像度(windowWidth,widndowHeight)のうち、小さい方に合わせてキャンバスを正方形に作成してください。

↓解答例を見る

円を作る高度なやり方

円を描画するときに基本的なコマンドとしてcircle()がある。
しかしあくまで描画を目的としているコマンドなので応用が利きづらい側面がある。
例えば角の数を定めたカクカクの円を描きたいとか、描画ではなく位置の取得が目的な場合には使えない。
そこで三角関数を使って数式を利用して円を利用できるようにしたい。

function setup() {
  createCanvas(400, 400);
  background(220);
  
  //角の数と直径を決める
  const num = 12;
  const rad = 100;
  
  //キャンバスの中心を移動
  translate(width / 2, height / 2);
  
  //
  beginShape();[f:id:salmander:20220401211114p:plain]
  
  for(let i = 0; i < num; i ++){
    //角度と位置を求める
    let angle = TAU / num * i;
    let x = rad * cos(angle);
    let y = rad * sin(angle);
    
    vertex(x,y);
  }
  endShape(CLOSE);
}

この書き方を覚えておくと次のように円周上に図形を配置することも出来る。

function setup() {
  createCanvas(400, 400);
  background(220);
  
  //角の数と直径、円の大きさを決める
  const num = 8;
  const posRad = 100;
  const circleRad = 50;
  
  //キャンバスの中心を移動
  translate(width / 2, height / 2);
  
  //
  for(let i = 0; i < num; i ++){
    //角度と位置を求める
    let angle = TAU / num * i;
    let x = posRad * cos(angle);
    let y = posRad * sin(angle);
    
    circle(x,y,circleRad);
  }
}

カラーパレットを作る方法

配列を使うことによって事前に用意した色の中から選択することができる。

//配列に色を格納
const colorPallet = ['#38b48b','#9d5b8b','#ffea00'];

function setup(){
  createCanvas(400,400);
  background(240);
  
  //色を取得
  let colorPick = Math.round(random(0,2));
  fill(colorPallet[colorPick]);
  
  //四角を描画
  noStroke();
  rect(100,100,200,200);
}

p5.jsでアニメーションをしたいときにfor文を使わない方法

p5.jsでアニメーションを描画したい場合、for文を使うのは都合が悪いときがある。

for(let i = 0 ; i <= 10 ; i++){
}

draw関数はwhile文と同じなのでwhile文をfor文に変換することを考えて次のように考えればいい。

let i = 0;
function draw(){
  i++;

  if(i >= 10){
    noLoop();
  }
}

二重ループにしたい場合は次のように書くことができる。

for(let i = 0 ; i <= 10 ; i++){
  for(let j = 0 ; j <= 10 ; j++){
  }
}

これを

let i = 0;
let j = 0;
function draw(){
  j++;

  if(i >= 10 && j >= 10){
    noLoop();
  }
  if(j >= 10){
    j = 0;
    i++;
  }
}