It's me again, and here is TIL #2. Today is mostly about generative art.

p5js

Processing on the web. My first encounter with Processing was way back in 2012 when I started using it for an interactive installation. It was a Twitter feed for a CSR project.

Skip to the end of 2022 when I started to look into p5js. Played around, and found a few guides to getting back to doing it. The Coding Train is a good start

Dan Shiffman, Casey Reas, Memo Akten, all these familiar names to start, was a huge inspiration.

So I started coding using their web editor here at editor.p5js.org

This is how it looks. Might look scary but you can follow along with Dan's teaching on Youtube, which I did and it doesn't look that scary. Understand the coordinates system, how computers render pixels, and basic shapes and you can start playing around with your sketch.

Another guide I would suggest to everyone is this one by Saurabh

https://www.fxhash.xyz/article/beginner's-guide-to-learning-p5.js-for-generative-art

also this Twitter thread by AdamGenArt

Making my first p5js project & surprises

This. and randomly placed vertex in a canvas which creates a shape. The function I made looks like this.

function tris(amount) {
  while (amount--) {
    fill(random(50), random(0, 50), random(30, 100));

    noStroke();
    beginShape();
    vertex(random(width), random(height));
    vertex(random(width), random(height / 2));
    vertex(random(width), random(height));
    endShape();
  }
}

Then I reuse it in the main code with

tris(3)

And there you have it. Three triangular shapes were randomly placed on a canvas. Added some circles next and more elements

Then rectangles

and so on.

there you go, :)

So where's the surprise? I used the web editor and made really minor mistake with the while loop and it goes infinite loop. My browser tab is not responding and you know what? I did not save at all. I wasn't logged in so all my progress is not saved. :(

Luckily I still got some images that I saved prior.

Exporting it to SVG

p5js is built on HTML Canvas so exporting to images like JPG and PNG is always possible. With the nature of projects on Web3 and the high-resolution world, I wanted to have control of the file, in this case, its SVG.

Quick Google searches and found this library:
https://github.com/zenozeng/p5.js-svg by zenozeng

Really great library! and the changes I need to do is pretty minimal to support the SVG features. Just add to the index.html

<script src="https://unpkg.com/p5.js-svg@1.3.1"></script>

Then change your createCanvas to

createCanvas(100, 100, SVG);

That's it! Simple right? So what does it do, they basically convert the whole canvas thing to SVG. And if you check the HTML file of the p5js project, it should be SVG tags instead.

So SVG export works. Now I can export to SVG!

That's all for today :) I'll explain more about how I made X-GEN, my latest gen art experiment.

Ciao! Thank you~