JIDU_Matrix

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>
      <script src="https://unpkg.com/[email protected]"></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

html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

.slider_size, .slider_color {
  background-color: transparent;
  -webkit-appearance: none;
}

/* 调整滑块背景样式 */
.slider_size::-webkit-slider-runnable-track,
.slider_color::-webkit-slider-runnable-track{
  background: #2A2849;
  height: 14px;
  border-radius: 0px;
  -webkit-appearance: none;
  cursor: pointer;
}

/* 调整滑块控制项样式 */
.slider_size::-webkit-slider-thumb,
.slider_color::-webkit-slider-thumb{
  width: 12px;
  height: 12px;
  background: #bfa9fa;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 1px;
  border-radius: 50px;
}

JavaScript

// "s" 键保存 svg 文件
  // 保存 svg 与自适应尺寸冲突，当前版本关闭自适应；
  // 需要调整尺寸时刷新页面即可；

// total -> 密度，每行多少个元素
// 上方滑块 -> 元素色值
// 下方滑块 -> 元素尺寸


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

let sizeMax, sizeMid, sizeMin;

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

let slider_size, slider_color;

function setSlider() {
  slider_size = createSlider(0, 1, 0.5, 0.05);
  slider_color = createSlider(0, 1, 0.5, 0.05);
  
  // 调整滑块位置 position(x,y)
  slider_size.position(10, height-40);
  slider_color.position(10, height-70);
  
  slider_size.addClass("slider_size");
  slider_color.addClass("slider_color");
}

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, SVG);
  rectMode(CENTER);
  step = width / total;
  setElement();
  sizeMax = step;
  sizeMid = sizeMax * 0.5;
  sizeMin = sizeMax * 0.25;
  frameRate(1);
  noStroke();
  setSlider();
}

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) < slider_color.value()) {
      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) < slider_size.value()) {
      s = sizeMin;
    } else if (random(1) < .5) {
      s = sizeMid;
    } else if (random(1) < .25) {
      s = sizeMax;
    }
    
    if(slider_size.value() <= 0) s = sizeMax;
    if(slider_color.value() <= 0) c = colors[2];

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

// function windowResized() {
// 	setup();
// }

function keyPressed() {
  // if(key == "p" || key == "P")...