canvas生成艺术

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let n = 0;
let c = 3;
let magicNum = 137.5;
let sc = 3;
let limit = 6000;
let button;
let amt;
let startClr;
let newClr;

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  background("#2B2D32");

startClr = color(255, 255, 255);
  newClr = color(random(255), random(255), random(255));
  amt = 0;

button = createButton("Randomize");
  button.mousePressed(randomPattern);
}

function randomPattern() {
  clear();
  let newMN = 137 + round(random(0.3, 0.6), 1);
  n = 0;
  c = 3;
  sc = random(4, 8);
  magicNum = newMN;
}

function draw() {
  translate(width / 2, height / 2);
  let angle = n * magicNum;
  let radius = c * sqrt(n);
  let x = radius * cos(angle);
  let y = radius * sin(angle);

let clr = lerpColor(startClr, newClr, smoothstep(0.3, 0.7, amt));
  noFill();
  stroke(clr);
  ellipse(x, y, sc, sc);

n += 5;
  sc += 0.05;
  amt += 0.01;

if (amt >= 1) {
    amt = 0.0;
    startClr = newClr;
    newClr = color(random(255), random(160), random(255));
  }

if (n >= limit) {
    n = limit;
    setTimeout(randomPattern, 1000);
  }
}

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

function smoothstep(edge0, edge1, x) {
  x = constrain((x - edge0) / (edge1 - edge0), 0.0, 1.0);
  return x * x * (3 - 2 * x);
}

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