200621

let cells; //格子の分割数

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

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

let bg;

// let fr = 300;

const COL = createCols("https://coolors.co/bac1b8-58a4b0-0c7c59-2b303a-d64933");

​

​

function setup() {

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

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

   bg = createGraphics(width, height);

  bg.background(38, 8, 28);

  bg.noStroke();

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

    let x = random(width);

    let y = random(height);

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

    bg.stroke(255, 211, 218);

    bg.point(x, y, s*0.5);

  }

  angleMode(DEGREES);

  // frameRate(fr);

​

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

  offset = width / 20;

  margin =30; //offset / 5;

​

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

​

}

​

function draw() {

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

  background(0, 0, 10);

  image(bg, 0, 0);

  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.3;

      let cy = y + d * 0.9;

​

      //位置座標（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();

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

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

      rect(-d / 2, 10, d / 2, 7,3);

      scale(0.3);

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

      pop();

    }

  }

  // noLoop();

}

​

function Ghost() {

  // translate(width * 0.3, height * 0.3);

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

  strokeWeight(4);

​

  //   からだ

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

  // fill(0,0,100);

  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.5);

  circle(55, 60, 23);

  circle(70, 80, 23);

  //   黒目

  fill(0);

  circle(55, 60, 7);

  circle(70, 80, 7);

}

​

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;

}

​

​