Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Robert Richey
Courses Plus Student 16,352 PointsHTML Canvas - Bouncing Colors
Just showing my progress toward learning HTML Canvas and trying to create something useful or entertaining. I regard this as my nemesis - i.e. what I most want to accomplish.
Some day, I hope to create a precision platformer via HTML canvas that rivals games like Mario or I wanna be the boshy, etc. Until then, baby steps help open doors to learning and opportunity.
I imagine the next creative step as being to implement a player object, gravity, jumping and platforms. Following up with level design, obstacles, items, and nuance mechanics that will help flesh out a fun and entertaining gaming experience.
It's not a game, but rather a step toward learning game design and perhaps may help others interested in this process.
Disclaimer: my code is not DRY. There is a lot of room for improvement, but I do like the end result.
Robert Richey
Courses Plus Student 16,352 PointsThat's a solid recommendation. Paul Irish gives it 5/5 stars for Core HTML5 Canvas. Much appreciated!
Abe Layee
8,378 PointsYou're welcome anytime Robert Richey:D
2 Answers
Abe Layee
8,378 Pointswow! Nice bro... That is like what I want to be doing on my site with cool animation. Great work Robert Richey. How many hours did it take you to achieve that?
Robert Richey
Courses Plus Student 16,352 PointsHi Abraham,
Thanks! Hard to say how many hours this took - a guess would be somewhere around 4 - 6 hours. It started off as just bouncing a circular arc around, inside a canvas element. Then I experimented with velocities, size, and color. Then I added the UI for adjusting the number of circles and whether each circle's tail would fade or not.
The big takeaway is that if you are going to do animation, is to use requestAnimationFrame(). Forget about setInterval(). I'm taking the lazy way out and not considering browser compatibility. To ensure animations are cross-browser compatible, use Paul Irish's solution:
/**
* Credit: Paul Irish
*/
var requestAnimFrame = (function() {
return
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 1000 / 60);
};
})();
Abe Layee
8,378 PointsAlright, thanks again for sharing this amazing project and tip on animation using the requestAnimationFrame() method than setInterval(). I appreciate it.
Abe Layee
8,378 PointsAbe Layee
8,378 PointsRobert Richey you might want to check out this book for Html5 Canvas by David Geary. It has what you're looking for like animation,graphics, and game development.