Mandelbrot.html

<title>MandelbrotSet by WebGL</title>

<style>
body {
;	margin				: 0
;	color				: white
;	overflow			: scroll
}
canvas {
;	position			: absolute
}
nav {
;	position			: fixed
;	left				: 20px
;	top					: 20px
;	background-color	: #0008
;	padding				: 8px
;	transition			: all 0.3s ease-in-out
;	opacity				: 0.3
;	cursor				: move
;	font-family			: monospace
}
nav:hover {
;	opacity				: 1
}
footer {
;	position			: fixed
;	left				: 0
;	right				: 0
;	bottom				: 0
;	padding				: 8px
;	background-color	: #4444
;	opacity				: 0.5
;	cursor				: move
;	font-family			: fantasy
}
a {
;	color				: white
}
input, select {
;	color				: white
;	font-family			: inherit
;	background-color	: #0000
;	text-align			: right
;	border				: 1px solid grey
}
input	{
;	width				: 64px
}
select	{
;	width				: 128px	
;	margin-left			: 16px
}
input[ type=button ] {
;	text-align			: center
;	background-color	: #4444
;	margin				: 5px
}
input[ type=range ] {
;	width				: 256px
;	margin-left			: 5%
}
.lr {
;	display				: flex
;	justify-content		: space-between
;	align-items			: center
;	height				: 28px
}
</style>

<canvas id=CANVAS></canvas>
<canvas id=TRACK tabindex=1></canvas>
<nav id=NAV>
	<div class=lr><label>Iterations</label>	<input	id=NUM_I type=range min=2 max=1000 value=500 step=1>		</div>
	<div class=lr><label>Color maps</label>	<select	id=COLOR_MAPS></select>										</div>
	<hr>
	<div class=lr><label>Real</label>		<span><input id=R_MIN value=-2  >~<input id=R_MAX value=1  ></span>	</div>
	<div class=lr><label>Imaginary</label>	<span><input id=I_MIN value=-1.3>~<input id=I_MAX value=1.3></span>	</div>
	<input type=button id=DRAW value=Draw style="width: 100%">
	<hr>
	<div class=lr>
		<input type=button style="width: 40%" id=RESET		value=Reset		>
		<input type=button style="width: 40%" id=DOWNLOAD	value=Download	>
	</div>
	<hr>
	Press ↑,↓,←,→ and space key + mouse to move image<br>
	Press + and - key to zoom in/out<br>
</nav>
<footer class=lr>
	<div>Copywrite 2022 SliP LLC, Tokyo. Thank you for enjyoing this site.</div>
	<a href=https://slip.828.tokyo>Visit our awesome calculator site: http://slip.828.tokyo</a>
</footer>

<script type=module>

[	'hue'
,	'gray'
,	'red'
,	'green'
,	'blue'
,	'yellow'
,	'magenta'
,	'cyan'
].forEach( 
	( $, _ ) => {
		const option = document.createElement( 'option' )
		option.textContent = $
		option.value = _
		COLOR_MAPS.appendChild( option )
	}
)

const
gl = CANVAS.getContext( 'webgl', { preserveDrawingBuffer: true } )

const
program = gl.createProgram()

const
Shader = ( src, type ) => {
	var $ = gl.createShader( type )
	gl.shaderSource( $, src )
	gl.compileShader( $ )
	if ( !gl.getShaderParameter( $, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( $ )
	gl.attachShader( program, $ )
	gl.deleteShader( $ )
}
Shader(
	`
		attribute vec3 position;
		void
		main() {
			gl_Position = vec4( position, 1.0 );
		}
	`
,	gl.VERTEX_SHADER
)
Shader(
	`
		precision highp float;
		precision highp int;

		uniform vec2	min;
		uniform vec2	max;

		uniform vec2	resolution;
		uniform int		iterations;

		uniform int		colorMapIndex;

		int
		Mandelbrot( vec2 c ) {
			vec2 z = c;
			for( int i = 1; i < 1000; ++i ) {
				if ( i >= iterations ) break;

				vec2 z2 = z * z;
				if ( z2.x + z2.y > 4.0 ) return i;
				
				z = vec2(
					z2.x - z2.y
				,	z.y * z.x * 2.0
				) + c; 
			//	TODO: COMPARE ELAPPSED
			//	z.y = ( z.y * z.x * 2.0 ) + c.y; 
			//	z.x = ( z2.x - z2.y ) + c.x; 
			}
			return 0;
		}

		vec4
		RGB_Hue( float _ ) {						// 0 <= _ < 1
			int		i = int( floor( _ * 6.0 ) );	// 0, 1, 2, 3, 4, 5
			float	p = _ - float( i );				// 0 <= p <= 1
			float	q = 1.0 - p;					// 1 >= q >= 0
			if ( i == 0 ) return vec4( 1.0, p, 0, 1.0 );
			if ( i == 1 ) return vec4( q, 1.0, 0, 1.0 );
			if ( i == 2 ) return vec4( 0, 1.0, p, 1.0 );
			if ( i == 3 ) return vec4( 0, q, 1.0, 1.0 );
			if ( i == 4 ) return vec4( p, 0, 1.0, 1.0 );
			if ( i == 5 ) return vec4( 1.0, 0, q, 1.0 );
		}

		vec4
		Gray	( float _ ) { return vec4( _, _, _, 1.0 ); }
		vec4
		Red		( float _ ) { return vec4( _, 0.0, 0.0, 1.0 ); }
		vec4
		Green	( float _ ) { return vec4( 0.0, _, 0.0, 1.0 ); }
		vec4
		Blue	( float _ ) { return vec4( 0.0, 0.0, _, 1.0 ); }
		vec4
		Yellow	( float _ ) { return vec4( _, _, 0.0, 1.0 ); }
		vec4
		Magenta	( float _ ) { return vec4( _, 0.0, _, 1.0 ); }
		vec4
		Cyan	( float _ ) { return vec4( 0.0, _, _, 1.0 ); }

		vec4
		Color( float _ ) {
			if ( colorMapIndex == 0 ) return RGB_Hue( _ );
			if ( colorMapIndex == 1 ) return Gray( _ );
			if ( colorMapIndex == 2 ) return Red( _ );
			if ( colorMapIndex == 3 ) return Green( _ );
			if ( colorMapIndex == 4 ) return Blue( _ );
			if ( colorMapIndex == 5 ) return Yellow( _ );
			if ( colorMapIndex == 6 ) return Magenta( _ );
			if ( colorMapIndex == 7 ) return Cyan( _ );
		}

		void
		main( void ) {
			int i = Mandelbrot(
				vec2(
					min.x + ( max.x - min.x ) * gl_FragCoord.x / resolution.x
				,	min.y + ( max.y - min.y ) * gl_FragCoord.y / resolution.y
				)
			);
			gl_FragColor = i == 0
			?	vec4( 0.0, 0.0, 0.0, 1.0 )
			:	Color( float( i ) / float( iterations ) )
			;
		}
	`
,	gl.FRAGMENT_SHADER
)
gl.linkProgram( program )
if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) throw gl.getError()

gl.bindBuffer( gl.ARRAY_BUFFER, gl.createBuffer() );
gl.bufferData(
	gl.ARRAY_BUFFER
,	new Float32Array( [ - 1.0, - 1.0, 1.0, - 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0 ] )
,	gl.STATIC_DRAW
)

const minLocation			= gl.getUniformLocation( program, 'min'				)
const maxLocation			= gl.getUniformLocation( program, 'max'				)
const resolutionLocation	= gl.getUniformLocation( program, 'resolution'		)
const iterationLocation		= gl.getUniformLocation( program, 'iterations'		)
const colorMapIndexLocation	= gl.getUniformLocation( program, 'colorMapIndex'	)

const
Draw = () => {
	gl.viewport( 0, 0, CANVAS.width, CANVAS.height )

	gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT )

	gl.useProgram( program )

	gl.uniform2f( minLocation			, Number( R_MIN.value ), Number( I_MIN.value ) )
	gl.uniform2f( maxLocation			, Number( R_MAX.value ), Number( I_MAX.value ) )
	gl.uniform2f( resolutionLocation	, CANVAS.width, CANVAS.height )
	gl.uniform1i( iterationLocation		, Number( NUM_I.value ) )
	gl.uniform1i( colorMapIndexLocation	, Number( COLOR_MAPS.value ) )

	gl.vertexAttribPointer		( 0, 2, gl.FLOAT, false, 0, 0 )

	gl.enableVertexAttribArray	( 0 )
	gl.drawArrays				( gl.TRIANGLES, 0, 6 )
	gl.disableVertexAttribArray	( 0 )
}

DRAW.onclick = () => {
	TRACK.width		= CANVAS.width	= document.body.clientWidth
	TRACK.height	= CANVAS.height	= document.body.clientHeight
	Draw()
	DOWNLOAD.href = CANVAS.toDataURL()
	TRACK.focus()
}

NUM_I.oninput = () => DRAW.onclick()

let
spaceKeyPressed = false

TRACK.onkeyup = ev => {
	switch ( ev.key ) {
	case ' ':
		spaceKeyPressed = false
		break
	}
}

TRACK.onkeydown = ev => {
	switch ( ev.key ) {
	case ' ':
		spaceKeyPressed = true
		break
	case '+':
		{	const rMin = Number( R_MIN.value )
			const rMax = Number( R_MAX.value )
			const iMin = Number( I_MIN.value )
			const iMax = Number( I_MAX.value )
			const r = ( rMin + rMax ) / 2
			const rRange = ( rMax - rMin ) / 4
			R_MIN.value = r - rRange
			R_MAX.value = r + rRange
			const i = ( iMin + iMax ) / 2
			const iRange = ( iMax - iMin ) / 4
			I_MIN.value = i - iRange
			I_MAX.value = i + iRange
			DRAW.click()
		}
		break
	case '-':
		{	const rMin = Number( R_MIN.value )
			const rMax = Number( R_MAX.value )
			const iMin = Number( I_MIN.value )
			const iMax = Number( I_MAX.value )
			const r = ( rMin + rMax ) / 2
			const rRange = ( rMax - rMin )
			R_MIN.value = r - rRange
			R_MAX.value = r + rRange
			const i = ( iMin + iMax ) / 2
			const iRange = ( iMax - iMin )
			I_MIN.value = i - iRange
			I_MAX.value = i + iRange
			DRAW.click()
		}
		break
	case 'ArrowUp':
		{	const iMin = Number( I_MIN.value )
			const iMax = Number( I_MAX.value )
			const _ = ( iMax - iMin ) / 10 
			I_MIN.value = iMin - _
			I_MAX.value = iMax - _
			DRAW.click()
		}
		break
	case 'ArrowDown':
		{	const iMin = Number( I_MIN.value )
			const iMax = Number( I_MAX.value )
			const _ = ( iMax - iMin ) / 10 
			I_MIN.value = iMin + _
			I_MAX.value = iMax + _
			DRAW.click()
		}
		break
	case 'ArrowLeft':
		{	const rMin = Number( R_MIN.value )
			const rMax = Number( R_MAX.value )
			const _ = ( rMax - rMin ) / 10 
			R_MIN.value = rMin + _
			R_MAX.value = rMax + _
			DRAW.click()
		}
		break
	case 'ArrowRight':
		{	const rMin = Number( R_MIN.value )
			const rMax = Number( R_MAX.value )
			const _ = ( rMax - rMin ) / 10 
			R_MIN.value = rMin - _
			R_MAX.value = rMax - _
			DRAW.click()
		}
		break
	case 'r':
	case 'R':
		RESET.click()
		break
	}
}

let
lastMouse

TRACK.addEventListener(
	'mousemove'
,	ev => {
		if ( spaceKeyPressed && lastMouse ) {

			{	const rMin = Number( R_MIN.value )
				const rMax = Number( R_MAX.value )
				const _ = ( ev.clientX - lastMouse.clientX ) * ( rMax - rMin ) / CANVAS.width
				R_MIN.value = rMin - _
				R_MAX.value = rMax - _
			}

			{	const iMin = Number( I_MIN.value )
				const iMax = Number( I_MAX.value )
				const _ = ( ev.clientY - lastMouse.clientY ) * ( iMax - iMin ) / CANVAS.height
				I_MIN.value = iMin + _
				I_MAX.value = iMax + _
			}

			Draw()
		}
		lastMouse = ev
	}
)

TRACK.onmousedown = md => (
	TRACK.onmousemove = mm => {
		const _ = TRACK.getContext( '2d' )
		_.clearRect( 0, 0, TRACK.width, TRACK.height )
		_.strokeStyle = 'white'
		_.strokeRect( md.offsetX, md.offsetY, mm.offsetX - md.offsetX, mm.offsetY - md.offsetY )
	}
,	TRACK.onmouseleave = ml => (
		TRACK.onmousemove = TRACK.onmouseup = TRACK.onmouseleave = null
	,	TRACK.getContext( '2d' ).clearRect( 0, 0, TRACK.width, TRACK.height )
	)
,	TRACK.onmouseup = mu => {
		TRACK.onmouseleave()

		if ( md.offsetX !== mu.offsetX || md.offsetY !== mu.offsetY ) {
			const	rMin	= Number( R_MIN.value )
			const	rMax	= Number( R_MAX.value )
			const	iMin	= Number( I_MIN.value )
			const	iMax	= Number( I_MAX.value )
			const	rBias	= ( rMax - rMin ) / TRACK.clientWidth
			const	iBias	= ( iMax - iMin ) / TRACK.clientHeight

			const	[ xMin, xMax ] = md.offsetX < mu.offsetX ? [ md.offsetX, mu.offsetX ] : [ mu.offsetX, md.offsetX ]
			const	dY = CANVAS.height - 1 - md.offsetY
			const	uY = CANVAS.height - 1 - mu.offsetY
			const	[ yMin, yMax ] = dY < dY ? [ dY, uY ] : [ uY, dY ]
			R_MIN.value = rMin + xMin * rBias
			I_MIN.value = iMin + yMin * iBias
			R_MAX.value = rMin + xMax * rBias
			I_MAX.value = iMin + yMax * iBias
			DRAW.click()
		}
	}
)

DOWNLOAD.onclick = ev => {
	const a = document.createElement( 'a' )
	a.href = CANVAS.toDataURL()
	a.download = '_.png'
	a.click()
	TRACK.focus()
}

COLOR_MAPS.onchange = Draw

const	_R_MIN	= R_MIN.value
const	_R_MAX	= R_MAX.value
const	_I_MIN	= I_MIN.value
const	_I_MAX	= I_MAX.value
const	_NUM_I	= NUM_I.value
RESET.onclick = () => (
	R_MIN.value = _R_MIN
,	R_MAX.value = _R_MAX
,	I_MIN.value = _I_MIN
,	I_MAX.value = _I_MAX
,	NUM_I.value = _NUM_I
,	DRAW.click()
,	TRACK.focus()
)

window.onload = () => (
	DRAW.click()
,	TRACK.focus()
)

</script>