Viewing Program

Program Data

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

Title	Web workers
ID	4611670531293184
Created	3 months ago, 1727357087578
Updated	3 months ago, 1727357099737
Code	<!DOCTYPE html> <html> <title>Web workers</title> <canvas id = "m" width = '600' height = '600'></canvas> <canvas width = "600" height = "600" 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{ } </style> <script id="webg" type = 'glsl'> attribute vec3 coordinates; uniform float iTime; float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) 43758.5453); } void main(void) { gl_Position = vec4(coordinates, 1.0); gl_PointSize = 2.0; } </script> <script type="module"> var mouseX=0,pmouseX=0,mouseY=0,pmouseY=0,clicked=false,key={}; var clickToggle=false; window.addEventListener('mousedown', event => { clicked = true; clickToggle=true; //clicking? }); window.addEventListener('mouseup', event => { clicked = false; //not clicking so set clicked to false }); 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-2; mouseY = event.pageY; }); 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 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; } } var numBalls=0; var particles=[]; for(var t=0;t<100000;t++){ particles.push(new particle(297+Math.random()6,297+Math.random()6,Math.random()600-300,-Math.random()600)); numBalls++; } /================Creating a canvas=================/ var canvas = document.getElementById('my_Canvas'); var gl = canvas.getContext('experimental-webgl'); /==========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); if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(vertShader)); } // fragment shader source code var fragCode = 'void main(void) {' + ' gl_FragColor = vec4(0.9, 0.8, 0.7, 1.0);' + '}'; // 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); // 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"); function dist(x1,y1,x2,y2){ return Math.sqrt((x1-x2)(x1-x2)+(y1-y2)(y1-y2)) } var anim=0; var x=0; var frameCount=0; function update(ball){ if(clicked&&dist(mouseX,mouseY,ball[0],ball[1])<20){ ball[3]-=9-(mouseY-pmouseY)2; ball[2]-=(ball[0]-mouseX)/4-(mouseX-pmouseX)2 } for(var k=0;k<1;k++){ var co=0; for(var i = 0;i<balls.length;i++){ if(dist(ball[0],ball[1],balls[i][0],balls[i][1])<60){ co++; } } for(var i = 0;i<balls.length;i++){ if(ball[5]!=balls[i][5]&&dist(ball[0],ball[1],balls[i][0],balls[i][1])<40){ var ds=0.5/(Math.max((((ball[0]-balls[i][0])(ball[0]-balls[i][0])+(ball[1]-balls[i][1])(ball[1]-balls[i][1]))((ball[0]-balls[i][0])(ball[0]-balls[i][0])+(ball[1]-balls[i][1])(ball[1]-balls[i][1]))),8)(ball[4]/10))-(0.0019/co) var xc=Math.min(Math.max((ball[0]-balls[i][0])/(ball[4]20)ds55,-5),5) var yc=Math.min(Math.max((ball[1]-balls[i][1])/(ball[4]20)ds55,-5),5) ball[0]+=xc balls[i][0]-=xc ball[1]+=yc balls[i][1]-=yc ball[2]+=14xc balls[i][2]-=14xc ball[3]+=14yc balls[i][3]-=14yc balls[i][2]-=(balls[i][2]-ball[2])ds/2 balls[i][3]-=(balls[i][3]-ball[3])ds/2 } } // } ball[3]+=0.4 ball[0]+=ball[2]/20; ball[1]+=ball[3]/20; } if(ball[1]>600-ball[4]){ ball[1]=600-ball[4] ball[3]=ball[3]-(0.5) } if(ball[0]>600-ball[4]){ ball[0]=600-ball[4] ball[2]=ball[2]-(0.5) } if(ball[0]<0+ball[4]){ ball[0]=ball[4] ball[2]=ball[2]-(0.5) } if(ball[1]<0+ball[4]){ ball[1]=ball[4] ball[3]=ball[3]-(0.5) } } function draw(ball){ ctx.fillStyle=`rgb(0,0,255)`; ctx.beginPath(); ctx.ellipse(ball[0],ball[1],ball[4],ball[4],0,0,Math.PI2); ctx.fill(); ctx.fillStyle="rgb(100,100,100)"; } var balls=[]; for(var t=0;t<200;t++){ balls.push([Math.random()60,600-Math.random()600,0,0,2,t,0]); } var now; var then = performance.now(); var fps = 50; var delta; var frameCount=0; var interval = 1000 / fps; vertices = [ ]; gl.uniform1f(iTime, frameCount); // Unbind the buffer gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coord); // Clear the color buffer bit var blob = new Blob([ document.querySelector('#worker1').textContent ], { type: "text/javascript" }) // Note: window.webkitURL.createObjectURL() in Chrome 10+. var ws=[]; for(var i=0;i<2;i++){ ws.push(new Worker(window.URL.createObjectURL(blob))); } for(var i=0;i<ws.length;i++){ var worker=ws[i]; worker.onmessage = function(event) { balls=event.data.data; }; } var drawl=function() { window.requestAnimationFrame(drawl); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); frameCount+=1.0; ctx.fillStyle="rgb(2,2,2,0.4)" ctx.fillRect(0,0,600,600); for(var i=0;i<ws.length;i++){ ws[i].postMessage({data:balls,b1:iballs.length/ws.length,b2:(i+1)balls.length/ws.length}); } vertices=[]; for(var c=0;c<balls.length;c++){ vertices.push(balls[c][0]/300.0-1,1-balls[c][1]/300.0,0.0); } ctx.fillStyle="rgb(2,2,2,1)" // Clear the canvas ctx.fillStyle="rgb(250,0,0)" gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, (vertices.length/3)); ctx.drawImage(canvas,0,0); ctx.font="20px Monospace"; ctx.fillStyle="rgb(255,255,255)"; pmouseX = mouseX; pmouseY= mouseY clickToggle=false; } } drawl(); //<script> </script> <script id="worker1" type="javascript/worker"> self.onmessage = function(event) { var balls=event.data.data; function dist(x1,y1,x2,y2){ return Math.sqrt((x1-x2)(x1-x2)+(y1-y2)(y1-y2)) } function update(ball){ for(var k=0;k<1;k++){ var co=0; for(var i = 0;i<balls.length;i++){ if(dist(ball[0],ball[1],balls[i][0],balls[i][1])<60){ co++; } } for(var i = 0;i<balls.length;i++){ if(ball[5]!=balls[i][5]&&dist(ball[0],ball[1],balls[i][0],balls[i][1])<40){ var ds=0.5/(Math.max((((ball[0]-balls[i][0])(ball[0]-balls[i][0])+(ball[1]-balls[i][1])(ball[1]-balls[i][1]))((ball[0]-balls[i][0])(ball[0]-balls[i][0])+(ball[1]-balls[i][1])(ball[1]-balls[i][1]))),8)(ball[4]/10))-(0.0019/co) var xc=Math.min(Math.max((ball[0]-balls[i][0])/(ball[4]20)ds55,-5),5) var yc=Math.min(Math.max((ball[1]-balls[i][1])/(ball[4]20)ds55,-5),5) ball[0]+=xc balls[i][0]-=xc ball[1]+=yc balls[i][1]-=yc ball[2]+=14xc balls[i][2]-=14xc ball[3]+=14yc balls[i][3]-=14yc balls[i][2]-=(balls[i][2]-ball[2])ds/2 balls[i][3]-=(balls[i][3]-ball[3])ds/2 } } // } ball[3]+=0.4 ball[0]+=ball[2]/20; ball[1]+=ball[3]/20; } if(ball[1]>600-ball[4]){ ball[1]=600-ball[4] ball[3]=ball[3]-(0.5) } if(ball[0]>600-ball[4]){ ball[0]=600-ball[4] ball[2]=ball[2]-(0.5) } if(ball[0]<0+ball[4]){ ball[0]=ball[4] ball[2]=ball[2]-(0.5) } if(ball[1]<0+ball[4]){ ball[1]=ball[4] ball[3]=ball[3]*-(0.5) } } for(var c=event.data.b1;c<event.data.b2;c++){ update(balls[c]); } self.postMessage({data:balls,b1:event.data.b1,b2:event.data.b2}); }; </script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNu-o8mYCAw
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, 1727357515217
Updated	3 months ago, 1727357515217
Source Deleted	unknown