Perlin Noise 柏林噪音烟雾模拟，基于 p5.js 的实现

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	colorMode(HSB, 100);
}

const circlePosition = {
	x: 0,
	y: 300
}
function draw() {
	if (circlePosition.x >= width) {
		return
	}
	const radius = 5
	noFill()
	stroke((frameCount * 0.05) % 100, 100, 100, 15)
	beginShape();
	for (let i = 0; i < Math.PI * 2; i += 0.02) {
		const vector = createVector(cos(i), sin(i)).normalize().mult(65)
		const noiseRadius = noise(
			(circlePosition.x + vector.x) * 0.006,
			(circlePosition.y + vector.y) * 0.006
		)
		vector.normalize().mult(noiseRadius * 320)
		vertex(
			vector.x + circlePosition.x,
			vector.y + circlePosition.y
		)
	}
	endShape(CLOSE);
	circlePosition.x += 1
	circlePosition.y += 0
	if (circlePosition.x >= width) {
		circlePosition.x = 0
		background(0)
	}
}

function mouseClicked(event) {
  console.log(event);
	fullscreen(true)
}


function keyPressed() {
  if (key === 's') {
    saveCanvas();
  }
}