Viewing Program

Program Data

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

Title	Very cool animation thingy
ID	5170681097928704
Created	4 months ago, 1724786263375
Updated	4 months ago, 1724868183211
Code	<!DOCTYPE html> <!-- Hey so I happened to see this on instagram and thought I might as well try and recreate it so... that's what I did :) It's pretty satisfying to watch but you better hit the reload button at some point or your computer might be headed towards its next funeral. WARNING: There are lots of colors the longer you let the animation run btw so yeah... there's that. This basically works by just one particle in the center, but if the particle touches the border another one gets added. Then if either touch the another one comes and so on till you just get a whole bunch of them and it makes this weird art thingy. 2 things: Can you follow the original sqaure and how many squares did you get before your computer crashed? Hope you enjoy! --> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet" /> <title>Very cool animation thingy</title> <style> * { box-sizing: border-box; font-family: "Lato", sans-serif; } body { background-color: black; } h1, p { color: white; text-align: center; } canvas { border: 1px solid white; } body { margin: 0; padding: 0; } button { cursor: pointer; background: none; outline: none; border: 2px solid white; padding: 0.5rem 1rem; color: white; font-size: 1.5em; transition: 0.5s ease; } button:hover { background-color: white; color: black; } button:disabled { cursor: not-allowed; background-color: gray; color: black; } .warning { position: absolute; background-color: white; color: black; border: 5px solid rgb(96, 96, 96); padding: 1rem; top: 0; left: 140px; transform: translateY(-115px); animation: warning 5s ease forwards 2s; } .menu { display: flex; justify-content: center; align-items: center; flex-direction: column; } .play { display: flex; justify-content: center; align-items: center; flex-direction: column; } @keyframes warning { 0% { transform: translateY(-115px); } 80% { transform: translateY(100px); } 100% { transform: translateY(-115px); } } </style> </head> <body> <div class="warning"> <h2>WARNING FLASHING COLORS ALERT!!</h2> </div> <div class="menu"> <h1>Click on the button to begin</h1> <p>Btw, this will probably break your computer lol</p> <br /> <button>Play</button> </div> <div class="play"> <p>Number of squares : <span id="numSquares"></span></p> <div class="border"> <canvas></canvas> </div> </div> </body> <script type="module"> const canvas = document.querySelector("canvas"); const c = canvas.getContext("2d"); const numSquares = document.getElementById("numSquares"); const btn = document.querySelector("button") btn.addEventListener("click", () => { btn.disabled = true; draw(); }) canvas.width = 600; canvas.height = 310; let counter = 1; class Particle { constructor() { this.x = canvas.width / 2; this.y = canvas.height / 2; this.width = 10; this.height = 10; this.theta = Math.random() * Math.PI * 2; this.velX = Math.cos(this.theta); this.velY = Math.sin(this.theta); this.color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${ Math.random() * 255 })`; } draw() { c.fillStyle = this.color; c.fillRect(this.x, this.y, this.width, this.height); } create() { particles.push(new Particle()); counter++; } update() { this.draw(); this.x += this.velX; this.y += this.velY; numSquares.textContent = counter; if (this.x + this.width > canvas.width) { this.velX = -this.velX; this.create(); } if (this.x < 0) { this.velX = -this.velX; this.create(); } if (this.y + this.height > canvas.height) { this.velY = -this.velY; this.create(); } if (this.y < 0) { this.velY = -this.velY; this.create(); } } } const particles = [new Particle()]; const draw = () => { requestAnimationFrame(draw); c.fillStyle = "black"; c.fillRect(0, 0, canvas.width, canvas.height); particles.forEach((particle) => { particle.update(); }); }; </script> <!-- Credit to Bluebird for the thumbnail script --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script><script type>var r=600,s=document.documentElement.clientWidth;window.parent.html2canvas=t=>{try{html2canvas(document.body,{width:s,height:s,useCORS:!0,onclone:t=>t.getAnimations().forEach((t=>{try{t.finish()}catch{}}))}).then((t=>{var e=document.createElement("canvas");e.width=r,e.height=r,e.getContext("2d").drawImage(t,0,0,t.width,t.height,0,0,r,r),window.top.postMessage(e.toDataURL(),"")})).catch((t=>{alert("Thumbnail Script Error: "+t)}))}catch{window.top.postMessage(document.createElement("canvas").toDataURL(),"")}};</script> <script></script> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNuQ0NaXCQw
Votes	40
Spin-Offs	2
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Classic Kid
Author Name	classickid
Author ID	kaid_1168774361013512472344293
Author Profile Access	COACH

Archive Data

Added	4 months ago, 1724787213815
Updated	4 months ago, 1725723999488
Source Deleted	unknown