A collection of creative coding sketches created in P5.js. The purpose of this collection is to introduce to artists and designers coding examples based on the JavaScript library P5.js. The examples introduce fundamental coding concepts and techniques (environment, console, variables, conditionals, loops, arrays, objects, and more). A main consideration is to view the development objectives as an interdisciplinary process that combines computational processes with design principles and compositional aesthetics.
In this basic example we see how to create a canvas window, set and display the frame rate of the rendering system, and use text that shows the frame count and rate on our screen.
This example demonstrates the use of standard shape and text functions, and how we can utilize the coordination system to place them on certain locations on the canvas. Here, we also make an extensive use of the fill() function, which controls the color of the shape, text, and we also see how to perform associated alignments.
The example here demonstrates the use of variables, and how we can use the console to print and see our values. Also, it shows the technique of concatenation: how to add text together with other text, or add text together with numbers - all extremely useful techniques especially for debugging.
Super Mario is an excellent example of pixel art. Here, we utilize vanilla P5 shapes to create a dynamic figure of Mario. On every second, Mario moves 10 pixels from left to right, and has his clothes changing color randomly.
This example extends S1-04, and shows how to add image for the background, having the Mario figure added on top of it.
On each new loop, we generate and display on the canvas a shape (ellipse) with randomized values for color and position. The color is extracted from an array that has stored certain color values (palette).
The bouncing ball is a great example that demonstrates the uses of conditionals. The ball moves on the X and Y axis by moving one pixel to left or right (X), or up and down (Y). When the ball reaches the edges of the window (i.e. when the position variable approximates 0 or 800), we reverse its speed by multiplying it with -1 (which appears as bouncing off the canvas edge).
Here, we extend the bouncing ball example, by creating 4 objects that move into mirrored directions. By not erasing the background, we can keep the trails, which altogether create interesting generative patterns. Every time we run the example, a new pattern emerges.
As an extension of the bouncing ball, instead of reversing the speed when hitting the edges, we can switch the direction of the shape to come from the opposite direction after it goes off screen. On each switch, the parameters of the shape change (color, size, speed). Moreover, we add a PNG ink image on top for variation and contrast.
.png)
This example focuses on demonstrating motion techniques used for color change. Using a sin() function, we rotate around certain color ranges. In addition, we make use of blendMode, to blend color pixels of multiple shapes.
This example combines a moving object on a circular pattern around the center of the canvas, rotating its color variables as well.
.png)
This example demonstrates a simple use of mouse interaction. When the mouse position is top of the button, and if we click it, the color of the shape changes randomly.
Here we see how to utilize mouse interaction, random motion, and color rotation. When the mouse is moved, the circle enlarges and shrinks accordingly.
This is an automatic generative sketch that uses sine waves with different properties such as frequency, amplitude, size, color. It also uses a gradient background (made of multiple shapes), and a shading function that brings more depth to the final result.
Following example S3-03_SineWaves, here we utilize a Perlin noise function to generate the position of the shapes.
This example demonstrates a random walk of an ellipse. The shape always remains within the window as the position is constrained. Also, the user can change the color of the shape when the mouse is clicked.
Here, the noise circle is mirrored 3 times, and all shapes move autonomously within the boundaries of the canvas. Their color and size gradually shifts using a sin() motion.
This example extends S3-05b_NoiseCirclesMirrored, and instead of having an autonomous motion, the shapes are controlled by the mouse position. Here, we also add a PNG image to enhance the composition.
A simple example demonstrating how a nested for loop operates calculations. The console is used here, to help as observed more clearly the printed statements.
Basic example of a for-loop that draws multiple shapes on the X-axis.
An example about a nested for-loop. Draws shapes on the X, and Y axis.
This example demonstrates how to set different properties within the nested for-loop, and more specifically, by randomizing the color of each shape.
The example demonstrates how to select certain elements within the nested loop, and assigns certain colors for rows and columns (on odds and events). In addition, it shows the use of transformations, as well as shape rotations.
The following example shows how to utilize loops, transformations, and geometrical shapes to create a 3D illusion grid.
This example demonstrates the use of functions and generates shapes with random settings. Every time the function is called, a shapes with unique settings is rendered on the screen.
The example demonstrate the use of interaction for the creation of multiple shapes that have random visual properties. When a specific key is pressed ("a", "s", or "d"), a different shape mode is selected and rendered on screen.
Classes are an important part of any programming language. This example demonstrates the use of a class that generates random settings for a shape and moves it along the screen. The sketch also utilizes an array that stores multiple class objects, and with the use of for-loop we iterate the array, extract the class objects, and display them on the screen. Finally, we have a blended mode to mix the pixels of the rendered shapes, and utilize a custom gradient for the background.
This sketch extends the bouncing ball example and displays multiple objects that are created with the use of a class and an array. Moreover, we use an image for the background, and use the color patterns of the image to colorize our class objects
In this project, we generate a list of particles that flow around the screen. If the distance of each particle is within a certain boundary, a line will be drawn from the particle to all the others that are within this range. The example makes use of the function splice() to insert the values of the class objects into each instance of the class, and check on the distance between each object against a class instance.
This example extends S5-05_Plexus and demonstrates a case in which the user can generate the particles by clicking the mouse. Moreover, a motion fading process is applied to create an ethereal aesthetic.
