First steps first
- Get a friend like @istvankorompai, who’ll always tell you what’s the new shit and get you hyped beyond hyped.
- 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.
- 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.
* 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.
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.
The p5 library has a steep learning curve. Two days into the program, I managed to create these:
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!
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.
All the things I learned in 2 days
- you can publish a Google Sheet as csv to the web
- how to import data to p5
- how to import custom fonts on the p5 web editor
- for loops are men’s best friend (also for loops in for loops in for loops)
- finally went back to understand trigonometry basics
- creating gradient fill and stroke functions
- type on a path in p5 and letter kerning
- filling shapes with a secondary pattern
Cover image credit: https://jk-lee.com/generative-design-2-0