Visual Home Home

Shapes or Story

What you see below? Shapes or the character. If you said, a character that is colored ridiculously. An art piece in museum, most likely. If you inspected (shift + ctrl + I) the shapes, there will be no DOM elements but just a canvas. Where are these shapes coming from?

P5 is playing with these shapes though the scripts running on this page, on your browser. Like the ghost in the machine. We see not just shapes, but colors and some of the shapes are transparent. There are many options for the shapes, and the colors that were explored, and the below figure was drawn.

Guess how many lines of code it took. 20 lines of code, and another thousand lines of support code from p5.js library.

Loops and repetitive tasks... Not an issue. How about changing colors? Taken care.

Can I have control of the shapes through code? Oh that is much easier than you can think

How about interacting with the visuals and playing with it? Super easy, and coded with JS like logic

Deeper the P5 framework is understood a lot more can be done using simple code. But P5 Creator Lauren and the current Qianqian and their team have made a great tool that helps you express in visual and logical ways.