Viewing Program

Program Data

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

Title	Goated Parallax Engine?
ID	5988376741855232
Created	7 months ago, 1716901479456
Updated	7 months ago, 1716904661461
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Goated Parallax Engine?</title> <style> #gl-canvas { display: none; overflow:hidden; } #tex { display: none; overflow:hidden; } #atlas { display: none; overflow:hidden; } #b { display: none; overflow:hidden; } canvas{ } { overflow:hidden; margin:0px; } </style> </head> <body> <canvas id = 'canvas' width = '600' height = '600'></canvas> <canvas id = 'gl-canvas' width = '600' height = '600'></canvas> <canvas id = 'tex' width = '600' height = '600'></canvas> <canvas id = 'atlas' width = '1200' height = '1200'></canvas> <canvas id = "b" width = '600' height = '600'></canvas> <script src = "https://cdn.jsdelivr.net/gh/Bearkirb/gameMidis/index.js" id="asdf"></script> <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> </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 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(600.0,600.0); vec2 res = iResolution.xy; vec2 uv=(fragCoord/res); uv.y=1.0-uv.y; fragColor.rgb = textur(uv).rgb; vec3 magxz = (textur(uv-vec2(0.0001,0.0)).xyz-textur(uv+vec2(0.0001,0.0)).xyz); vec3 magyz = (textur(uv-vec2(0.0,0.0001)).xyz-textur(uv+vec2(0.0,0.0001)).xyz); float magx = magxz.x+magxz.y+magxz.z; float magy = magyz.x+magyz.y+magyz.z; vec3 norm = vec3(-magx,-magy,0.03); float norms=dot(normalize(norm),normalize(vec3((uv.x-drawx)1.0,(uv.y-drawy)1.0,0.4))); fragColor=(norms/0.18+0.026); vec3 sum=vec3(0.0); for(float x=0.0;x<=3.141520.0;x+=1.5){ vec3 he = textur(uv-vec2(sin(x)(x/2000.0),cos(x)(x/2000.0))).rgb; sum+=he/(length(vec2(sin(x)(x/2000.0),cos(x)(x/2000.0)))+1.0); if(length(he)>=0.9){ fragColor.rgb+=he/3.0; } } if(length(fragColor.rgb)<=0.0001){ fragColor.rgb+=sum/4.0; } norms=norms; norms=norms; norms=norms; norms=norms; fragColor.rgb+=normslength(fragColor.rgb)/2.0; float dis=pow(distance(uv8.0,vec2(drawx8.0,drawy8.0)),2.0)/20.0; fragColor/=dis+0.8; fragColor.a=1.0; fragColor=photoshop_desaturate(fragColor.rgb,clamp(dis/2.0-0.2,0.0,1.0)); fragColor.rgb=mix(fragColor.rgb,((fragColor.rgb+1.0)/2.0)vec3(0.05,0.06,0.3),pow(distance(uv8.0,vec2(drawx8.0,drawy8.0)),2.0)/200.0+0.3); fragColor.rgb=vec3(1.0+(random(uv10.0+iTime)-0.5)/10.0); fragColor.rgb=0.5; } </script> <script type = 'module'> const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d',{preserveDrawingBuffer:true}); var mouseX=300,pmouseX=300,mouseY=0,pmouseY=0,clicked=false,key={}; window.addEventListener("mouseover", event => { mouseX = event.pageX; mouseY = event.pageY; }); window.addEventListener("mousemove", event => { mouseX = event.pageX; mouseY = event.pageY; }); 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; }); 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 = document.getElementById('gl-canvas'), 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 cli = gl.getUniformLocation(program, "clicked"); const iChannel0 = gl.getUniformLocation(program,"iChannel0"); let texture0 = gl.createTexture(); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); 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(); } } var mousex=300; var mousey=300; var now; var then = performance.now(); var fps = 50; var delta; var frameCount=0; var interval = 1000 / fps; for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } 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); function random() { return Math.random() - 0.5 } function lerp(a,b,t){ return a+(b-a)t; } function random2() { var ou=Math.random() - 0.5 ou=2.0; return (ouou)Math.sign(ou); } var data = ctx.getImageData(0, 0, 600, 600); var b = document.getElementById("b") var ctx3 = b.getContext("2d"); var texAtlas = document.getElementById("atlas") var actx = texAtlas.getContext("2d"); var t = document.getElementById("tex") var ctx2 = t.getContext("2d"); 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)); } 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); 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; } } function smin(a, b, k) { var h = Math.max(k - Math.abs(a - b), -0.01) / k; return Math.min(a, b) - h * h * k * (1.0 / 4.0); } //Texture{ function mod(a,n) { if(a>0){ return a%n }else{ return ((a % n) + n) % n; } }; var resolution = 3; var noiseText = []; for(var i = 0; i < 200; i++) { noiseText.push([]); } for(var i = 0; i < 200; i++) { noiseText[i].push(0); } var pts = []; for(var x = 0; x < 1; x+=.2) { for(var y = 0; y < 1; y+=.2) { pts.push({ x: x200+(Math.random() 40-20), y: y200+(Math.random() 40-20) }) } } var x = 0; var speed = 200; for(var x3 = 0; x3 < speed; x3++) { if(x < 200) { x++; } for(var y = 0; y < 200; y++) { var dist = 50; for(var i = 0; i < pts.length; i++) { for(var y1 = 0; y1 <= 3; y1++) { for(var x1 = 0; x1 <= 3; x1++) { var cx = (pts[i].x - x + x1 * 200 - 200); var cy = (pts[i].y - y + y1 * 200 - 200); dist = smin(dist, Math.sqrt(cx * cx + cy * cy), 0.1); } } } dist = 255-(dist * 8 ); noiseText[y][x] = dist; } } //} function fbm(x, y) { var f = (noiseText[mod(Math.floor(x/3),200) ][mod(Math.floor(y/3),200)+1]) f += (noiseText[mod(Math.floor((x/3)2),200) ][mod(Math.floor((y/3)2),200)+1])/2 f += (noiseText[mod(Math.floor((x/3)4),200) ][mod(Math.floor((y/3)4),200)+1])/4 f += (noiseText[mod(Math.floor((x/3)8),200) ][mod(Math.floor((y/3)8),200)+1])/8 return f/4-20; } var frameCount = 0; ctx.fillRect(0, 0, 600, 600); var data = ctx.getImageData(0, 0, 600 / resolution, 600 / resolution); for(var y = 0; y < 600 / resolution; y++) { for(var x = 0; x < 600 / resolution; x++) { var index = (x) * 4 + (y) * (600 / resolution) * 4; var col = 0; var col2 = 0; var col3 = 0; var wh = new Vector(x/2 * resolution, y/2 * resolution); col = fbm(wh.x, wh.y); col2=fbm(wh.x+3, wh.y); col3=fbm(wh.x, wh.y+3); var di=new Vector(col-col2,col-col3,1.0); var no=new Vector(-0.1,-0.4,0.8) no=no.normalize(); di=di.normalize(); di=di.scale(40); di=di.dot(no); if(di-(y20)+9402>0&&di+(y20)-602>0&&di-(x20)+19402>0&&di+(x20)-602>0){ if(y>80){ di-=(y-80)3.0; } if(y<20){ di+=(y-20)3.0; } if(x>180){ di-=(x-180)3.0; } if(x<20){ di+=(x-20)3.0; } data.data[index + 0] = (110 + di-10)0.9-50 data.data[index + 1] = (115 + di-10)0.9-50 data.data[index + 2] = (135 + di-10)0.9-50 data.data[index + 3] = 255 }else{ data.data[index + 0] = (70 + di/2)-50 data.data[index + 1] = (70 + di/2)-50 data.data[index + 2] = (50 + di/2)-50 data.data[index + 3] = 255 } } } ctx.putImageData(data, 0, 0); ctx.drawImage(canvas, 0, 0, 600resolution, 1200resolution); ctx2.drawImage(canvas, 0, 0, 600, 600); data.data.fill(0); ctx3.putImageData(data, 0, 0); for(var x=0;x<4;x++){ for(var y=0;y<6;y++){ ctx3.drawImage(canvas, mod(0+x240+y120,2404)-120,0+y100, 240, 100); }} class fancyBox{ constructor(x,y,w,h,o){ this.x=x; this.y=y; this.w=w; this.h=h; this.o=o; } draw(){ ctx.strokeStyle="rgb(138, 125, 30)" ctx.fillStyle="rgb(0,0,0,"+this.o+")" ctx.lineWidth=4; ctx.fillRect(this.x,this.y,this.w,this.h); ctx.strokeRect(this.x,this.y,this.w,this.h); ctx.lineWidth=2; ctx.strokeRect(this.x-4,this.y-4,this.w+8,this.h+8); ctx.fillStyle="rgb(138, 125, 30)" ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.ellipse(this.x+2,this.y+2,this.w/10,this.h/10,0,0,Math.PI/2); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x+this.w,this.y); ctx.ellipse(this.x-2+this.w,this.y+2,this.w/10,this.h/10,0,Math.PI/2,Math.PI/2+Math.PI/2); ctx.fill(); ctx.moveTo(this.x+this.w,this.y+this.h); ctx.ellipse(this.x-2+this.w,this.y-2+this.h,this.w/10,this.h/10,0,Math.PI/2+Math.PI/2,Math.PI/2+Math.PI/2+Math.PI/2); ctx.fill(); ctx.fill(); ctx.moveTo(this.x,this.y+this.h); ctx.ellipse(this.x+2,this.y-2+this.h,this.w/10,this.h/10,0,Math.PI/2+Math.PI/2+Math.PI/2,Math.PI/2+Math.PI/2+Math.PI/2+Math.PI/2); ctx.fill(); ctx.beginPath(); ctx.moveTo(this.x+5,this.y-7); ctx.quadraticCurveTo(this.x-10,this.y-5,this.x-10,this.y-10); ctx.quadraticCurveTo(this.x-5,this.y-10,this.x-7,this.y+5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x-5+this.w,this.y-7); ctx.quadraticCurveTo(this.x+10+this.w,this.y-5,this.x+10+this.w,this.y-10); ctx.quadraticCurveTo(this.x+5+this.w,this.y-10,this.x+7+this.w,this.y+5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x-5+this.w,this.y+7+this.h); ctx.quadraticCurveTo(this.x+10+this.w,this.y+5+this.h,this.x+10+this.w,this.y+10+this.h); ctx.quadraticCurveTo(this.x+5+this.w,this.y+10+this.h,this.x+7+this.w,this.y-5+this.h); ctx.stroke(); ctx.beginPath(); ctx.moveTo(this.x+5,this.y+7+this.h); ctx.quadraticCurveTo(this.x-10,this.y+5+this.h,this.x-10,this.y+10+this.h); ctx.quadraticCurveTo(this.x-5,this.y+10+this.h,this.x-7,this.y-5+this.h); ctx.stroke(); } } //Draw d1{ ctx.fillStyle="rgb(0,0,0)" //ctx.fillRect(0,0,600,600); ctx.clearRect(0, 0, 600,600); for(var y=0;y<3;y++){ ctx.drawImage(b,0,450-y150,340/2,300/2); } for(var y=0;y<3;y++){ ctx.drawImage(b,430,450-y150,340/2,300/2); } for(var y=0;y<4;y++){ ctx.drawImage(b,0+y140,0,360/2,300/2); } for(var y=0;y<=Math.PI-0.1963;y+=0.1963){ ctx.save(); ctx.translate(300,288); ctx.rotate(y+0.1963/2); ctx.translate(-187,0); ctx.drawImage(t,0,-12,242.5,122); ctx.restore(); } for(var y=0;y<=Math.PI;y+=0.1963){ ctx.save(); ctx.translate(300,288); ctx.rotate(y); ctx.translate(-200,0); ctx.drawImage(t,0,-12,243,122); ctx.restore(); } for(var i=0;i<10;i++){ ctx.fillStyle="rgb("+(Math.sin(i)255+70)+","+(Math.sin(i+(Math.PI2)/3)255+70)+","+(Math.sin(i+(Math.PI4)/3)255+70)+")" //ctx.fillRect(i60,500-50Math.sin((frameCount)/10.0+i59),60 ,50); } ctx.save(); ctx.fillStyle="rgb(120,120,120)" ctx.fillRect(98,325,4,50); ctx.fillStyle="rgb(130,130,130)" ctx.fillRect(90,335,20,5); ctx.beginPath(); ctx.ellipse(100,325,15,5,0,0,Math.PI2); ctx.fill(); ctx.fillRect(95,375,10,5); ctx.fillStyle="rgb(50,20,20)" ctx.fillRect(90,315,20,10); ctx.fillStyle="rgb(120,120,120)" ctx.fillRect(85,305,4,20); ctx.fillRect(92.5,310,4,20); ctx.fillRect(103.5,310,4,20); ctx.fillRect(111,305,4,20); ctx.restore(); ctx.save(); ctx.translate(400,0) ctx.fillStyle="rgb(120,120,120)" ctx.fillRect(98,325,4,50); ctx.fillStyle="rgb(130,130,130)" ctx.fillRect(90,335,20,5); ctx.beginPath(); ctx.ellipse(100,325,15,5,0,0,Math.PI2); ctx.fill(); ctx.fillRect(95,375,10,5); ctx.fillStyle="rgb(50,20,20)" ctx.fillRect(90,315,20,10); ctx.fillStyle="rgb(120,120,120)" ctx.fillRect(85,305,4,20); ctx.fillRect(92.5,310,4,20); ctx.fillRect(103.5,310,4,20); ctx.fillRect(111,305,4,20); ctx.restore(); actx.drawImage(canvas,0,0,600,600); //} class Camera{ constructor(x,y,z){ this.x=x; this.y=y; this.z=z; } 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.x,-this.y) }else{ ctx.translate(3000,3000); } } cameraRestore(){ ctx.restore(); } } var camera = new Camera(0,0,1); function render() { window.requestAnimationFrame(render); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); start=true; frameCount+=1.0; gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform1f(drawx, 0.5); gl.uniform1f(drawy, 0.5); gl.uniform1f(iTime, frameCount); if(clicked){ gl.uniform1f(cli, 1); }else{ gl.uniform1f(cli, 0); } ctx.fillStyle="rgb(0,0,0)" ctx.fillRect(0,0,600,600); camera.x=mouseX; camera.y=mouseY; camera.z=2Math.sin(frameCount/80); for(var i=0;i<10;i+=1){ camera.cameraSave(8-i); ctx.fillStyle="rgb(0, 0, 0,0.15)" ctx.fillRect(0,0,600,600); ctx.drawImage(texAtlas,0,0,600,600,0,0,600,600); for(var g = 0; g < particles.length; g++) { particles[g].draw(); } ctx.restore(); } for(var i=0;i<1;i++){ var vx=mouseX-pmouseX; var vy=mouseY-pmouseY; particles.push(new Particle(-200+300, 0+300, random2() 1, random2() * 2, 10, "gas", 255, 100, 20, 0.4, 80+random2()200)); } for(var i=0;i<1;i++){ var vx=mouseX-pmouseX; var vy=mouseY-pmouseY; particles.push(new Particle(200+300, 0+300, random2() 1, random2() * 2, 10, "gas", 255, 100, 20, 0.4, 80+random2()*200)); } for(var i = 0; i < particles.length; i++) { particles[i].update(); if(particles[i].life < 0) { particles.splice(i, 1); } } var d1=new fancyBox(0,0,200,100,0.8); // d1.draw(); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); pmouseX=mouseX pmouseY=mouseY; } } render(); </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOvj2czRCgw
Votes	24
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	bkirby5944
Author Name	kaid_468321686915402618794474
Author ID	kaid_468321686915402618794474
Author Profile Access	COACH

Archive Data

Added	7 months ago, 1716924845893
Updated	7 months ago, 1716924845893
Source Deleted	unknown