Viewing Program

Program Data

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

Title	All 8 Billion [Culture Contest Entry]
ID	5056230851002368
Created	5 months ago, 1721659402704
Updated	5 months ago, 1721668546087
Code	<!DOCTYPE html> <!-- Contest: Culture! I have completed 0.5% of Khan Academy's 'Intro to HTML/CSS' and have been programming for 30 months. I would prefer to be placed in the [Advanced] bracket --> <html> <title>All 8 Billion [Culture Contest Entry]</title> <canvas id = "m" width = '1200' height = '1200'></canvas> <canvas width = "1200" height = "1200" id = "my_Canvas"></canvas> <canvas width = "1200" height = "1200" id = "skybox"></canvas> <canvas width = "1200" height = "1200" id = "bloom"></canvas> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <img id="latest" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/World_Elevation_Map_8_bit_%28World_Height_map%29_%28alterative_version%29.png/2560px-World_Elevation_Map_8_bit_%28World_Height_map%29_%28alterative_version%29.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; } #m{ display:none; } #skybox{ display:none; } #bloom{ display:none; } canvas{ width:600px; } </style> <script id = 'vertex-bloom' 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-bloom' type = 'glsl'>#version 300 es precision lowp sampler2D; uniform sampler2D iChannel0; precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float clicked; uniform float iTime; out vec4 fragColor; vec2 Rotate(vec2 uv,float ang){ return vec2(uv.xcos(ang)-uv.ysin(ang),uv.xsin(ang)+uv.ycos(ang)); } vec2 crt(vec2 coord, float bend){ // put in symmetrical coords coord = (coord - 0.5) 2.0; coord = 1.1; // deform coords coord=Rotate(coord,bendpow(length(coord),2.0)); // transform back to 0.0 - 1.0 space coord = (coord / 2.2) + 0.5; return coord; } vec4 textur(vec2 uv){ vec2 ruv=uv; return texture(iChannel0,ruv); } float random (in vec2 _st) { return fract(sin(dot(_st.xy, vec2(12.9898,78.233)))* 43758.5453123); } vec4 photoshop_desaturate(vec3 color, float factor) { vec3 lum = vec3(0.299, 0.587, 0.114); vec3 gray = vec3(dot(lum, color)); return vec4(mix(color, gray, factor), 1.0); } void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); vec2 iResolution = vec2(1200.0,1200.0); vec2 res = iResolution.xy; vec2 uv=(fragCoord/res); uv.y=1.0-uv.y; fragColor.rgb = textur(uv).rgb; vec3 som=vec3(0.0); float accum=0.0; for(float x=0.0;x<=100.0;x+=1.0){ vec2 of=vec2(sin(x(3.141/3.0))(x/3000.0),cos(x(3.141/3.0))(x/3000.0)); vec3 he = textur(uv-of).rgb; accum++; som+=he; if(length(he.rg)>=1.3){ fragColor.rgb+=he/(700.0length(of)+1.0)+0.0005; } } fragColor.a=1.0; fragColor.rgb=vec3(1.0+(random(uv10.0+iTime)-0.5)/10.0); fragColor.rgb=0.5; } </script> <script id = 'vertex-skybox' 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-skybox' type = 'glsl'>#version 300 es precision mediump sampler2D; uniform sampler2D iChannel0; precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float iTime; 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; } out vec4 fragColor; void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); vec2 iResolution = vec2(1200.0,1200.0); vec2 res = iResolution.xy; //View resolution vec3 cam = vec3(0.0,0.0,-3.0), //Camera position pos = cam, //Pixel position ray = normalize(vec3(fragCoord2.0 - res, res.y/1.1)), //Ray direction cell = vec3(0,0,0); vec2 angle = -(iMouse.xy)vec2(-1.0,1.0); Rotate(pos,angle); Rotate(ray,angle); Rotate(cam,angle(iTime0.0+1.0)); #define iterations 10 #define formuparam 0.73 #define volsteps 10 #define stepsize 0.6 #define tile 0.4 #define brightness 0.00004 #define darkmatter 0.900 #define distfading 0.890 #define saturation 0.550 vec3 from=vec3(10.0); vec3 dir = normalize(ray); float s=0.7,fade=1.0; vec3 v=vec3(0.); for (int r=0; r<volsteps; r++) { vec3 p=from+sdir.5; p = abs(vec3(tile)-mod(p,vec3(tile2.))); float pa,a=pa=0.; for (int i=0; i<iterations; i++) { p=abs(p)/dot(p,p)-formuparam; a+=abs(length(p)-pa); pa=length(p); } float dm=max(0.,darkmatter-aaaa.001); a=aa; if (r>10) fade=1.-dm; v+=fade; v+=vec3(sa/1000.0,ss,ssss)abrightnessfade; // coloring based on distance fade=distfading; s+=stepsize; } v=mix(vec3(length(v)),v,saturation); //color adjust v.x=1.4; vec3 background = vec3(v.002); background=clamp(background,0.0,1.0)/1.02; fragColor = vec4(background,1); } </script> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec3 coordinates; in vec3 normal; uniform float iTime; uniform vec2 cameraAngle; uniform vec3 playerPosition; out vec3 pos; 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; } out vec3 surfaceCoords; out vec3 pp; out vec3 no; void main() { float fov=0.9; pos=coordinates; pos+=playerPosition; CamRotate(pos,cameraAngle); pp=playerPosition; float silly=-0.001+pos.zfov; pos.x=-1.0; pos.y=-1.0; silly=silly1.5; no=normal; surfaceCoords = coordinates; pos.z=-1.0; 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; uniform float iTime; uniform vec2 cameraAngle; uniform vec3 playerPosition; out vec4 FragColor; vec3 colorMix(){ float height=clamp((length(surfaceCoords)-1.001)50.0,0.0,1.0); vec3 color=vec3(0,0.4,0.6); color=mix(vec3(0,0.2,0.5),vec3(0,0.4,0.6),clamp(height,0.0,0.1)10.0); if(height>0.1){ color=mix(vec3(0,0.4,0.6),vec3(0.95,0.9,0.5),(clamp(height,0.1,0.2)-0.1)10.0); } if(height>0.2){ color=mix(vec3(0.95,0.9,0.5),vec3(0.1,0.7,0.2),(clamp(height,0.2,0.3)-0.2)10.0); } if(height>0.5){ color=mix(vec3(0.1,0.7,0.2),vec3(0.95),(clamp(height,0.5,0.6)-0.5)20.0abs(surfaceCoords.y)); } return vec3(color); } float hash(vec3 p){ return fract( 17.0fract( p0.3183099+vec3(.11,.17,.13) ).x17.0fract( p0.3183099+vec3(.11,.17,.13) ).y17.0fract( p0.3183099+vec3(.11,.17,.13) ).z(17.0fract( p0.3183099+vec3(.11,.17,.13) ).x+17.0fract( p0.3183099+vec3(.11,.17,.13) ).y+17.0fract( p0.3183099+vec3(.11,.17,.13) ).z) ); } float sdBox( vec3 p, vec3 b ){ return min(max((abs(p) - b).x,max((abs(p) - b).y,(abs(p) - b).z)),0.0) + length(max((abs(p) - b),0.0)); } float smax( float a, float b, float k ){ return max(a, b) + max(k-abs(a-b),0.0)max(k-abs(a-b),0.0)0.25/k; } vec2 iBox( in vec3 ro, in vec3 rd, in vec3 rad ) { vec3 t1 = -(1.0/rd)ro - abs((1.0/rd))rad, t2 = -(1.0/rd)ro + abs((1.0/rd))rad; return vec2( max( max( t1.x, t1.y ), t1.z ), min( min( t2.x, t2.y ), t2.z ) ); } float SPH(vec3 d,float r){ return length(d)-rr0.355; } float sdBase( in vec3 p ){ vec3 i = floor(p + (p.x + p.y + p.z) * 0.333333333), d0 = p - (i - (i.x + i.y + i.z) * 0.166666667), e = step(d0.yzx, d0),i1 = e(1.0-e.zxy), i2 = 1.0-e.zxy(1.0-e),d1 = d0 - (i1 - 1.00.166666667),d2 = d0 - (i2 - 2.00.166666667),d3 = d0 - (1.0 - 3.00.166666667); return min( min(SPH(d0,hash( i+0.0 )),SPH(d1,hash( i+i1 ))),min(SPH(d2,hash( i+i2 )),SPH(d3, hash( i+1.0 )))); } vec2 sdFbm( in vec3 p, float d ){ const mat3 m = mat3( 0.00, 0.80, 0.60, -0.80, 0.36, -0.48,-0.60, -0.48, 0.64 ); float t = 0.0, s = 1.0; for( int i=0; i<4; i++ ) d = smax( d, -ssdBase(p), 0.25s ),t += d,p = 2.0mp,s = 0.55s; return vec2(d,t); } float hash(float n) { return fract(sin(n) * 1e4); } float hash(vec2 p) { return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) * (0.1 + abs(sin(p.y * 13.0 + p.x)))); } float noise(float x) { float i = floor(x); float f = fract(x); float u = f * f * (3.0 - 2.0 * f); return mix(hash(i), hash(i + 1.0), u); } float noise(vec2 x) { vec2 i = floor(x); vec2 f = fract(x); // Four corners in 2D of a tile float a = hash(i); float b = hash(i + vec2(1.0, 0.0)); float c = hash(i + vec2(0.0, 1.0)); float d = hash(i + vec2(1.0, 1.0)); // Simple 2D lerp using smoothstep envelope between the values. // return vec3(mix(mix(a, b, smoothstep(0.0, 1.0, f.x)), // mix(c, d, smoothstep(0.0, 1.0, f.x)), // smoothstep(0.0, 1.0, f.y))); // Same code, with the clamps in smoothstep and common subexpressions // optimized away. vec2 u = f * f * (3.0 - 2.0 * f); return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } // This one has non-ideal tiling properties that I'm still tuning float noise(vec3 x) { const vec3 step = vec3(110, 241, 171); vec3 i = floor(x); vec3 f = fract(x); // For performance, compute the base input to a 1D hash from the integer part of the argument and the // incremental change to the 1D based on the 3D -> 1D wrapping float n = dot(i, step); vec3 u = f * f * (3.0 - 2.0 * f); return mix(mix(mix( hash(n + dot(step, vec3(0, 0, 0))), hash(n + dot(step, vec3(1, 0, 0))), u.x), mix( hash(n + dot(step, vec3(0, 1, 0))), hash(n + dot(step, vec3(1, 1, 0))), u.x), u.y), mix(mix( hash(n + dot(step, vec3(0, 0, 1))), hash(n + dot(step, vec3(1, 0, 1))), u.x), mix( hash(n + dot(step, vec3(0, 1, 1))), hash(n + dot(step, vec3(1, 1, 1))), u.x), u.y), u.z); } #define NUM_OCTAVES 5 float fbm(float x) { float v = 0.0; float a = 0.5; float shift = float(100); for (int i = 0; i < NUM_OCTAVES; ++i) { v += a * noise(x); x = x * 2.0 + shift; a = 0.5; } return v; } float fbm(vec2 x) { float v = 0.0; float a = 0.5; vec2 shift = vec2(100); // Rotate to reduce axial bias mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.50)); for (int i = 0; i < NUM_OCTAVES; ++i) { v += a noise(x); x = rot * x * 2.0 + shift; a = 0.5; } return v; } void main() { vec3 triNormal=no; vec3 lightCoords=pp; vec3 triangleColor=vec3(colorMix())1.0; triangleColor=clamp(triangleColor,0.0,1.0); vec3 hehe = -normalize(surfaceCoords+pp); triNormal.x+=sin(fbm(surfaceCoords.yz100.0)5.0)/200000.0; triNormal.y+=sin(fbm(surfaceCoords.zx100.0)5.0)/200000.0; triNormal.z+=sin(fbm(surfaceCoords.xy100.0)5.0)/200000.0; triNormal=normalize(triNormal); float li=max(dot(normalize(vec3(1000.0,0.0,0.0)),normalize(triNormal)),0.2); float li2=1.5-max(dot(hehe,-normalize(triNormal)),0.0); vec3 spe=vec3(li2)max(1.0,0.0)vec3(0.98,0.99,1.0); spe=spe; spe=spe; spe=spe; FragColor = vec4(triangleColorli+spe0.05,1.0); FragColor.rgb+=max(sdFbm(surfaceCoords30.0,-1.0).x10.0,0.0)clamp((1.0-li2.0)2.0,0.0,1.0)clamp((triangleColor.g-0.6)10.0,0.0,1.0)vec3(1.0,0.9,0.6); } </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]; }); 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); function dist(x1,y1,x2,y2){ var dx=x1-x2; var dy=y1-y2 return Math.sqrt(dxdx+dydy) } function dist2(x1,y1,x2,y2){ var dx=x1-x2; var dy=y1-y2 return (dxdx+dydy) } var anim=0; var x=0; var frameCount=480; /================Creating a canvas=================/ var canvas = document.getElementById('m'); 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.0, 0.0, 0.0,0.0); // Enable the depth test var distance=-2,thetax=-0.0,thetaz=0 var d=function(x,y,z) { var zdist=((xMath.sin(-thetaz)+yMath.cos(-thetaz))Math.cos(thetax)-zMath.sin(thetax)+distance)/160.0 return[((xMath.cos(-thetaz)-yMath.sin(-thetaz))/zdist-distance+300),(-((xMath.sin(-thetaz)+yMath.cos(-thetaz))Math.sin(thetax)+zMath.cos(thetax))/zdist-distance)+300,zdist]; }; var camera={x:(-Math.sin(thetax+(Math.PI/2))Math.cos(thetaz+(Math.PI/2)))distance,y:(-Math.sin(thetax+(Math.PI/2))Math.sin(thetaz+(Math.PI/2)))distance,z:-Math.cos(thetax+(Math.PI/2))distance} function camdist(x,y,z){ return(Math.sqrt(((x-camera.x)2)+((y-camera.y)2)+((z-camera.z)*2))) } 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)); } rotate3d(anglex,angley) { var ve = new Vector(this.x,this.y,this.z); var ro1 = new Vector(this.y,this.z).rotateBy(-anglex); var ro2 = new Vector(this.x,ro1.y).rotateBy(-angley); ve.y = ro1.x ve.z = ro1.y; ve.x = ro2.x; ve.z = ro2.y; return ve; } reflect(n) { var ve = new Vector(this.x, this.y); ve = ve.subtract(n.scale(2 * ve.dot(n))) return ve; } abs() { var ve = new Vector(this.x, this.y, this.z); ve.x = Math.abs(ve.x); ve.y = Math.abs(ve.y); ve.z = Math.abs(ve.z); return ve; } max(n) { var ve = new Vector(this.x, this.y, this.z); ve.x = Math.max(ve.x, n); ve.y = Math.max(ve.y, n); ve.z = Math.max(ve.z, n); return ve; } } 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; } const skyboxCanvas = document.getElementById('skybox'), gl2 = skyboxCanvas.getContext('webgl2'); const vertexSource2 = document.getElementById('vertex-skybox').textContent, fragmentSource2 = document.getElementById('fragment-skybox').textContent; const vertexShader2 = createShader(gl2, gl2.VERTEX_SHADER, vertexSource2), fragmentShader2 = createShader(gl2, gl2.FRAGMENT_SHADER, fragmentSource2); const program2 = createProgram(gl2, vertexShader2, fragmentShader2); const aPosition2 = gl2.getAttribLocation(program2, 'aPosition') const drawx2 = gl2.getUniformLocation(program2, "drawx"); const drawy2 = gl2.getUniformLocation(program2, "drawy"); const iTime2 = gl2.getUniformLocation(program2, "iTime"); const iChannel02 = gl2.getUniformLocation(program2,"iChannel0"); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); const glBloom = document.getElementById('bloom'), gl3 = glBloom.getContext('webgl2'); const vertexSource3 = document.getElementById('vertex-bloom').textContent, fragmentSource3 = document.getElementById('fragment-bloom').textContent; const vertexShader3 = createShader(gl3, gl.VERTEX_SHADER, vertexSource3), fragmentShader3 = createShader(gl3, gl.FRAGMENT_SHADER, fragmentSource3); const program3 = createProgram(gl3, vertexShader3, fragmentShader3); const aPosition3 = gl3.getAttribLocation(program3, 'aPosition') const drawx = gl3.getUniformLocation(program3, "drawx"); const drawy = gl3.getUniformLocation(program3, "drawy"); const iTime = gl3.getUniformLocation(program3, "iTime"); const cli = gl3.getUniformLocation(program3, "clicked"); const iChannel03 = gl3.getUniformLocation(program3,"iChannel0"); let texture03 = gl3.createTexture(); var player var now; var then = performance.now(); var fps = 40; var delta; var player=new Vector(0,-290,0); var frameCount=7900; var interval = 1000 / fps; var pts=[]; var canvas2 = document.getElementById('my_Canvas'), ctx = canvas2.getContext('2d'); document.getElementById("latest").onload = function() { ctx.drawImage(document.getElementById("latest"),0,0,600,600); }; //2560 × 1280 document.getElementById("latest").crossOrigin="Anonymous"; var delayInMilliseconds = 200; //1 second setTimeout(function() { var heightMap = ctx.getImageData(0,0,600,600); //console.log(heightMap); vertices = [ ]; var rays=[]; const iTime = gl.getUniformLocation(shaderProgram, "iTime"); const camAng = gl.getUniformLocation(shaderProgram, "cameraAngle"); const glPlayer = gl.getUniformLocation(shaderProgram, "playerPosition"); function roun(n){ return Math.sqrt(1.0-(nn)); } vertices = [ ]; var norm=[]; var res=2; for(var x=0;x<=600;x+=res){ for(var y=0;y<=600;y+=res){ for(var t=0;t<2;t++){ if(t<1){ var mx=Math.floor(x); var my=Math.floor(y); var dx=Math.floor((res)); var dy=Math.floor((res)); var index1 = (mx) 4 + (my) * 600 * 4; var index2 = (mx+dx) * 4 + (my) * 600 * 4; var index3 = (mx) * 4 + (my+dy) * 600 * 4; var index4 = (mx+dx) * 4 + (my+dy) * 600 * 4; var h1=heightMap.data[index1]/10000+1; var h2=heightMap.data[index2]/10000+1; var h3=heightMap.data[index3]/10000+1; var h4=heightMap.data[index4]/10000+1; var x2=x/300-1; var y2=y/300-1; var res2=res/300; var ar=[x2,y2,h1,x2+res2,y2,h2,x2,y2+res2,h3,x2+res2,y2+res2,h4]; var ar2=[x2,y2,h1,x2+res,y2,h2,x2,y2+res2,h3,x2+res2,y2+res2,h4]; ar2[0]=Math.sin(ar[0]Math.PI)h1roun(ar[1]); ar2[3]=Math.sin(ar[3]Math.PI)h2roun(ar[4]); ar2[6]=Math.sin(ar[6]Math.PI)h3roun(ar[7]); ar2[9]=Math.sin(ar[9]Math.PI)h4roun(ar[10]); ar2[2]=Math.cos(ar[0]Math.PI)h1roun(ar[1]); ar2[5]=Math.cos(ar[3]Math.PI)h2roun(ar[4]); ar2[8]=Math.cos(ar[6]Math.PI)h3roun(ar[7]); ar2[11]=Math.cos(ar[9]Math.PI)h4roun(ar[10]); ar2[1]=ar[1]h1; ar2[4]=ar[4]h2; ar2[7]=ar[7]h3; ar2[10]=ar[10]h4; vertices.push(ar2[0],ar2[1],ar2[2],ar2[6],ar2[7],ar2[8],ar2[3],ar2[4],ar2[5]); vertices.push(ar2[9],ar2[10],ar2[11],ar2[3],ar2[4],ar2[5],ar2[6],ar2[7],ar2[8]); } } } } for(var i=0;i<vertices.length;i+=9){ var U = new Vector(vertices[i+3],vertices[i+4],vertices[i+5]) var V = new Vector(vertices[i+6],vertices[i+7],vertices[i+8]) U=U.subtract(new Vector(vertices[i],vertices[i+1],vertices[i+2])) V=V.subtract(new Vector(vertices[i],vertices[i+1],vertices[i+2])) var normal = new Vector(); normal.x = ( U.y * V.z) - ( U.z * V.y) normal.y = ( U.z * V.x) - ( U.x * V.z) normal.z = ( U.x * V.y) - ( U.y * V.x) norm.push(normal.x,normal.y,normal.z,normal.x,normal.y,normal.z,normal.x,normal.y,normal.z); } 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); // turn on depth testing gl.enable(gl.DEPTH_TEST); // tell webgl to cull faces // gl.enable(gl.CULL_FACE); const posBuffer2 = gl2.createBuffer(); gl2.bindBuffer(gl.ARRAY_BUFFER, posBuffer2); gl2.bufferData(gl.ARRAY_BUFFER, positions, gl2.STATIC_DRAW); gl.viewport(0, 0, 1200, 1200); gl2.viewport(0, 0, 1200, 1200); gl2.vertexAttribPointer(aPosition2, 2, gl2.FLOAT, false, 0, 0); gl2.useProgram(program2); gl2.enableVertexAttribArray(aPosition2); const posBuffer3 = gl3.createBuffer(); gl3.bindBuffer(gl3.ARRAY_BUFFER, posBuffer3); gl3.bufferData(gl3.ARRAY_BUFFER, positions, gl3.STATIC_DRAW); gl3.viewport(0, 0, 1200, 1200); gl3.clearColor(0, 0, 0, 1); gl3.useProgram(program3); gl3.enableVertexAttribArray(aPosition3); gl3.vertexAttribPointer(aPosition3, 2, gl.FLOAT, false, 0, 0); gl3.activeTexture(gl3.TEXTURE0); gl3.bindTexture(gl3.TEXTURE_2D, texture03); gl3.uniform1i(iChannel03, 0); gl3.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl3.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl3.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); var drawl=function() { window.requestAnimationFrame(drawl); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); if(key.g){ document.getElementById("my_Canvas").style="width:2560px;"; }else{ document.getElementById("my_Canvas").style="width:600px;"; } frameCount+=10.0; thetaz=-(mouseX-300)/220; thetax=-(mouseY-300)/240; if(thetax<-Math.PI/2){ thetax=-Math.PI/2; } if(thetax>Math.PI/2){ thetax=Math.PI/2; } // player.x=Math.sin(frameCount/1200.0)250; player.y=Math.cos(frameCount/1200.0)250; player.z=Math.cos(frameCount/1200.0)100; thetaz=-frameCount/1800+3.14+3.14; thetax=Math.cos(frameCount/1200.0)/4.5 gl.uniform1f(iTime, frameCount); gl.uniform2f(camAng, thetaz1.5,thetax1.5); gl.uniform3f(glPlayer, player.x/150,-player.z/150,-player.y/150); frameCount+=1; // ctx.fillStyle="rgb(2,2,2,1)" // ctx.fillStyle="rgb(250,0,0)" gl3.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); gl2.uniform1f(drawx2, thetaz1.5); gl2.uniform1f(drawy2, thetax*1.5); gl.drawArrays(gl.TRIANGLES, 0, (vertices.length/3)); gl2.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(skyboxCanvas, 0, 0); ctx.drawImage(canvas,0,0); gl3.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2); gl3.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glBloom, 0, 0); pmouseX = mouseX; pmouseY= mouseY clickToggle=false; click=false; } } drawl(); }, delayInMilliseconds); //<script> </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJve19P9CAw
Votes	89
Spin-Offs	9
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6499161453543424","title":"Contest: Culture - HTML Submissions","deleted":"false","official":"false"}
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, 1734464234545
Updated	23 days ago, 1734464282457
Source Deleted	unknown