For Processing Community Day Copenhagen 2020

• The p5 online editor: editor.p5js.org
• p5 reference: p5js.org/reference

• The Coding Train
• Kreativ Kodning (in Danish)

1. Discuss with your coding partner.
2. Consult the cheat sheet.
3. Look up the examples and documentation at p5 reference
4. Search for videos (the two channels above are good places to look).

• Log in to the p5 editor using a Google or Github account. Or create an account if you have neither of those.
• Choose a canvas size fitting your tastes and screen size.
• Make the background a dark shade of gray.
• Make the background yellow.
• Make the background your favorite color.

This Color picker might be helpful.

• Put a large, green dot at the upper right part of the canvas.
• Create a small group of dots (3-4 is fine) of different sizes and colors at a region of the canvas of your choice. They should have coordinate sets close to each other, but not identical.

• Draw an 'X' on the lower left of the canvas by drawing two lines crossing each other. The colors and line widths are up to you.

• Make a rectangle with stroke and fill colors of your choice so that it does no overlap the group of dots from exercise 1.2.
• Make a rectangle that frames the group of dots. Make sure it has no fill.

• Draw a circle with red outline and orange fill.
• Draw an ellipse with a height that is twice its width.
• Draw an ellipse such that it encases the rectangle from the exercise 1.4. Make sure it has no fill.

• Try adding an extra parameter (alpha) to some of the 'stroke' and 'fill' commands in your sketch. Alpha should be between 0 and 255. 0 is fully transparent, 255 fully opaque (the default).

• Find the triangle command on the cheat sheet. How do you think it works?
• Draw some triangles using the command. Both with and without fill.
• Imagine you have a burning desire to add a drawing of pac-man to your sketch!
• Search for the command 'arc' on the p5 reference web site.
• Check the examples and read the documentation. Use the information to draw a big yellow pac-man on the canvas :D

Use what you've learned to compose a work of your own. Use the examples below, either as inspiration, or choose one to recreate. You may want to start a new sketch for this, or you can continue

A collection of inspiring works of art - Compiled by Esther Hersh

When you're done, send the link to your sketch to [email protected] - I will make a gallery of the contributions

• Use the built-in width and height variables to draw a circle centered at the middle of the canvas.
• Changes the size of the canvas in the createCanvas command, and check that the circle is now drawn at the new center.

• Move the background command from draw to setup, so that the draw function is empty (If in doubt, consult picture to the right) Consider what differences this will make.
• Add a mousePressed function to the sketch.
• In the mousePressed function, draw a dot at a random position on the screen. See the cheat sheet for how to generate random numbers for the coordinates. Hint: The width and height variables will come in handy.
• Try clicking the mouse :D

• This might work better in a fresh sketch, so feel free to save your work and start a new one.
• Draw a dot at the current mouse position.
• What happens if, instead of calling the background command in draw, you call it setup (i.e. only once)?
• What happens if you give the stroke color some alpha? (If in doubt, see cheat sheet)
• Remove the alpha from the stroke color. Put the background command back into draw. Give the background color some alpha instead. What happens?
• Change the sketch, so that instead of a dot, a line from the previous mouse position to the current one is drawn.

• Declare a variable x, and set it to zero.
• In the draw loop, draw a circle with an x component equal to the variable x.
• Also in the draw loop, add one to the x variable. What happens?
• What can be done to make the circle start outside of the canvas (to the left)?
• Use an 'if' statement to make the circle reenter the canvas (from the left) after leaving on the right side.

• Define variables x and y.
• In the setup function - after creting the canvas - assign x and y values so they correspond to the middle of the screen.
• Similar to the previous exercise, in the draw loop draw a circle centered at (x, y).
• Also in the draw loop, add a random number between -2 and 2 to both x and y.
• Try changing the limits (-2 and 2) and see how this alters the behavior of the circle movement.

• Consider the code from the previous exercise. Remove the lines where the random numbers are added to x and y.
• Instead, compare x to the mouse's x position: Use conditionals to move the circle 1 pixel closer to the mouse in the x direction. Hint: The 'if' ... 'else' pattern may be helpful here. Alternatively, two 'if' statements can be used.
• Do the same comparison between y and mouseY and change y accordingly.
• Watch as the circle eerily homes in on the cursor.

Start by cloning this sketch

• Open the file tab (arrow next to sketch), and inspect the names of the picture files.
• Choose one of the files names, and write it in the quotes of the loadImage command.
• Display the image on the canvas - you choose where.
• Change the size of the picture.
• Change the color of the picture by tinting it.
• Search the p5 reference for the 'filter' command, and try applying a filter to the image.
• Do the same for the 'imageMode' command.

• Remember the bouncing DVD logo? Time to revisit it :)
• Choose one of the images to use as the logo. Make sure it is resized so it's not too big compared to the canvas.
• Declare and initiate variables for coordinates (x, y) and velocity (dx, dy) of the "logo".
• Update the position of the logo in the draw function, adding dx to x, and dy to y.
• Use conditionals to check if the logo hits a border - In that case make it bounce by reversing the velocity in the relevant direction. You need to check both x and y directions.
• Finally, change to tint of the image randomly when the image bounces.

• Consult the cheat sheet to start webcam capture. Your browser will probably ask you for permission to access the cam.
• Hide the web cam.
• You can now use the webcam variable the same way you would an image. Try repeating some of the steps in exercise 4.1 for displaying it.

• Find an image online and upload it to your sketch. Transparent png files work best.
• Display the image on the canvas.
• Make the way the image display mode interactive, whether through mouse or keyboard input.

Start by cloning this sketch - Do note, that the functionality is from the p5.sound library

The song "Circle" by the band Fail to Die (whom, I may add, have a particularly charming guitar player) is already added to the sketch and loaded into a variable.

• Start playing the song by adding a command to the setup function.
• Set a playback rate for the song. What happens if it's greater than one? Smaller than one? Negative?
• Make the playback volume and/or the sound panning depend on the position of the mouse.

• Find a sound file and upload it to one of your sketches.
• Add sound to the sketch.
• Add an interactive element to the playback.