{"author_name":"Avant-Marde","cat":"LD #37","comments":[],"epoch":1481320140,"likes":1,"metadata":{"p_key":"2737","p_author":"Avant-Marde","p_authorkey":"500434","p_urlkey":"38216","p_title":"p5.js experimentation\/prep = code for all","p_cat":"LD #37","p_event":"LD37","p_time":"1481320140","p_likes":"1","p_comments":"0","p_status":"UPD5","us_key":"500434","us_name":"Avant-Marde","us_username":"Avant-Marde","event_start":"1481241600","event_key":"81","event_name":"Ludum Dare 37"},"text":"<p>After using Unity for most of our more recent entries, I&#8217;m considering trying something simpler out this time, and just a few days ago I found out about a JavaScript framework called <em>p5.js<\/em>, which is basically a JS port of the Java framework <em>Processing<\/em>, in case anybody&#8217;s familiar with that. It makes it simple enough to draw things and play sounds in the browser in no time.<\/p>\n <p>In order to learn how to use it and to get some fundamental stuff going (animated sprites, for example), I wrote up a few JS &#8220;classes&#8221; today. I&#8217;m still not sure whether I&#8217;ll be using p5.js at all, but in case somebody else wants to use my boilerplate stuff, feel free! c:<\/p>\n <p>A glorious demo (live <em>[warning: thunder audio at the beginning]<\/em>: <a href=\"http:\/\/formo.ninja\/LD37\/test\/\" target=\"_blank\">http:\/\/formo.ninja\/LD37\/test\/<\/a>):<\/p>\n <blockquote class=\"imgur-embed-pub\" lang=\"en\" data-id=\"st8HL3Z\"><p><a href=\"http:\/\/imgur.com\/st8HL3Z\">View post on imgur.com<\/a><\/p><\/blockquote>\n <p><script async src=\"\/\/s.imgur.com\/min\/embed.js\" charset=\"utf-8\"><\/script><\/p>\n <p>Fundamental files:<\/p>\n <ul>\n <li><strong>Sprite.js<\/strong>:\u00a0<a href=\"http:\/\/pastebin.com\/WKL4yFXJ\" target=\"_blank\">http:\/\/pastebin.com\/WKL4yFXJ<\/a><\/li>\n <li><strong>Anim.js<\/strong>:\u00a0<a href=\"http:\/\/pastebin.com\/LKmDyvpF\" target=\"_blank\">http:\/\/pastebin.com\/LKmDyvpF<\/a><\/li>\n <li><strong>Poly.js<\/strong>:\u00a0<a href=\"http:\/\/pastebin.com\/CsvmkveJ\" target=\"_blank\">http:\/\/pastebin.com\/CsvmkveJ<\/a><\/li>\n <\/ul>\n <p>Less interesting but perhaps handy&#8230;<\/p>\n <ul>\n <li><strong>Label.js<\/strong>:\u00a0<a href=\"http:\/\/pastebin.com\/4rSUwNUz\" target=\"_blank\">http:\/\/pastebin.com\/4rSUwNUz<\/a><\/li>\n <li><strong>Input.js<\/strong>:\u00a0<a href=\"http:\/\/pastebin.com\/5CZt1xJZ\" target=\"_blank\">http:\/\/pastebin.com\/5CZt1xJZ<\/a><\/li>\n <\/ul>\n <p>You&#8217;ll need to tie it up yourself, but I&#8217;m sure you can figure it out. The sprite and animation classes want an object from\u00a0<em>loadImage()<\/em> and the animation requires a delta time, which you can calculate easily by using\u00a0<em>millis()<\/em>. Animation class in particular is a bit tricky perhaps, with a bunch of settings, so read the comments in\u00a0the file.<\/p>\n <p>&nbsp;<\/p>\n \n <p>Tags: <a href=\"http:\/\/ludumdare.com\/compo\/tag\/animation\/\" rel=\"tag\">animation<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/boilerplate\/\" rel=\"tag\">boilerplate<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/code\/\" rel=\"tag\">code<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/javascript\/\" rel=\"tag\">javascript<\/a>, <a href=\"http:\/\/ludumdare.com\/compo\/tag\/p5-js\/\" rel=\"tag\">p5.js<\/a><\/p>","time":"December 9th, 2016 4:49 pm","title":"p5.js experimentation\/prep = code for all"}