HTML5 Canvas矢量数据栅格化 - 踏得网

Vector Rasterization，数据可视化

h5, math

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2842
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

let points = [];
let count = 100;

function setup() {
	for(let i = 0; i < count ** 2; i++) {
		let pos = iToXY(i, count, count)
			.add(0.5)
			.div(count)
			.sub(0.5)
			.mult(2 * count);
		if(pos.mag() > count) continue;
		points.push({ pos, i });
	}
}

function draw(e) {
	let time = e * 0.0006;
	beginPath();
	// rect(-100, -100, 200, 200);
	let x = cos(time * E * 0.367 * 2) * count * 0.4;
	let c = createVector(x).rotate(time * 0.318 * PI);
	let s = 250;
	let w = s / count;
	let timeA = time * PI * 0.3142 * 0.3;
	let timeB = time * PHI * 0.1618 * 0.3;
	let timeC = time * E * 0.2718 * 0.3;
	for(let p of points) {
		p.pos.z = sin(time * 4 + p.pos.mag() * 0.1) * 20;
		let mag3D = p.pos.mag3D();
		if(sin(mag3D * map(cos(time), -1, 1, 0.1, 0.5) + time) < 0) {
			p.pos.z += tan(map(sin(time * 3 + mag3D * 0.08), -1, 1, 0, FIFTH_PI * 2)) * 10;
		}
		let v = p.pos._
			.sub(c)
			.rotateZX(timeA)
			.rotateYZ(timeB)
			.rotateXY(timeC)
			.add(c)
			// .round()
			.div(count)
			.mult(s);
		rect(v.x, v.y, constrain(w * v.z * 0.01, 1, w));
	}
	fill(hsl(0, 0, 100));
}

编译

CSS

HTML