P5JS is a Java Script library that is used in creative coding.
P5JS is a beginner friendly software used to help learner’r program interactive, graphical applications, through visualizing a creative, user friendly environment.**
It allows you to create and animate different objects using code. You can create shapes, forms, color, etc. Essentially, anything is possible with a little imagination!
It is used by a wide variety of users. Some are aspiring artists, educators, and even computer programmers!
The key thing to remember is that even though the objects of your design may appear in real time for the user/viewer a serious amount of dedication and coding are going on behind the scenes.
I stumbled across a great article that shows how someone might go about creating a code and relaying it through P5JS.
I have attached a few pictures from the link above.
From the picture above the coder was creating a HTML file to link with the J5PS. This file will be what will allow the design to be possible.
The next step is to create your canvas!!!!
According to the resource link, I provided as reference, you will now enter the coding required to create a circle. Once complete, you should see a circle. A key thing to remember is to test the result but pasting the HTML in your browser.
Whew! All that hard work… is wearing me out. But don’t worry it will pay off… BAM! Your dedication led to this…
Isn’t it adorable… your very own circle.
This is the byproduct of all your coding. A user can now see a circle and whatever background you chose! Compared to what you may have written in java the user only see’s the outcome of your dedication. An image… but that’s not all. We can adjust that image by adding motion.
Now, in order to add motion you will need to make adjustments to your original coding. In this case the creator wanted to make the image move from top to bottom.
The creator created a loop to allow the circle to constantly move forever up and down. But what fun would that be if we didn’t give life to more circles…
The creator of this eclipse added some more code that would allow more dots to be created and move infinitely around the canvas.
The final product results in multiple shapes and movements across the HTML file.
What I learned from the article is that the coding is the foundation for the HTML to create an image. The image is orchestrated to work with a processor to create an image. In this case the P5JS is the catalyst for the imagery to mesh with the java scripting to create an image.
*All rights reserved to https://medium.com/@mhiratsuka/what-is-p5-js-and-how-to-use-it-b88f9fee0ab2 for using their images and review notes as reference*
**All rights reserved to https://www.geeksforgeeks.org/p5-js-introduction/ for using definitions and wording for reference**
Gabriella's Technology Showcase 