Viewing Program

Program Data

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

Title	A firework with 2.5 million particles, one for every 1776 American citizen. (Happy late 4th)
ID	5702639216410624
Created	6 months ago, 1720202567435
Updated	6 months ago, 1720233148463
Code	<!DOCTYPE html> <!-- Gettysburg Address Delivered at Gettysburg, Pa. Nov. 19th 1863. “Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. “Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. “But in a larger sense we cannot dedicate, we cannot consecrate, we cannot hallow this ground. The brave men, living and dead, who struggled here have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember, what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us,that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion, that we here highly resolve that these dead shall not have died in vain, that this nation, under God, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.” --> <html> <title>A firework with 2.5 million particles, one for every 1776 American citizen. (Happy late 4th)</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; filter:contrast(150%); } canvas{ } </style> <script id="webg" type = 'glsl'>#version 300 es in vec2 coordinates; uniform float iTime; float hash(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) 43758.5453); } void main() { vec2 offset = (vec2(hash(coordinates.xy),hash(coordinates.xy+vec2(1.0)))-vec2(0.5))2.0; float off = (hash(coordinates.xy-1.0)); float off2 = (hash(coordinates.xy-2.0)); float off3 = (hash(coordinates.xy-3.0)); float time=iTime/200.0; time=time+off2/100.0; vec2 mov=(vec2(offset.x,offset.y)off)time4.0+vec2(0.0,1.0); vec2 o=coordinates+vec2(mov.x,mov.y-((time-1.2)(time-1.2)(0.9+off3/1.0))); gl_Position = vec4(o.x,o.y,0.1, 1.0); gl_PointSize = 1.0; } </script> <script id="webg2" type = 'glsl'>#version 300 es precision lowp float; out vec4 FragColor; void main() { FragColor = vec4(1.0, 0.8, 0.5, 1.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 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; } } var numBalls=0; var particles=[]; for(var t=0;t<2250000;t++){ particles.push(new particle(297+Math.random()6,297+Math.random()6,Math.random()600-300,-Math.random()600)); } /================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, 0.2); // Enable the depth test const iTime = gl.getUniformLocation(shaderProgram, "iTime"); var now; var then = performance.now(); var fps = 60; var delta; var frameCount=0; var interval = 1000 / fps; vertices = [ ]; for(var c=0;c<particles.length;c++){ vertices.push((particles[c].x)/300-1.0,-(particles[c].y)/300+1.0); } //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.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coord); var drawl=function() { window.requestAnimationFrame(drawl); now = performance.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); frameCount+=1.0; frameCount+=1; ctx.fillStyle="rgb(2,2,2,1)" if(frameCount>1000) { numBalls=3000000; } if(numBalls<2500000){ gl.uniform1f(iTime, frameCount); }else{ numBalls="You made it!"; } // Clear the canvas ctx.fillStyle="rgb(250,0,0)" // Clear the color buffer bit gl.clear(gl.COLOR_BUFFER_BIT\|\|gl.DEPTH_BUFFER_BIT); // Set the view port // Draw the triangle gl.drawArrays(gl.POINTS, 0, (vertices.length/2)); 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	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJvG0tCQCgw
Votes	41
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	Bearkirb314🐻‍❄️
Author Name	BearKirb314
Author ID	kaid_375460112550893828689953
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1720309385868
Updated	6 months ago, 1720309385868
Source Deleted	unknown