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)
- Discuss with your coding partner.
- Consult the cheat sheet.
- Look up the examples and documentation at p5 reference
- 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.
- 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.