はんざき技研

プログラミングや3DCGの記録

【p5.js問題集】カラーパレット【7問目】


画像のように指定された色の内からランダムに取得して、図形を配置してください。
色や図形の形、数は問いません。

解答例

const palette = ["#ffb6b9","#fae3d9","#bbded6","#8ac6d1"];

function setup() {
  createCanvas(400, 400);
  background(250);
  
  //図形の数を決める
  const num = 50;
  
  for(let i = 0; i < num;i++){
    //直径と位置をランダムに決める
    let dia = random(50,100);
    let x = random(-dia,width);
    let y = random(-dia,width);

    //パレットからランダムにカラーを取得
    let col = random(palette);
    noStroke();
    fill(col);

    circle(x,y,dia);
  }
}

補足
配列とランダム関数の組み合わせでカラーパレットが簡単につくれる。
色の組み合わせはColorDrop - New colorsのようなサイトを活用すると便利。