Viewing Program

Program Data

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

Title	Learning
ID	6154036703576064
Created	5 months ago, 1722623176991
Updated	3 months ago, 1726539973608
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning</title> <style> #gl-canvas { display: none; overflow:hidden; } canvas{ } { overflow:hidden; margin:0px; background: black; width:600px; } </style> </head> <body> <!--Canvases--> <canvas id = 'canvas' width = '600' height = '600'> </canvas> <canvas id = 'gl-canvas' width = '600' height = '600'> </canvas> <!--Console--> <div style="position: absolute; left: 10px; top: 10px; background-color: white;" id="consol"> </div> <!--Vertex--> <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> <!--Fragment--> <script id = 'fragment-shader' type = 'glsl'>#version 300 es // --- setup --- precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float iTime; out vec4 fragColor; vec2 iResolution = vec2(600,600.0); // --- functions --- void Rotate(inout vec3 vector, vec2 angle){ vector.yz = cos(angle.y)vector.yz+sin(angle.y)vec2(-1,1)vector.zy; vector.xz = cos(angle.x)vector.xz+sin(angle.x)vec2(-1,1)vector.zx; } //get more SDF's here: https://iquilezles.org/articles/distfunctions/ float sdSphere(vec3 p, float s){ return length(p)-s; } float sdRoundBox(vec3 p, vec3 b, float r){ vec3 q = abs(p) - b + r; return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0) - r; } float opSmoothUnion(float d1, float d2, float k){ float h = clamp( 0.5 + 0.5(d2-d1)/k, 0.0, 1.0 ); return mix( d2, d1, h ) - kh(1.0-h); } float opSmoothSub(float d1, float d2, float k){ float h = clamp( 0.5 - 0.5(d2+d1)/k, 0.0, 1.0 ); return mix( d2, -d1, h ) + kh(1.0-h); } float displace(vec3 p, float k){ return sin(kp.x)sin(kp.y)sin(kp.z); } vec3 twist(vec3 p, float k){ float c = cos(kp.y); float s = sin(kp.y); mat2 m = mat2(c,-s,s,c); vec3 q = vec3(mp.xz,p.y); return q; } float roundBoxTwist(in vec3 p, vec3 b, float r){ return sdRoundBox(twist(p, 5.0), b, r); } float sphereDisplace(in vec3 p, float s){ float d1 = sdSphere(p, s); float d2 = displace(p, 1.5); return d1+d2; } float sceneDetails(vec3 p){ //twisty floor float d1 = roundBoxTwist( p-vec3( 0.0, sin(iTime/100.0)2.0, 0.0 ), vec3(1.0), 0.1 ); float d2 = sdRoundBox( p-vec3(0.0, 0.5, 0.0), vec3(2.0, 0.25, 2.0), 0.05 ); float sdf = opSmoothSub(d1, d2, 1.0); sdf = min(sdf, sdRoundBox( p-vec3(0.0, 0.5, 0.0), vec3(2.0, 0.05, 2.0), 0.05 )); //sphere sdf = min(sdf, sdSphere( p-vec3(1.0, -0.5, 1.0), 0.5 )); //rectangle sdf = min(sdf, sdRoundBox( p-vec3(1.0, -0.5, -1.0), vec3(0.5), 0.05 )); //twisted rectangle sdf = min(sdf, roundBoxTwist( p-vec3(-1.0, -0.5, -1.0), vec3(0.5), 0.05 )); //displaced sphere sdf = min(sdf, sphereDisplace( p-vec3(-1.0, -0.5, 1.0), 0.5 )); return sdf; } vec3 calcNormal(in vec3 pos){ vec2 e = vec2(1.0,-1.0)0.00001; return normalize( e.xyysceneDetails(pos + e.xyy) + e.yyxsceneDetails(pos + e.yyx) + e.yxysceneDetails(pos + e.yxy) + e.xxxsceneDetails(pos + e.xxx) ); } // --- sky --- float hash(vec2 p){ vec3 p3 = fract(vec3(p.xyx) .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } float noise(in vec2 uv){ vec2 i = floor(uv); vec2 f = fract(uv); f = f * f * (3. - 2. * f); float lb = hash(i + vec2(0., 0.)); float rb = hash(i + vec2(1., 0.)); float lt = hash(i + vec2(0., 1.)); float rt = hash(i + vec2(1., 1.)); return mix(mix(lb, rb, f.x), mix(lt, rt, f.x), f.y); } #define OCTAVES 8 float fbm(in vec2 uv){ float value = 0.; float amplitude = .5; for (int i = 0; i < OCTAVES; i++){ value += noise(uv) * amplitude; amplitude = .5; uv = 2.; } return value; } vec3 sky(in vec3 ro, in vec3 rd){ rd = -rd; const float SC = 1e5; // Calculate sky plane float dist = (SC) / rd.y; vec2 p = (dist * rd).xz; p = 1.2 / SC; // from iq's shader, https://www.shadertoy.com/view/MdX3Rr vec3 lightDir = normalize(vec3(-.8, .15, -.3)); float sundot = clamp(dot(rd, lightDir), 0.0, 1.0); vec3 cloudCol = vec3(1.0); vec3 skyCol = vec3(.6, .71, .85) - rd.y .2 * vec3(1., .5, 1.) + .15 * .5; //vec3 skyCol = vec3(0.3,0.5,0.85) - rd.yrd.y0.5; skyCol = mix(skyCol, 0.85 * vec3(0.7,0.75,0.85), pow( 1.0 - max(rd.y, 0.0), 4.0)); // sun vec3 sun = 0.25 * vec3(1.0, 0.7, 0.4) * pow(sundot, 5.0); sun += 0.25 * vec3(1.0, 0.8, 0.6) * pow(sundot, 64.0); sun += 0.2 * vec3(1.0, 0.8, 0.6) * pow(sundot, 512.0); skyCol += sun; // clouds float t = iTime * 0.005; float den = fbm(vec2(p.x - t, p.y - t)); skyCol = mix( skyCol, cloudCol, smoothstep(.4, .8, den)); // horizon skyCol = mix(skyCol, 0.68 * vec3(.418, .394, .372), pow( 1.0 - max(rd.y, 0.0), 16.0)); return skyCol; } // --- main --- void main() { //vars float PI = 3.1415926; float cPos = ((/iTime+/drawx)/600.0)PI2.0; vec3 cameraPos = vec3(cos(cPos)3.0, -1.0, sin(cPos)3.0); vec4 ballMaterial = vec4(abs(sin(iTime/100.0)), abs(sin(iTime/200.0)), abs(sin(iTime/300.0)), 1.0); vec3 lightPos = vec3(0.0, 2.0, 0.0); float lightStrength = 0.8; //positioning vec2 uv = 1.0(gl_FragCoord.xy-iResolution.xy0.5)/-iResolution.x; vec3 ray = normalize(vec3(uv.x, uv.y, 0.5)); vec3 rayPos = cameraPos; vec2 cameraAngle = vec2(cPos+(PI/2.0), (drawy2.0+600.0)/600.0); Rotate(ray, cameraAngle); bool rayHit = false; //march the ray for(int i = 0; i < 150; i++){ float distToObject = sceneDetails(rayPos); rayPos += raydistToObject; if(distToObject < 0.001){ rayHit = true; break; } } vec3 ro = vec3(0.0, 0.0, 0.0); if(rayHit){ //ambient vec3 ambient = ballMaterial.rgb0.5; //lambert vec3 normal = calcNormal(rayPos); vec3 lambert = ballMaterial.rgbabs(dot(normalize(cameraPos-rayPos), normalize(normal))); //specular float light = abs(dot(normalize(lightPos-rayPos), normalize(reflect(ray, normal)))); light = pow(light, 16.0+ballMaterial.a128.0); vec3 specular = vec3(light)lightStrength; //final lighting vec3 finalColor = (ambient+lambert+specular)lightStrength; //reflection vec3 reflects = reflect(ray, normalize(normal)); finalColor = finalColormix(sky(ro, reflects), vec3(1.0), 1.0-ballMaterial.a(1.0/(dot(reflects, -ray)0.5+1.5))); //refraction? //finalize fragColor.rgb = finalColor; }else{ fragColor.rgb = sky(ro, ray); } fragColor.a = 1.0; } </script> <!--Main--> <script type = 'module'> document.getElementById("consol").style = "display:none"; const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var mouseX = 300, pmouseX = 0, mouseY = 300, 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; }); function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ document.getElementById("consol").innerHTML = gl.getShaderInfoLog(shader); document.getElementById("consol").style = "position: absolute; left: 10px; top: 10px; width:500px; height:350px; background-color: white;"; 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 positions = new Float32Array([-1, -1, -1, 3, 3, -1]); var mousex = 0; var mousey = 0; var now; var frameCount = 0; //gets rid of old animation frames for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } const posBuffer = gl.createBuffer(); //idk how I'm gonna remember this XD 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.useProgram(program); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); ctx.font = "30px monospace"; ctx.fillStyle = 'rgb(225,25,25)'; var pretime; function render() { pretime = performance.now(); window.requestAnimationFrame(render); frameCount++; gl.uniform1f(drawx, -mouseX); gl.uniform1f(drawy, -mouseY); gl.uniform1f(iTime, frameCount); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); } render(); } main(); </script> <!--KA Restart--> <script></script> </body> </html>
Folds	6,20,36,47,301,419
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJudhaL3Cgw
Votes	3
Spin-Offs	5
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"5928707400318976","title":"Here","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Cataclysmic Code 🌩‮
Author Name	TheResistor55
Author ID	kaid_820167475461480890635740
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1730159720769
Updated	2 months ago, 1730159720769
Source Deleted	unknown