201215-a

let cells; //格子の分割数

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

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

// let fr = 300;

const COL = createCols("https://coolors.co/fffc31-5c415d-f6f7eb-e94f37-393e41");

​

​

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();

    }

  }

  Ghost();

  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();

//         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(5);

​

  //   からだ

  // noFill();

  fill(56, 59, 95, 60);

  beginShape();

  curveVertex(200, 400);

  curveVertex(200, 400);

  curveVertex(80, 30);

  curveVertex(180, 10);

  // curveVertex(80, 40);

  curveVertex(200, 400);

  curveVertex(200, 400);

  endShape(CLOSE);

​

  //   白目

  fill(360);

  stroke(0);

  strokeWeight(2);

  circle(150, 65, 30);

  circle(180, 70, 30);

  //   黒目

  fill(0);

  circle(150, 65, 20);

  circle(180, 70, 20);

  fill(360);

  circle(150, 60, 10);

  circle(180, 65, 10);

}

​

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;

}