JIDU

by niuuin

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <script src="element.js"></script>
  </body>
</html>

CSS

body {
  padding: 0;
  margin: 0;
}

JavaScript

// total -> 密度，每行多少个元素
// 鼠标横向移动调整元素尺寸
// 鼠标纵向移动调整元素颜色

let total = 10; 
let step;
let elements = [];

let sizeMax, sizeMid, sizeMin;

let colorStr = "bfa9fa-7437f6-392577";
let colors = colorStr.split("-").map((a) => "#" + a);

function setElement() {
  let index = 0;
  for (let i = 0; i < width; i += step) {
    for (let j = 0; j < height; j += step) {
      elements[index] = new Element(i, j);
      index++;
    }
  }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  step = width / total;
  setElement();
  sizeMax = step;
  sizeMid = sizeMax * 0.5;
  sizeMin = sizeMax * 0.25;
  probability = width;
  frameRate(1);
  noStroke();
}

function draw() {
  background("#18172b");
  drawElements();
}

function drawElements() {
  for (let i = 0; i < elements.length; i++) {
    let elementsSize = map(noise(frameCount * 0.02), -1, 1, 0, width / total);
    let c = colors[i % colors.length];

    let s = 0;

    if (random(1) < map(mouseX, 0, width, 0, 1)) {
      c = colors[0];
    } else if (random(1) < .5) {
      c = colors[1];
    } else if (random(1) < .25) {
      c = colors[2];
    } else {
      c = "#18172b";
    } 

    if (random(1) < map(mouseY, 0, height, 0, 1)) {
      s = sizeMin;
    } else if (random(1) < .5) {
      s = sizeMid;
    } else if (random(1) < .25) {
      s = sizeMax;
    } 

    elements[i].draw(s, c);
  }
}

function keyPressed() {
  if(key == "s" || key == "S") saveCanvas("F" + frameCount, "png");
}

// Class
class Element {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  draw(size, cd) {
    fill(cd);
    rect(this.x + size/2, this.y + size/2, size);
  }
}