I am attempting to create a mesmerizing animation of a black hole simulation using the canvas element. My goal is to make objects exit the black hole if their distance from its center is greater than the black hole's radius, and to do so at variable speeds.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Black Hole Test</title>
<script>
var canvas, ctx;
var blackhole;
var circle;
var circles = new Array();
var G = 6.67e-11,
c = 3e8,
M = 12e31,
Rs = (2 * G * M) / 9e16,
pixel_Rs = Rs / 1e3;
function update() {
for (var i = 0; i < 200; i++) {
var vec2D = new Vector2D(Math.floor(Math.random() * 1400), Math.floor(Math.random() * 800));
circle = new Ball(5, vec2D.x, vec2D.y, "grey");
circle.draw(ctx)
circles.push(circle);
var distance = Math.sqrt(((vec2D.x - 700) * (vec2D.x - 700)) + ((vec2D.y - 400) * (vec2D.y - 400)));
if (distance > pixel_Rs) {
var delta = new Vector2D(1, 1);
var forceDirection = Math.atan2(vec2D.y - 700, vec2D.x - 400);
delta.x += Math.cos(forceDirection) * 3;
delta.y += Math.sin(forceDirection) * 3;
vec2D.x += delta.x;
vec2D.y += delta.y;
requestAnimationFrame(update);
}
}
};
function init() {
var G = 6.67e-11,
c = 3e8,
M = 12e31,
Rs = (2 * G * M) / 9e16,
pixel_Rs = Rs / 1e3;
canvas = document.getElementById("space");
ctx = canvas.getContext('2d');
blackhole = new Ball(pixel_Rs, 700, 400, "black");
blackhole.draw(ctx);
requestAnimationFrame(update);
};
function Ball(radius, posx, posy, color) {
this.radius = radius;
this.posy = posy;
this.posx = posx;
this.color = color;
};
Ball.prototype.draw = function(ctx) {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.posx, this.posy, this.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
};
function drawCircle(ctx) {
for (var i = 0; i < 200; i++) {
var vec2D = new Vector2D(Math.floor(Math.random() * 1400), Math.floor(Math.random() * 800));
circle = new Ball(5, vec2D.x, vec2D.y, "grey");
circle.draw(ctx)
circles.push(circle);
}
};
function Vector2D(x, y) {
this.x = x;
this.y = y;
}
Vector2D.prototype = {
length: function() {
return this.x * this.x + this.y * this.y;
},
add: function(vec) {
return new Vector2D(this.x + vec.x, this.y + vec.y);
},
subtract: function(vec) {
return new Vector2D(this.x - vec.x, this.y - vec.y);
},
decrementBy: function(vec) {
this.x -= vec.x;
this.y -= vec.y;
}
};
window.onload = init;
</script>
<style>
body {
background-color: #021c36;
margin: 0px;
}
</style>
</head>
<body>
<canvas id="space" , width="1400" , height="800">
</canvas>
</body>
</html>
Why isn't it working or displaying anything?