Эффект с частицами
CSS
html, body {
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background:#000;
touch-action: none;
content-zooming: none;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
background:#000;
cursor: pointer;
}JS
"use strict";
{
// http://mrl.nyu.edu/~perlin/noise/
const perlin = {
init (octaves = 1) {
this.p = new Uint8Array(512);
this.octaves = octaves;
this.reset();
},
reset() {
for (let i = 0; i < 512; ++i) {
this.p[i] = Math.random() * 256;
}
},
lerp(t, a, b) {
return a + t * (b - a);
},
grad2d(i, x, y) {
const v = (i & 1) === 0 ? x : y;
return (i & 2) === 0 ? -v : v;
},
noise2d(x2d, y2d) {
const X = Math.floor(x2d) & 255;
const Y = Math.floor(y2d) & 255;
const x = x2d - Math.floor(x2d);
const y = y2d - Math.floor(y2d);
const fx = (3 - 2 * x) * x * x;
const fy = (3 - 2 * y) * y * y;
const p0 = this.p[X] + Y;
const p1 = this.p[X + 1] + Y;
return this.lerp(
fy,
this.lerp(
fx,
this.grad2d(this.p[p0], x, y),
this.grad2d(this.p[p1], x - 1, y)
),
this.lerp(
fx,
this.grad2d(this.p[p0 + 1], x, y - 1),
this.grad2d(this.p[p1 + 1], x - 1, y - 1)
)
);
},
noise(x, y) {
let e = 1,
k = 1,
s = 0;
for (let i = 0; i < this.octaves; ++i) {
e *= 0.5;
s += e * (1 + this.noise2d(k * x, k * y)) / 2;
k *= 2;
}
return s;
}
};
/////////////////////////////////////////////////////////////////
const canvas = {
init() {
this.elem = document.createElement("canvas");
document.body.appendChild(this.elem);
this.width = this.elem.width = this.elem.offsetWidth;
this.height = this.elem.height = this.elem.offsetHeight;
return this.elem.getContext("2d");
}
};
/////////////////////////////////////////////////////////////////
const webgl = {
init(canvas, options) {
this.elem = document.createElement("canvas");
this.gl = (
this.elem.getContext("webgl", options) ||
this.elem.getContext("experimental-webgl", options)
);
if (!this.gl) return false;
const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
this.gl.shaderSource(vertexShader, `
precision highp float;
attribute vec3 aPosition;
uniform vec2 uResolution;
void main() {
gl_PointSize = 1.0;
gl_Position = vec4(
( aPosition.x / uResolution.x * 2.0) - 1.0,
(-aPosition.y / uResolution.y * 2.0) + 1.0,
0.0,
1.0
);
}`
);
this.gl.compileShader(vertexShader);
const fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
this.gl.shaderSource(fragmentShader, `
precision highp float;
void main() {
gl_FragColor = vec4(0.2, 0.3, 1.0, 1.0);
}`
);
this.gl.compileShader(fragmentShader);
this.program = this.gl.createProgram();
this.gl.attachShader(this.program, vertexShader);
this.gl.attachShader(this.program, fragmentShader);
this.gl.linkProgram(this.program);
this.gl.useProgram(this.program);
this.aPosition = this.gl.getAttribLocation(this.program, "aPosition");
this.gl.enableVertexAttribArray(this.aPosition);
this.positionBuffer = this.gl.createBuffer();
this.resize(canvas);
return this.gl;
},
resize (canvas) {
this.elem.width = canvas.width;
this.elem.height = canvas.height;
const uResolution = this.gl.getUniformLocation(this.program, "uResolution");
this.gl.enableVertexAttribArray(uResolution);
this.gl.uniform2f(uResolution, canvas.width, canvas.height);
this.gl.viewport(
0,
0,
this.gl.drawingBufferWidth,
this.gl.drawingBufferHeight
);
},
drawBuffer(data, num) {
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
this.gl.vertexAttribPointer(this.aPosition, 2, this.gl.FLOAT, false, 0, 0);
this.gl.bufferData(
this.gl.ARRAY_BUFFER,
data,
this.gl.DYNAMIC_DRAW
);
this.gl.drawArrays(this.gl.GL_POINTS, 0, num);
}
};
/////////////////////////////////////////////////////////////////
const ctx = canvas.init();
const gl = webgl.init(canvas, {
alpha: false,
stencil: false,
antialias: false,
depth: false,
});
perlin.init(2);
const nParticles = 30000;
const velocities = new Float32Array(nParticles * 2);
const particles = new Float32Array(nParticles * 2);
let frame = 0;
for (let i = 0; i < nParticles; i++) {
const p = i * 2;
particles[p+0] = Math.random() * canvas.width;
particles[p+1] = Math.random() * canvas.height;
}
/////////////////////////////////////////////////////////////////
const run = () => {
requestAnimationFrame(run);
frame++;
gl.clear(gl.COLOR_BUFFER_BIT);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0, 0, 0, 0.025)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "lighter";
for (let i = 0; i < nParticles; i++) {
const p = i * 2;
let n = 180 * perlin.noise(particles[p+0] * 0.001, particles[p+1] * 0.001);
velocities[p+0] += 0.1 * Math.cos(n);
velocities[p+1] += 0.1 * Math.sin(n);
particles[p+0] += (velocities[p+0] *= 0.99);
particles[p+1] += (velocities[p+1] *= 0.99);
particles[p+0] = (canvas.width + particles[p+0]) % canvas.width;
particles[p+1] = (canvas.height + particles[p+1]) % canvas.height;
}
webgl.drawBuffer(particles, nParticles);
if (frame > 30) ctx.drawImage(webgl.elem, 0, 0);
};
requestAnimationFrame(run);
/////////////////////////////////////////////////////////////////
["click", "touchdown"].forEach(event => {
document.addEventListener(event, e => perlin.reset(), false);
});
}
