JSFiddle - React, Tailwind, and code Playground
by Darby Rathbone
JavaScript
var Vector = (function () {
function Vector(x, y) {
this.x = x;
this.y = y;
this.prevmag = 1
};
return Vector
})();
Vector.prototype = {
toString: function () {
return "[" + this.x + "," + this.y + "]"
},
mag: function () {
return Math.sqrt((this.x * this.x) + (this.y * this.y))
},
mult: function (k) {
this.x = this.x * k;
this.y = this.y * k;
return this.toString()
},
div: function (k) {
this.x = (this.x) / k;
this.y = (this.y) / k;
return this.toString()
},
norm: function () {
this.prevmag = this.mag();
this.div((this.mag()));
return this.toString()
},
add: function (vk) {
this.x = this.x + vk.x;
this.y = this.y + vk.y;
return this.toString()
},
sub: function (vk) {
this.x = this.x - vk.x;
this.y = this.y - vk.y;
return this.toString()
},
direction: function () {
return Math.atan2(this.y, this.x)
},
dot: function (v1) {
return (v1.x * this.x) + (v1.y * this.y)
}
};
function main(){
var dots = explosion(new Vector(200,100),500,2,2);
var intervalID = window.setInterval(animate, 1);
function animate(){
var ctx = canvas.getContext("2d");ctx.fillStyle = 'rgba(255,255,255,0.2)';
ctx.fillRect(0,0,canvas.width,canvas.height);
for (var i = 0; i < dots.length-1;i++){
//get a reference to the canvas
//draw a circle
ctx.fillStyle = "rgba(0,0,0,255)";
ctx.beginPath();
ctx.arc(dots[i].pos.x, dots[i].pos.y, dots[i].radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
dots[i].pos.add(dots[i].velocity);
dots[i].velocity.add(new Vector(0,.02));
...