Viewing Program

Program Data

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

Title	Belousov-Zhabotinsky Reaction
ID	6369457368121344
Created	3 months ago, 1727211540785
Updated	3 months ago, 1727211609738
Code	<!DOCTYPE html> <html lang="en-US"> <title>Belousov-Zhabotinsky Reaction</title> <head> <meta charset="UTF-8" /> <style> { padding: 0px; margin: 0px; overflow:hidden; } img{ display: none; } canvas{ width:600px; } </style> <canvas id="canvas" width="600" height="600"></canvas> <canvas id="backdrop" width="5400" height="1800"></canvas> <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> <script id = 'terrainFrag' 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 vec4 settings; uniform float iTime; out vec4 fragColor; float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) 43758.5453); } void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); vec2 iResolution = vec2(600.0,600.0); vec2 res = iResolution.xy; vec2 uv = fragCoord/iResolution.xy; uv.y=1.0-uv.y; if(iTime<10.0){ fragColor.rgb=normalize(vec3(rand(uv.xy+2.0),rand(uv.xy+1.0),rand(uv.xy))); }else{ vec2 eps=vec2(1.0/iResolution.xy); vec3 col=texture(iChannel0,uv).rgb; vec3 sum=vec3(0.0); for(int x=-7;x<=7;x++){ for(int y=-7;y<=7;y++){ if(x!=0\|\|y!=0){ sum+=texture(iChannel0,uv+epsvec2(x,y)).rgb; } } } sum/=(196.0); vec3 params=vec3(1.0,1.0,1.02); col.r+=sum.r+sum.r(sum.gparams.x-sum.bparams.z); col.g+=sum.g+sum.g(sum.bparams.y-sum.rparams.x); col.b+=sum.b+sum.b(sum.rparams.z-sum.gparams.y); fragColor.rgb=clamp(col/2.1,0.0,1.0); } fragColor.a=1.0; } </script> <script id = 'fragment-shader' 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 vec4 settings; uniform float iTime; uniform vec4 circleData[50]; out vec4 fragColor; float r(vec2 uv){ return mix(vec3(0.8,0.6,0.4)/1.1,vec3(0.6,0.6,0.8)1.4,(texture(iChannel0,uv).rrr+texture(iChannel0,uv).bbb/2.0-0.9)3.0).b; } const vec2 iResolution=vec2(600.0); void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); // Normalized pixel coordinates (from 0 to 1) vec2 uv = fragCoord/iResolution.xy; // Output to screen vec3 lightPos=vec3(0.5,0.5,1.0); if(iMouse.x>0.1&&iMouse.y>0.1){ lightPos=vec3(iMouse.x/iResolution.x,iMouse.y/iResolution.y,1.0); } vec3 screenCoord=vec3(uv.x,uv.y,0.0); vec3 light=screenCoord-lightPos; vec3 normal=vec3(0.0,0.0,0.3); vec2 eps=vec2(1.0/iResolution.xy); normal.x+=r(uv)-r(uv+vec2(eps.x,0.0)); normal.y+=r(uv)-r(uv+vec2(0.0,eps.y)); normal=normalize(normal); light=normalize(light); float mult=-dot(light,normal)0.75+0.25; float spec=pow(mult,256.0)/2.0; fragColor.rgb=mix(vec3(0.8,0.6,0.4)/1.1,vec3(0.5,0.5,0.9)1.4,(texture(iChannel0,uv).rrr+texture(iChannel0,uv).bbb/2.0-0.9)3.0)mult+spec; fragColor.a=1.0; } </script> <script type="module"> for (let i = window.requestAnimationFrame( function(){} ); i>0; i--){ window.cancelAnimationFrame(i); } var mouseX=0,pmouseX=0,mouseY=0,pmouseY=0,clicked=false,key={}; var keys = []; var clickToggle=false; var canClick=true; var start=false; window.addEventListener('mousedown', event => { clicked = true; if(canClick){ clickToggle=true; canClick=false; } }); window.addEventListener('mouseup', event => { clicked = false; canClick=true; }); 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); window.addEventListener("keydown", (event) => { keys[event.key] = true; }); window.addEventListener("keyup", (event) => { delete keys[event.key]; }); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const canvas2 = new OffscreenCanvas(5400,1800); const ctx2 = canvas2.getContext("2d"); class Vector{ constructor(x,y){ this.x=x; this.y=y; } subtract(v){ var ve=new Vector(this.x,this.y); ve.x-=v.x; ve.y-=v.y; return ve; } add(v){ var ve=new Vector(this.x,this.y); ve.x+=v.x; ve.y+=v.y; return ve; } divide(n){ var ve=new Vector(this.x,this.y); ve.x/=n; ve.y/=n; return ve; } magnitude(){ return Math.sqrt(this.xthis.x+this.ythis.y); } dot(v){ return this.xv.x+this.yv.y; } scale(n){ var ve=new Vector(this.x,this.y); ve.x=n; ve.y=n; return ve; } normalize(){ var ve=new Vector(this.x,this.y); ve = ve.divide(ve.magnitude()); return ve; } rotateBy(ang){ ang=-ang; return new Vector(this.xMath.cos(ang)-this.yMath.sin(ang),this.xMath.sin(ang)+this.yMath.cos(ang)); } reflect(n){ var ve=new Vector(this.x,this.y); ve = ve.subtract(n.scale(2ve.dot(n))) return ve; } abs(){ var ve=new Vector(this.x,this.y); ve.x=Math.abs(ve.x); ve.y=Math.abs(ve.y); return ve; } max(n){ var ve=new Vector(this.x,this.y); ve.x=Math.max(ve.x,n); ve.y=Math.max(ve.y,n); return ve; } } //WEBGL init{ 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 glCanvas = new OffscreenCanvas(600, 600), 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 settin = gl.getUniformLocation(program, "settings"); const iChannel0 = gl.getUniformLocation(program,"iChannel0"); let texture0 = gl.createTexture(); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); const posBuffer = gl.createBuffer(); 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.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture0); gl.uniform1i(iChannel0, 0); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //tgl{ const glCanvas2 = new OffscreenCanvas(600, 600); const tgl = glCanvas2.getContext('webgl2'); const vertexSource2 = document.getElementById('vertex-shader').textContent, fragmentSource2 = document.getElementById('terrainFrag').textContent; const vertexShader2 = createShader(tgl, tgl.VERTEX_SHADER, vertexSource2), fragmentShader2 = createShader(tgl, tgl.FRAGMENT_SHADER, fragmentSource2); const program2 = createProgram(tgl, vertexShader2, fragmentShader2); const aPosition2 = gl.getAttribLocation(program2, 'aPosition') const drawx2 = tgl.getUniformLocation(program2, "drawx"); const drawy2 = tgl.getUniformLocation(program2, "drawy"); const iTime2 = tgl.getUniformLocation(program2, "iTime"); const settin2 = tgl.getUniformLocation(program2, "settings"); const iChannel02 = tgl.getUniformLocation(program2,"iChannel0"); const circleData = tgl.getUniformLocation(program2,"circleData"); let texture02 = tgl.createTexture(); const positions2 = new Float32Array([-1, -1, -1, 3, 3, -1]); const posBuffer2 = tgl.createBuffer(); tgl.bindBuffer(tgl.ARRAY_BUFFER, posBuffer2); tgl.bufferData(tgl.ARRAY_BUFFER, positions2, tgl.STATIC_DRAW); tgl.viewport(0, 0, 600, 600); tgl.clearColor(0, 0, 0, 1); tgl.useProgram(program2); tgl.enableVertexAttribArray(aPosition); tgl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0); tgl.activeTexture(tgl.TEXTURE0); tgl.bindTexture(tgl.TEXTURE_2D, texture02); tgl.uniform1i(iChannel02, 0); tgl.texParameteri(tgl.TEXTURE_2D, tgl.TEXTURE_WRAP_S, tgl.CLAMP_TO_EDGE); tgl.texParameteri(tgl.TEXTURE_2D, tgl.TEXTURE_WRAP_T, tgl.CLAMP_TO_EDGE); tgl.texParameteri(tgl.TEXTURE_2D, tgl.TEXTURE_MIN_FILTER, tgl.LINEAR); //} var settings={bloom:0,water:0,tv:0,normals:1}; function updateGL(){ gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform1f(drawx, 0); gl.uniform1f(drawy, 0); gl.uniform1f(iTime, frameCount); gl.uniform4fv(settin, [settings.bloom,settings.water,settings.tv,settings.normals]); tgl.uniform4fv(settin2, [settings.bloom,settings.water,settings.tv,settings.normals]); tgl.clear(tgl.COLOR_BUFFER_BIT); tgl.uniform1f(drawx2, 0); tgl.uniform1f(drawy2, 0); tgl.uniform1f(iTime2, frameCount); } //} function color(r,g,b,a,ct){ if(!a){ a=1.0; } if(!ct){ ct=ctx; } r=r/2; g=g/2; b=b/2; ct.fillStyle="rgb("+(r)+","+g+","+b+","+a+")" } function sig(x){ var e1=-1Math.sqrt(1-Math.pow(xsqrt3,2))+1 var e2=Math.sqrt(1-Math.pow(xsqrt3-sqrt3,2)) return(x>=0?(x<0.5?e1:(x<=1?e2:1)):0); } function slerp(a, b, t) { return a+(b-a)sig(t); } function lerp(a,b,t){ return a+(b-a)t; } var level=0; var player={x:0,y:0} class Level{ constructor(data){ this.data=data; } } var level1=new Level([-2800,600,800,0,-2800,-600,800,250,-1900,500,500,70,-1000,700,300,0]); var levels=[level1]; var terrainPush=[]; function updateTerrain(){ for(var i=0;i<levels[level].data.length;i+=4){ var datx=levels[level].data[i]; var daty=levels[level].data[i+1]; var siz=levels[level].data[i+2]+levels[level].data[i+3] if(datx>player.x-siz&&datx<player.x+600+siz && daty>player.y-600-siz&&daty<player.y+600+siz){ terrainPush[i]=datx; terrainPush[i+1]=daty; terrainPush[i+2]=levels[level].data[i+2]; terrainPush[i+3]=levels[level].data[i+3]; } } } updateTerrain(); tgl.uniform4fv(circleData, terrainPush); function clearTerrain(){ terrainPush=[]; for(var i=0;i<50;i++){ terrainPush.push(0,0,-1,0); } } function pCircle(v,s){ return v.magnitude()-s; } function pBox(v,s){ var d=(v.abs()).subtract(s); return ((d.max(0)).magnitude()) + Math.min(Math.max(d.x,d.y),0.0) } function smin(a,b,k){ k=2.0; var x=b-a; return 0.5(a+b-Math.sqrt(xx+kk)); } function terrainDist(p){ var di=10000.0; for(var i=0;i<terrainPush.length;i+=4){ var dat={x:terrainPush[i],y:terrainPush[i+1],z:terrainPush[i+2],w:terrainPush[i+3]}; if(dat.z>0.0){ di=smin(di,pCircle(p.subtract(new Vector(dat.x,dat.y)),dat.z),dat.w); } } di=smin(di,-pBox(p.subtract(new Vector(600.0,0.0)),new Vector(2900-40,900-40))+40,20.0); return di; } function sceneNormal(p){ var c=terrainDist(p); var dx=terrainDist(p.add(new Vector(1.0,0.0))); var dy=terrainDist(p.add(new Vector(0.0,1.0))); return (new Vector(c-dx-0.00001,c-dy-0.00001)).normalize(); } class Player{ constructor(x,y){ this.x=-2300; this.y=y; this.xv=0; this.yv=0; this.speed=0.0; this.mov=0.0; this.b=new Vector(this.x,this.y); this.bv=new Vector(0,0); this.midx=this.x; this.midy=this.y; this.top=new Vector(this.x,this.y); } update(){ this.x+=this.xv; this.y+=this.yv; this.speed+=Math.abs(this.xv)this.mov0.2; this.speed+=Math.abs(this.yv)this.mov0.2; this.speed+=this.mov0.025(new Vector(mouseX-300,mouseY-300).magnitude()); this.b=this.b.add(this.bv); this.yv+=0.35; this.bv.y+=0.3; this.xv=0.998; this.yv=0.998; this.bv=this.bv.scale(0.998); var pos=new Vector(this.x+0.001,this.y); this.b=this.b.subtract(pos); this.b=(this.b.normalize()).scale(80); this.b=this.b.add(pos); if(clicked){ this.mov=lerp(this.mov,1.0,0.05); }else{ this.mov=lerp(this.mov,0.0,0.05); } var x=this.x+300; var y=this.y-300; var dis=terrainDist(new Vector(x,y))-8 if(dis<0){ var norm=sceneNormal(new Vector(x,y)); this.x+=norm.x(dis); this.y+=norm.y(dis); this.xv-=(norm.x/2); this.yv-=(norm.y/2); this.xv=1-Math.abs(norm.x/20); this.yv=1-Math.abs(norm.y/20); } var bx=this.b.x+300; var by=this.b.y-300; var dis=terrainDist(new Vector(bx,by))-9 if(dis<0){ var norm=sceneNormal(new Vector(bx,by)); this.b.x+=norm.x(dis); this.b.y+=norm.y(dis); this.yv+=norm.ydis0.01 this.xv+=norm.xdis0.01 this.bv.x-=(norm.x/2); this.bv.y-=(norm.y/2); this.bv.x=1-Math.abs(norm.x/20); this.bv.y=1-Math.abs(norm.y/20); } var m=new Vector((mouseX-300)/200,(mouseY-300)/200); if(clicked&&this.y<300){ var m=(m.normalize()).scale(Math.min(m.magnitude(),1.0)1.2); this.xv+=m.x/15; this.yv+=m.y/15; } if(dis<1\|\|this.y>300){ if(clicked&&this.y>300){ m=(m.normalize()).scale(Math.min(m.magnitude(),1.0)1.2); this.xv+=m.x2; this.yv+=m.y2; } if(clicked&&this.y<300){ m=(m.normalize()).scale(Math.min(m.magnitude(),1.0)1.2); this.xv+=m.x/7; this.yv+=m.y/7; } } if(this.y>300){ this.xv=0.85; this.yv=0.85; this.bv=this.bv.scale(0.9); } this.top=new Vector(this.x,this.y).subtract(this.b); this.top=this.top.rotateBy(3.141/2); this.top=this.top.scale(0.2); } draw(){ camera.cameraSave(0); var flip=1; if(this.b.x>this.x){ flip=-1; ctx.translate(this.x,this.y); ctx.scale(1,-1); ctx.translate(-this.x,-this.y) } var m=new Vector((mouseX-300)/200,(mouseY-300)/200); var ang=-Math.atan2(this.x-this.b.x+m.x50,this.yflip-this.b.yflip+m.y50flip)-1.5; var ang2=-Math.atan2(this.x-this.b.x,this.yflip-this.b.yflip)-1.5; color(217,171,10); ctx.strokeStyle="rgb(40,35,2)" ctx.lineWidth=4; ctx.lineCap = "round"; var norm=sceneNormal(new Vector(this.x,this.y)); this.midx=lerp(this.midx,lerp(this.x,this.b.x,0.02)+norm.x6,0.4) this.midy=lerp(this.midy,lerp(this.y,this.b.y,0.02)+norm.y6,0.4) ctx.save(); ctx.beginPath(); if(flip===-1){ ctx.translate(this.x,this.y); ctx.rotate(ang22); ctx.translate(-this.x,-this.y); } ctx.moveTo(this.x,this.y); ctx.quadraticCurveTo(this.midx-this.top.x, this.midy-this.top.y, this.b.x,this.b.y); ctx.moveTo(this.b.x,this.b.y); ctx.quadraticCurveTo(this.midx+this.top.x, this.midy+this.top.y, this.x,this.y); ctx.stroke(); ctx.moveTo(this.x,this.y); ctx.quadraticCurveTo(this.midx-this.top.x, this.midy-this.top.y, this.b.x,this.b.y); ctx.moveTo(this.b.x,this.b.y); ctx.quadraticCurveTo(this.midx+this.top.x, this.midy+this.top.y, this.x,this.y); ctx.fill(); color(0,0,0); ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.quadraticCurveTo(this.midx-this.top.x/2, this.midy-this.top.y/2, this.b.x,this.b.y); ctx.moveTo(this.b.x,this.b.y); ctx.quadraticCurveTo(this.midx+this.top.x/2, this.midy+this.top.y/2, this.x,this.y); ctx.fill(); ctx.restore(); color(217,171,10); ctx.save(); ctx.translate(this.x,this.y) ctx.rotate(ang); ctx.translate(-this.x,-this.y) ctx.beginPath(); ctx.ellipse(this.x,this.y,20,10,0,0,Math.PI2); ctx.stroke(); ctx.beginPath(); ctx.ellipse(this.x,this.y,20,10,0,0,Math.PI2); ctx.fill(); color(255,255,255); ctx.beginPath(); ctx.ellipse(this.x-11,this.y+8,6,6,0,0,Math.PI2); ctx.fill(); color(0,0,0); ctx.beginPath(); ctx.ellipse(this.x-11,this.y+8,2,2,0,0,Math.PI2); ctx.fill(); ctx.beginPath(); // ctx.ellipse(this.x-11,this.y+8,6,6,0,0,Math.PI2); ctx.stroke(); ctx.strokeStyle="rgb(20,15,2)" ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(this.x-20,this.y-4); ctx.quadraticCurveTo(this.x-8,this.y-8,this.x-4,this.y-6); ctx.stroke(); ctx.restore(); ctx.save(); ctx.translate(this.x,this.y); ctx.rotate(ang2); ctx.translate(-this.x,-this.y) var dasin=Math.sin(this.speed/10); var dacos=Math.cos(this.speed/10); ctx.beginPath(); ctx.ellipse(this.x+20+dasin8,this.y-15+dasin3,10,6,0,0,Math.PI); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x+27+dasin11,this.y-15+dasin4,3,8,0,Math.PI,Math.PI2); ctx.ellipse(this.x+20+dasin8,this.y-15+dasin4,3,8,0,Math.PI,Math.PI2); ctx.ellipse(this.x+13+dasin7,this.y-15+dasin4,3,8,0,Math.PI,Math.PI2); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x+20+35+dacos8,this.y-15+dacos4,10,6,0,0,Math.PI); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.ellipse(this.x+27+35+dacos11,this.y-15+dacos4,3,8,0,Math.PI,Math.PI2); ctx.ellipse(this.x+20+35+dacos8,this.y-15+dacos4,3,8,0,Math.PI,Math.PI2); ctx.ellipse(this.x+13+35+Math.cos(this.speed/10)7,this.y-15+dacos4,3,8,0,Math.PI,Math.PI2); ctx.stroke(); ctx.fill(); ctx.restore(); ctx.restore(); } } class Camera{ constructor(x,y,z){ this.x=x; this.y=y; this.rx=x; this.ry=y; this.xv=0; this.yv=0; this.z=z; this.cameraShakex=0; this.cameraShakey=0; this.shakey=0; this.stiffness=0.1; this.damping=0.5; // this.movementSpeed=lerp(this.movementSpeed,(this.r-this.truer)this.stiffness,this.damping); // this.truer+=this.movementSpeed/2.0; } update(){ this.cameraShakex+=Math.random()-0.5; this.cameraShakey+=Math.random()-0.5; this.cameraShakex=0.92; this.cameraShakey=0.92; this.shakey=0.95; this.xv=lerp(this.xv,(this.x-this.rx)this.stiffness,this.damping); this.rx+=this.xv; this.yv=lerp(this.yv,(this.y-this.ry)this.stiffness,this.damping); this.ry+=this.yv; } cameraSave(z){ ctx.save(); if((z-this.z)>0){ ctx.translate(300,300); ctx.scale(1/(z-this.z),1/(z-this.z)); ctx.translate(-this.rx-this.cameraShakexthis.shakey,-this.ry-this.cameraShakeythis.shakey); }else{ ctx.translate(3000,3000); } } cameraSaveS(z){ ctx.save(); if((z-this.z)>0){ ctx.translate(300,300); ctx.scale(1/(z-this.z),1/(z-this.z)); ctx.translate(-300,-300); ctx.translate(this.cameraShakexthis.shakey,this.cameraShakeythis.shakey); }else{ ctx.translate(3000,3000); } } cameraRestore(){ ctx.restore(); } } var camera = new Camera(0,0,-1); function random() { return Math.random() - 0.5 } function random2() { var ou=Math.random() - 0.5 ou=2.0; return (ouou)Math.sign(ou); } var particles = []; class Particle { constructor(x, y, xv, yv, s, type, r, g, b, a, life) { this.x = x; this.y = y; this.sx=x; this.sy=y; this.xv = xv; this.yv = yv; this.size = s; this.tsize=s; this.type=type; this.opacity=1; this.rand=random(); this.life = life ((Math.random() + 1) / 2) this.ogLife=this.life; this.airResistance = 0.98; this.rand=Math.random()Math.PI2; if(type === "gas") { this.gravity = -0.1; this.airResistance = 0.9; } else { this.gravity = 0.2 } this.color = [r, g, b, a] } update() { this.size=this.tsizeMath.min(this.life/this.ogLife2,1.0); this.x += this.xv; this.y += this.yv; this.sx += Math.abs(this.xv); this.sy += Math.abs(this.yv); this.yv += this.gravity; this.xv = this.airResistance; this.yv = this.airResistance; this.opacity=(this.color[3]) if(this.type==="gas"){ this.xv=0.99; this.xv+=Math.sin(frameCount/10.0+this.rand10.0)/12.0; } this.life--; } draw() { ctx.fillStyle = "rgb(" + (this.color[0]) + "," + (this.color[1]) + "," + (this.color[2]) + "," + (this.color[3]) + ")" ctx.beginPath(); var rot=(this.sx+this.sy)/10+this.rand; ctx.moveTo(this.x-Math.cos(rot)this.size, this.y-Math.sin(rot)this.size); ctx.lineTo(this.x-Math.cos(rot+Math.PI/2)this.size, this.y-Math.sin(rot+Math.PI/2)this.size); ctx.lineTo(this.x-Math.cos(rot+Math.PI)this.size, this.y-Math.sin(rot+Math.PI)this.size); ctx.lineTo(this.x-Math.cos(rot+Math.PI/2.03.0)this.size, this.y-Math.sin(rot+Math.PI/23)this.size) ctx.fill(); } } //draw background{ color(200,0,0,1,ctx2); // ctx2.fillRect(0,0,5400,1800) color(58,57,55,1,ctx2); ctx2.beginPath(); var he=0; ctx2.moveTo(-2400,0) for(var i=-2400;i<=5400;i+=10){ if(i%100==0){ var prepo=po; var po=Math.random(); } he=lerp(prepo,po,(i%100)/100)+random()/8; ctx2.lineTo(i,1800-(he700-200000/Math.abs(Math.abs(i-2700)-2700)+1100)) } ctx2.lineTo(5400,0) ctx2.fill(); ctx2.beginPath(); ctx2.moveTo(-2400,1800) for(var i=-2400;i<=5400;i+=10){ if(i%100==0){ var prepo=po; var po=Math.random(); } he=lerp(prepo,po,(i%100)/100)+random()/4; ctx2.lineTo(i,he700-200000/Math.abs(Math.abs(i-2700)-2700)+1100) } ctx2.lineTo(5400,1800) ctx2.fill(); //} player=new Player(0,100); var now; var then = performance.now(); var fps = 30; var delta; var interval = 1000 / fps; for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } var sped=0; var frameCount=0; function draw() { window.requestAnimationFrame(draw); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); frameCount++; clearTerrain(); updateTerrain(); tgl.uniform4fv(circleData, terrainPush); updateGL(); player.update(); camera.x=player.x; camera.y=player.y; sped=lerp(sped,Math.sqrt(player.xvplayer.xv+player.yvplayer.yv),0.1); camera.z=-0.8-sped/50; //camera.z=-5+frameCount/100 for(var i = 0; i < particles.length; i++) { particles[i].update(); if(particles[i].life < 0) { particles.splice(i, 1); } } camera.update(); tgl.uniform1f(drawx2, camera.rx); tgl.uniform1f(drawy2, camera.ry); gl.uniform1f(drawx, mouseX); gl.uniform1f(drawy, 600-mouseY); ctx.fillRect(0,0,600,600) tgl.drawArrays(tgl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas2, 0, 0); tgl.texImage2D(tgl.TEXTURE_2D, 0, tgl.RGBA, tgl.RGBA, tgl.UNSIGNED_BYTE, glCanvas2); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, glCanvas2); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); } } window.requestAnimationFrame(draw); //<script> </script> <!-- Plan: Remote Starting cutscene: 5000 feet above a remote island... Plane drops a tv above an island, it falls into a cave (vertical ravine entrance) cuts to salamander (you) and the tv falls right beside you. Cartoon ! above head or something. Gameplay: Cave is slippery --> </head> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvezZ-oCww
Votes	1
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	3 months ago, 1727211647085
Updated	3 months ago, 1727211647085
Source Deleted	unknown