Select Page

Getting Started with Javascript through P5.js

With the spring semester rolling and the final course of my MA program underway, I’ve started taking a more in-depth, more structured look at the front-end development language of Javascript with the library P5.js. 

The approach we are going to be taking for the course at the Minneapolis College of Art & Design is by getting familiar with the P5.js Javascript library. P5.js is a JS library that allows you to create programs that produce interactive graphics and explore ideas quickly through storyboarding and visual storytelling. Being about to write a few lines of code and immediately see a visual representation of that code in the browser window is pretty awesome. I feel like this approach has dramatically lowered the hurdle of language acquisition while still helping to establish a foundation of best practices that I suspect will come in handy further into the course. 

Another part of P5.js that I’m excited about is the communities approach to prototyping. P5.js encourages storyboarding and sketching, which are both integral tools for a designer and a developer. Whether you are mapping out large design systems that will run at a company-wide scale or creating frames for an After Effects project, both help you visually create concepts before diving into a broader concept. 

Tool wise, I’ve got myself set up with a version control tool from Atlassian (makers of Jira, Confluence, Trello, and more) called Sourcetree. It’s a free Git client that works on both Mac and Windows. It was a breeze to set up and has been helpful to push things to Github. I’m also using Sublime Text 3 for my code editor. Sublime was one of the first editors I started using, and I’ve never looked back. The only thing I wish I could track down is a P5.js autocomplete or syntax highlighter for Sublime. It seems like there was one at one point, but there hasn’t been any maintenance on the repo for the last six years.

There isn’t much in there at the moment, but here is a link to my 2020 Programming Github repository.