High-quality media is a must for any website. Get weekly tips for creating, optimizing, and implementing graphics, animation, video, and audio in the most modern way possible.
- [Instructor] Hi, this is Chris Converse and in this episode we'll be building on a previous episode where we combined two images together using the HTML five canvas element and so starting from there, we're going to create a second instance of the clouds image and move the images together seamlessly to create a looping animation. So if you'd like to follow along, download the exercise files and we'll begin by opening the HTML file in the text editor and so once you have the HTML file open we're going to scroll down here. We have a script in place that we created in an earlier episode, so down here we defined a canvas element, we defined the context and two of the images, and then we created a draw image function where we drew the two images to the canvas.
So starting from there what we're going to do is before the draw image function let's come in here and declare two more variables. First one's going to be clouds one position, so var clouds underscore one underscore position. We're going to set this equal to zero. Let's duplicate that line, let's create a second variable called clouds underscore two underscore position. Scroll down a little bit then inside of the draw image let's hit a few returns, let's reset clouds underscore one underscore position, and we're going to set this equal to itself plus .3 so we'll type a plus sign then equals .3 then a semicolon.
Now in the next line we're going to add a condition to make sure that the clouds one position is never greater than 650 pixels which is the size of the original jpeg file. So we'll type if put another parentheses, brackets, split this open on the brackets, inside of the parentheses we're going to check to see if clouds one position is greater than 650 and then if this condition is true we're going to set the clouds one position equal to zero then a semicolon then after the conditional statement, we're going to set the clouds two position.
So we'll say clouds two position and we're going to set this equal to the clouds one position minus 649. This way that one pixel overlap will make sure that we don't see a gap when this is animating across the stage. Now on the next line we're going to clear out the entire canvas element. So we'll type CTX for our context then a dot then we're going to type clearRect for clear rectangle, put in our parentheses then a semicolon.
Inside of the parentheses we'll set zero comma zero comma 500 comma 154 and now let's come in here to the first image, CTX draw image, we have the image variable here which is image underscore one. For the second value the X position, we're going to remove this zero and we're going to put in the clouds one position. So let's come in here and copy that variable name. Let's come in here and paste that then let's duplicate this line. We want to add the image one variable twice and for the second time we'll put in clouds two position.
So now with these created the last thing we need to do is set the animation. So we'll set a set time out, put in our parentheses then a semicolon. Inside of the parentheses, we're going to add an anonymous function, so we'll type in function, beginning and ending parentheses, beginning and ending brackets. Inside of the brackets, let's split this open and then inside of the brackets we're going to type window dot request animation frame, so request animation with a capital A, animation frame with a capital F, another set of parentheses and semicolon and inside of the parentheses we're going to add the function name so I'll come up here and copy the draw image, paste that down here, and then after the brackets but before the ending parentheses we'll hit a comma, this is going to be the interval for the set time out and we want this to play at about 30 frames per second.
So we're going to type in 1,000 divided by 30. And so with this script in place, let's save our HTML, let's go back to the browser and hit reload. The background image, which is the clouds, is now animating across the stage and when the clouds get to the far right hand side, the second instance of the clouds is being positioned to the left giving us that constant seamless loop. And so with that, I'll conclude this episode and, as always, thanks for watching.