Viewing Program

Program Data

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

Title	DodecaGame
ID	5875308493717504
Created	3 months ago, 1728693177769
Updated	2 months ago, 1728751373263
Code	<!DOCTYPE html> <!-- --> <html> <title>DodecaGame</title> <canvas id = "m" width = '1200' height = '1200'></canvas> <canvas width = "1200" height = "1200" id = "my_Canvas"></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; } canvas{ width:600px; } </style> <script id="webg" type = 'glsl'>#version 300 es in vec3 coordinates; uniform vec2 iTime; uniform vec3 pl; out vec3 coord; float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) 43758.5453); } void Rotate(inout vec3 vector, vec2 angle) { 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 main() { vec3 coords=coordinates-pl; Rotate(coords,iTime); vec2 o=coords.xy; o/=coords.z; gl_Position = vec4(o.x/2.0,o.y/2.0,-(coords.z-3.0)/3.0, 1.0); coord=vec3(o.x/2.0,o.y/2.0,coords.z); gl_PointSize = 0.5/(coords.z); } </script> <script id="webg2" type = 'glsl'>#version 300 es precision lowp float; in vec3 coord; out vec4 FragColor; void main() { FragColor = vec4(0.5, 0.8, 1.0, 1.0); } </script> <script type="module"> var mouseX=0,pmouseX=0,mouseY=0,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, 1200, 1200); 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=0; class particle{ constructor(x,y,xv,yv){ this.x=x; this.y=y; this.yv=yv; this.xv=xv; } update(){ this.yv+=5.4 this.x+=this.xv/100; this.y+=this.yv/100; this.xv=0.99; this.yv=0.99; } } 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; } } var distance=-2,thetax=-0.0,thetaz=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(); //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('webg').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); // fragment shader source code var fragCode =document.getElementById('webg2').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(vertShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(vertShader)); } // 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 object gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Get the attribute location var coord = gl.getAttribLocation(shaderProgram, "coordinates"); // Point an attribute to the currently bound VBO /============= Drawing the primitive ===============/ gl.clearColor(0.005, 0.005, 0.005, 1.0); // Enable the depth test const iTime = gl.getUniformLocation(shaderProgram, "iTime"); const glpl = gl.getUniformLocation(shaderProgram, "pl"); var numBalls=0; var particles=[]; var dodec=[[-1.37638,0.,0.262866], [1.37638,0.,-0.262866], [-0.425325,-1.30902,0.262866], [-0.425325,1.30902,0.262866], [1.11352,-0.809017,0.262866], [1.11352,0.809017,0.262866], [-0.262866,-0.809017,1.11352], [-0.262866,0.809017,1.11352], [-0.688191,-0.5,-1.11352], [-0.688191,0.5,-1.11352], [0.688191,-0.5,1.11352], [0.688191,0.5,1.11352], [0.850651,0.,-1.11352], [-1.11352,-0.809017,-0.262866], [-1.11352,0.809017,-0.262866], [-0.850651,0.,1.11352], [0.262866,-0.809017,-1.11352], [0.262866,0.809017,-1.11352], [0.425325,-1.30902,-0.262866], [0.425325,1.30902,-0.262866]]; var dodec2=[...dodec]; vertices = [ ]; function lerp(a,b,t){ return a+(b-a)(t); } var p=[0,0,0]; var pran=0; var ran=0; for(var i=0;i<2000000;i++){ pran=ran; ran=~~(dodec.lengthMath.random()); if(pran!==ran){ p[0]=lerp(p[0],dodec[ran][0],0.7); p[1]=lerp(p[1],dodec[ran][1],0.7); p[2]=lerp(p[2],dodec[ran][2],0.7); dodec2.push([...p]); } } for(var c=0;c<dodec2.length;c++){ vertices.push(dodec2[c][0],dodec2[c][1],dodec2[c][2]); } //Bind appropriate array buffer to it // gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Pass the vertex data to the buffer // Unbind the buffer gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coord); var then = performance.now(); var now; var fps = 50; var delta; var frameCount=0; var interval = 1000 / fps; var player=new Vector(0,0,0); var drawl=function() { window.requestAnimationFrame(drawl); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); frameCount+=1.0; frameCount+=1; thetaz+=(pmouseX-mouseX)/120; thetax+=(pmouseY-mouseY)/140; 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.x){ player.z+=5.0; } if(key[" "]){ player.z-=5.0; } gl.uniform2fv(iTime, [-thetaz,thetax]); gl.uniform3fv(glpl, [player.x/1000,-player.z/1000,player.y/1000]); // Clear the color buffer bit gl.clear(gl.COLOR_BUFFER_BIT\|\|gl.DEPTH_BUFFER_BIT); // Set the view port // Draw the triangle ctx.fillStyle="rgb(0,0,0)" ctx.fillRect(0,0,1200,1200); gl.drawArrays(gl.POINTS, 0, vertices.length/3); ctx.drawImage(canvas,0,0); ctx.font="20px Monospace"; ctx.fillStyle="rgb(255,255,255)"; ctx.lineWidth=10; pmouseX = mouseX; pmouseY= mouseY clickToggle=false; } } drawl(); //<script> </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvd_fG3Cgw
Votes	3
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	2 months ago, 1728766497477
Updated	2 months ago, 1728766497477
Source Deleted	unknown