二叉树

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

"use strict";
const transform = {
	m: [],
	minSize: 0.001,
	stack: [],
	calls: [],
	shapes: [],
	box: [],
	reset () {
		this.m = [1, 0, 0, 1, 0, 0];
		this.box = [0, 0, 0, 0];
		this.shapes.length = 0;
		this.calls.length = 0;
		return this;
	},
	rotate (v) {
		const m = this.m;
		const rad = Math.PI * v / 180;
		const cos = Math.cos(rad);
		const sin = Math.sin(rad);
		const r00 = cos * m[0] + sin * m[2];
		const r01 = cos * m[1] + sin * m[3];
		m[2] = cos * m[2] - sin * m[0];
		m[3] = cos * m[3] - sin * m[1];
		m[0] = r00;
		m[1] = r01;
		return this;
	},
	translate (x, y = 0) {
		const m = this.m;
		m[4] += x * m[0] + y * m[2];
		m[5] += x * m[1] + y * m[3];
		return this;
	},
	scale (x = 1, y = x) {
		const m = this.m;
		m[0] *= x;
		m[1] *= x;
		m[2] *= y;
		m[3] *= y;
		return this;
	},
	exec (fn) {
		this.calls.push([fn, this.m.slice()]);
		return this;
	},
	save () {
		this.stack.push(this.m.slice());
		return this;
	},
	restore () {
		this.m = this.stack.pop();
		return this;
	},
	SQUARE () {
		this.boundingBox();
		this.shapes.push(this.m.slice());
		return this;
	},
	tooSmall () {
		const m = this.m;
		const x = m[0] * m[0] + m[1] * m[1];
		const y = m[2] * m[2] + m[3] * m[3];
		return x < this.minSize || y < this.minSize;
	},
	boundingBox () {
		const m = this.m;
		if (m[4] < this.box[0]) this.box[0] = m[4];
		else if (m[4] > this.box[2]) this.box[2] = m[4];
		if (m[5] < this.box[1]) this.box[1] = m[5];
		else if (m[5] > this.box[3]) this.box[3] = m[5];
	},
	render (ctx, w, h, margin = 0.9) {
		do {
			const step = this.calls.shift();
			this.m = step[1];
			step[0]();
		} while (this.calls.length);
		const scale = Math.min(
			margin * w / (this.box[2] - this.box[0]),
			margin * h / (this.box[3] - this.box[1])
		);
		const ox = (this.box[0] + this.box[2]) * 0.5 * scale;
		const oy = (this.box[3] + this.box[1]) * 0.5 * scale;
		for (const m of this.shapes) {
			ctx.setTransform(
				m[0] * scale,
				m[1] * scale,
				m[2] * scale,
				m[3] * scale,
				m[4] * scale - ox + w * 0.5,
				m[5] * scale - oy + h * 0.5
			);
			ctx.fillRect(-0.5, -0.5, 1, 1);
		}
	}
};
////////////////////////////////////////////////
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const branch = () => {
	transform.exec(bit).translate(1, 0).scale(0.999)
	if (Math.random() < 0.5) {
		transform.rotate(-3).exec(left);
	} else {
		transform.rotate(3).exec(right);
	}
};
const left = () => {
	if (Math.random() * 5 < 4) {
		transform.save().translate(1, 0).scale(0.999).rotate(3).exec(left).restore();
		transform.exec(bit);
	} else {
		transform.exec(split);
	}
};
const right = () => {
	if (Math.random() * 5 < 4) {
		transform.save().translate(1, 0).scale(0.999).rotate(-3).exec(right).restore();
		transform.exec(bit);
	} else {
		transform.exec(split);
	}
};
const split = () => {
	if (transform.tooSmall()) return;
	transform.save().translate(0.8, -0.5).scale(0.6).rotate(-30).exec(branch).restore();
	transform.exec(bit);
	transform.save().translate(0.8, 0.5).scale(0.6).rotate(30).exec(branch).restore();
};
const pixel = (x, y) => transform.save().translate(x, y).scale(0.16).SQUARE().restore();
const bit = () => {
	if (Math.random() > 0.5) {
		pixel(0, 0.4);
		pixel(0, 0.4);
		pixel(0, 0.2);
		pixel(0, 0);
		pixel(0, -0.2);
		pixel(0, -0.4);
		pixel(-0.2, -0.2);
	} else {
		pixel(0.4, 0.2);
		pixel(0.4, 0);
		pixel(0.4, -0.2);
		pixel(-0.4, 0.2);
		pixel(-0.4, 0);
		pixel(-0.4, -0.2);
		pixel(0.2, 0.4);
		pixel(0, 0.4);
		pixel(-0.2, 0.4);
		pixel(0.2, -0.4);
		pixel(0, -0.4);
		pixel(-0.2, -0.4);
	}
};
const start = () => {
	const width = (canvas.width = canvas.offsetWidth * 2);
	const height = (canvas.height = canvas.offsetHeight * 2);
	ctx.clearRect(0, 0, width, height);
	ctx.fillStyle = "#446";
	transform.reset().rotate(-90).scale(2).exec(branch);
	transform.render(ctx, width, height, 0.98);
};
window.addEventListener("resize", start, false);
["click", "touchdown"].forEach(event => {
	document.addEventListener(event, start, false);
});
start();

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