A First Look At Generative Art With p5.js
I have recently begun redecorating my room and a recent addition was a new set of frames. While the frames are nice, I am not the greatest fan of the default prints that have come with it! After struggling to find adequate prints of the desired size, I have come to the conclusion that I may as well use this as an opportunity to explore generative art and create some stills to print on my wall in the interim (until I find my desired prints).
In today's tutorial, we are going to explore p5.js and slowly explore a generated sinusoidal wave to see how we can begin to express the inner artist we never knew we had.
For today's tutorial, we are actually going to explore the changing results using the online playground. Doing so will enable us to add changes as we go and explore together.
The introduction code we get is this:
draw function are essentially our two main methods we need to work with.
setup is called at the start of the lifecycle and
draw is called on the tick of every frame. These are important concepts to grab early in the piece, but will become more clear as we begin to add more and more to it.
Pressing play on the top left-hand side enables us to see the output.
In the above with the default code, it instructs the library to create a 600 by 600 canvas in the DOM during the setup, and then during the repeating draw phase that is called on each tick of the frame, the mouse point is found and ellispses are drawn until it reaches
mouseY (which is provided by the library during the
Hopefully you are with me so far, but do not fret. We are going to reset the setup and draw functions to go from the basics and refer to documentation.
Setting up a basic Sinusoidal Wave
Update the code to show the following:
The comments should explain some of the icky math, but in the general we can create a wave over time by drawing a line from the last known
(x, y) coordinates and connecting it to the newly calculated ones which is done over each frame.
frameCount variable will give us the current frame (and comes as part of the library). This value starts from 0 and goes in a positive direction, so we can use it to change the frequency ie space between each "cycle" of a sine wave (peak + trough).
From here alone, it is worth change the
amplitude value and change the value of
sin(frameCount / 10) as well as the offset
y0 to get a better visual understanding of what is happening.
Changing the amplitude
Changing the frequency
Changing the offset
Changing the stroke color and amplitude dynamically
Now, we are going to make some changes that may be hard to understand at first. We want to:
- Stop the loops (from the setup function).
- Draw all the lines at once (requiring an array of values to loop on the only call to draw).
- Change the amplitude over time.
- Change the stroke color over time.
To do so, we add the following code:
We use the
noLoop function in the
setup to ensure there is only one call to
draw, but now we must also update
draw in order to loop over the width of our canvas and draw a sinusoidal wave.
We are going to use the loop
i value to help us also dynamically change the stroke alpha as well as the amplitude. The resulting wave it this:
Dynamic, squiggly sine wave
Drawing multiple lines with slight changes
Now we can start generating the fun stuff. In this example, we are still going to keep the
noLoop (ultimately my goal is to draw some abstract art). However, what we will do is abstract what we have in the
draw function to its own helper function
drawSineWave and then iterate over that 50 times to draw 50 waves!
In order to stop it from drawing all the same wave, we will again use the power of the loop to pass a
modifier argument which can be used as an offset.
The result is something cooler like this:
Multiple sinusoidal waves
In conclusion, we just took a small look into using the p5.js library to begin drawing some generative art.
This is day one for me, so I am certainly no expert, but it should be a good enough launch pad for you to start playing around with some of your own modifiers and get things going.
My plan is to continue exploring the library over the next few weeks and continue writing some posts, so hopefully by the end I will have some worthy prints to use as placeholders across my bedroom.
Resources and further reading
Image credit: Alexander Ant
See how you can get started with the VSCode debugger for Node.js applications
See how you can dynamically create UIs based on React State using dynamic imports, Next.js 10 and React State
Have you ever wanted to build a UI Component Library with TypeScript and React? This blog post will take you through a straightforward set up that uses the bare minimum to get a working component library that you can re-use across your different React projects.
1,200+ PEOPLE ALREADY JOINED ❤️️
Get fresh posts + news direct to your inbox.
No spam. We only send you relevant content.