add more vector methods and asteroid path node generation

index.js

@@ -11,7 +11,7 @@ class Vector{
     }
 
     magnitude(){
-        return Math.sqrt(this.x^2 + this.y^2);
+        return Math.sqrt(this.x**2 + this.y**2);
     }
 
     //vector product would be useless because the resultant would be in the z-axis
@@ -20,18 +20,35 @@ class Vector{
         //cosθ = a.b/|a||b| 
         return Math.acos(this.scalarProduct(other)/(this.magnitude()*other.magnitude()));
     }
+
+    //figuring out coordinates from angle and distance
+    positionFromAngle(angle, distance){
+        return new Vector((this.x + distance) * Math.cos(angle), (this.y+distance)*Math.sin(angle));
+    }
 }
 
 class Asteroid{
+
+    //FIXME: Asteroid generation is very wonky
     constructor(size, position, edges=5){
         this.size = size;
         this.edges = edges;
         this.position = position;
+        this.nodes = [this.position];
+
+        for(let i=0; i<this.edges; i++){
+            let pos = this.nodes[i].positionFromAngle( this.nodes[i].angle() + (Math.max(Math.PI/6, Math.random()*(Math.PI/3))), 5);
+            this.nodes.push(pos);
+        }
     }
 
     draw(ctx){
         ctx.beginPath();
-        
+        this.nodes.forEach((node, _) => {
+            ctx.lineTo(node.x,node.y);
+        })
+        ctx.closePath();
+        ctx.stroke();
     }
 }
 
@@ -43,8 +60,12 @@ canvas.height = window.innerHeight;
 
 const ctx = canvas.getContext("2d");
 
+const asteroid = new Asteroid(50, new Vector(300, 240));
+
 function animate(){
     requestAnimationFrame(animate);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    asteroid.draw(ctx);
 }
 
 animate();