p5.js复古风动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

class Rect{
  constructor(x, y, w, h, a){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.a = a;
    let theta = random(TAU);
    this.dx = cos(theta)*random();
    this.dy = sin(theta)*random();
    this.hue = random();
    this.n = floor(random(5, 10));
    this.type = floor(random(0, 3));
  }
  update(buffer){
    this.x += this.dx;
    this.y += this.dy;
    if (this.x < 0 || this.x > buffer.width ) this.dx *= -1;
    if (this.y < 0 || this.y > buffer.height) this.dy *= -1;
  }
  render(buffer){
    buffer.push();
    buffer.translate(this.x, this.y);
    buffer.rotate(this.a);
    buffer.stroke(this.hue, 1, 1);
    buffer.fill(0);
    if (this.type == 0){
      for (let i = 0; i < this.n; i++){
        let amt = i/this.n;
        buffer.line(amt*this.w, 0, amt*this.w, this.h);
      }
    }
    if (this.type == 1){
      buffer.ellipse(0, 0, this.w);
    }
    if (this.type == 2){
      buffer.noFill();
      buffer.triangle(0, -this.h/2, this.w/2, this.h/2, -this.w/2, this.h/2);
    }
    buffer.pop();
  }
}

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

let rects = [];
let buffer, divs;
let init = () => {
  let s = (width*height)/(814*814);
  rects = [];
  for (let i = 0; i < 150; i++){
    rects.push(new Rect(
      random(width),
      random(height),
      random(40*s, 100*s),
      random(40*s, 100*s),
      random(TAU)
    ))
  }
  
  divs = floor(random(4, 12))*2;
  let w = Math.hypot(width, height)/2;
  let a = TAU/divs;
  let h = w*tan(a);
  buffer = createGraphics(w, h);
  buffer.colorMode(HSB, 1, 1, 1);
}

function mousePressed(){
  init();
}

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

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