This video is for people who already understand basics of JavaScript and want to learn more. Generative art for beginners will be an ongoing series, in each tutorial we create a complete project from scratch using particle system algorithm with vanilla JavaScript and HTML canvas element.

Generative art is when you surrender control of some aspect of what’s going on to a process and visualize it. It is art that is generated by a non human system that can independently decide features of the artwork. 90s computer screensavers are a great example of generative art, it doesn’t have to move necessarily, it can be a static randomized image as well. Today we will build roots that animate for a while until they settle for a certain position into a static artwork. You can then export that artwork and save it as PNG image file.

We will build 2 versions of this interactive growing thorn or roots effect, the one first will be a mouse trail and the second one will be a paint brush tool that could be used in a drawing application. It will only create roots when we press the mouse, we can draw shapes with it and export the final image as PNG. I could also make it into an animated background, loader or element to highlight some action on a website. By the end of this video you can do any of these, I will explain everything about how to create this effect in detail. While doing that we will talk about generative art and also briefly discuss canvas composite operation, which allows us to declare how the layers of shapes on the canvas interact with each other.

#javascript #html canvas #programming