switch to paperscript because canvas is a pita

.gitignore

@@ -0,0 +1 @@
+node_modules

index.js

@@ -1,72 +0,0 @@
-'use strict';
-
-class Vector{
-    constructor(x, y){
-        this.x = x;
-        this.y = y;
-    }
-
-    scalarProduct(other){
-        return this.x*other.x + this.y*other.y;
-    }
-
-    magnitude(){
-        return Math.sqrt(this.x**2 + this.y**2);
-    }
-
-    //vector product would be useless because the resultant would be in the z-axis
-
-    angle(other = new Vector(1, 0)){ //need some magnitude for origin vector to avoid division by 0
-        //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();
-    }
-}
-
-//initializing canvas
-const canvas = document.getElementById("canvas");
-
-canvas.width = window.innerWidth;
-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();
-

package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "paper": "^0.12.15",
+    "webpack-cli": "^4.10.0"
+  }
+}

src/index.js

@@ -0,0 +1,33 @@
+import * as paper from "paper";
+
+class Ship{
+    constructor(size, position){
+        this.size = size;
+        this.position = position;
+        this.nodes = [
+            new paper.Point(this.position.x, this.position.y-this.size),
+            new paper.Point(this.position.x+this.size/2, this.position.y),
+            new paper.Point(this.position.x-this.size/2, this.position.y),
+            new paper.Point(this.position.x, this.position.y-this.size) 
+        ];
+
+        this.path = new paper.Path(this.nodes);
+        this.path.strokeColor = "#333333";
+    }
+
+    update(){
+        this.path.rotate(3);
+    }
+};
+
+//initialization
+const canvas = document.getElementById("canvas");
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+paper.setup(canvas);
+
+const ship = new Ship(30, new paper.Point(canvas.width/2, canvas.height/2));
+
+paper.view.onFrame = (event) => {
+    ship.path.rotate(3);
+}

webpack.config.js

@@ -0,0 +1,10 @@
+const path = require("path");
+
+module.exports = {
+    entry: "./src/index.js",
+    output: {
+        path: path.resolve(__dirname, "webroot"),
+        filename: "index.js"
+    },
+    mode: "development"
+};

webroot/index.css

@@ -2,6 +2,6 @@
     box-sizing: border-box;
 }
 
-html, body{
+body{
     margin: 0px;
 }