"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)); }; 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."); //Create some initial polygons lstPoly.push(new Polygon(W/3, H/4, 4, pd * 50)); lstPoly.push(new Polygon(W/8, H/2, 3, pd * 60)); lstPoly.push(new Polygon(2*W/3, H/4, 5, pd * 60)); lstPoly.push(new Polygon(2*W/3, 3*H/4, 6, pd * 30)); //begin animation window.requestAnimationFrame(animate); }; 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 = "#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)