Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	4D Julia Fractal Animation
ID	6460712435400704
Created	5 years ago, 1597170550879
Updated	4 years ago, 1607797156576
Code	<!DOCTYPE html> <html> <!-- Quaternions are four-dimensional numbers, composed of one real component and three imaginary components, commonly seen in the form a + bi + cj + dk. The identities are i^2 = j^2 = k^2 = ijk = -1 ij = -k jk = -i ki = -j With these identities, you can multiply two quaternions the same way you would multiply two complex numbers. The julia set is defines as the infinite series z[n + 1] = z[n] ^ 2 + c If the series converges for starting point z[0], then z[0] is inside the set. Also, the whole thing is less than 200 lines. It's amazing what functional code can do --> <head> <meta charset="utf-8"> <title>4D Julia Fractal Animation</title> <style type="text/css"> body { margin: 0; background-color: #333; overflow: hidden; } </style> </head> <body> <canvas id="output" width="600" height="600">Your browser does not support HTML5</canvas> <script type="shader-vertex" id="vertex"> attribute vec2 a_position; void main() { gl_Position = vec4(a_position.xy, 0.0, 1.0); } </script> <script type="shader-fragment" id="fragment"> precision lowp float; uniform float time; uniform vec2 scale; vec3 cameraPosition = 1.8 * vec3(cos(time), 0, sin(time)); mat3 cameraMatrix = mat3(cos(time+3.14/2.0), 0, -sin(time+3.14/2.0), 0, 1, 0, sin(time+3.14/2.0), 0, cos(time+3.14/2.0)); vec4 offset = vec4(cos(time), sin(time), cos(time * 2.0 + 3.14), sin(time * 1.61 + 3.14)) * 0.6; void qFold (inout vec4 a) { a = vec4(a.xa.x-a.ya.y-a.za.z-a.wa.w,2.0a.xa.y,2.0a.xa.z,2.0a.xa.w); } vec2 map (vec3 pos) { vec4 z = vec4(pos.xyz, 0.0); float md2 = 1.0; float radius2 = dot(z, z); float m = 0.0; for (int i = 0; i < 50; i ++) { qFold(z); z += offset; md2 = 4.0 radius2; radius2 = dot(z, z); m += 1.0; if (radius2 > 4.0) break; } return vec2(0.25 * sqrt(radius2 / md2) * log(radius2) - 0.001, m); } vec3 xDir = vec3(0.000001, 0, 0); vec3 yDir = vec3(0, 0.000001, 0); vec3 zDir = vec3(0, 0, 0.000001); vec3 surfaceNormal (vec3 pos) { vec3 normal = vec3( map(pos + xDir).x - map(pos - xDir).x, map(pos + yDir).x - map(pos - yDir).x, map(pos + zDir).x - map(pos - zDir).x ); return normalize(normal); } vec3 lightDirection = vec3(cos(time + 3.14), 0.0, sin(time + 3.14)); float hue = time / 20.0; vec3 tint = vec3(cos(time / 20.0 * 3.1415 * 2.0) + 1.0, cos(time / 20.0 * 3.1415 * 2.0 + 2.0 * 3.1415 / 3.0) + 1.0, cos(time / 20.0 * 3.1415 * 2.0 + 4.0 * 3.1415 / 3.0) + 1.0) / 2.0; vec3 trace (vec3 origin, vec3 direction) { float totalDistance = 0.0; for (float steps = 0.0; steps < 100.0; steps ++) { vec3 pos = origin + direction * totalDistance; vec2 pinfo = map(pos); float distance = pinfo.x; totalDistance += distance; if (dot(pos, pos) > 5.0) break; if (distance < 0.002) { vec3 normal = surfaceNormal(pos); float diffuse = max(-dot(normal, lightDirection), 0.0); float specular = -dot(reflect(direction, normal), lightDirection); specular = max(pow(specular, 5.0), 0.0); float shade = diffuse * 0.7 + specular * 0.3; float h = sin(pinfo.y/1.0)+0.5; tint = vec3(cos(h * 3.1415 * 2.0) + 1.0, cos(h * 3.1415 * 2.0 + 2.0 * 3.1415 / 3.0) + 1.0, cos(h * 3.1415 * 2.0 + 4.0 * 3.1415 / 3.0) + 1.0) / 2.0; return shade * tint; } } return vec3(0.1); } void main () { gl_FragColor = vec4(trace(cameraPosition, vec3(1.0 - scale * gl_FragCoord.xy, 1.0) * cameraMatrix), 1.0); } </script> <script type="text/javascript"> var program, canvas, gl, ctx; function ele(id) { return document.getElementById(id); } function initContext() { canvas = ele("output"); canvas.requestPointerLock = canvas.requestPointerLock \|\| canvas.mozRequestPointerLock; var glArgs = { preserveDrawingBuffer: true, failIfMajorPerformanceCaveat: true }; gl = canvas.getContext("webgl", glArgs) \|\| canvas.getContext("experimental-webgl", glArgs); if (!gl) { alert("Your browser does not supprt WebGL."); } } function initTriBuffer(data) { var triBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW); } function initProgram(vertID, fragID) { var fs = gl.createShader(gl.FRAGMENT_SHADER); var vs = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(fs, ele(fragID).text); gl.shaderSource(vs, ele(vertID).text); gl.compileShader(fs); gl.compileShader(vs); program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); gl.useProgram(program); } function initGL() { initContext(); gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); initTriBuffer([-1, -1, +1, -1, -1, +1, -1, +1, +1, -1, +1, +1]); } function setUniform(id, type, d1, d2, d3, d4) { var loc = gl.getUniformLocation(program, id); if (type[0] === "1") { gl["uniform" + type](loc, d1); } else if (type[0] === "2") { gl["uniform" + type](loc, d1, d2); } else if (type[0] === "3") { gl["uniform" + type](loc, d1, d2, d3); } else { gl["uniform" + type](loc, d1, d2, d3, d4); } } function setUniformMatrix(id, mat3) { var loc = gl.getUniformLocation(program, id); gl.uniformMatrix3fv(loc, false, mat3); } var time = 0.0, fps = 60, rate = 1000 / fps, setupStage = -1; function setup() { if (setupStage === -1) { initContext(); } else if (setupStage === 0) { gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); initTriBuffer([-1, -1, +1, -1, -1, +1, -1, +1, +1, -1, +1, +1]); } else if (setupStage === 1) { initProgram("vertex", "fragment"); } else if (setupStage === 2) { var positionLocation = gl.getAttribLocation(program, "a_position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); } else if (setupStage === 3) { setUniform("scale", "2f", 2.0 / gl.drawingBufferWidth, 2.0 / gl.drawingBufferHeight); } } function draw() { if (setupStage < 5) { setup(); setupStage ++; } else { setUniform("time", "1f", time / 2000); gl.drawArrays(gl.TRIANGLES, 0, 6); time += rate; } window.setTimeout(function() { window.requestAnimationFrame(draw);}, rate); } window.addEventListener("load", draw, false); </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNWtvf-8Cww
Votes	275
Spin-Offs	28
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	xacer
Author Name	xacer
Author ID	kaid_936620259368561719366955
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739458113379
Updated	4 months ago, 1744845312482
Source Deleted	unknown