canvas螺旋动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";

const {
	PI,
	cos,
	sin,
	tan,
	abs,
	sqrt,
	pow,
	min,
	max,
	ceil,
	floor,
	round,
	random,
	atan2
} = Math;
const HALF_PI = 0.5 * PI;
const QUART_PI = 0.25 * PI;
const TAU = 2 * PI;
const TO_RAD = PI / 180;
const G = 6.67 * pow(10, -11);
const EPSILON = 2.220446049250313e-16;
const rand = n => n * random();
const randIn = (_min, _max) => rand(_max - _min) + _min;
const randRange = n => n - rand(2 * n);
const fadeIn = (t, m) => t / m;
const fadeOut = (t, m) => (m - t) / m;
const fadeInOut = (t, m) => {
	let hm = 0.5 * m;
	return abs((t + hm) % m - hm) / hm;
};
const dist = (x1, y1, x2, y2) => sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));
const angle = (x1, y1, x2, y2) => atan2(y2 - y1, x2 - x1);
const lerp = (a, b, amt) => (1 - amt) * a + amt * b;
const vh = p => p * window.innerHeight * 0.01;
const vw = p => p * window.innerWidth * 0.01;
const vmin = p => min(vh(p), vw(p));
const vmax = p => max(vh(p), vw(p));
const clamp = (n, _min, _max) => min(max(n, _min), _max);
const norm = (n, _min, _max) => (n - _min) / (_max - _min);

Array.prototype.lerp = function(t = [], a = 0) {
	this.forEach((n, i) => (this[i] = lerp(n, t[i], a)));
};

Float32Array.prototype.get = function(i = 0, n = 0) {
	const t = i + n;

let r = [];

for (; i < t; i++) {
		r.push(this[i]);
	}

return r;
};

class ParticleArray {
	constructor(count = 0, props = []) {
		this.count = count;
		this.props = props;
		this.values = new Float32Array(count * props.length);
	}
	get length() {
		return this.values.length;
	}
	set(a = [], i = 0) {
		this.values.set(a, i);
	}
	setMap(o = {}, i = 0) {
		this.set(Object.values(o), i);
	}
	get(i = 0) {
		return this.values.get(i, this.props.length);
	}
	getMap(i = 0) {
		return this.get(i).reduce(
			(r, v, i) => ({
				...r,
				...{ [this.props[i]]: v }
			}),
			{}
		);
	}
}

"use strict";

const particleCount = 3000;
const particleProps = [
"x",
"y",
"w",
"r",
"t",
"s",
"e",
"h",
"ic"];

const backgroundColor = "hsla(0,0%,0%,0.35)";

let canvas;
let ctx;
let center;
let tick;
let particleArray;

function setup() {
  tick = 0;
  createCanvas();
  resize();
  createSpiral();
  draw();
}

function createSpiral() {
  particleArray = new ParticleArray(particleCount, particleProps);

const ns = round(particleCount / ceil(rand(3)) + 3);

let i = 0;

let d, rc, sc, tc, bh, hc;

for (; i < particleArray.length; i += particleProps.length) {
    if (!(i % ns)) {
      d = rand(20);
      rc = (round(rand(70)) + 70) * 0.125;
      sc = (1 + round(rand(1))) * 0.0035;
      tc = round(rand(1)) ? 2 : -2;
      bh = round(rand(360));
      hc = (1 + rand(2)) * 0.0125;
    }
    initParticle(i, d, rc, sc, tc, bh, hc);
  }
}

function initParticle(i, d, rc, sc, tc, bh, hc) {
  const irtc = i / rc * tc;
  const ditsc = d + i * tc * sc;

let x, y, r, w, t, s, e, h, ic;

t = i / particleCount * rc * (tc * TAU);
  x = center[0] + ditsc * cos(t);
  y = center[1] + ditsc * sin(t);
  r = i / (0.5 * particleCount) + 2;
  w = norm(i, 0, particleArray.length) + 0.1;
  s = irtc + t + HALF_PI;
  e = irtc + t + PI;
  h = bh + i * hc;
  ic = i * 0.0000125;

particleArray.set([x, y, r, w, t, s, e, h, ic], i);
}

function drawParticle(i) {
  let [x, y, r, w, t, s, e, h, ic] = particleArray.get(i);

ctx.a.beginPath();
  ctx.a.lineWidth = w;
  ctx.a.strokeStyle = `hsla(${h},30%,50%,0.5)`;
  ctx.a.arc(x, y, r, t + s, t + e);
  ctx.a.stroke();
  ctx.a.closePath();

t += sin(tick * 0.0015) * ic;

particleArray.set([x, y, r, w, t, s, e, h, ic], i);
}

function createCanvas() {
  canvas = {
    a: document.createElement("canvas"),
    b: document.createElement("canvas") };

canvas.b.style = `
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	`;
  document.body.appendChild(canvas.b);
  ctx = {
    a: canvas.a.getContext("2d"),
    b: canvas.b.getContext("2d") };

center = [canvas.a.width, canvas.a.height];
  canvas.b.addEventListener("click", createSpiral);
}

function resize() {
  const { innerWidth, innerHeight } = window;

canvas.a.width = innerWidth;
  canvas.a.height = innerHeight;

ctx.a.drawImage(canvas.b, 0, 0);

canvas.b.width = innerWidth;
  canvas.b.height = innerHeight;

ctx.b.drawImage(canvas.a, 0, 0);

center[0] = 0.5 * innerWidth;
  center[1] = 0.5 * innerHeight;
}

function renderGlow() {
  ctx.b.save();
  ctx.b.filter = "blur(8px) brightness(200%)";
  ctx.b.globalCompositeOperation = "lighter";
  ctx.b.drawImage(canvas.a, 0, 0);
  ctx.b.restore();
}

function renderToScreen() {
  ctx.b.save();
  ctx.b.globalCompositeOperation = "lighter";
  ctx.b.drawImage(canvas.a, 0, 0);
  ctx.b.restore();
}

function drawBackground() {
  ctx.a.clearRect(0, 0, canvas.a.width, canvas.a.height);

ctx.b.fillStyle = backgroundColor;
  ctx.b.fillRect(0, 0, canvas.a.width, canvas.a.height);
}

function drawSpiral() {
  let i = 0;

for (; i < particleArray.length; i += particleProps.length) {
    drawParticle(i);
  }
}

function draw() {
  tick++;

drawBackground();
  drawSpiral();
  renderGlow();
  renderToScreen();

window.requestAnimationFrame(draw);
}

window.addEventListener("load", setup);
window.addEventListener("resize", resize);

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