Compare commits
No commits in common. "1a69f86e4a8bb292a55c3d8a4983952cfd0c4443" and "8d5471f937af9ee3116c17365cf492f756819149" have entirely different histories.
1a69f86e4a
...
8d5471f937
14
index.html
14
index.html
|
@ -1,14 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Asteroids</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<noscript>Javascript is either disabled or not supported by your browser. Here's a 🍪</noscript>
|
|
||||||
<canvas id="canvas"></canvas>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
72
index.js
72
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();
|
|
||||||
|
|
Loading…
Reference in New Issue