{"id":2152,"date":"2015-06-01T12:36:49","date_gmt":"2015-06-01T17:06:49","guid":{"rendered":"http:\/\/www.danielpradilla.info\/blog\/?p=2152"},"modified":"2015-05-30T13:45:06","modified_gmt":"2015-05-30T18:15:06","slug":"hello-p5js","status":"publish","type":"post","link":"https:\/\/www.danielpradilla.info\/blog\/hello-p5js\/","title":{"rendered":"Having fun coding with p5.js"},"content":{"rendered":"

\"p5js\"<\/a>
\np5.js<\/a> is an effort to port the ideas and concepts of the Processing<\/a> programming language to JavaScript. <\/p>\n

Even though there’s already processing.js \u2013which transcodes Processing code into JavaScript\u2013, p5.js is built with extensibility in mind, trough plugins, and instead of writing Processing code to be transcoded, you write pure JavaScript.<\/p>\n

The other day I saw the p5.js launch presentation<\/a>, and loved it. It made me do several double-takes as it shows wizardly things that you usually don’t see on video. <\/p>\n

So I gave it a whirl. Following the very detailed examples<\/a> on their site I was able to quickly put together a web toy that records audio through your microphone and then allows you to reproduce it, changing the volume and speed. Here it is:
\n(you have to accept the microphone prompt in your browser in order for this to work)<\/p>\n

<\/div>\n

Here’s the code in github<\/a><\/p>\n

It was quick, painless and fun<\/em>. In fact, this was the most fun that I’ve had in a long while learning a new JavaScript library. The onboarding experience that these guys have in their website it’s absolutely great.<\/p>\n

I’ve never learned Processing, but have seen some wicked visualizations<\/a> done with it. Seems like the routines and the concepts in p5.js are very similar, and the first thing that came to mind when I dove into it was Logo<\/a>, my first language. I think it’s the procedural, sequential nature of it. The rules are very clear, each instruction modifies the context, and there’s this pervasive idea that you’re drawing in a canvas object in a web page. <\/p>\n

I bet p5.js would make for a great introduction to programming for kids, with the added benefit that, along the way, any beginner that starts with p5.js would be learning one of the most popular languages today. And having fun at the same time.<\/p>\n

p5.js website<\/a><\/p>\n

 <\/p>\n