曼德布罗集

下载代码

html

css

分享到微信朋友圈

html

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 dz = 0.;
		float n = 0.;

for (float i = 0.; i < 256.; i += 1.) {
			z = vec2(
				z.x * z.x - z.y * z.y,
				2. * z.x * z.y
			) + p;
			dz = dot(z, z);

if (dz > 16.) break;

n = i;
		}
		
		return uShading == 0
			? n
			: n - log2(log2(dz)); // Smooth fractal shading: 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>

css

JavaScript

const colorNorm = n => n / 255
const options = {
	x: -.5,
	y: .0,
	scale: 1.,
	shading: 1,
	shadingOptions: {
		flat: 0,
		smooth: 1
	},
	colorPrimary: [0, 18, 155],
	get _colorPrimary () {
		return this.colorPrimary.map(colorNorm)
	},
	colorSecondary: [0, 225, 255],
	get _colorSecondary () {
		return this.colorSecondary.map(colorNorm)
	}
}

let mandelbrot

function createGUI () {
	const gui = new dat.GUI()

gui.add(options, 'x', -2, 2, .001)
	gui.add(options, 'y', -2, 2, .001)
	gui.add(options, 'scale', .001, 2, .001)
	gui.add(options, 'shading', options.shadingOptions)
	gui.addColor(options, 'colorPrimary')
	gui.addColor(options, 'colorSecondary')
}

function setup () {
	createCanvas(windowWidth, windowHeight, WEBGL)

mandelbrot = createShader(
		document.querySelector('#vshader').textContent,
		document.querySelector('#fshader').textContent
	)

createGUI()

shader(mandelbrot)
}

function draw () {
	mandelbrot.setUniform('uResolution', [windowWidth, windowHeight])
	mandelbrot.setUniform('uPos', [options.x, options.y])
	mandelbrot.setUniform('uScale', options.scale)
	mandelbrot.setUniform('uShading', options.shading)
	mandelbrot.setUniform('uColorPrimary', options._colorPrimary)
	mandelbrot.setUniform('uColorSecondary', options._colorSecondary)

quad(-1, -1, 1, -1, 1, 1, -1, 1)
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
}

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