{"id":761,"date":"2014-02-03T08:00:32","date_gmt":"2014-02-03T14:00:32","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=761"},"modified":"2014-02-03T08:00:32","modified_gmt":"2014-02-03T14:00:32","slug":"bouncing-balls-html5-canvas","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/bouncing-balls-html5-canvas\/","title":{"rendered":"Bouncing Balls in the HTML5 Canvas"},"content":{"rendered":"<p>Here&#8217;s a fun demo I put together using the HTML5 <code>canvas<\/code>, aided by the excellent <a href=\"https:\/\/github.com\/soulwire\/sketch.js\" title=\"Sketch.js on GitHub\">sketch.js framework<\/a>. I&#8217;m creating hundreds of semi-transparent balls and bouncing them around on the screen. The demo definitely requires a modern browser (Chrome\/Firefox\/IE9+).<\/p>\n<p data-height=\"350\" data-theme-id=\"4095\" data-slug-hash=\"JbxaI\" data-default-tab=\"result\" class='codepen'>See the Pen <a href='http:\/\/codepen.io\/rglazebrook\/pen\/JbxaI'>Bouncing Balls in sketch.js<\/a> by Rob Glazebrook (<a href='http:\/\/codepen.io\/rglazebrook'>@rglazebrook<\/a>) on <a href='http:\/\/codepen.io'>CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Sketch.js simplifies getting started building demos like this by providing a bunch of things that would normally have to be built by hand: an animation loop, drawing context, and so on. It also provides a few nice math-y functions, like <code>random()<\/code>, which you&#8217;ll see I&#8217;m using all over the place.<\/p>\n<p>I&#8217;ll walk through the code briefly to give you an idea of how it works, and how you can edit this one or make your own. You can follow along in the JS tab above. <!--more--><\/p>\n<p>First, I&#8217;m setting a few variables: a <code>particles<\/code> array, <code>particleCount<\/code>, and a <code>Particle<\/code> function. The <code>particles<\/code> array will hold every particle I create, while <code>particleCount<\/code> is the number of particles I&#8217;m going to create. <code>Particle<\/code> is a function which acts as my default for every particle I create. When I create a new particle, I pass it the x and y coordinates I want it to appear at. The rest is set internally: radius, color (in rgba), and velocity in both directions (vx and vy).<\/p>\n<p>I also give <code>Particle<\/code> a couple of internal functions: update and draw. The update function updates that particle&#8217;s x\/y coordinates. If it hits the edge of the screen, it reverses direction. The draw function draws the particle to the screen in its new location.<\/p>\n<p>The <code>sketch<\/code> function has three internal functions: <code>setup<\/code>, <code>update<\/code> and <code>draw<\/code>. <\/p>\n<p><code>Setup<\/code> gets called automatically when the page loads. It loops through <code>particleCount<\/code> number of times and creates a new particle. <\/p>\n<p><code>Update<\/code> runs automatically each frame. It loops through the particles and runs each of their internal <code>update<\/code> functions (which in turn updates that particle&#8217;s position).<\/p>\n<p><code>Draw<\/code> is called automatically by sketch.js after <code>update<\/code>. It loops through the particles and calls their <code>draw<\/code> function (which draws the particle to the screen).<\/p>\n<p>And that&#8217;s all we need! Sketch.js handles the rest of the dirty work.<\/p>\n<p>Edit the demo on CodePen to see what changes you can make. Fun things to change include:<\/p>\n<ul>\n<li><strong>particleCount:<\/strong> increase\/decrease the number of particles.<\/li>\n<li><strong>this.radius:<\/strong> changing the numbers inside the random function will change the size of particles created.<\/li>\n<li><strong>this.rgba:<\/strong> changing the numbers inside the four random functions within will change the colors created.<\/li>\n<li><strong>this.vx<\/strong> and <strong>this.vy:<\/strong> changing those numbers changes the velocities that the particles can have.<\/li>\n<\/ul>\n<p>If you create something interesting, be sure to share it in the comments!<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a fun demo I put together using the HTML5 canvas, aided by the excellent sketch.js framework. I&#8217;m creating a whole bunch of semi-transparent balls and bouncing them around on the screen. The demo definitely requires a modern browser (Chrome\/Firefox\/IE9+). [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/bouncing-balls-html5-canvas\/\" title=\"Click to read 'Bouncing Balls in the HTML5 Canvas'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[165,174],"tags":[62,217,244,281,55],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/761"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=761"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/761\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/774"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}