方块生成器

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let dirs  = [[-1, -1], [1, -1], [-1,  1], [1, 1]];
let dirs2 = [[-1,  0], [1,  0], [ 0, -1], [0, 1]];

class Rect{
  constructor(x, y, size, dim, cols, end=false){
    this.x = x;
    this.y = y;
    this.dim = dim;
    this.size = size;
    this.cols = cols;
    this.sCol = random(cols.accents);
    this.fCol = random(cols.fills);
    this.bevel= random() < .3;
    this.thickness = .1;
    this.bounds = [x-size/2, y-size/2, x+size/2, y+size/2];
    if (random() < .4){
      this.sCol = this.fCol;
      this.fCol = color(1, 0);
      this.thickness *= 3;
    }
    this.children = [];
    if (!end) this.fillChildren();
    
    for (let r of this.children){
      this.bounds[0] = min(this.bounds[0], r.bounds[0]);
      this.bounds[1] = min(this.bounds[1], r.bounds[1]);
      this.bounds[2] = max(this.bounds[2], r.bounds[2]);
      this.bounds[3] = max(this.bounds[3], r.bounds[3]);
    }
    this.boundsX = this.bounds[2] - this.bounds[0];
    this.boundsY = this.bounds[3] - this.bounds[1];
  }
  fillChildren(){
    if (this.size < 2) return;
    
    let pivots = [];
    if (random() < .7) pivots.push([this.x, this.y]);
    for (let i = 0; i < 4; i++){
      let dir = dirs[i];
      if (random() < .2) pivots.push([this.x+dir[0]*this.size/2, this.y+dir[1]*this.size/2]);
    }
    
    for (let p of pivots){
      let s = this.size-floor(1 + pow(random(), 10)*(this.size-1));
      let repeat = random() < .3 && s < 4;
      this.children.push(new Rect(p[0], p[1], s, this.dim, this.cols, repeat));
      if (repeat){
        let n = floor(random(2, 5));
        let dir = random(dirs2);
        for (let i = 1; i < n; i++){
          this.children.push(new Rect(p[0] + dir[0]*i*s, p[1] + dir[1]*i*s, s, this.dim, this.cols, true));
        }
      }
    }
  }
  render(){
    push();
    fill(0, .1);
    noStroke();
    for (let i = 0; i < 5; i++){
      let amt = ((i+1)/5);
      rect(this.x, this.y, this.size+amt, this.size+amt);
    }
    if (this.bevel){
      let c = this.fCol;
      let n = this.size*3;
      for (let i = 0; i < n; i++){
        let amt = 1 - i/n;
        fill(hue(c), saturation(c), brightness(c)*pow((1-amt), .2), alpha(c));
        rect(this.x, this.y, this.size*amt, this.size*amt);
      }
      noFill();
    } else {
      fill(this.fCol); 
    }
    stroke(this.sCol);
    strokeWeight(this.thickness);
    rect(this.x, this.y, this.size, this.size);    
    
    pop();
    for (let r of this.children) r.render();
  }
}

let genPalette = (n, m) => {
  let accents = [];
  let fills   = [];
  for (let i = 0; i < n; i++) accents.push(color(random(), random()*.3 + .1, 1));
  for (let i = 0; i < m; i++) fills  .push(color(random(), 1, random()*.5 + .25));
  return ({accents, fills});
}

function setup (){
  pixelDensity(1);
  createCanvas();
  rectMode(CENTER);
  colorMode(HSB, 1, 1, 1);
  windowResized();
}

let shapes;
let init = () => {
  shapes = [];
  let s = 10;
  let n = 1;
  let cols = genPalette(3, 3);
  for (let i = 0; i < n; i++){
    cols = genPalette(1 + random(4), 1 + random(4));
    shapes.push(new Rect(0, 0, s, s, cols));
  }
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
  init();
}

function mousePressed(evt){
  if (evt.button != 2) init();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg