"use strict"; //constants const { PI: π, sin, cos, floor, round, pow } = Math; //variables let c, ctx, W, H; let pd = 2; //pixel density let lastTimeCalled, fps; let btn; let lstPoly = []; //objects class Point { constructor(x, y) { this.x = x; this.y = y; } } class Polygon { constructor(x, y, n, r) { this.x = x; this.y = y; this.n = n; //number of sides this.r = r; //radius this.v = []; //vertices //velocities of x & y axis & angular velocity this.spdx = random(-3, 3); this.spdy = random(-3, 3); this.spda = random(-π/40, π/40); this.collision = false; this.findVertices(); } findVertices() { for(let θ=0; θ<2*π-(2*π/this.n)+π/16; θ+=(2*π/this.n)) { let tx = round(this.x + this.r*cos(θ)); let ty = round(this.y + this.r*sin(θ)); this.v.push(new Point(tx, ty)); } } bounce() { if(0>this.x || this.x>W) { this.spdx *= -1; } if(0>this.y || this.y>H) { this.spdy *= -1; } } } //functions window.onload = () => { //timestamp lastTimeCalled = Date.now(); fps = document.getElementById("Fps"); //canvas setup c = document.getElementById("Canvas"); ctx = c.getContext("2d"); //canvas --> full screen setSize(window.innerWidth, window.innerHeight, pd); //create new polygon on click c.onclick = (e) => { let n = prompt("Number of sides", 3); let r = prompt("Polygon's size in px", 50); lstPoly.push(new Polygon(pd * e.x, pd * e.y, n, pd * r)); };//Katz321Juno: pd=pixel density; btn = document.getElementById("Info"); btn.onclick = () => alert("Tap anywhere on screen to create a new polygon.\n\nNOT my code!\n\nUpdates:\n0) Cleaned & updated this code to es6.\n1) Now using requestAnimationFrame instead of setInterval.\n2) The polygons now can't get off screen.\n3) Better resolution.\n\nKatz321Juno:\nUpdates mentioned were added by Haris.\nAny changes, or additions by me are marked with a comment."); //Create some initial polygons //Katz321Juno: the W's and H's are to indicate when to bounce off of a wall. -See line 45; Edit: where they start at. //Katz321Juno: lstPoly.push(new Polygon(pd * e.x, pd * e.y, n, pd * r)); -line 70 //Katz321Juno: n=number or sides; -lines 23 and 68; I found that it more accurately means number of points -line 86 //Katz321Juno: r=radius||Polygon's size in px; -lines 24 and 69 lstPoly.push(new Polygon(W/3, H/4, 4, pd * 50)); //Katz321Juno: Square,n=4,r=50; lstPoly.push(new Polygon(W/8, H/2, 3, pd * 60)); //Katz321Juno: Triangle,n=3,r=60; lstPoly.push(new Polygon(2*W/3, H/4, 5, pd * 60)); //Katz321Juno: Pentagon,n=5,r=60; lstPoly.push(new Polygon(2*W/3, 3*H/4, 6, pd * 45)); //Katz321Juno: Hexagon,n=6,r=45; I changed r from 30 to 45; lstPoly.push(new Polygon(W/π^2, H/π^2, 360, pd * 60)); //Katz321Juno: Circle,n=360,r=60; added by Katz321Juno lstPoly.push(new Polygon(W*2/3, H/2, 2, pd * 50)); //Katz321Juno: Line,n=2,r=50; added by Katz321Juno lstPoly.push(new Polygon(W/10, H/7, 7, pd * 50)); //Katz321Juno: Heptagon,n=7,r=50; added by Katz321Juno lstPoly.push(new Polygon(W*8/10, H*8/10, 8, pd * 50)); //Katz321Juno: Octagon,n=8,r=50; added by Katz321Juno lstPoly.push(new Polygon(W*0.10, H*9/10, 9, pd * 50)); //Katz321Juno: Nonagon,n9=,r=50; added by Katz321Juno lstPoly.push(new Polygon(W/2, H/5, 10, pd * 50)); //Katz321Juno: Decagon,n=10,r=50; added by Katz321Juno //begin animation window.requestAnimationFrame(animate); }; /* My (Katz321Juno) attempt to give them ids so I could give them specific colors. // Somehow caused errors at lines 27+65. To see them, add a "/" at the start of line 94. let Square=lstPoly.push(new Polygon(W/3, H/4, 4, pd * 50)); let Triangle=lstPoly.push(new Polygon(W/8, H/2, 3, pd * 60)); let Pentagon=lstPoly.push(new Polygon(2*W/3, H/4, 5, pd * 60)); let Hexagon=lstPoly.push(new Polygon(2*W/3, 3*H/4, 6, pd * 45)); let Circle=lstPoly.push(new Polygon(W/π^2, H/π^2, 360, pd * 60)); let LineSegment=lstPoly.push(new Polygon(W*2/3, H/2, 2, pd * 50)); let Heptagon=lstPoly.push(new Polygon(W/10, H/7, 7, pd * 50)); let Octagon=lstPoly.push(new Polygon(W*8/10, H*8/10, 8, pd * 50)); let Nonagon=lstPoly.push(new Polygon(W*0.10, H*9/10, 9, pd * 50)); let Decagon=lstPoly.push(new Polygon(W/2, H/5, 10, pd * 50)); //*/ const animate = (timestamp) => { calcFPS(); clear(); updatePoly(); draw(); //call next animation recursively window.requestAnimationFrame(animate); }; const updatePoly = () => { //verify collisions for(let i=0; i { let inter = false; for(let i=0; i= 0)) { tempInter = false; } } if(tempInter == true) { inter = true; } } return inter; }; //Rotate a point (x,y) arround another point (cx,cy) const rotate = (cx, cy, x, y, θ) => { let nx = (cos(θ)*(x-cx)) + (sin(θ)*(y-cy)) + cx; let ny = (cos(θ)*(y-cy)) - (sin(θ)*(x-cx)) + cy; return [nx, ny]; }; const draw = () => { for(let i=0; i { let timeDiff = Date.now() - lastTimeCalled; lastTimeCalled = Date.now(); fps.innerText = `fps: ${floor(1000/timeDiff)}`; }; const clear = () => { ctx.fillStyle = "#0d0d0d"; //Katz321Juno: was #333 ctx.fillRect(0, 0, W, H); }; const line = (x1, y1, x2, y2) => { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.lineWidth = pd/2; ctx.stroke(); ctx.closePath(); }; const random = (max=1, min=0) => Math.random() * (max - min) + min; const setSize = (w, h, pd) => { //canvas apparent size c.style.width = `${w}px`; c.style.height = `${h}px`; //canvas actual size c.width = W = pd * w; c.height = H = pd * h; };

"Polygon collision detection (updated)" Update