{"id":2282,"date":"2012-02-18T09:00:08","date_gmt":"2012-02-18T08:00:08","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2282"},"modified":"2012-02-18T09:13:34","modified_gmt":"2012-02-18T08:13:34","slug":"my-js1k-2012-demo-heart-petals","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/my-js1k-2012-demo-heart-petals\/","title":{"rendered":"My JS1K 2012 demo: Heart Petals"},"content":{"rendered":"<p><!--?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?--><a href=\"http:\/\/js1k.com\/\">JS1K<\/a> is a competition where you have to create a cool demo with less than 1 kilobyte of code.<\/p>\n<p>This year, I entered the competition for the first time with a demo named: &#8220;Heart Petals&#8221;. The theme is &#8220;Love&#8221;, hence the cheesy title.<\/p>\n<p>Here&#8217;s what it looks like:<\/p>\n<p><iframe style=\"width: 100%; height: 300px\" src=\"http:\/\/jsfiddle.net\/sc8X8\/embedded\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>And here are some tricks I&#8217;ve used to reduce the code size:<\/p>\n<ul>\n<li><strong>Use unicode chars to draw shapes.<\/strong>\u00a0The hearts are not images. They are drawn with the unicode char\u00a0<a href=\"http:\/\/www.fileformat.info\/info\/unicode\/char\/2764\/index.htm\">0x2764<\/a>. That&#8217;s only one char (2 bytes in UTF8?). Certainly less than a lengthy SVG path or <a href=\"https:\/\/www.google.com\/search?q=sqrt(cos(x))*cos(300x)%2Bsqrt(abs(x))-0.7)*(4-x*x)^0.01%2C+sqrt(6-x^2)%2C+-sqrt(6-x^2)+from+-4.5+to+4.5\">a crazy equation<\/a>.<\/li>\n<li><strong>Use <a href=\"https:\/\/github.com\/jed\/140bytes\/wiki\/Byte-saving-techniques\">byte saving techniques<\/a>.<\/strong>\u00a0Did you know that\u00a0<strong>0|<\/strong> is equivalent to <strong>Math.floor()<\/strong> ? I didn&#8217;t.\u00a0Also, assign long function names to one letter vars.<\/li>\n<li><strong>Optimize your algorithm.<\/strong> Don&#8217;t write\u00a0unnecessary\u00a0steps.<\/li>\n<li><strong>Use magic.<\/strong> If a shorter but approximate version does the trick: it&#8217;s probably good enough.<\/li>\n<li><strong>Use a minifier.<\/strong> Just before submitting the code, I simply compressed the code further with <a href=\"https:\/\/github.com\/mishoo\/UglifyJS\">uglify.js<\/a>.<\/li>\n<\/ul>\n<p>At the end, my code is far less than 1K. I could have added more features. I probably have no chances to win, but the experience was funny. You should check the other demos out:\u00a0<a href=\"http:\/\/js1k.com\/2012-love\/demos\">http:\/\/js1k.com\/2012-love\/demos<\/a>. And why not submit yours?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JS1K is a competition where you have to create a cool demo with less than 1 kilobyte of code. This year, I entered the competition for the first time with a demo named: &#8220;Heart Petals&#8221;. The theme is &#8220;Love&#8221;, hence the cheesy title. Here&#8217;s what it looks like: And here are some tricks I&#8217;ve used [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29],"tags":[34,35,33,36],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2282"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2282"}],"version-history":[{"count":10,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2282\/revisions"}],"predecessor-version":[{"id":2292,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2282\/revisions\/2292"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}