Tag Archives: p5.js

Summer 2016

Once again, it is almost that time of the year for school to start once again.  The summer has been an interesting one and this blog is a reflection on some of the things I did.

I had a good number of summer projects planned… but I only really got around to one of them.  This summer, I wrote a guide to using p5.js with my cousin Ben, who teaches at an international school in Hong Kong.  We wanted something that a teacher could use with their students in the classroom. We decided to write the guide using an online publisher named gitbook (I love gitbook for writing notes for my students.  Write it once with markdown, get it published to web, pdf, epub and mobi… awesome)

I had actually started this project back in February.  I got to about chapter 3 and I hated what I was doing with it.   I felt that it was very wordy, too much reading, not enough getting to the fun programming parts.  I remember learning to program when I was a kid.  I didn’t want to read about how things were done.  I didn’t care about the background of BASIC…  I just wanted to write programs to make my computer do things.

After talking things through with Ben, we decided to take a different approach to our project.  What is the minimum amount of background info/setup we need in order to get started?   How can we allow someone to write code with as little setup as possible? It turns out that we only need to write about 3 paragraphs, include a picture guide, add a link to a video and use an amazing web based editor.

Sometimes, I teach introduction to programming and the first week typically involves explaining how to set up the development environment.  It takes time to do this.  How to get the compiler.  How to get an IDE.  how to claim your unix account.  Where to find your text editor.  The joys of pico/nano (don’t laugh too hard…it was the first editor I learned how to use on unix…)…vi, emacs, gcc, vs, xcode… its a lot of setup.  I know a lot of us take this stuff for granted but think about what happens when you get a new computer… getting your dev environment set up is not a fast process.  So, how do we simplify this as much as possible?  How do we get to the fun parts as quickly as possible?

It starts by choosing tools that will minimize the setup.  p5.js is a JavaScript library.  To use it, you need to get the library files from p5js.org.  You need to set up an html page and you need a JavaScript file to write the script in.  After you set up your html page, you actually generally do not modify it.   You only need to edit your js file so even though you absolutely need the html page its not actually part of the program you are writing.  For tools you typically need a web browser and an editor. This is not a lot… but if you are first starting or if you are in an environment where what you are allowed to put on your machines is limited every extra thing you need to do before you start coding makes it that much harder to start.

To help simplify this setup, we decided to use Mozilla’s Thimble editor.  It is an html/css/js online editor.   It also allows you to publish your work. By doing this, we eliminate the text editor (and if you want to publish your work, we eliminated the webserver too).  Using Thimble means that the only application we need is a modern web browser.

Furthermore, and this is the really cool part, using Thimble means that we can actually setup the basic p5.js project.  Ben and I created an account on Thimble.  We then set up thimble project with all the files need (the p5.js lib file, the html file and a stubbed out  JavaScript file for people to write in).  The JavaScript file contains some starter code for the p5.js sketch.  Thimble also allows us to write our own tutorials.  Thus, we can write instructions on what to do inside thimble.  We then publish this project (one button inside thimble).  We get the link off of the Remix button from the published page and put that link into our project book.  Each chapter of our project book contains a goal (typically an image) to show what we are aiming for.  This is immediately followed by a link to the related thimble project remix.  The remix contains instructions (typically where to write the code, what to write).  In otherwords, all you need to get started is to click a link!  No other setup.

The guide then continues on with more detailed explanations for those who want to know the why for each of the topics covered.  Towards the end of the guide, I added the chapters about how to setup your own sketch outside of thimble and some background material.

There is still a lot of work to be done on our guide for sure.  Currently we have only one very basic project.  We will add more in the future but I’m pretty happy with what we have done so far.  You can access our guide here

On a more personal note, I started the summer by helping my parents out for a bit at their restaurant.  Its very different from my usual job to say the least.  My part of the work was not really hard but the hours are quite long.  All I can say is how much I respect my parents for doing it.  I know how hard  they have worked all these years to raise my brother and I.  I am forever grateful.
I am also continuing to decorate my new place.  This summer’s decorating involved the balconies, one of the best features of my new place.  I grew some strawberries, some herbs, and some cherry tomatoes (why are the leaves drying out ? there is plenty of water. help!). I even put in a couple of chairs.

I also made a few pieces of pottery this summer mostly for myself.   One of them is this garlic jar.  I am rather happy with it.

garlicjar2