{"id":2126,"date":"2010-12-28T19:01:22","date_gmt":"2010-12-29T00:01:22","guid":{"rendered":"http:\/\/www.gubatron.com\/blog\/?p=2126"},"modified":"2010-12-28T19:01:22","modified_gmt":"2010-12-29T00:01:22","slug":"animating-a-game-like-sky-with-html5-canvas","status":"publish","type":"post","link":"https:\/\/www.gubatron.com\/blog\/animating-a-game-like-sky-with-html5-canvas\/","title":{"rendered":"Animating a game-like sky with HTML5 Canvas"},"content":{"rendered":"

\"\"<\/a>
\nTry it<\/a> | View Source<\/a><\/p>\n

Again playing a little more with HTML5 and Canvas animation.<\/p>\n

This time around the result is a little more pleasing to the eye, based on some ideas I have for a little arcade game I want to make I’ve created a gradient blue sky and clouds that move either to the left or right at different speeds.<\/p>\n

If I’m correct, I don’t think there is a way to move something that’s already been painted in the canvas, therefore I made the Clouds a “Cloud” object (I used to think I could paint a vector based graphic and then manipulate it in the canvas, but I think now the HTML Canvas is more of a place where you paint and you can’t really manipulate what’s already been painted). Each cloud is nothing but an array of white circles. The program initializes several clouds randomly and then with an interval call it repaints the gradient sky, and each one of the clouds, then moves them, to repeat the cycle over and over.<\/p>\n

I’m not sure if game devs out there are doing this or if there is a way to have the canvas move vector objects in a more efficient way than repainting the whole thing from scratch on every frame. At this point the animation looks very smooth but nothing except clouds moving is happening.<\/p>\n

I hope in your comments I’ll find some answers as if this is the way to animate your game, meaning, keeping object representations of everything that’s been painted in memory, and repainting the canvas on every frame of the game cycle.<\/p>\n

My goal (which I don’t know if is correct) is to do everything within a single CANVAS object. I’ve seen though how some people still like to play around with the DOM Tree, I’m not sure if adding and manipulating the DOM Tree is the correct way to procede here, I think it’d also be a nightmare to handle things when it comes to focus, or converting coordinates from one canvas to another and have everything make sense.<\/p>\n","protected":false},"excerpt":{"rendered":"

Try it | View Source Again playing a little more with HTML5 and Canvas animation. This time around the result is a little more pleasing to the eye, based on some ideas I have for a little arcade game I want to make I’ve created a gradient blue sky and clouds that move either to […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4,15],"tags":[],"class_list":["post-2126","post","type-post","status-publish","format-standard","hentry","category-ajax","category-code"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5Unzf-yi","jetpack-related-posts":[{"id":1385,"url":"https:\/\/www.gubatron.com\/blog\/iterative-sierpinksi-fractal-drawn-on-html5-canvas\/","url_meta":{"origin":2126,"position":0},"title":"Iterative Sierpinksi Fractal (drawn on HTML5 Canvas)","author":"gubatron","date":"September 5, 2009","format":false,"excerpt":"So maybe you've seen this very famous fractal called the Sierpinksi Fractal. A few days ago I heard that you could create this fractal pattern by simply plotting out of a random sequence of mid points of an ever growing set of these mid points. So curiosity added with my\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2121,"url":"https:\/\/www.gubatron.com\/blog\/playing-with-basics-of-html5-canvas\/","url_meta":{"origin":2126,"position":1},"title":"Playing with basics of HTML5 Canvas","author":"gubatron","date":"December 18, 2010","format":false,"excerpt":"Here's a snippet of something I did tonight to play a bit with the Canvas and 2d Graphics context objects in javascript. [html] Playing with Canvas<\/title> <\/head> <body style=\"padding:0 0; margin: 0 0; background:black\"> <canvas id=\"myCanvas\" width=\"1024\" height=\"1024\" ><\/canvas> <script type=\"text\/javascript\"> \/\/convert to CSS friendly Hex String function\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1324,"url":"https:\/\/www.gubatron.com\/blog\/html-5-is-out-and-about\/","url_meta":{"origin":2126,"position":2},"title":"HTML 5 is out and about","author":"gubatron","date":"July 11, 2009","format":false,"excerpt":"I believe that the <canvas>, <audio>and <video> tags will make the web a pretty exciting place. A lot of Flash components will be rewritten or converted into Javascript+HTML5 Object components making available more reusable elements for a graphical and interactive web, all being open sourced (javascript) and with no extra\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2749,"url":"https:\/\/www.gubatron.com\/blog\/deploying-html5-apps-on-cloudfront-with-efficient-invalidation-requests\/","url_meta":{"origin":2126,"position":3},"title":"Deploying HTML5 apps on CloudFront with efficient invalidation requests","author":"gubatron","date":"June 8, 2012","format":false,"excerpt":"So you decided to build your next web app\/site using nothing but HTML5 and Javascript. No server side processing for anything related to UI. This means you will be coding a lot of JavaScript. Wouldn't it be nice to put all that static HTML and JS on your CloudFront CDN\u2026","rel":"","context":"In "Code"","block_context":{"text":"Code","link":"https:\/\/www.gubatron.com\/blog\/category\/code\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":779,"url":"https:\/\/www.gubatron.com\/blog\/video-direct-note-access-manipulate-any-note\/","url_meta":{"origin":2126,"position":4},"title":"[VIDEO] Direct Note Access – Manipulate any note","author":"gubatron","date":"April 22, 2008","format":false,"excerpt":"Really ground breaking innovation in the field of music production. I bet we'll start seeing amazing remixes of everything out there in a few months thanks to this technology.","rel":"","context":"In "music"","block_context":{"text":"music","link":"https:\/\/www.gubatron.com\/blog\/category\/music\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1991,"url":"https:\/\/www.gubatron.com\/blog\/manifest-on-internets-evolution\/","url_meta":{"origin":2126,"position":5},"title":"Manifest on Internet’s Evolution","author":"gubatron","date":"March 18, 2015","format":false,"excerpt":"(Forgotten draft from May 31st 2010) I'm a little sad to see some of the paths the internet is taking lately. I personally think it's enough about the infatuation that people have with \"Social Networking\", enough, it's boring and it makes us waste precious time as a race. Technology is\u2026","rel":"","context":"In "Geeklife"","block_context":{"text":"Geeklife","link":"https:\/\/www.gubatron.com\/blog\/category\/geeklife\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/2126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/comments?post=2126"}],"version-history":[{"count":0,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/posts\/2126\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/media?parent=2126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/categories?post=2126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gubatron.com\/blog\/wp-json\/wp\/v2\/tags?post=2126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}