Signing Coders #3

Today, we are going to work with the p5.js desktop editor.
Thank you again to Achim, Claire, Michael, and Yeseul for helping!

All code examples are available for download here.


However, try to make your own from scratch, using these guidelines.

1. keyIsPressed

keyIsPressed() is a valuable function because you can have specific keys of the keyboard control your sketch in real time!


When you make this sketch, try changing the fill colors or shapes. Press any key on the keyboard to change the background color!

2. keydraw

In this exercise we will create our own function named keydraw. Using it, we will make a complex and beautiful drawing machine. The goal is to take inputs from the keyboard which will draw in the canvas.


When you make this, try to make the drawing react faster by changing increments. Also, make the brush with different colors by changing the fill value. Click Play and then use the arrow keys to draw!

3. OOF

In this example we will use text(), textAlign(), and textSize(). This will the first step in creating kinetic text in your sketches.

no information OOF
Edward Ruscha. OOF. 1962



When you recreate OOF, change the text by replacing it with your own poems. Make a few lines each with different text alignment, size and color.

4. keyTyped

We will make a sketch that takes keyboard input and displays the key input.


When you are done, make more keys to change the values.

5. Date Paintings

In this exercise we will recreate one of On Kawara’s Date Paintings.



When you make the date painting, make a clock by using hour(), minute(), second(). Hints in the code…
// This code makes a clock // h = hour() // mi = minute() // se = second() // textSize(30) //

6. String poems

We are taking Ezra Pound’s poem, In a Station of the Metro.

The apparition of these faces in the crowd;
Petals on a wet, black bough.

Let’s make it into a string of text, and display one word at a time.


When you've made this, great job. We are done for the day!

The next class in will be taking place in the Fall of 2016.

← Last week!

← ← the week before last week...