Viewing Program

Program Data

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

Title	Mandelbox Explore v2
ID	6189251427778560
Created	5 years ago, 1607529744786
Updated	3 years ago, 1661985384596
Code	<!DOCTYPE html> <html> <!-- A Mandelbox is a fractal made by repeatedly applying box folds and sphere folds. Changes to Mandelbox Explore: + Better performance + Colored via orbit traps + Glow + Stars + Restricted movement + Ambient occlusion Instructions: W A S D to move Move the mouse to turn the camera Change DELAG to 1 below if it's lagging \|\| \|\| _\|\|_ \ / \/ --> <script id="top-glsl" type="notjs"> #define DELAG 0 </script> <head> <meta charset="utf-8"> <title>Mandelbox Explore v2</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } body { background-color: #333; overflow: hidden; } canvas { position: absolute; } </style> </head> <body> <canvas id="output" width="600" height="600"></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 highp float; uniform float time; uniform vec2 scale; uniform vec3 cameraPosition; uniform mat3 cameraMatrix; const int iterations = 20; float Scale = 2.26; float foldingLimit = 1.50; float fixedRadius2 = 3.0; float minRadius2 = 0.0; void boxFold(inout vec3 z, inout float dz) { z = clamp(z, -foldingLimit, foldingLimit) * 2.0 - z; } void sphereFold(inout vec3 z, inout float dz) { float r2 = dot(z,z); if (r2 < minRadius2) { float temp = (fixedRadius2/minRadius2); z = temp; dz= temp; } else if (r2<fixedRadius2) { float temp =(fixedRadius2/r2); z = temp; dz= temp; } } vec2 distanceEstimator(vec3 z) { vec3 offset = z; float mz = 100.0; float dr = 1.0; for (int n = 0; n < 10; n ++) { boxFold(z, dr); sphereFold(z, dr); mz = min(mz, length(z)); z = z * Scale + offset; dr = dr * abs(Scale) + 1.0; } float distance_output = abs(length(z)-2.0) / abs(dr); float scaled = distance_output * (1.0 - exp(distance_output * -11.7)); return vec2(scaled, mz); } vec3 xDir = vec3(0.001, 0, 0); vec3 yDir = vec3(0, 0.001, 0); vec3 zDir = vec3(0, 0, 0.001); vec3 lightDirection = normalize(vec3(cos(time/10.0), sin(time/10.0), 0.0)); // https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x34.0)+1.0)x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } float snoise(vec3 v) { const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); vec3 x1 = x0 - i1 + C.xxx; vec3 x2 = x0 - i2 + C.yyy; vec3 x3 = x0 - D.yyy; // Permutations i = mod289(i); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients: 7x7 points over a square, mapped onto an octahedron. // The ring size 1717 = 289 is close to a multiple of 49 (496 = 294) float n_ = 0.142857142857; // 1.0/7.0 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,77) vec4 x_ = floor(j ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ ns.x + ns.yyyy; vec4 y = y_ ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)2.0 + 1.0; vec4 s1 = floor(b1)2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzywsh.xxyy ; vec4 a1 = b1.xzyw + s1.xzywsh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 = norm.x; p1 = norm.y; p2 = norm.z; p3 = norm.w; // Mix final noise value vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 105.0 * dot( mm, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } vec3 skyBox (vec3 rd) { float n = 0.0; #if DELAG==0 n = snoise(rd 40.0) - 0.1; n = max(n, 0.0); n = n; n = n; #endif return vec3(n); } #define PI 3.1415926 #define PI2_3 2.0943951 #define PI4_3 4.1887902 vec3 surfaceNormal (vec3 pos) { vec3 normal = vec3( distanceEstimator(pos + xDir).x - distanceEstimator(pos - xDir).x, distanceEstimator(pos + yDir).x - distanceEstimator(pos - yDir).x, distanceEstimator(pos + zDir).x - distanceEstimator(pos - zDir).x ); return normalize(normal); } vec3 hue2rgb (float hue) { return 0.5 + 0.5 * vec3( cos(hue), cos(hue + PI2_3), cos(hue + PI4_3)); } #if DELAG==0 const int numSteps = 200; const float EPSILON = 0.003; #endif #if DELAG==1 const int numSteps = 150; const float EPSILON = 0.01; #endif vec3 trace (vec3 origin, vec3 direction) { float totalDistance = 0.0; float md = 100.0; for (int steps = 0; steps < numSteps; steps ++) { vec3 pos = origin + direction * totalDistance; vec2 deInfo = distanceEstimator(pos); float distance = deInfo.x; md = min(md, distance); totalDistance += distance; if (distance < EPSILON) { vec3 normal = surfaceNormal(pos); float diffuse = max(dot(normal, lightDirection), 0.0); float specular = dot(reflect(direction, normal), lightDirection); specular = pow(max(specular, 0.0), 16.0); float occlusion = 0.5 + 0.5 * float(steps) / 150.0; float ambient = 1.5; float shade = 0.2+0.7 * diffuse + 0.2 * specular + 0.1; return shade * hue2rgb(deInfo.y * PI) * occlusion * ambient; } if (dot(pos, pos) > 400.0) break; } md = exp(-md20.0); return skyBox(direction) + md vec3(1.0); } void main () { // Pixel locaiton vec2 uv = 1.0 - scale * gl_FragCoord.xy; vec3 ray = normalize(vec3(uv.xy, 1.0)) * cameraMatrix; vec3 col = trace(cameraPosition, ray); gl_FragColor = vec4(col.rgb, 1.0); } </script> <script id="xgl.js" type="text/javascript"> var delag = function(f) { delag.stripDetection = delag.stripDetection \|\| function(s) { var outLines = []; var lines = s.split("\n"); for (var i = 0; i < lines.length; i++) { if (!lines[i].includes("KAInfiniteLoopProtect")) { outLines.push(lines[i]); } } return outLines.join("\n"); }; var str = delag.stripDetection(f.toString()); /* Copied from Element118 delag() function: / return Object.constructor('return (function(__env__) {return ' + str + ';});')()(this); }; delag(function () { var author = "xacer", verson = "1.0.0"; var globalWidth = 600, globalHeight = 600; var program, canvas, gl, ctx; function ele(id) { return document.getElementById(id); } function etext(id) { return ele(id).text; } 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("WebGL not supported. Please try a different browser"); } } 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, etext("top-glsl")+etext(fragID)); gl.shaderSource(vs, etext(vertID)); 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); } function setTexture2D(id, n, textureObject) { gl.activeTexture(gl.TEXTURE0 + n); var tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, textureObject.width, textureObject.height, 0, gl.RGB, gl.UNSIGNED_BYTE, textureObject.data); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); setUniform(id, "1i", n); } function clearScreen(r, g, b) { gl.clearColor(r, g, b, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); } function initVertexArray() { var positionLocation = gl.getAttribLocation(program, "a_position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); } function drawScreen() { gl.drawArrays(gl.TRIANGLES, 0, 6); } function alpha(col) { return col >> 24 & 255; } function red(col) { return col >> 16 & 255; } function green(col) { return col >> 8 & 255; } function blue(col) { return col & 255; } function color(r, g, b, a) { a = a \|\| 255; return (a << 24) \| (r << 16) \| (g << 8) \| (b); } function map(value, lMin, lMax, nMin, nMax) { return (value - lMin) / (lMax - lMin) (nMax - nMin) + nMin; } var vec3 = { new: function (x, y, z) { if (arguments.length === 0) { return [0, 0, 0]; } if (arguments.length === 1) { return [x, x, x]; } return [x, y, z]; }, copy: function (vec) { return [vec[0], vec[1], vec[2]]; }, add: function (a, b, out) { if (out) { out[0] = a[0] + b[0]; out[1] = a[1] + b[1]; out[2] = a[2] + b[2]; return out; } return [a[0] + b[0], a[1] + b[1], a[2] + b[2]]; }, sub: function (a, b, out) { if (out) { out[0] = a[0] - b[0]; out[1] = a[1] - b[1]; out[2] = a[2] - b[2]; return out; } return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; }, scl: function (u, f, out) { if (out) { out[0] = u[0] * f; out[1] = u[1] * f; out[2] = u[2] * f; return out; } return [u[0] * f, u[1] * f, u[2] * f]; }, dot: function (a, b) { return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; }, cross: function (u, v, out) { if (!out) { out = this.new(); } out[0] = u[1] * v[2] - v[1] * u[2]; out[1] = u[2] * v[0] - v[2] * u[0]; out[2] = u[0] * v[1] - v[0] * u[1]; return out; }, mag: function (a) { return Math.sqrt(this.dot(a, a)); }, reflect: function (vec, axis, out) { if (!out) { out = this.new(); } var dp = 2 * this.dot(vec, axis); out = this.sub(vec, this.scl(axis, dp)); return out; }, }; var mat3 = { new: function () { return [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ]; }, identity: function () { return [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ]; }, mult: function (a, b) { var res = this.new(); for (var i = 0; i < 3; i ++) { for (var j = 0; j < 9; j += 3) { res[i + j] = a[i] * b[j] + a[i + 3] * b[1 + j] + a[i + 6] * b[2 + j]; } } return res; }, transform: function (mat, vec) { var x = vec[0], y = vec[1], z = vec[2]; return vec3.new( mat[0] * x + mat[3] * y + mat[6] * z, mat[1] * x + mat[4] * y + mat[7] * z, mat[2] * x + mat[5] * y + mat[8] * z ); }, rotateAroundAxis: function (u, theta) { // https://en.wikipedia.org/wiki/Rotation_matrix#Rotation_matrix_from_axis_and_angle var ct = Math.cos(theta); var st = Math.sin(theta); var ict = 1 - ct; var ux = u[0]; var uy = u[1]; var uz = u[2]; var ux2 = u[0] * u[0]; var uy2 = u[1] * u[1]; var uz2 = u[2] * u[2]; var R = this.new(); R[0] = ct + ux2 * ict; R[1] = ux * uy * ict - uz * st; R[2] = ux * uz * ict + uy * st; R[3] = uy * ux * ict + uz * st; R[4] = ct + uy2 * ict; R[5] = uy * uz * ict - ux * st; R[6] = uz * ux * ict - uy * st; R[7] = uz * uy * ict + ux * st; R[8] = ct + uz2 * ict; return R; }, rotateXY: function (theta) { var res = this.identity(); var ct = Math.cos(theta); var st = Math.sin(theta); res[0] = +ct; res[1] = +st; res[3] = -st; res[4] = +ct; return res; }, rotateYZ: function (theta) { var res = this.identity(); var ct = Math.cos(theta); var st = Math.sin(theta); res[4] = +ct; res[5] = +st; res[7] = -st; res[8] = +ct; return res; }, rotateXZ: function (theta) { var res = this.identity(); var ct = Math.cos(theta); var st = Math.sin(theta); res[0] = +ct; res[2] = +st; res[6] = -st; res[8] = +ct; return res; }, getColumn: function (mat, n) { return vec3.new(mat[n], mat[n + 3], mat[n + 6]); }, }; var time = 0.0, fps = 60, rate = 1000 / fps; var mouseX = 300, mouseY = 300, pmouseX = mouseX, pmouseY = mouseY; var mouseLocked = false; var keys = {}; var cameraPos = vec3.new(0.0, 0.0, -9.0); var cameraMatrix = mat3.identity(); function rotateCamera (mode, theta) { var rotationMatrix = mat3["rotate" + mode.toUpperCase()](theta); var result = mat3.mult(cameraMatrix, rotationMatrix); for (var i = 0; i < result.length; i ++) { cameraMatrix[i] = result[i]; } } function rotateCameraAroundAxis (axis, theta) { var rotationMatrix = mat3.rotateAroundAxis(axis, theta); var result = mat3.mult(cameraMatrix, rotationMatrix); for (var i = 0; i < result.length; i ++) { cameraMatrix[i] = result[i]; } } function normalizeCamera () { var xAxis = vec3.new(cameraMatrix[0], cameraMatrix[3], cameraMatrix[6]); var yAxis = vec3.new(cameraMatrix[1], cameraMatrix[4], cameraMatrix[7]); var zAxis = vec3.new(cameraMatrix[2], cameraMatrix[5], cameraMatrix[8]); var xScl = 1 / vec3.mag(xAxis); var yScl = 1 / vec3.mag(yAxis); var zScl = 1 / vec3.mag(zAxis); cameraMatrix[0] = xScl; cameraMatrix[3] = xScl; cameraMatrix[6] = xScl; cameraMatrix[1] = yScl; cameraMatrix[4] = yScl; cameraMatrix[7] = yScl; cameraMatrix[2] = zScl; cameraMatrix[5] = zScl; cameraMatrix[8] = zScl; } function rotateCameraX (theta) { var xAxis = [cameraMatrix[0], cameraMatrix[3], cameraMatrix[6]]; var axisMag = vec3.mag(xAxis); xAxis = vec3.scl(xAxis, 1 / axisMag); rotateCameraAroundAxis(xAxis, theta); } function rotateCameraY (theta) { var yAxis = [cameraMatrix[1], cameraMatrix[4], cameraMatrix[7]]; var axisMag = vec3.mag(yAxis); yAxis = vec3.scl(yAxis, 1 / axisMag); rotateCameraAroundAxis(yAxis, theta); } function rotateCameraZ (theta) { var zAxis = [cameraMatrix[2], cameraMatrix[5], cameraMatrix[8]]; var axisMag = vec3.mag(zAxis); zAxis = vec3.scl(zAxis, 1 / axisMag); rotateCameraAroundAxis(zAxis, theta); } function setup() { initGL(); initProgram("vertex", "fragment"); initVertexArray(); setUniform("scale", "2f", 2.0 / gl.drawingBufferWidth, 2.0 / gl.drawingBufferHeight); window.requestAnimationFrame(draw); } function moveCamera() { var pAdd = vec3.new(0.0); if (keys["W"]) { var dir = mat3.getColumn(cameraMatrix, 2); pAdd = vec3.add(pAdd, vec3.scl(dir, 0.05)); } if (keys["A"]) { var dir = mat3.getColumn(cameraMatrix, 0); pAdd = vec3.add(pAdd, vec3.scl(dir, 0.05)); } if (keys["D"]) { var dir = mat3.getColumn(cameraMatrix, 0); pAdd = vec3.add(pAdd, vec3.scl(dir, -0.05)); } if (keys["S"]) { var dir = mat3.getColumn(cameraMatrix, 2); pAdd = vec3.add(pAdd, vec3.scl(dir, -0.05)); } if (keys[" "]) { var dir = mat3.getColumn(cameraMatrix, 1); pAdd = vec3.add(pAdd, vec3.scl(dir, -0.05)); } if (keys["C"]) { var dir = mat3.getColumn(cameraMatrix, 1); pAdd = vec3.add(pAdd, vec3.scl(dir, 0.05)); } cameraPos = vec3.add(cameraPos, pAdd); if (vec3.dot(cameraPos, cameraPos) >= 19 19) { var mg = vec3.mag(cameraPos); cameraPos = vec3.scl(cameraPos, 19.0 / mg); } } function drawScene() { normalizeCamera(); clearScreen(0.10, 0.50, 0.64); setUniform("time", "1f", time / 1000); setUniform("xyRot", "1f", -(mouseX - 300) / 300); setUniform("zRot", "1f", (mouseY - 300) / 300); setUniform("cameraPosition", "3fv", cameraPos); setUniformMatrix("cameraMatrix", cameraMatrix); moveCamera(); rotateCameraX(-(mouseY)/300); rotateCameraY(-(mouseX)/300); drawScreen(); mouseX = 0.5; mouseY = 0.5; } function draw() { drawScene(); time += rate; window.setTimeout(function() { window.requestAnimationFrame(draw); }, rate); } window.addEventListener("load", setup, false); window.addEventListener("mousemove", function(e) { mouseX = e.movementX; mouseY = e.movementY; }, true); window.addEventListener("mousedown", function (e) { if (canvas.requestPointerLock) { canvas.requestPointerLock(); mouseLocked = true; } else if (canvas.mozRequestPointerLock) { canvas.mozRequestPointerLock(); mouseLocked = true; } else if (canvas.webkitRequestPointerLock) { canvas.webkitRequestPointerLock(); mouseLocked = true; } }); window.addEventListener("keydown", function(e) { var key = String.fromCharCode(e.keyCode).toUpperCase(); keys[key] = true; }); window.addEventListener("keyup", function (e) { var key = String.fromCharCode(e.keyCode).toUpperCase(); keys[key] = false; }); document.addEventListener("drag", function (e) { alert('h'); }); }) (); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ2m9qL_Cgw
Votes	217
Spin-Offs	8
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	10 months ago, 1739454563634
Updated	10 months ago, 1739454572181
Source Deleted	unknown