simplex-noise实现树叶背景堆叠代码-html代码-BFW代码库

simplex-noise实现树叶背景堆叠代码

代码语言：html

所属分类：其他

代码描述：simplex-noise实现树叶背景堆叠代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	background: #222;
	margin: 0;
	display: flex;
	justify-content: center;
}

canvas {
	border: 1px solid #222;
}
</style>



</head>

<body >
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
      <script >
const TWO_PI = Math.PI * 2;
const simplex = new SimplexNoise();

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

// append the canvas to the page
document.body.appendChild(canvas);

const scaleMin = 120;
const scaleMax = 220;

const leafRes = 40;
const leafPoints = getLeafPoints();

// draw on resize
const debouncedDraw = debounce(drawLeaves, 150);
window.addEventListener('resize', debouncedDraw, false);

drawLeaves();

function drawLeaves() {	
	// clear the canvas
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	
	const canvasWidth = window.innerWidth;
	const canvasHeight = window.innerHeight;

	// set canvas dimensions
	canvas.width = canvasWidth;
	canvas.height = canvasHeight;

	ctx.lineWidth = 2;

	for(let i = 0; i < 1000; i++) {
		ctx.fillStyle = '#222';
		ctx.strokeStyle = `hsla(${randomBetween(50, 150)}, 50%, ${Math.round(remap(i, 0, 999, 10, 60))}%)`;

		const x = randomBetween(0, canvasWidth);
		const y = randomBetween(0, canvasHeight);

		const scale = randomBetween(scaleMin, scaleMax);
		const noise = simplex.noise2D(x * 0.003, y * 0.003) * 64;

		ctx.save();
		ctx.translate(x + noise, y - 60 + noise);
		ctx.rotate(randomBetween(0, TWO_PI));
		drawLeaf(0, 0, scale);
		ctx.restore();
	}
}

function drawLeaf(x, y, scale) {
	const noiseX = Math.random();
	const noiseY = Math.random();
	
	// draw the sides
	ctx.beginPath();
	// draw right side
	drawLeafPoints(leafPoints.side, x, y, scale, { noiseX, noiseY });
	// draw left side
	drawLeafPoints(leafPoints.side, x, y, scale, {
		xMultiplier: -1,
		noiseX,
		noiseY
	});
	ctx.stroke();
	ctx.fill();

	ctx.lineWidth = 1;

	// draw the line down the middle
	ctx.beginPath();
	drawLeafPoints(leafPoints.middle, x, y, scale, { noiseX, noiseY });
	ctx.stroke();

	// draw the right side lines to the middle
	for (let i = 0; i < leafPoints.side.length; i += 2) {
		ctx.beginPath();
		drawLeafPoints([leafPoints.side[i], leafPoints.middle[i]], x, y, scale, {
			noiseX,
			noiseY
		});
		ctx.stroke();
		ctx.beginPath();
		drawLeafPoints([l.........完整代码请登录后点击上方下载按钮下载查看