effect os dark echo
by magneto903
HTML
<canvas id="canvas" width=200 height=200></canvas>
CSS
#canvas {
border: 2px solid grey;
}
JavaScript
var ctx = document.getElementById("canvas").getContext('2d')
var map = {
ctx: ctx,
width: 200,
height: 200,
particles: [],
circle: function (x, y, radius, color, fillCircle=true) {
this.ctx.beginPath();
this.ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
this.ctx.fillStyle = color;
this.ctx.fill();
} else {
this.ctx.strokeStyle = color;
this.ctx.stroke();
}
},
clear: function() {
this.ctx.clearRect(0, 0, this.width, this.height)
},
alpha_clear: function(alpha) {
this.ctx.fillStyle = "rgba(255, 255, 255,"+alpha+")"
this.ctx.fillRect(0, 0, this.width, this.height);
}
}
var Particle = function(x, y) {
this.x = x;
this.y = y;
this.x_speed = Math.floor(Math.random()*100)/10;
this.y_speed = Math.floor(Math.random()*100)/10;
this.trace_len = 0
this.trace_limit = 100
this.trace = [
{
"x": this.x,
"y": this.y,
},
{
"x": this.x,
"y": this.y,
}
];
this.update = function() {
this.x += this.x_speed;
this.y += this.y_speed;
this.trace[this.trace.length-1].x = this.x;
this.trace[this.trace.length-1].y = this.y;
var trace_len = 0
for (var i=1; i < this.trace.length; i++) {
trace_len += Math.sqrt(Math.pow(this.trace[i].x - this.trace[i-1].x, 2) + Math.pow(this.trace[i].y - this.trace[i-1].y, 2))
}
this.trace_len = trace_len;
//console.log(this.trace_len)
if (this.x < 0 || this.x > map.width) {
this.x_speed *= -1
this.trace.push( {
"x": this.x,
"y": this.y,
})
}
if (this.y < 0 || this.y > map.height) {
this.y_speed *= -1
this.trace.push( {
"x": this.x,
"y": this.y,
})
}
if (this.trace_len > this.trace_limit) {
var angle = Math.atan2(this.trace[0].y - this.trace[1].y, this.trace[0].x - this.trace[1].x);
var diff_x = Math.cos(angle)*(this.trace_len -...