Shapes or Story
P5.js is inviting from many aspects. From the syntax that is intuitive to the examples that are well thoughtout. It has the power of illustrator combined with ability to use Javascript to bring the shapes to life.
P5.js is inviting from many aspects. From the syntax that is intuitive to the examples that are well thoughtout. It has the power of illustrator combined with ability to use Javascript to bring the shapes to life.
P5.js allows us to infuse life into our creations by using the logic and code. The design of P5 is done to support animation and interactivity. This opens up unique ways of playing with it.
The path of the programs can be controlled using conditionals or boolean expression. Till now there is no change in how the logic flowed, now a new way to play with P5 opens up. The conditional or boolean logic depends on the relational expressions. Languages have diffent ways to use this method.
Programs are written for doing one thing many times immediately or over a period of time. An Animation serves the frames of pictures generated when one viewer watches. While a website serves a page whenever a viewer calls the address. The later way of using the program is becoming more sophisticated when the conditional expression and the subsequent repetitive tasks are customised. We will see that in action.
P5 has setup and draw functions that we/you define but never call it. The interpreter calls it everytime you load the program. P5.js is a Library of Functions like ellipse, rect, noStroke that you call, but never define. Why functions? How to make them? How to use them?...
We created functions and used it to make many literal objects on the canvas. If I wanted to communicate with such an object that is already created, the Functional way of creating objects wont cut it. That is why Object oriented programming came into being.
Classes are like the molds that punch out beautiful parts in production line. That phone in your hand, that hair dryer in your closet all were created by parts that were made with some design or templates. We are now moving from the Pilot lot design and entering in to "Mass Production" of the objects.
Objects can share the information that is with-in to the with-out once they are created. It can share its location, state and what it contains to the world around it. When programmed with correct algorithms, these communication can give a feeling of sentience.
Power of P5 was constrained to the imaginary canvas on the page. Entire page on which the images or the visualisation was shown, is the play ground. We will start creating elements that flow into the current page. Do you see that floating pink rectangle, that is the work of P5...There is lot more to it.
Why would you want the DOM elements to be created by JS. So you can control it with the code you write. What if you can control the elements that already populated on the current page? That is what select and selectAll functions are going to help you with. There are multiple scenarios where this will make sense, like adding classes, ids or some specific callBacks...