p5绘制曼德尔布罗特集效果

代码语言:html

所属分类:布局界面

代码描述:p5绘制曼德尔布罗特集效果

代码标签: 布罗 特集 效果

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
html, body {
  background: black;
  overflow: hidden;
}
</style>



</head>

<body translate="no" >
  <script type="x-shader/x-vertex" id="vshader">
	precision highp float;

	attribute vec3 aPosition;

	varying vec2 vPos;

	void main() {
		vPos = (gl_Position = vec4(aPosition, 1.)).xy;
	}
</script>
<script type="x-shader/x-fragment" id="fshader">
	precision highp float;

	uniform vec2 uResolution;
	uniform vec2 uPos;
	uniform float uScale;
	uniform int uShading;
	uniform vec3 uColorPrimary;
	uniform vec3 uColorSecondary;

	varying vec2 vPos;

	float mandelbrot(in vec2 p) {
		vec2 z = vec2(0.);
		float n = 0.;

		for (float i = 0.; i < 256.; i += 1.) {
			if (dot(z, z) > 16.) break;

			z = vec2(
				z.x * z.x - z.y * z.y,
				2. * z.x * z.y
			) + p;
			n = i;
		}
		
		return uShading == 0
			? n
			: n - log2(log2(dot(z, z))) + 4.; // Smooth fractal iteration: https://www.iquilezles.org/www/articles/mset_smooth/mset_smooth.htm
	}

	void main() {
		vec2 aspect = uResolution.xy / uResolution.y;
		vec2 p = uPos + uScale * vPos * aspect;

		float n = mandelbrot(p);

		vec3 color = mix(uColorPrimary, uColorSecondary, sin(n * .1));

		gl_FragColor = vec4(color, 1.);
	}
</script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
  <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></.........完整代码请登录后点击上方下载按钮下载查看

网友评论0