KbZqYM

index.pug

script.
	window.canvasOptions = {
		autoClear: true,
		autoCompensate: false,
		autoPushPop: true,
		canvas: true,
		centered: true,
		width: null,
		height: null
	};

kbzqym.markdown

KbZqYM

A Pen by Jacob Foster on CodePen.

License.

script.babel

// Based on: https://twitter.com/jn3008_/status/1070806655514959872

let points = [];
let weights = [];
let size = 600;

function setup() {
	let weightCount = 5;
	for(let i = 0; i < weightCount; i++) {
		weights.push(createVector(size * 0.3, 0).rotate(i / weightCount * TAU));
	}
	let count = 17 * 4;
	for(let y = 0; y < count; y++) {
		for(let x = 0; x < count; x++) {
			let p = createVector(x, y);
			if(x % 2 === 1) {
				p.addY(0.5);
			}
			if(p.y > count - 1) {
				continue;
			}
			p.div(count - 1).sub(0.5).mult(size);
			p._mag = p.mag();
			if(p._mag > size * 0.5) {
				continue;
			}
			points.push(p);
			p.extraRot = p._mag / size * TAU * 2;
			p.closestWeight = { w: p, dist: Infinity };
			for(let w of weights) {
				let d = p.dist(w);
				if(d < p.closestWeight.dist) {
					p.closestWeight = { w, dist: d };
				}
			}
			p.closestWeight.dist_ = p.closestWeight.dist * 0.01;
			// p.v = createVector(p.closestWeight.dist * 0.075, 0);
			p.v = createVector(ease.cubic.out(p.closestWeight.dist, 10, size * 0.075 - 10, size), 0);
			p.ease = ease.cubic.inOut(size - p.closestWeight.dist, 1, -2, size) * TAU * 2;
			// p.lerp(p.closestWeight.w, (1 - p.closestWeight.dist / size) * 0.6);
		}
	}
}

function draw(e) {
	// background(hsl(0, 0, 8, 0.05));
	let time = e * 0.008;
	let time_ = -time * 0.3;
	beginPath();
	for(let p of points) {
		let v = p.v._.mult(sin(time_ + p.closestWeight.dist_ + p.extraRot))
			.rotate(p.ease + time)
			.add(p);
		circle(v.x, v.y, 1.2);
		// line(p, v);
	}
	let grad = createRadialGradient(0, 0, 0, 0, 0, size * 0.5);
	grad.addColorStop(0, hsl(0, 0, 100));
	// grad.addColorStop(0.3, hsl(0, 0, 100, 0.9));
	// grad.addColorStop(0.8, hsl(0, 0, 100, 0.1));
	// grad.addColorStop(1, hsl(0, 0, 100, 0));
	
	// grad.addColorStop(0.8, hsl(0, 0, 100));
	// grad.addColorStop(1, hsl(0, 0, 100, 0));
	fill(grad);
	// stroke(grad);
}

scripts

<script src="https://codepen.io/Alca/pen/XeZBab"></script>

styles

<link href="https://codepen.io/Alca/pen/XeZBab" rel="stylesheet" />