HTML5 CANVAS 模拟磁盘摩擦损坏的效果

Disk of Doom with simplex noise

html5, vector2

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

class Vector2 {
	constructor(x = 0, y = 0) {
		this.x = x;
		this.y = y;
	}
	
	add(v) {
		this.x += v.x;
		this.y += v.y;
		return this;
	}
	
	static fromPolar(r, phi) {
		return new Vector2(
			r * Math.cos(phi),
			r * Math.sin(phi)
		);
	}
	
	static fromScalar(s) {
		return new Vector2(s, s);
	}
}

class Simulation {
	constructor(settings = {}) {
		this.canvas = document.createElement('canvas');
		this.context = this.canvas.getContext('2d');
		this.center = Vector2.fromScalar(0);
		
		this.settings = Simulation.defaultSettings;
		this.setSettings(settings);
		
		this.iteration = 0;
		
		this.loop = this.animate.bind(this);
		this.isAnimating = false;
		
		this.setSeed(Math.random());
		this.reset();
	}
	
	setSize(width, height) {
		const pixelRatio = window.devicePixelRatio || 1;
		
		height *= pixelRatio
		width *= pixelRatio;
		
		this.canvas.height = height;
		this.canvas.width = width;
		
		this.center.x = width / 2;
		this.center.y = height / 2;
		
		this.baseRadius = Math.min(width, height) * .25;
		
		this.reset();
	}
	
	setSettings(settings) {
		this.settings = Object.assign({}, this.settings, settings);
		
		if (settings.seed) {
			this.setSeed(settings.seed);
		}
	}
	
	setSeed(seed) {
		const PI_TWO = Math.PI * 2;
		
		this.seedA = Math.sin(seed * PI_TWO);
		this.seedB = Math.cos(seed * PI_TWO + .987213);
		
		this.noiseA = new SimplexNoise(() => this.seedA);
		this.noiseB = new SimplexNoise(() => this.seedB);
	}
	
	reset() {
		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
		
		const alphaMin = .0025;
		const alphaMax = .0625;
		const detailMin = 4;
		const detailMax = 64;
		
		const detailNormal = this.settings.detail / detailMax;
		
		console.log(detailNormal);
		
		this.context.globalAlpha = alphaMin + detailNormal * (alphaMax - alphaMin);
		console.log(this.context.globalAlpha);
		this.context.globalCompositeOperation = 'multiply';
		
		this.iteration = 0;
		
		if (!this.isAnimating) {
			this.animate();
		}
	}
	
	animate() {
		this.isAnimating = this.iteration <= this.settings.iterationMax;
		
		if (this.isAnimating) {
			requestAnimationFrame(this.loop);
		}
		
		for (let i = 0; i < 64; i++) {
			this.iteration++;
			this.render();
		}
		
		if (typeof this.settings.onProgress === 'function') {
			this.settings.onProgress(this.iteration / this.settings.iterationMax);
		}
	}
	
	render() {
		const PI_TWO = Math.PI * 2;
		
		const progress = this.iteration / this.settings.iterationMax;
		const detailProgress = this.iteration / this.settings.detail % 1;
		
		const phiA = detailProgress * PI_TWO;
		const phiB = (this.iteration - this.settings.length) / this.settings.detail * PI_TWO;
		
		const radiusScale = this.baseRadius / 8;
		const radiusScaleA = this.baseRadius * this.settings.radiusOffsetEnd;
		const radiusScaleB = this.baseRadius * this.settings.radiusOffsetStart;
		
		const radiusOffset = this.noiseA.noise2D(
			phiA * this.settings.noiseScale,
			detailProgress * this.settings.noiseScale
		) * radiusScale;
		
		const radiusOffsetA = this.noiseA.noise2D(
			this.iteration * this.settings.noiseScale,
			detailProgress * this.settings.noiseScale
		) * radiusScaleA;
		
		const radiusOffsetB = this.noiseB.noise2D(
			phiB * this.settings.noiseScale,
			detailProgress * this.settings.noiseScale
		) * radiusScaleB;
		
		const radiusA = this.baseRadius + radiusOffset + radiusOffsetA;
		const radiusB = this.baseRadius + radiusOffset + radiusOffsetB;
		
		const positionA = Vector2.fromPolar(radiusA, phiA).add(this.center);
		const positionB = Vector2.fromPolar(radiusB, phiB).add(this.center);
		
		this.context.beginPath();
		this.context.moveTo(positionA.x, positionA.y);
		this.context.lineTo(positionB.x, positionB.y);
		
		const paletteIndexSeed = this.noiseA.noise2D(radiusA, radiusB);
		const paletteIndex = Math.floor(paletteIndexSeed * this.settings.palette.length) % this.settings.palette.length;
		this.context.strokeStyle = this.settings.palette[paletteIndex];
		this.context.stroke();
	}
	
	static get defaultSettings() {
		return {
			detail: 4,
			iterationMax: 1024,
			length: 1,
			noiseScale: 1,
			palette: [],
			radiusOffsetStart: 1,
			radiusOffsetEnd: 1,
		};
	}
}

const settings = {
	detail: 64,
	length: 3,
	noiseScale: 8,
	radiusOffsetStart: 1 / 4,
	radiusOffsetEnd: 1 / 6,
	seed: .1,
};

const progressBar = document.querySelector('.js-progress');

const sim = new Simulation(Object.assign({
	iterationMax: Math.pow(2, 16),
	palette: [
		'#EF5D43',
		'#5D1EB5',
		'#4774E5',
	],
	
	onProgress: (progress) => {
		progressBar.value = progress;
	},
}, settings));

sim.setSize(window.innerWidth, window.innerHeight);

document.querySelector('.js-canvas-container').appendChild(sim.canvas);

sim.canvas.addEventListener('click', () => sim.reset());
window.addEventListener('resize', () => sim.setSize(
	window.innerWidth,
	window.innerHeight
));

const update = () => {
	sim.setSettings(settings);
	sim.reset();
};

const gui = new dat.GUI();

gui.add(settings, 'detail')
	.min(4).max(64)
	.onChange(update);

gui.add(settings, 'noiseScale')
	.min(1).max(16).step(1)
	.onChange(update);

gui.add(settings, 'seed')
	.min(0).max(1).step(.05)
	.onChange(update);

const line = gui.addFolder('Line characteristics');

line.add(settings, 'length')
	.min(1).max(10).step(.5)
	.onChange(update);

line.add(settings, 'radiusOffsetStart')
	.name('start offset')
	.min(0).max(1).step(.05)
	.onChange(update);

line.add(settings, 'radiusOffsetEnd')
	.name('end offset')
	.min(0).max(1).step(.05)
	.onChange(update);

编译

CSS

HTML

Disk of Doom with simplex noise

html5, vector2

编辑器支持Emmet

快捷键

Disk of Doom with simplex noise

html5, vector2

HTML5 CSS3 GSAP带音效的超级马里奥跑跳动画

使用HTML5 GSAP模拟植物卷须动物卷发触角动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：