I'm a javascript beginner but I managed to make a simple function that creates an animated canvas.
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
spawnProb = 1,
numberOfMoves = [8, 16], //[min, max]
distance = [50, 200],
attenuator = 900,
timeBetweenMoves = [6, 10],
size = [.5, 3],
lines = [],
frame = (Math.random() * 360) | 0;
function rand(ar) {
return Math.random() * (ar[1] - ar[0]) + ar[0];
}
function Line() {
this.x = Math.random() * w;
this.y = Math.random() * h;
this.vx = this.vy = 0;
this.last = {};
this.target = {};
this.totalMoves = rand(numberOfMoves);
this.move = 0;
this.timeBetweenMoves = rand(timeBetweenMoves);
this.timeSpentThisMove = this.timeBetweenMoves;
this.distance = rand(distance);
this.color = 'hsl(hue, 80%, 50%)'.replace('hue', frame % 360);
this.size = rand(size);
}
Line.prototype.use = function() {
++this.timeSpentThisMove;
if (this.timeSpentThisMove >= this.timeBetweenMoves) {
++this.move;
this.timeSpentThisMove = 0;
var rad = Math.random() * 2 * Math.PI;
this.target.x = this.x + Math.cos(rad) * this.distance;
this.target.y = this.y + Math.sin(rad) * this.distance;
}
this.last.x = this.x;
this.last.y = this.y;
this.vx += (this.x - this.target.x) / attenuator;
this.vy += (this.y - this.target.y) / attenuator;
this.x += this.vx;
this.y += this.vy;
ctx.lineWidth = this.size;
ctx.strokeStyle = ctx.shadowColor = this.color;
ctx.beginPath();
ctx.moveTo(this.last.x, this.last.y);
ctx.lineTo(this.x, this.y);
ctx.stroke();
}
function anim() {
window.requestAnimationFrame(anim);
++frame;
ctx.shadowBlur = 0;
ctx.fillStyle = 'rgba(0, 0, 0, .04)';
ctx.fillRect(0, 0, w, h);
ctx.shadowBlur = 20;
if (Math.random() < spawnProb) lines.push(new Line);
for (var i = 0; i < lines.length; ++i) {
lines[i].use();
if (lines[i].move >= lines[i].totalMoves) {
lines.splice(i, 1);
--i;
}
}
}
anim();
This is the result
However, when I shrink the browser down to mobile size and then expand it back to normal it looks like this:
I am trying to implement a resize function and event listener:
// Event handling
function addListeners() {
// window.addEventListener('resize', resize);
}
function resize() {
w = window.innerWidth;
h = window.innerHeight;
largeHeader.style.height = h+'px';
canvas.width = w;
canvas.height = h;
}
and call it before anim(); but no luck....
How can I fix this?
You just need to change the
canvas
toc
in the event listener;http://jsbin.com/zigoto/1/edit?js,output