200620a

let cells; //格子の分割数

let offset, margin; //外型の余白，格子ごとの余白

let d; // 1つの格子ごとの大きさ

// let fr = 300;

const COL = createCols("https://coolors.co/3a3335-d81e5b-f0544f-fdf0d5-c6d8d3");

​

​

function setup() {

  createCanvas(800, 800); //canvasの大きさ

  colorMode(HSB, 360, 100, 100, 100); //HSBで色指定

  angleMode(DEGREES);

  // frameRate(fr);

​

  cells = 30; //int(random(3, 10));

  offset = width / 20;

  margin = 3; //offset / 5;

​

  d = (width - offset * 2 - margin * (cells - 3)) / cells;

​

}

​

function draw() {

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

​

  for (let j = 0; j < cells; j++) {

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

      //各格子の左上の座標

      let x = offset + i * (d + margin);

      let y = offset + j * (d + margin);

​

      //各格子ごとの中心

      let cx = x + d * 0.8;

      let cy = y + d * 0.5;

​

      //位置座標（cx,cy)と時間経過(frameCount)を用いてノイズを生成

      let n = noise(cx / 100, cy / 50, frameCount / 100);

      let angle = n * 360;

      push();

      //格子の中心に原点を移動し，回転

      translate(cx, cy);

      rotate(angle);

      // rectMode(CENTER);

      // rect(0, 0, d, d);

      // line(-d / 2, 0, d / 2, 0);

      noStroke();

      rect(-d / 2, 0, d / 2, 5, 3);

      pop();

    }

  }

  // noLoop();

  for (let j = 0; j < 100; j++) {

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

      let x = i * 80;

      let y = j * 80;

​

      if (random(100) < 10) {

        push();

        translate(-x, -y);

        scale(0.5);

        Ghost(random);

        pop();

      }

​

      if (random(100) < 30) {

        push();

        translate(x, y);

        scale(0.5);

        Ghost();

        pop();

      }

      noLoop();

    }

  }

}

​

function Ghost() {

  translate(width * 0.3, height * 0.3);

  stroke(random(360), 50, 100);

  strokeWeight(4);

​

  //   からだ

  // noFill();

  fill(random(360), 30, 80, 30);

  beginShape();

  curveVertex(100, 200);

  curveVertex(100, 200);

  curveVertex(68, 19);

  curveVertex(21, 17);

  curveVertex(100, 200);

  curveVertex(100, 200);

  endShape(CLOSE);

​

  //   白目

  fill(360);

  stroke(0);

  strokeWeight(1);

  circle(50, 50, 20);

  circle(70, 60, 20);

  //   黒目

  fill(0);

  circle(50, 50, 5);

  circle(70, 60, 5);

}

​

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;

}