201013

let bg;

const COL = createCols("https://coolors.co/533747-5f506b-6a6b83-76949f-86bbbd");

​

function setup() {

  createCanvas(800, 800);

  colorMode(HSB, 360, 100, 100, 100);

  noLoop();

  bg = createGraphics(width, height);

  bg.background(255, 203, 71);

  bg.noStroke();

  for (let i = 0; i < 33000; i++) {

    let x = random(width);

    let y = random(height);

    let s = noise(x * 0.01, y * 0.01) * 2;

    bg.fill(185, 216, 194);

    bg.rect(x, y, s, s);

  }

}

​

function draw() {

  image(bg, 0, 0);

​

  push(); //スタイルの保存

  drawingContext.shadowColor = color(283, 28, 29, 30); //影の色

  drawingContext.shadowBlur = 5; //影のぼかし

  drawingContext.shadowOffsetY = -20; //影をY方向にずらす

  drawingContext.shadowOffsetX = -40

​

 strokeWeight(8.0);

 strokeJoin(MITER);

// translate(width*0.4,height*0.1);

  dropShadowRect(0, 90, 200, 200, 10);

  dropShadowRect(200, 90, 200, 200, 10);

  dropShadowRect(400, 90, 200, 200, 10);

  pop(); //スタイルの復帰

}

​

//繰り返し四角形を描画する自作関数（左上のXY座標，幅，高さ，分割数）

function dropShadowRect(x, y, w, h, d) {

  for (let i = d; i > 0; i--) {

    push();

    translate((x+10)+ w / 2, y + h / 2);

    // rectMode(CENTER);

    fill(COL[int(random(COL.length))]);

    square(0, w * i / d, h * i / d,10);

    pop();

  }

}

​

function createCols(_url) {

  let slash_index = _url.lastIndexOf('/');

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split('-');

  for (let i = 0; i < arr.length; i++) {

    arr[i] = '#' + arr[i];

  }

  return arr;

}

​

​

//keyboardのどこかを押すと画像が保存できるCode

// function keyPressed(){save('pix.jpg'); }