Link Search Menu Expand Document

Day 2

Learning Objectives

Today you learn different ways to modify the execution flow of a program.
Specifically you

  • understand the basics of how code is structured and executed,
  • understand what function definition and function call are,
  • understand the difference between a function call and a code block,
  • know the importance of code readability,
  • know how to implement user mouse and key inputs,
  • know how to implement if, if..else, and while conditional statements, and
  • with that understand how you can control the flow of a program.



1. Problem Fixing

Fix in this code example all issues (there are three steps).

2.1. Alpha

Start with the code example Color Circle Clearing - Step 5 from the lecture as basis.

Make the colorings of the of the ellipse somewhat transparent. That will give a nice look. You can see the result here.

Tip: Having a look at the reference for the fill command might help.

2.2. Key Input

Add as key event that random red colors are set when the key ‘r’ is pressed, random green colors for ‘g’ and random blue colors for ‘b’. You can see the result here.

Tip: For the keys to be recognized you might need to click with the mouse onto the canvas once after you started the program.

2.3. Mouse Movement Speed (Optional)

This task might be confusing to you. Try it, but if you get stuck, just move on with the next task.

Extend the program from question 2.2. in such a way that the speed of the mouse movement controls the size of the ellipse, meaning for controlling its width and height.

Tip: You might want to make the fill color of the ellipse less transparent again, otherwise you don’t see well what is going on and also sometimes p5 behaves strangely with the alpha values.

Think about speed for a second: how can we compute the speed of the movement?

Yes, a rough computation of speed could be equal to the distance between the current mouse position and the previous mouse position. Hence, the larger the distance, the quicker the mouse was moved between frames. You can compute the distance between two points, e.g., p1 and p2 by computing the difference between their x and y coordinates and adding these. Hence, speed = distance between p1 and p2 = (x1 - x2) + (y1 - y2).

Next to mouseX and mouseY, use the system variables pmouseX and pmouseY, which give the mouse position in the previous draw() call.

For computing the speed follow these steps:

  • Compute the difference between the current mouse position and previous mouse position in both, x (with mouseX, pmouseX) and y (with mouseY, pmouseY).
  • We only care about the absolute distance between the points. In some cases if we compute the difference between the two points, the result might be negative, e.g., 5 - 10 = -5. Here, we are only interested in the value of 5, as that is the distance between the points, we don’t care about the sign of the result. For example, 5 - 10 = -5 and 10 - 5 = 5 have both the same distance between the points but a different sign, which we don’t need to consider. For that we use the absolute values of the differences in x and y, with the function abs().
  • Now, add the absolute values of the difference in x and y.
  • Use the sum of the differences in x and y for both, the width and height of the ellipse.

Yes, the ellipse command will become very long!

You can see the result here.

2.4. Freestyle

Implement any further ideas you have to change the “brush” or stroke of our drawing program. Can you come up with your own interaction options?

Play with:

  • Different shapes (lines, arches, rectangles or triangles, …)
  • Coordinates and offsets
  • mouseX, mouseY
  • Colours, alpha, strokeWeight
  • random()
  • ifelse
  • function mousePressed()...
  • function keyPressed()...

Of course you can also have a look at the reference for further ideas.

Also, have a look at this example as inspiration.


Submit your sketches under Exercise Interaction in the OpenProcessing class.