CODEWITHSUNDEEP
javascripthtmlanimationcanvas
ZoEM
ZoEM

Reputation: 852

Animating an image to create rain effect

I’m trying to write a simple enough animation with javascript using HTML5 canvas. It’s an image of rain drops that I want to animate seamlessly. This is the image:

https://s31.postimg.org/475z12nyj/raindrops.png

This is how I'm currently animating it:

function Background() {
        this.x = 0, this.y = 0, this.w = bg.width, this.h = bg.height;
        this.render = function() {
            ctx.drawImage(bg, 0, this.y++);
            if (this.y <= -199) { //If image moves out of canvas, reset position to 0
                this.y = 0;
            }
        }
    }

I’m facing two issues though.

This is where it stops to be a simple enough animation.

Here’s my fiddle, it includes all my code. Thanks a lot.

PS: I’ll take any help with either Javascript or CSS I can get. But I do need the rain effect to be using the image only! I can’t accept anything else unfortunately.

Upvotes: 2

Views: 1894

Answers (1)

ManoDestra
ManoDestra

Reputation: 6493

I'd recommend splitting out your loop into an animation loop that calls update() and draw() separately. Update your state in update() and then render that state in draw().

Something like this (bit ragged, but you can perhaps make it better :) ):

var lastTick = 0;
var position = { x:0, y:0 };
var bg = document.getElementById('bg');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function update(gameTime) {
	position.x += (70 * gameTime.diff / 1000);
	position.y += (110 * gameTime.diff / 1000);
	if (position.x > canvas.width) {
		position.x = 0;
	}

	if (position.y > canvas.height) {
		position.y = 0;
	}
}

function draw(gameTime) {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.drawImage(bg, position.x, position.y, canvas.width, canvas.height);
	ctx.drawImage(bg, position.x - canvas.width, position.y, canvas.width, canvas.height);
	ctx.drawImage(bg, position.x, position.y - canvas.height, canvas.width, canvas.height);
	ctx.drawImage(bg, position.x - canvas.width, position.y - canvas.height, canvas.width, canvas.height);
}

function loop(tick) {
	var diff = tick - lastTick;
	var gameTime = { tick:tick, diff:diff };
	update(gameTime);
	draw(gameTime);
	requestAnimationFrame(loop);
	lastTick = tick;
}

requestAnimationFrame(loop);
<title>Rain</title>
<meta charset="UTF-8">
<style>
	canvas {
		width:100vw;
		height:100vh;
	}
</style>
<img id="bg" src="https://s31.postimg.org/475z12nyj/raindrops.png" style="display:none;">
<canvas id="canvas"><h1>Canvas not supported</h1></canvas>

Upvotes: 3

Related Questions