# TIL #2

> Collection of things I learnt

**Published by:** [Nero One](https://paragraph.com/@n1/)
**Published on:** 2022-12-26
**Categories:** journal, til
**URL:** https://paragraph.com/@n1/til-2

## Content

It's me again, and here is TIL #2. Today is mostly about generative art.p5jsProcessing 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.orgThis 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 AdamGenart @generativelight YOU are going to make a piece of generative art right now in 10 minutes. No watching tutorials, no downloading software. Just your browser and 21 lines of code.By the end you’ll have a basic, but fun abstract generative art collection like this. #generativeart 242 03:23 AM • Apr 29, 2022 Making my first p5js project & surprisesThis. 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 withtris(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 SVGp5js 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~

## Publication Information

- [Nero One](https://paragraph.com/@n1/): Publication homepage
- [All Posts](https://paragraph.com/@n1/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@n1): Subscribe to updates
- [Twitter](https://twitter.com/0xNeroOne): Follow on Twitter

## Optional

- [Collect as NFT](https://paragraph.com/@n1/til-2): Support the author by collecting this post
- [View Collectors](https://paragraph.com/@n1/til-2/collectors): See who has collected this post