Part 1: p5.js adventures

First steps first

  1. Get a friend like @istvankorompai, who’ll always tell you what’s the new shit and get you hyped beyond hyped.
  2. Make up your mind to start in January for several reasons. New Year’s resolutions, of course, cold & nowhere to go, and the ultimate one: #genuary. After marveling at all the generative art people come up with on Twitter, trust me, this is the bandwagon you’d like to piggyback.
  3. Come up with a project you can redo as an end goal to utilize what you’ve learned and feel accomplished. Again, this was Pisti’s idea because that’s how golden he is.

Getting started

At the end of last year, I got a Codecademy pro account since, after the past few years of nonstop creating, I wanted to focus on learning new things so I could find joy in creating again. After two months I could say that this is probably the best thing to spend $120 on. p5.js is a JavaScript library, and to get started, you need three components: HTML, CSS, and JavaScript basics. I’d say I had an okayish knowledge of the first two but was blank on JavaScript, so I came up with a plan. I decided to start a blank page and turn this into a boot camp. If I find some parts too easy, at least that would boost my confidence.

  1. Learn HTML
  2. Learn CSS
  3. Code Foundations
  4. Learn JavaScript
  5. Learn p5.js

* Apart from Code Foundations (which is a nice to have anyway), all the courses are available in the free plan. However, bear in mind that they might not be complete. As I recall, parts of it are hidden, and the exercises are not there.

This might not be everyone’s cup of tea, but I like bite-sized exercises and getting little virtual badges every time I reach a milestone. Sometimes it feels a bit addictive, after 28 ‘one more’ challenges, I usually get up to make that coffee I wanted to drink 2 hours ago. And the UI design is a-m-a-z-i-n-g! I hope the front-end designers who put it together learned to code from the front-end engineer career path cause I want the same! In addition to that, all courses and sections have cheat sheets and practice packs.

p5.js animation cheatsheet on Codecademy

Besides my Codecademy subscription, I ordered this book (obviously in English) that just arrived yesterday. It is among the most beautiful books I ever owned, and the competition is tough. You can also download the code package from their website for free and check out the codes for all the visuals in the p5 web editor but trust me, that book is something you’d like to own.

Speaking of the p5 web editor, you don’t have to download the packages and set up the local environment on your computer. The online studio will get you covered for the learning part. I did set it up for myself, but I have been using the online version, which is more than fine. If at any point you decide to download your code package, it’s available in two clicks, otherwise, you can save your sketches and organize them in collections online. The web editor allows for an instant refresh, so if you’d like to follow the changes you’re making in your code, you can see them on the right side instantly. I found this feature useful 95% of the time, but if you know you’ll be messing up what you made before making it right again, you have the option to stop it. You can also select whether you’d like the theme to be light, dark, or high contrast in the settings menu.

p5 web editor interface

The p5 library has a steep learning curve. Two days into the program, I managed to create these:

This was the very first thing I coded
You have to trust me that it moves

In addition to the p5 web editor, I also started using Github. I have no idea what I’m doing there, but I’m acting as I do. If anyone wants to tell me how to use it properly for personal projects, drop me a message, please. Other resources I found useful during the learning process:

  • p5.js reference page – to look up what you knew how to do 5 minutes ago, but now you don’t
  • The Coding Train youtube channel – if you want to understand what you’re doing, he’s making great explanation videos
  • xin xin’s youtube channel – her solutions often lead to my solutions (after 34 trials & errors)

Jumping into my first solo project

Over the weekend, I spent 10+ hours recreating my most recent viz in p5.js. I don’t know how I don’t hate this one already since I did it once in Tableau (if you’re interested in building it in Tableau, check out this post), then in Illustrator to convert it to a high-res image for prints. But hey, three times a charm!

Viz coded in p5
Viz in Tableau / Illustrator

I’m shocked and extremely proud at the same time that I managed to pull this off. I even understand 90% of what I’m doing! On Friday, I thought this might be a project I’ll be sitting on for a year, so I don’t think anyone could clear that smile from my face for at least a week. It’s still yet to reach its full potential since we’re planning to animate it with Pisti as a mini-project that I’ll hopefully cover in part 2.

You can check out the code by clicking on the ‘</>’ sign on the top right corner on the p5 web editor or Github.

All the things I learned in 2 days

Cover image credit: https://jk-lee.com/generative-design-2-0

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.