Back when I had a paper route and used the money to buy my first personal home computer, I spent weeks typing in BASIC programs from magazines. After a while, I learned how to code simple things and taught myself most of the fundamentals of programming Variables, For loops, etc.
Fast forward several decades, and I have decided it is time to learn to code again. This time my motivation has been creating art for a pen plotter that I built with parts that a good friend donated to me recently. The plotter can hold a pen and draw on paper as large as 30” x 30”. There are several ways to tell the plotter what to plot. My main goal is to learn how to create code that will produce a vector-based generative art file. The file format that works with the plotter is SVG.
Since my first foray into programming, magazines have almost disappeared. Magazines are being replaced with something called the internet, specifically YouTube. In today’s world, if I want to learn something, one of the easiest ways to do that is to search YouTube. Over the last several weeks, I have researched which programming language might work best in creating an SVG file. Some of my required criteria have made that an exercise in frustration and required that I get my feet wet in at least three different languages and even more frameworks built on top of one of the languages, specifically javascript.
I may have finally arrived at a solution that ticks most of my criteria boxes. That solution is p5.js which is a coding library built on top of javascript. Because javascript works inside of an HTML page, I can use an iPad or any device that has an internet connection, without the need for anything special to develop the code, except maybe a good text editor. My code editor of choice has become Koder, it is simple to use, works quite well on the iPad and most importantly does not require a subscription to use it. The biggest issue with using p5.js is, by default it does not support SVG, it is a raster-based tool. Thankfully I managed to find an SVG library that was built for p5.js, even though it isn’t updated often and may have some limitations on the number of elements that can be drawn onto the SVG canvas. So far in my testing, it has only crashed on me only once.
Learning p5.js has been an absolute joy with the help of a wonderful human named Daniel Shiffman. Dan has created a series of YouTube videos that go through the ’fun’damentals of p5.js and javascript. Up until finding The Coding Train channel, I was looking at other people’s code or example code and trying to reverse engineer things. Dan’s YouTube videos have made the process 100 times more efficient and fun.
Pictured above is an example of a piece of Generative Art that I created from scratch. This image was built in p5.js without using any code from an example. It is not very complicated, nor is it the most beautiful piece of art. What it shows, is weeks of learning and experimentation to get things to this point.
Going forward can only be more exciting. If you want to take a closer look at the piece take a look HERE you can even download your own SVG file of it if you like.
I continue to teach myself coding. Because my goal is to create generative art that has settings which can be adjusted to fine-tune a final image, I have been developing code that can be used in most projects. The code is a menu system with sliders and checkboxes that has been developed in P5.js.
While continuing to learn, I ran across Steve’s Makerspace YouTube channel and a video he uploaded that explained how to use his Wavy Line Art-Maker. In the video, he discusses over ten different settings and adjustments to change how the lines are rendered. I felt inspired to use Steve’s code and merge it with my menu system to see how easy it might be. The resulting merge is located HERE, it uses the SVG file saving ability I developed earlier, along with seven sliders and several checkboxes to adjust the Art-Makers settings much easier than hard coding the variables before running the code. Thanks, Steve for the great tutorials and inspiration.