canvas彩色粒子流动动画效果代码-html代码-BFW代码库

canvas彩色粒子流动动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas彩色粒子流动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">



</head>

<body>


    <script >
        "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 }
			}),
			{}
		);
	}
}

    </script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>


    <script>
        "use strict";

const particleCount = 1000;
const particlePropCount = 9;
const particlePropsLength = particleCount * particlePropCount;
const rangeY = 100;
const rangeZ = 200;
const baseTTL = 50;
const rangeTTL = 200;
const baseHue = rand(360);
const rangeHue = 100;
const xc = 0.0005;
const yc = 0.0005;
const zc = 0.0005;
const tc = 0.0005;
const noiseSteps = ceil(rand(4)) + 4;
const backgroundColor = "hsla(0,0%,0%,0.5)";

let canvas;
let ctx;
let center;
let tick;
let simplex;
let particleProps;

function setup() {
  createCanvas();
  resize();
  initParticles();

  draw();
}

function initParticles() {
  tick = 0;
  simplex = new SimplexNoise();
  particleProps = new Float32Array(particlePropsLength);

  let i = 0;

  for (; i < particlePropsLength; i += particlePropCount) {
    initParticle(i);
  }
}

function initParticle(i) {
  let x, y, z, vx, vy, vz, life, ttl, speed, radius, hue;

  x = rand(canvas.a.width);
  y = center[1] + randIn(-rangeY, rangeY);
  z = rand(rangeZ);
  vx = 0;
  vy = 0;
  vz = 0;
  life = 0;
  ttl = baseTTL + rand(rangeTTL);
  sp.........完整代码请登录后点击上方下载按钮下载查看