Introduction: P5.JS Basics - Shapes, Colors and Animation
We are going to explore the basics of p5.js for generative art
First, read the article to learn about artists such as Vera Molnár, Lilian Schwartz, Jared Tarbell, and Manolo.
Step 1: Sign-up at Https://editor.p5js.org
Go to https://editor.p5js.org/signup to login with your school account using Login with Google, or sign up for a new one using your email address. This will allow you to save your progress.
Step 2: Duplicate the Sketch, Give It a Name, and Enable Auto-Refresh
- Go to https://editor.p5js.org/whatsnewsisyphus/sketches/repgm2DLk
- Go to File > Duplicate on the top left
- Enable the auto-refresh checkbox
- Rename your sketch by clicking the pencil icon next to "Processing Basics"
- File > Save
You can now share your sketch with your friends and teachers using your url
Step 3: Hit Play. What Is Going on Here?
The p5.js editor is a convenient web interface that pairs code editing with its output.
The three main panels are the editor on the left, the preview on the right, and the menu on the top.
Hit play to the top left to get your code running. Auto-refresh will hit play for you every time you change the code.
Don't be intimated by the amount of text in the code area. A majority of it is instructions and helpful hints.
You'll notice that comments are gray compared to the rest of the code. In javascript which p5.js is written in, // at the start of a line designates a comment, meaning that line will not be executed as instruction.
Lines starting with //*// are lines with ready to go instructions. Simply delete the //*// to get those lines to run.
Step 4: Arranging Our Workspace: Setup( ) @ Line 5
All processing scripts start with a setup(); function. It's where you arrange your workspace and lay down a canvas to work on.
I've created a square canvas that is 500 pixels(px) by 500 px wide.
Leave the canvas size as is for this moment, but feel free to set a different shade for your background by experimenting with numbers between 0 and 255.
Step 5: Line 16 - Draw() Is Where Art Happens
Read through the comments to learn about the coordinate system used in processing.
Your task is to write the line() functions to compliment the two examples to divide the space into 8 equal slices pictured above.
Pay attention to the line about zero indexing where I explain why we use 499 to refer to the 500th pixels.
Step 6: Colors and Shapes
Time to learn about color and basic shapes. Follow the comments to delete //*// at the beginning of lines to reveal rect(), circle() and ellipse() functions. Note the comment on Line 41 that talks about centering rectangles if your shapes are floating to a side.
https://coolors.co/palettes/trending is a great place to find color inspiration. Click a palette to find RGB values for each color in a form that you can copy and paste into the code editor.
Step 7: Triangles, Transparent Colors, Variables
Time to learn about variables!
triangle() is very much like the line() function except with three points, but writing out six values (two for each point) can be tiresome.
Follow the comments starting on line 56 to learn how to create variables and use simple computation to facilitate our artmaking. Remember, you simply delete //*// to activate a line of code from the comments section.
Step 8: Animation
Time to get things moving. We will make a variable that is incremented by a set value everytime the draw() function completes a loop. This will allow us to add this offset to places, sizes, and colors of objects to change them as the draw() function loops on.
You can use the animationTracker variable anywhere that takes numbers, see line 59 and 63 on the second screenshot to see how it can be used to change the color and starting position of the rectangle.
One note is that I've already declared animationTracker using let at the very top of the script. If I were to declare it within the draw() function, it would get set to 0 every time the loop is run. Declaring variables outside of the draw() function is how we maintain a record of events as draw's memory is reset at each run. The outside variable reminds it the last position so it can resume the animation from the last frame.
Step 9: Interactivity and Chance
9-a) Time to add some interactivity, the comments explain how to add a paintbrush that will follow your mouse. Experimenting with swapping the x and y positions to make the brush move in opposition to your cursor.
9-b) Introduce some randomness to harness the variability potential of computational art
For a sample implementation of steps 1-9 including adding mouse interaction to the color of the middle circle:
https://editor.p5js.org/whatsnewsisyphus/sketches/OqESG4rLt
Step 10: Bonus Step - Spin Our Drawing to Make a Flower
1) Let's duplicate our sketch like we did on the first steps so that we can break things without worry.
Don't worry about the code for now, just paste the below on line 17, right after draw(){ on line 16. This will first pop an error on the console below, because we opened a new curly bracket that we have to close at the end of draw
translate(250, 250);
var numRotations = 12;
for (var i = 0; i < numRotations; i++) {
rotate(TWO_PI / numRotations);
Go all the way to the bottom to close our new function by adding a bracket on line 96, before the one closing our draw() function.
}
This code will start mirroring a slice from top left of your drawing in a circle. Remember that you made your mouse cursor draw on the previous step. Try moving your mouse on the top left corner of your drawing to see what designs you can come up with. This is fun, but let's see if we can get some computational assistance with our drawing.
2) To begin with, I'm going to remove our lines that we made while learning the coordinate
system by commenting them out by adding // before their respective lines around line 30(might have moved around from the codes you have added).
3) This is a good time to take advantage of the random() function so that the objects move around with each rotation. Remember that we are only working with a slice from the top left, all elements outside of that slice will be invisible in the final drawing.
Let's start with some bacgkround tones by changing our square starting on line 41. I removed the stroke, added some randomness to the fill, and set the origin point to be somewhere between 0 and 250.
fill(255, 19, random(255), 1); noStroke(); rect(random(250),random(250),150,150);
I'm going to use random to create a cluster of circles and ellipses in the middle like the center of a flower. This is around line 53.
- First, I mapped the color of the fill to the mouse position so that I can change the color of my circles by moving my mouse as the animation plays.
- Thirdly, I changed the origin of the circle, limiting it to a small region between 0 and 60 on both x and y axes, also making it smaller, at 9 pixels in diameter.
- Lastly, after adding random to the fill color, I made the ellipses 90 pixels long, like petals, and limited their placement to a random location between 0 and 180 by typing in random(180);
// Welcome back, let's set a contrasting color and explore other shapes.<br> fill(131, 255-mouseY, mouseX,250);<br> // Let's stop outlining everything by using the noStroke(); function. note the capitalization of S but not n.<br> noStroke();<br> // Circles take three arguments, (x, y, diameter)<br> circle(random(60),random(60),9);<br> // Change of dress before the next shape<br> fill(random(155), 0, 250, 50);<br> // circle() is a shorthand for a symmetrical ellipse(x, y, horizontal diameter, vertical diameter); you could also write it as:<br> ellipse(random(180),random(180),30,90);
4) We are already looking like a flower, but we could use some more color and texture.
- I'm going to randomize the color and location of my triangle, also making it more transparent so that I can see it build up in layers.
fill(random(100,255),random(0),random(180,255),5); let triangleOriginX = random(550); triangleOriginY = random(50);
5) I found that it was sometimes hard to see the drawings made with the mouse, so I added a lower limit to the random color to keep it in the region of bright yellows.
fill(random(200,255), random(200,255), 0, 155);
If you find that your code is messy and the spacing is uneven, go to edit on the top menu and choose tidy code and p5.js editor will make it all neat in no time.
Here is my version - https://editor.p5js.org/whatsnewsisyphus/sketches/...