Embedded Files
Let us suggest some topics of discussion and optional projects:
Suggested topics:
Suggested topics:
Why do we always mention "smooth animation" with 60 frames/s (note that in Europe, it was 50 frames/s for a long time)?
When should we use setTimeout or setInterval instead of the brand new super duper requestAnimationFrame? Please take a guess or if you know why, try to give examples and share your experiences in the forum. The optional projects below will help.
Optional projects:
Optional projects:
Here are a few project ideas. Your classmates and the team who prepared the course will be glad to try them and offer feedback. Please post URLs in this discussion forum.
While these projects are not graded, it is important to complete them to ensure good understanding of the material.
Project 1 (easy): You created a monster, or a small drawing during Week 3: now please animate it! For example, make it move horizontally on the screen and bounce when it hits a vertical border.
Project 2 (easy): Change the color of your drawing every 0.5s. Professionals would do this using the timeStamp parameter passed to the function called by requestAnimationFrame, and do some computations, etc. But this is for advanced users. Others will simply use requestAnimationFrame for the smooth shape movements at 60 frames/s (using translate, rotate and increments, as shown in the course), and will use setInterval, for example for calling another function every 0.5s, or every second, that could change a color, a speed, etc.
Try the "Transmogrify monster", by Bill Graham. It uses color changes + bounces on vertical borders:
Project 3 (easy): Run several animations at the same time (beware not to clear the canvas in all of them during each animation loop - one clear is enough). You can also have multiple calls to setInterval. Try and learn from experience. Then discuss your findings in the forum.
Try the example below on CodePen (by Dilip Dorwal). It uses animation and motion blur:
Project 4 (easy): Implement motion blur for free! Instead of using clearRect(...) for clearing the canvas content, please comment this line and replace it by drawing a filled rectangle of the size of the canvas, that has some transparency. Use the following two lines, for example:
//ctx.clearRect(0, 0, canvas.width, canvas.height);
// Next line sets the color for filled shapes.
// We will use transparency here to create a blurred effect.
// Try different values for the last param (transparency): 0.05, 0.01, etc.
ctx.fillStyle = "rgba(0, 240, 240, 0.2)";
ctx.fillRect (0, 0, width, height);
// It will erase the canvas content using color defined above.
Page updated
Google Sites
Report abuse