Viewing Program

Program Data

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

Title	BRAINROT LAND
ID	5728953597607936
Created	2 days ago, 1736187173669
Updated	2 days ago, 1736200467742
Code	<!DOCTYPE html> <!-- after seeing a very a very fun program on the HL ive decided to refactor an old scrapped program and added some things to see how fast i can make it run it was a simple chunk based procedural interpolated marching cubes 3d terrain generator. um i guess runs quite fast. but this is a boring 2d grass thing im too lazy to make it so that u can add or remove ground but its possible (this is an excuse to join in the clickbait thumbnail trend) the first version which was more 3D: https://www.khanacademy.org/computer-programming/mct/6739168284295168 --> <html> <head> <meta charset="utf-8"> <title>BRAINROT LAND</title> </head> <body> <script> window.RENDER_DIST=20 window.SPEED=2 window.DEBUG=true window.FLY=true </script> <style> body{ overflow:hidden; margin:0px; user-select:none; font-family:monospace; } canvas{ position:fixed; } </style> <canvas id='outCanvas'></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js'></script> <script id='sky_vsh' type='glsl'> #version 300 es precision mediump float; in vec2 vertPos; out vec2 pixUV; out vec3 pixDir; uniform mat4 viewMatrix; void main(){ pixUV=vertPos0.5+0.5; pixDir=inverse(mat3(viewMatrix))vec3(vertPos,1); gl_Position=vec4(vertPos,1,1); } </script> <script id='sky_fsh' type='glsl'> #version 300 es precision mediump float; in vec2 pixUV; in vec3 pixDir; out vec4 FragColor; uniform float time; float smoothLerp(float a,float b,float t){return (b-a)tt(3.-(t+t))+a;} float hash(vec3 p){return fract(sin(1712.23528cos(10233.5sin(p.x)+1213.6289sin(p.y)+1238.1284cos(p.z))));} float noiseBase(vec3 p){ vec3 _p=floor(p);float ltf=hash(_p);float lbf=hash(_p+vec3(0,1,0));float rtf=hash(_p+vec3(1,0,0));float rbf=hash(_p+vec3(1,1,0));float ltb=hash(_p+vec3(0,0,1));float lbb=hash(_p+vec3(0,1,1));float rtb=hash(_p+vec3(1,0,1));float rbb=hash(_p+vec3(1,1,1));float lt=smoothLerp(ltf,ltb,p.z-_p.z);float lb=smoothLerp(lbf,lbb,p.z-_p.z);float rt=smoothLerp(rtf,rtb,p.z-_p.z);float rb=smoothLerp(rbf,rbb,p.z-_p.z);float l=smoothLerp(lt,lb,p.y-_p.y);float r=smoothLerp(rt,rb,p.y-_p.y);return smoothLerp(l,r,p.x-_p.x);} float idk(vec3 pos){ float n=noiseBase(pos10.+time); n+=noiseBase(vec3(pos.x0.707-pos.z0.707,pos.x0.707+pos.z0.707,pos.y)20.+time)0.5; return n4.0; } void main(){ float x=time; vec3 c=vec3( -2.25x(x-3.)(x-1.)(x-1.), -0.8x(x-2.), xxx+0.025 ); float n=idk(pixDir10.0); n=n; n=n; n=n; FragColor=vec4(mix(c,vec3(1.0-clamp(n,0.0,1.0)),clamp(1.0-dot(c,c)4.0,0.0,1.0)),1); } </script> <script id='surface_vsh' type='glsl'> #version 300 es precision mediump float; in vec3 vertPos; in vec3 vertNormal; out vec3 pixPos; out vec3 pixNormal; uniform mat4 viewMatrix; void main(){ pixPos=vertPos; pixNormal=vertNormal; gl_Position=viewMatrixvec4(vertPos,1); } </script> <script id='surface_fsh' type='glsl'> #version 300 es precision mediump float; in vec3 pixPos; in vec3 pixNormal; out vec4 FragColor; uniform vec3 camPos; //i tried to translate my js noise to glsl but somewhere i made a typo its like finding a needle in a haystack so im ignoring it float smoothLerp(float a,float b,float t){return (b-a)tt(3.-(t+t))+a;} float hash(vec3 p){return fract(sin(1712.23528cos(10233.5sin(p.x)+1213.6289sin(p.y)+1238.1284cos(p.z))));} float noiseBase(vec3 p){ vec3 _p=floor(p);float ltf=hash(_p);float lbf=hash(_p+vec3(0,1,0));float rtf=hash(_p+vec3(1,0,0));float rbf=hash(_p+vec3(1,1,0));float ltb=hash(_p+vec3(0,0,1));float lbb=hash(_p+vec3(0,1,1));float rtb=hash(_p+vec3(1,0,1));float rbb=hash(_p+vec3(1,1,1));float lt=smoothLerp(ltf,ltb,p.z-_p.z);float lb=smoothLerp(lbf,lbb,p.z-_p.z);float rt=smoothLerp(rtf,rtb,p.z-_p.z);float rb=smoothLerp(rbf,rbb,p.z-_p.z);float l=smoothLerp(lt,lb,p.y-_p.y);float r=smoothLerp(rt,rb,p.y-_p.y);return smoothLerp(l,r,p.x-_p.x);} void main(){ vec3 normal=normalize(pixNormal); float light=dot(normal,normalize(vec3(2,6,-3)))0.5+0.5; FragColor=vec4(0,(noiseBase(pixPos40.)0.2+0.7)light,0,1); } </script> <script id='chunkGenerator' type='js'> let noiseProperties={octaves:2,decay:0.5,upscale:2}, hash3=(x,y,z)=>{ let n=x124.518+y129.321+z131.145-(xy100.836+z201.51) return n-Math.floor(n) }, smoothstep=(a,b,t)=>(b-a)tt(3-(t+t))+a, noiseBase=(x,y,z)=>{ let _x=Math.floor(x),_y=Math.floor(y),_z=Math.floor(z),ltf=hash3(_x,_y,_z),rtf=hash3(_x+1,_y,_z),rbf=hash3(_x+1,_y+1,_z),rbb=hash3(_x+1,_y+1,_z+1),lbb=hash3(_x,_y+1,_z+1),ltb=hash3(_x,_y,_z+1),rtb=hash3(_x+1,_y,_z+1),lbf=hash3(_x,_y+1,_z),lt=smoothstep(ltf,ltb,z-_z),lb=smoothstep(lbf,lbb,z-_z),rt=smoothstep(rtf,rtb,z-_z),rb=smoothstep(rbf,rbb,z-_z),l=smoothstep(lt,lb,y-_y),r=smoothstep(rt,rb,y-_y) return smoothstep(l,r,x-_x) }, noise=(x,y,z)=>{ let n=0,d=1,u=1,_x=x,_y=y,_z=z,t=0 for(let i=0;i<noiseProperties.octaves;i++){ n+=(noiseBase(_x,_y,_z)+noiseBase(_y0.707107-_x0.707107-100,_y0.707107+_x0.707107-100,_z-100)+noiseBase(_y-0.707107+_x0.707107-200,_y-0.707107-_x0.707107-200,_z-200))d t+=d d=noiseProperties.decay _x=noiseProperties.upscale _y=noiseProperties.upscale _z=noiseProperties.upscale } return (n/(t3))-0.5 } window.heightFunction=(x,z)=>{ // return Math.sin(x3)Math.sin(z3)0.5 let m=noise(z0.04,x0.04,123) m=m m=m1000 return noise(x,z,100)3+m } function generateChunkMesh(x,z,res){ // let t=performance.now() //translate LOD chunks mesh down a bit (less detail -> lower) to reduce crack artifacts at chunk edges let LODAdjust=0.5/res let verts=[],index=[], avgAccum=0,avgSamples=0, _x1=x-0.5,_x2=x+0.5,_z1=z-0.5,_z2=z+0.5, _res=1/res,ind=0, lerp=(a,b,t)=>(b-a)t+a, terrain=window.heightFunction, //not a glorified hash map being called a transposition table the chess bot terminology got to me // TT=new Map(), // func=(x,z)=>{ // let entry=x-z0.9852156371605413, // t=TT.get(entry) // if(t)return t // let v=terrain(x,z) // TT.set(entry,v) // return v // } func=terrain for(let ix=0;ix<=1;ix+=_res) for(let iz=0;iz<=1;iz+=_res){ let vx=lerp(_x1,_x2,ix), vz=lerp(_z1,_z2,iz), vy=func(vx,vz), ax=lerp(_x1,_x2,ix-_res), az=lerp(_z1,_z2,iz), ay=func(ax,az), bx=lerp(_x1,_x2,ix), bz=lerp(_z1,_z2,iz-_res), by=func(bx,bz) ax-=vx ay-=vy az-=vz bx-=vx by-=vy bz-=vz let nx=azby-aybz, ny=axbz-azbx, nz=aybx-axby, invmag=1/Math.sqrt(nxnx+nyny+nznz) verts.push(vx,(avgAccum+=vy,avgSamples++,vy-LODAdjust),vz,nxinvmag,nyinvmag,nzinvmag) if(ix<=1-_res&&iz<=1-_res) index.push(ind,ind+1,ind+res+1,ind+res+2,ind+res+1,ind+1) ind++ } // console.log((performance.now()-t).toFixed(2)+'ms') return {verts:new Float32Array(verts),index:new Uint32Array(index),avgElevation:avgAccum/avgSamples} } </script> <script type> var M=Math; (function(){ let Math=M, width=innerWidth\|0,height=innerHeight\|0,aspect=width/height, glCanvas=new OffscreenCanvas(width,height), ctx=outCanvas.getContext('2d'), gl=glCanvas.getContext('webgl2',{antialias:1}), dt,now,then=performance.now(),time=0, HALF_PI=Math.PI0.5, constrain=(x,a,b)=>x<a?a:x>b?b:x, world=[] outCanvas.width=width outCanvas.height=height gl.viewport(0,0,width,height) gl.enable(gl.CULL_FACE) gl.cullFace(gl.BACK) gl.enable(gl.DEPTH_TEST) gl.depthFunc(gl.LEQUAL) gl.enable(gl.BLEND) gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA) gl.clearColor(0,0,0,1) gl.clear(16640) function createProgram(vsh_src,fsh_src,debug=false){ let floatify=(n)=>n-(n\|0)>0?n:n+'.',vshText=vsh_src.trim(),fshText=fsh_src.trim() vshText=vshText.replaceAll('INV_WIDTH',floatify(1/width)).replaceAll('INV_HEIGHT',floatify(1/height)).replaceAll('WIDTH',floatify(width)).replaceAll('HEIGHT',floatify(height)).replaceAll('ASPECT',floatify(aspect)) fshText=fshText.replaceAll('INV_WIDTH',floatify(1/width)).replaceAll('INV_HEIGHT',floatify(1/height)).replaceAll('WIDTH',floatify(width)).replaceAll('HEIGHT',floatify(height)).replaceAll('ASPECT',floatify(aspect)) vsh=gl.createShader(gl.VERTEX_SHADER) fsh=gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(vsh,vshText) gl.shaderSource(fsh,fshText) gl.compileShader(vsh) gl.compileShader(fsh) if(debug&&!gl.getShaderParameter(vsh,gl.COMPILE_STATUS)) console.error(vshText+" "+gl.getShaderInfoLog(vsh)) if(debug&&!gl.getShaderParameter(fsh,gl.COMPILE_STATUS)) console.error(fshText+" "+gl.getShaderInfoLog(fsh)) let p=gl.createProgram() gl.attachShader(p,vsh) gl.attachShader(p,fsh) gl.linkProgram(p) return p } let surfaceProgram=createProgram(surface_vsh.text,surface_fsh.text,1), skyProgram=createProgram(sky_vsh.text,sky_fsh.text,1) let glCache={ surface_viewMatrix:gl.getUniformLocation(surfaceProgram,'viewMatrix'), surface_camPos:gl.getUniformLocation(surfaceProgram,'camPos'), sky_viewMatrix:gl.getUniformLocation(skyProgram,'viewMatrix'), sky_camPos:gl.getUniformLocation(skyProgram,'camPos'), sky_time:gl.getUniformLocation(skyProgram,'time'), } gl.enableVertexAttribArray(0) gl.enableVertexAttribArray(1) function perspectiveMatrix(fov=80,aspect,zn=0.1,zf=1000){ let f=Math.tan(HALF_PI-fov0.008726646), rangeInv=1/(zn-zf) return new Float32Array([ f/aspect,0,0,0, 0,f,0,0, 0,0,(zn+zf)rangeInv,-1, 0,0,znzfrangeInv2,0 ]) } function setViewMatrix(mat,proj,x,y,z,yaw,pitch,zoomBack=0){ let cp=Math.cos(pitch),sp=Math.sin(pitch),cy=Math.cos(yaw),sy=Math.sin(yaw) mat[5]=cp mat[6]=sp mat[9]=-sp mat[10]=cp mat[0]=cy mat[1]=spsy mat[2]=-cpsy mat[8]=sy mat[9]=-spcy mat[10]=cpcy var a00=mat[0], a01=mat[1], a02=mat[2], a11=mat[5], a12=mat[6], a20=mat[8], a21=mat[9], a22=mat[10] x+=mat[2]zoomBack y+=mat[6]zoomBack z+=mat[10]zoomBack mat[12]=a00-x-a20z mat[13]=a01-x-a11y-a21z mat[14]=a02-x-a12y-a22z mat[15]=1 let m=mat.slice() let d=[mat[2],mat[6],mat[10]] var a00=proj[0],a11=proj[5],a21=proj[9],a22=proj[10],a23=proj[11],a32=proj[14],b0=mat[0],b1=mat[1],b2=mat[2],b3=0 mat[0]=b0a00 mat[1]=b1a11+b2a21 mat[2]=b2a22+b3a32 mat[3]=b2a23 b1=mat[5] b2=mat[6] mat[4]=0 mat[5]=b1a11 mat[6]=b2a22 mat[7]=b2a23 b0=mat[8] b1=mat[9] b2=mat[10] mat[8]=b0a00 mat[9]=b1a11+b2a21 mat[10]=b2a22 mat[11]=b2a23 b0=mat[12] b1=mat[13] b2=mat[14] mat[12]=b0a00 mat[13]=b1a11+b2a21 mat[14]=b2a22+a32 mat[15]=b2a23 return {camPos:[x,y,z],modelMatrix:m,camDir:d} } eval(chunkGenerator.text) let circularCull=(RENDER_DIST2+1)0.5 class Chunk{ constructor(x,z){ this.x=x this.z=z this.vertBuffer=[] this.indexBuffer=[] this.indexLength=[] } generateMesh(LOD){ let mesh=generateChunkMesh(this.x,this.z,[10,8,6,2][LOD]) this.vertBuffer[LOD]=gl.createBuffer() this.indexBuffer[LOD]=gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER,this.vertBuffer[LOD]) gl.bufferData(gl.ARRAY_BUFFER,mesh.verts,gl.STATIC_DRAW) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.indexBuffer[LOD]) gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,mesh.index,gl.STATIC_DRAW) this.indexLength[LOD]=mesh.index.length this.avgElevation=mesh.avgElevation } frustumCulling(){ let dx=this.x-player.x,dy=this.avgElevation-player.y,dz=this.z-player.z, d=dxdx+dydy+dzdz if(d<=1){ this.lod=0 return true } d=Math.sqrt(d) this.lod=Math.min(0.2d,3)\|0 let dist=d d=1/d dx=d dy=d dz=d let lx=player.viewInfo.camDir[0],ly=player.viewInfo.camDir[1],lz=player.viewInfo.camDir[2] return dist<=circularCull&&(lxdx+lydy+lzdz<player.cullDot\|\|this.lod===0) } renderMesh(){ if(!this.vertBuffer[this.lod]) this.generateMesh(this.lod) gl.bindBuffer(gl.ARRAY_BUFFER,this.vertBuffer[this.lod]) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.indexBuffer[this.lod]) gl.vertexAttribPointer(0,3,gl.FLOAT,false,24,0) gl.vertexAttribPointer(1,3,gl.FLOAT,false,24,12) gl.drawElements(gl.TRIANGLES,this.indexLength[this.lod],gl.UNSIGNED_INT,0) } } let player=(function(player={}){ player.cullDot=(90/180)-0.9 player.projectionMatrix=perspectiveMatrix(90,aspect,0.01,1000) player.viewMatrix=new Float32Array(16) player.x=0.5 player.y=0.5 player.z=0.5 player.yaw=0 player.pitch=0 player.zoom=0 player.snapped=[0,0] player.renderDist=RENDER_DIST player.nextChunkToGen=[] player.keys={} let sensitivity=0.01 outCanvas.onmousemove=(e)=>{ player.yaw+=e.movementXsensitivity player.pitch=constrain(player.pitch+e.movementYsensitivity,-HALF_PI,HALF_PI) } outCanvas.onwheel=(e)=>{ // player.zoom+=e.deltaY0.005 e.preventDefault() } document.onwheel=()=>{} outCanvas.onmousedown=outCanvas.requestPointerLock document.onkeydown=(e)=>player.keys[e.key.toLowerCase()]=1 document.onkeyup=(e)=>player.keys[e.key.toLowerCase()]=0 player.update=()=>{ let cdir=Math.cos(player.yaw),sdir=Math.sin(player.yaw),c=0,vx=0,vy=0,vz=0 if(player.keys.d){ vx+=cdir vz+=sdir c++ } if(player.keys.w){ vx+=sdir vz-=cdir c++ } if(player.keys.a){ vx-=cdir vz-=sdir c++ } if(player.keys.s){ vx-=sdir vz+=cdir c++ } if(player.keys[' '])vy+=1 if(player.keys.shift)vy-=1 if(c>1){ vx=0.707106781 vz=0.707106781 } let speed=dtSPEED player.x+=vxspeed player.y+=vyspeed player.z+=vzspeed player.viewInfo=setViewMatrix(player.viewMatrix,player.projectionMatrix,player.x,FLY?player.y:window.heightFunction(player.x,player.z)+0.5,player.z,player.yaw,player.pitch,player.zoom) } player.renderChunks=()=>{ player.nextChunkToGen[2]=Infinity player.snapped[0]=Math.round(player.x) player.snapped[1]=Math.round(player.z) let minX=player.snapped[0]-player.renderDist, maxX=player.snapped[0]+player.renderDist, minZ=player.snapped[1]-player.renderDist, maxZ=player.snapped[1]+player.renderDist, loadedThisFrame=0 player.chunksTotal=0 player.chunksRendered=0 for(let x=minX;x<=maxX;x++){ for(let z=minZ;z<=maxZ;z++){ if(!world[x])world[x]=[] let chunk=world[x][z] if(!chunk){ //make chunk gen a bit visually faster if(Math.random()<0.05&&loadedThisFrame++<30){ chunk=world[x][z]=new Chunk(x,z) chunk.generateMesh() }else{ let dist=(player.snapped[0]-x)(player.snapped[0]-x)+(player.snapped[1]-z)(player.snapped[1]-z) if(dist<player.nextChunkToGen[2]){ player.nextChunkToGen[2]=dist player.nextChunkToGen[0]=x player.nextChunkToGen[1]=z } continue } } player.chunksTotal++ if(chunk.frustumCulling()) chunk.renderMesh(player.chunksRendered++) } } if(player.nextChunkToGen[2]!==Infinity){ let chunk=world[player.nextChunkToGen[0]][player.nextChunkToGen[1]]=new Chunk(player.nextChunkToGen[0],player.nextChunkToGen[1]) chunk.generateMesh() } } return player })() let screenMesh=gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER,screenMesh) gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),gl.STATIC_DRAW) let half_width=width0.5, half_height=height0.5 ctx.font='14px trebuchet ms' ctx.fillStyle='white' let chunksTotal=(player.renderDist2+1)(player.renderDist2+1) let FPS function loop(now){ dt=Math.min(FPS=(now-then)0.001,0.1) time+=dt player.update() gl.clear(16640) gl.useProgram(surfaceProgram) gl.uniformMatrix4fv(glCache.surface_viewMatrix,false,player.viewMatrix) gl.uniform3fv(glCache.surface_camPos,player.viewInfo.camPos) player.renderChunks() gl.useProgram(skyProgram) gl.uniformMatrix4fv(glCache.sky_viewMatrix,false,player.viewMatrix) gl.uniform3fv(glCache.sky_camPos,player.viewInfo.camPos) gl.uniform1f(glCache.sky_time,Math.sin(time0.1)0.5+0.5) gl.bindBuffer(gl.ARRAY_BUFFER,screenMesh) gl.vertexAttribPointer(0,2,gl.FLOAT,false,8,0) gl.drawArrays(gl.TRIANGLES,0,3) ctx.drawImage(glCanvas,0,0) if(DEBUG){ ctx.fillText('fps: '+(1/FPS).toFixed(2),5,15) ctx.fillText('chunks rendered: '+player.chunksRendered,5,30) ctx.fillText('chunks total: '+player.chunksTotal+'/'+(chunksTotal),5,45) } if(player.keys.t){ ctx.font='149px arial' ctx.rotate(0.2) ctx.fillText('😱',56,196) ctx.scale(0.75,0.60) ctx.rotate(-0.5) ctx.fillText('😮',-58,691) ctx.rotate(0.5) ctx.scale(1/0.75,1/0.6) ctx.rotate(-0.3) ctx.fillText('‼️',292,189) ctx.fillText('⛏️',292,462) ctx.fillStyle='red' ctx.scale(2,2) ctx.lineWidth=3 ctx.strokeText('➡',-8,318) ctx.fillText('➡',-8,318) ctx.font='14px trebuchet ms' ctx.fillStyle='white' ctx.resetTransform() } then=now parent.raf=requestAnimationFrame(loop) } if(parent.raf)cancelAnimationFrame(parent.raf) parent.raf=requestAnimationFrame(loop) })() //<script> </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgPugv86WCgw
Votes	56
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	Dat
Author Name	Dddatt
Author ID	kaid_4164356982737975081215128
Author Profile Access	COACH

Archive Data

Added	19 hours ago, 1736351788625
Updated	19 hours ago, 1736351788625
Source Deleted	unknown