🎲Lab 2: Generative Art

CS 1004 ~ Prof. Smith

Learning Objectives

By now you should have gained some comfort and familiarity with the p5.js environment and Javascript programming language, including calling the different drawing functions, creating variables, and identifying errors in your code. Through working on this lab assignment, you should further develop these existing skills, as well as gain comfort with:

  • Conditional execution of code using if, else if, and else

  • Repeated execution of code using for loops

  • Accessing and setting global variables related to program state

  • Taking input from the user (keyboard and/or mouse)

Inspiration and Familiarization

In this lab, you will be creating an interactive, generative art tool that uses a combination of keyboard and mouse input, along with randomization and control flow constructs (conditionals and loops). You will be creating a variety of “brushes” that each impact the drawing canvas in different ways, and can be layered to create a finished generative art piece.

Inspiration: There is a highly active group of generative artists on social media. I recommend first looking at the #generativeart hashtag on twitter and mastodon to see the wide range of possibilities. Keep in mind, though, that professional generative artists have a LOT of experience!

You will be creating at least five “brushes”, meeting the following requirements:

  • Every brush should be turned on and off using a different key on the keyboard

  • Every brush should incorporate randomness and/or noise

  • Every brush should use for loops or if statements, and at least one brush should use both

  • At least one of these should use the mouse position

  • At least one should not use the mouse position

Note that these requirements allow you to choose how “interactive” you want your tool to be. You could create something that is almost entirely automated, or almost entirely a drawing program, and anything in between.

Setup, Draw, and Mode

This is the first lab where you’ll need to create an interactive program, not just a static sketch. That means you’ll need to structure your p5js sketch with the setup and draw functions. Since you will be taking keyboard input, you will also need to make the keyPressed function, and at least one variable per brush. For example, here is a sample program that has one brush, which I named RANDCIRC, that draws a randomly colored circle at the mouse location, and that turns on and off with the ‘c’ key.

//brush control variables
var RANDCIRC = false; //enabled/disabled with 'c' key

function setup() { 
    createCanvas(500, 500); 
    background(255); 
    noStroke();
}

function draw() {
    //not drawing a background every frame because we want
    //it to be treated like a piece of canvas that we are adding shapes to
    //if the RANDCIRC brush is enabled (RANDCIRC == true)
    if (RANDCIRC == true) {
        //set a random fill color that is mostly transparent 
        fill(random(150, 200), random(150, 200), random(150, 200), 10);
        //draw a circle at the current mouse position
        //draw it larger if the mouse is held down than if it isn't 
        if (mouseIsPressed) {
            ellipse(mouseX, mouseY, 200, 200); 
        } else {
            ellipse(mouseX, mouseY, 100, 100); 
        }
    } 
}

//code inside the keyPressed function runs whenever a key is pressed
function keyPressed() {
    //'c' is the toggle for the first brush, RANDCIRC 
    if (key == "c") {
        RANDCIRC = !RANDCIRC; //! negates the value, so T -> F; F -> T 
    }
}

Every brush you create will have its own named state variable. Those state variables are then checked in the draw function (to see which, if any, brushes are active and should have their draw code run). They are set in the keyPressed function, within an if statement that checks for the corresponding key press. You will need to create these state variables yourself.

Notice that the ellipse drawn with the RANDCIRC brush is mostly transparent. When creating multiple brushes that will need to layer atop each other, it helps to incorporate transparency into each brush.

Use this infrastructure to create your first brush. Remember that all brushes should incorporate control flow with either an if statement or a for loop (or both), and should incorporate randomness in some way. In this example brush, the if/else statement checking whether the mouse is pressed satisfies the control flow requirement, and the random fill color for the ellipse satisfies the randomness requirement.

Ensure that your brush behaves as expected and turns on/off correctly before moving to the next step.

Reset and Save

Though there are a lot of features in drawing programs that you probably won’t incorporate, two important ones are also fairly simple to do, so worth taking the time to include: a reset and a save.

Resetting the canvas is simply a matter of setting the background color. Inside your keyPressed function, add the following code, which will draw the background whenever you hit the ‘r’ key.

//clear the screen with the 'r' key
if (key == "r") { 
    background(255);
}

You can set the background to whichever color you prefer. When you reset, you may also optionally turn off all the brushes by setting their state variables to false (which I have not done here).

p5js has a save function that takes one parameter: the name of the file. For example, save(“output.png”) saves the screen to a file inside the sketch folder named output.png.

Add code to the keyPressed function that will save your artwork when you hit the ‘s’ key.

Optional: sometimes it’s helpful to fade what’s on the screen before adding more layers, rather than erasing it entirely. You can do this by drawing a semi-transparent, white rectangle that spans the entire screen. Add code to the keyPressed function that does this when hitting a key of your choice (I used ‘t’).

Make More Brushes

Now, keep going! You will need to make at least four more brushes. Work carefully and plan out on paper what you want each brush to do, what keys you will use for each one (make sure you don’t tie more than one brush to each key!), and whether you want to allow brushes to be active simultaneously.

Add your brushes one at a time, and test as you go. If you make mistakes that turn into features, make sure you understand why the code works the way it does before moving on. When testing your program, make sure you try out every combination of brush in every order. If you know you want brushes to be enabled at the same time, or that you want some to be unavailable when others are active, test your program logic carefully.

It is a good idea to maintain some kind of consistency between all the brushes. Perhaps they all use a similar color palette (you could even make a few variables with common colors), or work on grids with a similar size, or complement each other in their shape or scale. Have fun!

Document Your Tool

Now that you’ve made a tool other people can use, you need to tell them how. Create a file named readme.txt that includes a list of the different brushes, the key used to activate it, and what the brush does.

Send the readme and the tool you’ve made to a friend. Have them try to use it without telling them anything about how it works. How do they react to it?

Reflect on What You Learned

Congratulations, you’ve made generative art! Take some time now to reflect on both what you have created, and what you have learned.

Generative art invites us to explore both the rigidity and flexibility of code. The system can never create something you don’t tell it to, yet it also may surprise you in what it can make. This can lead some generative artists to attribute authorship over creativity, at least in part, to the software. That authorship attribution risks a corresponding abdication of responsibility for what the software creates.

Write a paragraph reflecting on your experience creating the generator: did it surprise you? Did outcomes from the generator influence your overall design process? Did you feel you could express what you wanted to in the code? Did you feel the software you created influenced what you could express when using it? What did your friend think, and how did they use it differently from you?

Then, write an additional paragraph describing what you think you’ve learned from this assignment, both in relation to the learning objectives described at the beginning of the lab assignment, and more broadly related to the course goals. What do you know now that you didn’t know before starting the lab? If you were to start this lab again knowing what you know now, would you do anything differently? What did you find difficult and/or easy about this lab? Is there more you want to learn?

Turn It In

Save your final sketch with the naming convention: lastname_firstname_lab2 Then, submit the following:

  • A link to your code online (if using the p5.js editor) and a zip file containing your code

  • Your readme.txt file that contains instructions for using your software

  • Either:

    • at least 4 output images demonstrating variety from your code (if the code works) OR

    • a brief description of what you think is wrong with your code (if the code doesn’t work)

  • Your reflection on the process of creating a generator and what you learned from the lab

Supplemental Files

Sample code with one brush enabled: online or download:

Sample code with five brushes: online or download

PreviousLab 1: Three Points in SpaceNextLab 3: Image Processing

Last updated