Viewing Program

Program Data

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

Title	Spin-off of "Spin-off "
ID	5052775055933440
Created	3 months ago, 1726324779233
Updated	3 months ago, 1726949208100
Code	<!DOCTYPE html> <html lang="en-US"> <title>Spin-off of "Spin-off "</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 = '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; 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) 1.9; coord = 1.1; // deform coords coord.x = 1.0 + pow((abs(coord.y) / bend), 3.0); coord.y = 1.0 + pow((abs(coord.x) / bend), 3.0); // transform back to 0.0 - 1.0 space coord = (coord / 1.7) + 0.5; coord=clamp(coord,0.0,1.0); 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); } #define M1 1597334677U //1719413929 #define M2 3812015801U //140473246711 float hash( uvec2 q ) { q = uvec2(M1, M2); uint n = (q.x ^ q.y) * M1; return float(n) * (1.0/float(0xffffffffU)); } 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; } vec3 noisei(vec2 p){ vec2 m=vec2(0.5); float siz=1.0; vec3 c = vec3(0.0); float div=50.0; for(int i=0;i<40;i++){ siz=0.93-(hash(uvec2((p+vec2(i))600.0))0.08); vec3 ad=max(texture(iChannel0,(((1.0p-(m))siz)+(m))).rgb-0.5,0.0); c+=((mix(ad.rgb,vec3(1.0),0.8))/div)length(ad)-0.003; } return max(min(c,0.7),0.0); } 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/res); uv.y=1.0-uv.y; vec2 uv2=uv; if(settings.b>0.5){ uv=crt(uv,1.4); uv2=round(uvvec2(300.0,100.0))/vec2(300.0,100.0); vec3 colo=textur(uv2).rgb; fragColor.r += colo.rmax(sin(200.03.141(uv.x+mod(floor(uv.y100.0)/3.0,2.0/3.0))+3.141/6.0)1.5-0.5,0.0); fragColor.g += colo.gmax(sin(200.03.141(uv.x+mod(floor(uv.y100.0)/3.0,2.0/3.0))-3.141/2.0)1.5-0.5,0.0); fragColor.b += colo.bmax(sin(200.03.141(uv.x+mod(floor(uv.y100.0)/3.0,2.0/3.0))+3.141/1.2)1.5-0.5,0.0); }else{ fragColor.rgb = textur(uv2).rgb; } // uv2=round(uv300.0)/300.0; fragColor.a=1.0; if(settings.r>0.5\|\|settings.b>0.5){ vec3 som=vec3(0.0); float accum=0.0; for(float x=0.0;x<=50.0;x+=1.0){ float randx=(x500.0); vec2 off=(vec2(cos(randx3.1412.0),sin(randx3.1412.0)))x(random(vec2(uv+x))0.25+0.75)/(1800.0-settings.b400.0); vec3 he = textur(uv2-off).rgb; accum++; som+=he; if(length(he)>=0.8699-settings.b){ fragColor.rgb+=(he/(100000.0dot(off,off)+(1.0+settings.b))+0.01)((max(max(he.r,he.g),he.b)(2.0+settings.b2.0))-(1.0-settings.b/1.2)); } } if(settings.b>0.5){ fragColor.rgb+=0.03+abs(sin(uv.y5.0+round(iTime/2.5)(3.1415/4.0)))/50.0; } } fragColor.rgb=2.0; // fragColor.rgb+=noisei(uv); uv = 1.0 - uv.yx; float vig = uv.xuv.y 100.0; // multiply with sth for intensity vig = pow(vig, 0.15); // change pow for modifying the extend of the vignette fragColor.rgb=vig; } </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; uniform vec4 circleData[50]; out vec4 fragColor; const vec2 iResolution = vec2(600.0,600.0); float sdBox( in vec2 p, in vec2 b ) { vec2 d = abs(p)-b; return length(max(d,0.0)) + min(max(d.x,d.y),0.0); } float sdCircle( vec2 p, float r ) { return length(p) - r; } float smin( float a, float b, float k ) { k = 2.0; float x = b-a; return 0.5( a+b-sqrt(xx+kk) ); } float scene(vec2 p){ vec2 im=vec2(300.0,300.0); im.y=iResolution.y-im.y; float di=1000.0; for(int i=0;i<circleData.length();i++){ vec4 dat=circleData[i]; if(dat.z>0.0){ di=smin(di,sdCircle(p-dat.xy,dat.z),dat.w); } } di=smin(di,-sdBox(p-vec2(600.0,0.0),vec2(2900.0,900.0)-40.0)+40.0,20.0); return di; } vec2 hash2(vec2 p ) { return fract(sin(vec2(dot(p, vec2(123.4, 748.6)), dot(p, vec2(547.3, 659.3))))5232.85324); } float hash(vec2 p) { return fract(sin(dot(p, vec2(43.232, 75.876)))4526.3257); } //Based off of iq's described here: https://iquilezles.org/articles/voronoilines float voronoi(vec2 p) { vec2 n = floor(p); vec2 f = fract(p); float md = 5.0; vec2 m = vec2(0.0); for (int i = -1;i<=1;i++) { for (int j = -1;j<=1;j++) { vec2 g = vec2(i, j); vec2 o = hash2(n+g); o = 0.5+0.5sin(iTime/40.0+5.038o); vec2 r = g + o - f; float d = dot(r, r); if (d<md) { md = d; m = n+g+o; } } } return md; } float ov(vec2 p) { float v = 0.0; float a = 0.4; if(settings.g>0.5){ for (int i = 0;i<3;i++) { v+= voronoi(p)a; p=2.0; a=0.5; } }else{ for (int i = 0;i<2;i++) { v+= voronoi(p)a; p=2.0; a=0.5; } } return v; } float fbm(vec2 p){ float ou=0.0; float mult=1.0; if(settings.g>0.5){ for(int i=0;i<3;i++){ ou+=ov(pmult)/mult; mult=2.0; } }else{ for(int i=0;i<1;i++){ ou+=ov(pmult)/mult; mult=2.0; } } return ou; } vec3 stone(vec2 uv,float d){ vec3 col=vec3(0.0); float scale = .9; vec2 coord = scale(uv+vec2(5200.0)); // Heart of color selection. int val = ((int(coord.x) & int(coord.y)) % 3); float result = 0.0; vec3 col_prev; for(int i = 0; i < 6; i++){ col_prev = col; coord.y += (2.0+result)/2.0; coord += coord.yy/4.0; coord = coord.yx/(2.0); result = ((result + float(val = ((int(coord.x) \| int(coord.y)) % (3+val))))/(6.0)); col.x = (result+col.z)/2.0; col = (fract((col.yzx))+col_prev)/2.0; } // Output. col = vec3(mix(colmix(vec3(1.4,0.6,0.2),vec3(0.5,0.6,0.59),clamp(uv.y/1000.0,0.0,1.0)),vec3(length(col)),0.4)/(8.0+clamp(d/1.0+5.0,-5.0,0.0)))2.5+0.01; return col; } void main() { vec2 fragCoord = gl_FragCoord.xy; vec2 iMouse = vec2(drawx,drawy); vec2 uv2 = fragCoord.xy; vec2 uv = fragCoord.xy+vec2(drawx,600.0-drawy); uv.y=iResolution.y-uv.y; uv2.y=iResolution.y-uv2.y; vec3 col=texture(iChannel0,uv2/iResolution.xy).rgb1.0; float sd=scene(uv); if(uv.y>0.0){ vec3 a = vec3(0.05, 0.25, 0.3); vec3 b = vec3(0.85, 0.9, 1.0); float fb=fbm(uv/125.0); vec2 off=vec2(cos(fb3.14),sin(fb3.14)); col = mix(texture(iChannel0,uv2/iResolution.xy+off/70.0).rgb2.0,mix(a, b, smoothstep(0.0, 0.5, fb/4.0+clamp(clamp(-(uv.y-25.0)/100.0,0.0,1.0)+(2.0/(sd+8.0)),0.0,1.0))),0.6)/2.0; } if(sd<0.0){ vec3 colc=stone(uv,sd); vec3 colx=stone(uv+vec2(2.0,0.0),sd); vec3 coly=stone(uv+vec2(0.0,2.0),sd); vec3 norm=vec3(colc.x-colx.x,colc.x-coly.x,4.0); float c=10.0; float nx=10.0; float ny=10.0; vec3 norm2=vec3(-(c-nx),-(c-ny),0.005); vec3 norm3=norm2; if(settings.a>0.5){ c=10.0/(scene(uv)); nx=10.0/(scene(uv+vec2(1.0,0.0))); ny=10.0/(scene(uv+vec2(0.0,1.0))); norm2=vec3(-(c-nx),-(c-ny),0.003); norm3=vec3(-(c-nx),-(c-ny),0.009); } vec3 scree=vec3(uv/iResolution.xy-(vec2(drawx,drawy-600.0)/0.9)/iResolution.xy-0.5,1.0); float li=dot(normalize(scree),normalize(norm))(dot(normalize(scree),normalize(norm2))0.5+0.5); float light=dot(normalize(scree),normalize(norm))(dot(normalize(scree),normalize(norm3))0.02+0.98); light=light; light=light; light=light; light=light; light=light; light=light; light=light; light=light; col=(colcli+light/2.0)/2.0; } // Output to screen fragColor = vec4(col,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:1,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,-1200,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(100); 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 = 40; 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, camera.rx); gl.uniform1f(drawy, camera.ry); color(20,20,25); ctx.fillRect(0,0,600,600); camera.cameraSave(4); ctx.drawImage(canvas2,-2400-1200,-600-1200,5400+2400,1800+2400); ctx.restore(); ctx.fillStyle="rgb(0,0,0,0.2)" ctx.fillRect(0,0,600,600); camera.cameraSave(2); ctx.drawImage(canvas2,-2400-1600,-600-1200,(5400+2400),1800+2400); ctx.restore(); player.draw(); tgl.texImage2D(tgl.TEXTURE_2D, 0, tgl.RGBA, tgl.RGBA, tgl.UNSIGNED_BYTE, canvas); tgl.drawArrays(tgl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas2, 0, 0); if(settings.tv>0.5){ color(255,255,255); ctx.fillRect(mouseX-15,mouseY-1,30,2); ctx.fillRect(mouseX-1,mouseY-15,2,30); } gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); gl.drawArrays(gl.TRIANGLES, 0, 3); camera.cameraSaveS(0); ctx.drawImage(glCanvas, 0, 0); ctx.restore(); } } 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	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvyje_8CAw
Votes	1
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6184205216825344","title":"Spin-off of \"Griffiths.js\"","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	3 months ago, 1726342146351
Updated	3 months ago, 1726949261643
Source Deleted	unknown