switch to paperscript because canvas is a pita

master
Milan Suman 2022-08-01 12:26:54 +05:30
parent 1a69f86e4a
commit e6c9ee31fc
9 changed files with 2643 additions and 73 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
node_modules

View File

@ -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();

2454
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

6
package.json Normal file
View File

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

33
src/index.js Normal file
View File

@ -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);
}

10
webpack.config.js Normal file
View File

@ -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"
};

View File

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

138
webroot/index.js Normal file

File diff suppressed because one or more lines are too long