Viewing Program

Program Data

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

Title	ThreadBrot Viewer
ID	6143217386307584
Created	4 months ago, 1724804548221
Updated	4 months ago, 1724811951211
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ThreadBrot Viewer</title> <style> canvas{ width:600px; image-rendering: pixelated; } { margin:0px; overflow:hidden; } #canvas2{ position:absolute; top:0px; } </style> </head> <body> <canvas id = 'canvas' width = '600' height = '600'></canvas> <canvas id = 'gl-canvas' width = '600' height = '600' style="display:none;"></canvas> <canvas id = 'canvas2' width = '1200' height = '1200'></canvas> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Platypi:ital,wght@0,300..800;1,300..800&family=Press+Start+2P&display=swap" rel="stylesheet"> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <script> </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision highp float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float res; uniform float iTime; float addend(float zRe,float zIm){ return 1.0-abs(sin(5.0atan(zIm,zRe))); } vec3 IterateMandelbrot(vec2 c) { const float B = 512.0; const float n_skip = 2.0; float n = 0.0; vec2 z = c; float orbitToReal = 0.0; float prevOrbitToReal = 0.0; for( int i=0; i<900; i++ ) { z = vec2( z.xz.x - z.yz.y, (2.0z.xz.y) ) + c; // z = z² + c if (n>n_skip) { orbitToReal += addend(z.x,z.y); } if( dot(z,z)>(BB) ) break; prevOrbitToReal = orbitToReal; n += 1.0; } //float sn = n - log(log(length(z))/log(B))/log(2.0); // smooth iteration count if(n<900.0){ orbitToReal /= n-n_skip; //average of the skipped orbit prevOrbitToReal /= n-n_skip-1.0; //average of the skipped orbit without the last float u = n+1.0+(log(2.0log(B)/log(z.xz.x+z.yz.y))/log(2.0)); float d = u-float(int(u)); //its fractional part is the interpolation coefficient float average = dorbitToReal+(1.0-d)prevOrbitToReal; //linear interpolate return vec3(u,average,0.0); // return dot(z,z)/10.0; }else{ return vec3(0.0); // equivalent optimized smooth iteration count } } float sqrt2(float n){ if(n>0.0){ return sqrt(n); }else{ return -sqrt(-n); } } out vec4 fragColor; void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iResolution = vec2(res); vec2 iMouse = (vec2(drawx,drawy)+(0.5iResolution))/iResolution.xy; vec2 res = iResolution.xy; //View resolution vec2 uv = -1.0(gl_FragCoord.xy-iResolution.xy0.5)/-iResolution.x; vec3 background = vec3(0.1); uv=2.3; uv.x-=0.5; vec3 li=vec3(-iMouse.x2.3-0.5,iMouse.y2.3,1.0); float eps=0.0001; float sc=sqrt((iTime+200.0)/2.0); vec3 t=IterateMandelbrot(uv/(pow(1.002,iTime+2000.0))100.0+vec2(drawx,drawy)); vec3 dir=vec3(t.x); float l=log(2.0); float a=1.0l; float b=1.0/(3.0sqrt(2.0))l; float c=1.0/(7.0pow(3.0,1.0/8.0))l; float x=log(log(t.x))/0.05+18.0; fragColor.rgb = (vec3((1.0-cos(ax))/2.0,(1.0-cos(bx))/2.0,(1.0-cos(cx))/2.0)0.4+vec3(0.01))+max(1.0-log(t.y2.0+0.9)2.0,-0.6)+(log(t.x)/10.0); fragColor.a=1.0; } </script> <script type = 'module'> const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); const canvas2 = document.getElementById('canvas2'), ctx2 = canvas2.getContext('2d'); var mouseX=0,pmouseX=0,mouseY=0,pmouseY=0,clicked=false,key={}; window.addEventListener("mouseover", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); window.addEventListener("mousemove", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); var type; var click=false; var clickToggle=false; var can=true; var setThing=false; var xs=0; var ys=0; var frameCount=10; window.addEventListener("paste", (event) => { event.preventDefault(); let paste = (event.clipboardData \|\| window.clipboardData).getData("text"); var dat=JSON.parse(paste); xs=-dat.x; ys=-dat.y; frameCount=dat.z/6; }); window.addEventListener('mousedown',event =>{ clicked = true; if(can){ clickToggle=true; can=false; } }); window.addEventListener('mouseup',event =>{ clicked = false; can=true; }); window.addEventListener("keydown", (event) => { key[event.key]=true; }); window.addEventListener("keyup", (event) => { delete key[event.key]; }); addEventListener('click', (event) => { click=true; }); //} function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(shader)); } return shader; } function createProgram(gl, vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); return program; } function main() { const glCanvas = document.getElementById('gl-canvas'), gl = glCanvas.getContext('webgl2'); const vertexSource = document.getElementById('vertex-shader').textContent, fragmentSource = document.getElementById('fragment-shader').textContent; const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource), fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); const program = createProgram(gl, vertexShader, fragmentShader); const aPosition = gl.getAttribLocation(program, 'aPosition') const drawx = gl.getUniformLocation(program, "drawx"); const drawy = gl.getUniformLocation(program, "drawy"); const iTime = gl.getUniformLocation(program, "iTime"); const res = gl.getUniformLocation(program, "res"); const iChannel0 = gl.getUniformLocation(program,"iChannel0"); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); let texture0 = gl.createTexture(); var mousex=1200; var mousey=1200; var now; var then = performance.now(); var fps = 100; var delta; var interval = 1000 / fps; var dram=0; for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } const posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.viewport(0, 0, 600,600); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); var scale=window.devicePixelRatio; var windowSize=300; var canMove=true; var dra=true; gl.uniform1f(res, windowSizescale); function render() { window.requestAnimationFrame(render); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); dram++; gl.uniform1f(drawx, -xs); gl.uniform1f(drawy, -ys); gl.uniform1f(iTime, frameCount6); if(dram%20==0){ gl.uniform1f(res, windowSizescale); gl.viewport(0, 0, windowSizescale,windowSizescale); canvas.width=windowSizescale; canvas.height=windowSizescale; glCanvas.width=windowSizescale; glCanvas.height=windowSizescale; } gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); canMove=true; ctx2.clearRect(0,0,1200,1200); ctx2.font="54px Platypi"; ctx2.lineWidth=4; ctx2.fillStyle="rgb(255,0,0)" ctx2.strokeStyle="rgb(150,0,0)" ctx2.strokeText("ThreadBrot!",20,50); ctx2.fillText("ThreadBrot!",20,50); if(key.h){ dra=false; } if(dra){ ctx2.strokeText("Window Resolution: "+(windowSize) + " UP DOWN",20,120); if(mouseX>275+65&&mouseX<320+65&&mouseY>30&&mouseY<65){ ctx2.fillText("Window Resolution: "+(windowSize) + " UP ",20,120); if(clicked){ canMove=false; } if(clickToggle){ windowSize=2.0; } } if(mouseX>330+65&&mouseX<410+65&&mouseY>30&&mouseY<65){ ctx2.fillText("Window Resolution: "+(windowSize) + " DOWN ",20,120); if(clicked){ canMove=false; } if(clickToggle){ windowSize/=2.0; } } ctx2.strokeText("Copy Position (clipboard)",20,190); if(mouseX<330&&mouseY>30+35&&mouseY<65+35){ ctx2.fillText("Copy Position (clipboard)",20,190); if(clicked){ canMove=false; } if(clickToggle){ var x = document[0 \|\| "createElement"]("textarea"); document.body.appendChild(x); x.value = "{\"x\":"+(-xs)+",\"y\":"+(-ys)+",\"z\":"+(frameCount6)+"}"; x.select(); document.execCommand("copy"); } } ctx2.fillText("Window Resolution: "+(windowSize),20,120); ctx2.strokeText("h: Hide Text",20,260); ctx2.strokeText("Ctrl+v to paste copied data",20,330); ctx2.fillText("h: Hide Text",20,260); ctx2.fillText("Ctrl+v to paste copied data",20,330); } if(clicked&&canMove){ frameCount+=1; xs+=(mouseX-300)/(-60.0Math.pow(1.002,frameCount6+2000.0))1; ys+=(mouseY-300)/(60.0Math.pow(1.002,frameCount6+2000.0))*1; } clickToggle=false; } } render(); } main(); </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNuQlOf0Cgw
Votes	12
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Bearkirb314🐻‍❄️
Author Name	BearKirb314
Author ID	kaid_375460112550893828689953
Author Profile Access	PUBLIC

Archive Data

Added	4 months ago, 1724812768671
Updated	4 months ago, 1724812768671
Source Deleted	unknown