Viewing Program

Program Data

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

Title	Friendly Reminder To Touch Grass 2 (Geometric Boogaloo)
ID	6472395868782592
Created	8 months ago, 1713752569451
Updated	6 months ago, 1718333137286
Code	<!DOCTYPE html> <html> <title>Friendly Reminder To Touch Grass 2 (Geometric Boogaloo)</title> <canvas id = "m" width = '600' height = '600'></canvas> <canvas width = "600" height = "600" id = "my_Canvas"></canvas> <canvas width = "600" height = "600" id = "grnd"></canvas> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <img id="latest" src="https://www.khanacademy.org/computer-programming/spin-off-of-its-menging-time-so-i-will-proceed-to-menger-all-over-the-place/4832115108265984/6174119280951296.png"> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"> <style> { margin:0px; overflow:hidden; width:600px; } </style> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec3 coordinates; in vec3 normal; uniform float iTime; uniform vec2 cameraAngle; uniform vec3 playerPositio; out vec3 pos; vec2 random2(vec2 st){ st = vec2( dot(st,vec2(127.1,311.7)), dot(st,vec2(269.5,183.3)) ); return -1.0 + 2.0fract(sin(st)43758.5453123); } // Gradient Noise by Inigo Quilez - iq/2013 // https://www.shadertoy.com/view/XdXGW8 float noise(vec2 st) { vec2 i = floor(st); vec2 f = fract(st); vec2 u = ff(3.0-2.0f); return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x), mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y); } vec2 field(vec2 st){ return vec2(noise(st+vec2(5940.0,12423.0)),noise(st)); } void CamRotate(inout vec3 vector, vec2 angle) { angle.y=-1.0; vector.xz = cos(angle.x) vector.xz + sin(angle.x) * vec2(-1, 1) * vector.zx; vector.yz = cos(angle.y) * vector.yz + sin(angle.y) * vec2(-1, 1) * vector.zy; } 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; } float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } out vec3 surfaceCoords; out vec3 pp; out vec3 no; out vec3 col; void main() { vec3 playerPosition=playerPositio; playerPosition.y=-noise((playerPositio.xz)/10.0)4.0+1.5; float fov=1.0; vec3 coords=coordinates; vec3 norma=vec3(0.0,0.0,1.0); col=vec3(0.2,0.6,0.1); col=mix(col,vec3(0.0),clamp(coords.y+0.5,0.0,1.0)); col=mix(col,vec3(0.9,0.9,0.1),clamp(-coords.y2.0-0.8,0.0,1.0)); vec2 win=field(normal.xy/20.0+iTime/200.0)1.0+vec2(0.5,0.5); vec2 off=vec2(hash(normal.xy2455.4),hash(normal.xy265.4)); if(coords.y<0.01){ coords.xz=(1.0+coords.y/1.0); coords.y/=(0.9+hash(normal.xy10.0)0.8); coords.x-=(coords.ycoords.y)(win.x0.3); coords.z-=(coords.ycoords.y)(win.y0.3); Rotate(coords,vec2(noise(vec2(normal.x134.4,normal.y456.3))342134.4,0.0)); Rotate(norma,vec2(noise(vec2(normal.x134.4,normal.y456.3))342134.4,0.0)); norma.y-=0.1; norma.x-=(coords.ycoords.y)(win.x10.0); norma.z-=(coords.ycoords.y)(win.y10.0); coords.x-=(coords.ycoords.ycoords.y)(win.x0.8); coords.z-=(coords.ycoords.ycoords.y)(win.y0.8); coords.x-=off.x/3.5; coords.z-=off.y/3.5; coords.x-=mod(normal.x/5.0-playerPosition.x,39.8)-20.0; coords.z-=mod(normal.y/5.0-playerPosition.z,39.8)-20.0; }else{ norma=vec3(0.0,1.0,0.0); coords.x-=mod(normal.x/5.0-playerPosition.x,39.8)-20.0; coords.z-=mod(normal.y/5.0-playerPosition.z,39.8)-20.0; float n1=noise((coords.xz-playerPosition.xz)/10.0)4.0; float nx=noise((coords.xz-playerPosition.xz+vec2(0.01,0.0))/10.0)4.0; float ny=noise((coords.xz-playerPosition.xz+vec2(0.0,0.01))/10.0)4.0; norma.xz+=vec2(n1-nx,n1-ny)1000.0; } coords.y+=noise((coords.xz-playerPosition.xz)/10.0)4.0; //} vec3 pos2 = coords; pos=coords; pos.y+=playerPosition.y; pos.xy+=vec2(0.0,-0.5); CamRotate(pos,cameraAngle); pp=playerPosition; float silly=-0.1+pos.zfov; pos=-1.0; silly=silly1.5; no=normalize(norma); surfaceCoords = coords; gl_Position = vec4(pos,silly); } </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision mediump float; in vec3 surfaceCoords; in vec3 pp; in vec3 no; in vec3 col; uniform float iTime; uniform vec2 cameraAngle; uniform vec3 playerPosition; vec2 random2(vec2 st){ st = vec2( dot(st,vec2(127.1,311.7)), dot(st,vec2(269.5,183.3)) ); return -1.0 + 2.0fract(sin(st)43758.5453123); } // Gradient Noise by Inigo Quilez - iq/2013 // https://www.shadertoy.com/view/XdXGW8 float noise(vec2 st) { vec2 i = floor(st); vec2 f = fract(st); vec2 u = ff(3.0-2.0f); return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ), dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x), mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ), dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y); } out vec4 FragColor; float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) 43758.5453); } void main() { if(surfaceCoords.y-noise((surfaceCoords.xz-pp.xz)/10.0)4.0<0.0){ vec3 triNormal=no; vec3 lightCoords=pp; vec3 triangleColor=col; vec3 hehe = -normalize(surfaceCoords+pp); float li=abs(dot(hehe,-normalize(triNormal)))0.5+0.5; float spe=abs(dot(reflect(hehe,normalize(triNormal)),-normalize(surfaceCoords))); spe=spe; spe=spe; spe=spe; spe=1.0; FragColor = vec4((triangleColorli+spe/2.0),1.0); }else{ vec3 triNormal=no; vec3 lightCoords=ppvec3(0.0,1.0,0.0); vec3 hehe = -normalize(surfaceCoords+lightCoords); float li=abs(dot(hehe,-normalize(triNormal)))0.5+0.5; FragColor = vec4(vec3(0.349,0.227,0.054)li,1.0); } FragColor.rgb = mix(FragColor.rgb,vec3(0.5,0.7,1.0),min(max(pow(distance(surfaceCoords,vec3(0.0,-pp.y,0.0)),2.0)-400.0,0.0)/100.0,1.0)); //vec3(0.349,0.227,0.054) //clamp(pow(distance(surfaceCoords,vec3(0.0,-pp.y,0.0)),2.0)/400.0,0.0,1.0)) } </script> <script type="module"> console.clear(); var mouseX=300,pmouseX=0,mouseY=300,pmouseY=0,clicked=false,key={}; var click=false; var clickToggle=false; function getPointer() { if (canvas.requestPointerLock) { window.addEventListener("mousemove", function(ev) { mouseX = pmouseX + ev.movementX/1.5; mouseY = pmouseY + ev.movementY/1.5; }); canvas.requestPointerLock() } } window.addEventListener('mousedown', event => { clicked = true; getPointer(); clickToggle=true; //clicking? }); window.addEventListener('mouseup', event => { clicked = false; click=true; //not clicking so set clicked to false }); window.addEventListener("keydown", (event) => { key[event.key] = true; }); window.addEventListener("keyup", (event) => { delete key[event.key]; delete key[event.key.toLowerCase()]; }); 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; }); window.addEventListener("keydown", function(e) { if(["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) { e.preventDefault(); } }, false); for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } var c = document.getElementById("m") var ctx = c.getContext("2d"); var data = ctx.getImageData(0, 0, 600, 600); var anim=0; var x=0; var frameCount=0; /================Creating a canvas=================/ var canvas = document.getElementById('my_Canvas'); var gl = canvas.getContext('webgl2'); /==========Defining and storing the geometry=======/ var vertices = [ -0.5,0.5,0.0, 0.0,0.5,0.0, -0.25,0.25,0.0, -0.25,0.5,0.0 ]; // Create an empty buffer object to store the vertex buffer var vertex_buffer = gl.createBuffer(); var normal_buffer = gl.createBuffer(); //Bind appropriate array buffer to it // gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to the buffer // gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Unbind the buffer // gl.bindBuffer(gl.ARRAY_BUFFER, null); /=========================Shaders========================/ // vertex shader source code var vertCode =document.getElementById('vertex-shader').textContent; // Create a vertex shader object var vertShader = gl.createShader(gl.VERTEX_SHADER); // Attach vertex shader source code gl.shaderSource(vertShader, vertCode); // Compile the vertex shader gl.compileShader(vertShader); if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(vertShader)); } // fragment shader source code var fragCode = document.getElementById('fragment-shader').textContent // Create fragment shader object var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // Attach fragment shader source code gl.shaderSource(fragShader, fragCode); // Compile the fragmentt shader gl.compileShader(fragShader); if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(fragShader)); } // Create a shader program object to store // the combined shader program var shaderProgram = gl.createProgram(); // Attach a vertex shader gl.attachShader(shaderProgram, vertShader); // Attach a fragment shader gl.attachShader(shaderProgram, fragShader); // Link both programs gl.linkProgram(shaderProgram); // Use the combined shader program object gl.useProgram(shaderProgram); /======== Associating shaders to buffer objects ========/ // Bind vertex buffer objec gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Get the attribute location var coord = gl.getAttribLocation(shaderProgram, "coordinates"); var norms = gl.getAttribLocation(shaderProgram, "normal"); // Point an attribute to the currently bound VBO /============= Drawing the primitive ===============/ gl.clearColor(0.5, 0.7, 1.0,1.0); // Enable the depth test var distance=-2,thetax=-0.0,thetaz=0 class Vector { constructor(x, y, z=0) { this.x = x; this.y = y; this.z=z; } subtract(v) { var ve = new Vector(this.x, this.y, this.z); ve.x -= v.x; ve.y -= v.y; ve.z -= v.z; return ve; } add(v) { var ve = new Vector(this.x, this.y, this.z); ve.x += v.x; ve.y += v.y; ve.z += v.z; return ve; } divide(n) { var ve = new Vector(this.x, this.y, this.z); ve.x /= n; ve.y /= n; ve.z /= n; return ve; } magnitude() { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); } dot(v) { return this.x * v.x + this.y * v.y + this.z * v.z; } scale(n) { var ve = new Vector(this.x, this.y, this.z); ve.x = n; ve.y = n; ve.z = n; return ve; } normalize() { var ve = new Vector(this.x, this.y, this.z); ve = ve.divide(ve.magnitude()); return ve; } rotateBy(ang) { ang = -ang; return new Vector(this.x Math.cos(ang) - this.y * Math.sin(ang), this.x * Math.sin(ang) + this.y * Math.cos(ang)); } } var player var now; var then = performance.now(); var fps = 30; var delta; var player=new Vector(1000,-290,0); var frameCount=0; var interval = 1000 / fps; var pts=[]; vertices = [ ]; var rays=[]; const iTime = gl.getUniformLocation(shaderProgram, "iTime"); const camAng = gl.getUniformLocation(shaderProgram, "cameraAngle"); const glPlayer = gl.getUniformLocation(shaderProgram, "playerPositio"); var norm=[]; vertices = [ ]; var res=0.1 var randx=(Math.random()-0.5)/3 var randy=(Math.random()-0.5)/3 vertices.push(-0.02+randx,0.0,randy,0.02+randx,0.0,randy,-0.02+randx,-0.1,randy); vertices.push(0.0,0.02,0.0,0.2,0.02,0.0,0.0,0.02,0.2); vertices.push(0.2,0.02,0.2,0.2,0.02,0.0,0.0,0.02,0.2); for(var k=0;k<4;k++){ vertices.push(-0.02+randx,-0.1-k/5.0,randy,0.02+randx,0.0-k/5.0,randy,0.02+randx,-0.2-k/5.0,randy); vertices.push(0.02+randx,-0.2-k/5.0,randy,-0.02+randx,-0.3-k/5.0,randy,-0.02+randx,-0.1-k/5.0,randy); } var wid=400; for(var i=0;i<widwid3;i+=1){ norm.push(i%(wid+1)/2,Math.floor(i/(wid+1))/2,iMath.PI); } gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coord); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, normal_buffer); gl.vertexAttribPointer(norms, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(norms); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(norm), gl.STATIC_DRAW); gl.vertexAttribDivisor(norms, 1); gl.enable(gl.DEPTH_TEST); var drawl=function() { window.requestAnimationFrame(drawl); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); frameCount+=1.0; thetaz+=-(mouseX-pmouseX)/220; thetax+=-(mouseY-pmouseY)/240; if(thetax<-Math.PI/2){ thetax=-Math.PI/2; } if(thetax>Math.PI/2){ thetax=Math.PI/2; } var cards=new Vector(5,0) cards=cards.rotateBy(thetaz); if(key.w){ player.y+=cards.x; player.x+=cards.y; } if(key.s){ player.y-=cards.x; player.x-=cards.y; } if(key.a){ player.y+=cards.y; player.x-=cards.x; } if(key.d){ player.y-=cards.y; player.x+=cards.x; } if(key.Shift){ player.z+=5.0; } if(key[" "]){ player.z-=5.0; } gl.uniform1f(iTime, frameCount); gl.uniform2f(camAng, thetaz,thetax); gl.uniform3f(glPlayer, player.x/50,-player.z/50,-player.y/50); frameCount+=1; gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.DEPTH_BUFFER_BIT); ctx.fillStyle="rgb(2,2,2)" gl.drawArraysInstanced(gl.TRIANGLES, 0, (vertices.length/3),widwid); ctx.drawImage(canvas,0,0); pmouseX = mouseX; pmouseY= mouseY clickToggle=false; click=false; } } drawl(); //<script> </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOvEwdO_Cww
Votes	144
Spin-Offs	32
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	23 days ago, 1734464232507
Updated	23 days ago, 1734464281278
Source Deleted	unknown