What If?

What If It Was an UFO

Transcript

You've learned how to move things around either at random or constantly by using variables. Have a look at this example. Note that the filling color is now in the setup-method. That's because we don't want the color to change so I set it only once. Maybe you've wondered how to prevent the shapes from disappearing from the canvas. Let's look into that. The computer keeps repeating these two commands. Every time the computer has executed this command it goes back to the start and draws an ellipse to a new location. When the UFO arrives at the far end of the canvas the value of ufoX is five hundred. it keeps growing to 501, 502 and so on so this thing moves out of the canvas. Now I want the UFO to appear again from the left. Let's see how to do this. I'll use a new command called "if". If the ufoX gets bigger than 500 I'll set the ufoX to zero. Let's try this out. Nice work! the UFO stops here and appears from left again. Take a look at the if-structure. The stuff inside the parenthesis:"ufoX is greater than 500" is called "a test". Computer checks it every time and only if the variable really is over 500, it sets it back to zero in here. In other words we have made sure that x-coordinate can't get over 500. The test is inside parentheses and this statement is inside curly brackets. As the code starts to get more complicated it's easy to forget some of these symbols but hey, it's not a big deal. The computer just gives you an error message. Let's see. And then you can go and fix the bug. The program does its best to show me where the error is so I can fix my code. It's a bit funny that the UFO doesn't disappear completely before appearing from the left. Maybe you can fix this?
Do this

Copy the program completed in the video from below and test it.

int ufoX = 0;

void setup(){
  size(500, 500);
  fill(250, 250, 0);
}

void draw(){
  ellipse(ufoX, 250, 200, 80);
  ufoX = ufoX + 1;
  if(ufoX > 500){
    ufoX = 0;
  }
}

Change the program so that the ellipse moves completely over the right side of the canvas before appearing again from the left.

HINT: You have to edit the condition of the if-structure. Try different threshold-values. Below there are two examples.

ballX > 200 ballX > 550

The result should look like the one in the animation below.

What is the right condition for the UFO moving completely over the right side of the canvas before appearing again from the left?

Educator notes

In the task, students should edit the program so that the UFO goes totally past the right edge before appearing again from the left. The correct code is given below.

int ufoX = 0; 

void setup(){
  size(500, 500);
}

void draw(){
  ellipse(ufoX, 250, 200, 80);
  ufoX = ufoX + 1;
  if(ufoX > 600){   // the test-part
    ufoX = 0;       // the statement-part
  }
}

The condition has to be ballx > 600, because the width of the UFO is 200. When the x-coordinate of the center of the UFO is 600, the left end of the UFO is in the point 500 which is the right end of the canvas.

To produce the exact result in the animation, students have to edit the statement-part too. It has to be ballX = -100 because when the x-coordinate of the center is in that point, the x-coordinate of the right end of the UFO is 0. We haven’t used negative coordinate-points before so this part might be challenging to figure out. This can be a nice extra-challenge for the more advanced students!

Bouncing Balls

Transcript

Do you know the legendary computer game Pong? Well we're not going to make it just yet but it would be cool to make the shapes bounce back when they reach the edges. In this example the ball appears from the left after reaching the right end. It's like a short animation. But how do you make the ball move back and forth? I'll create another variable called "speed" and set it to five at first. If I add the speed-variable to the ballX I can control how fast things move. Let's try a few different values here. Okay, fifty is super fast. Three is quite slow. if ballX is bigger than 500, I'll replace this ballX-command with "speed equals minus five". Let's run this now. Now it works, a negative number changed the direction of the ball! But the ellipse still disappears when it comes back to the starting point. I will change the if part just a little bit. Okay, and I'll do something to the speed value: speed times minus one. if ballX is bigger than 500 or lower than zero I multiply the variable speed with minus one. So these two vertical lines here mean "OR". And now it works! The explanation is a little bit mathematical so pay attention. What happens when you multiply the variable speed with minus one? Well it depends on the value speed had before. If the value was positive this changes it to minus five and if it was negative multiplying with minus one turns it, tadaa, positive again! So plus five. And when does this happen? We only multiply with minus one if the ball has reached an edge. That's when we have to change the direction of the ball. If the x-coordinate of the ellipse is more than 500 starts to decrease and if it's less than zero it starts to increase. This way the ellipse never disappears from the canvas. If all this feels a little bit difficult don't worry, the best way to understand programming is to do it yourself. And now it's time for some practice.
Do this

Copy the code completed in the video (below).

int ballX = 0;
int speed = 5;

void setup(){
  size(500, 500);
}

void draw(){
  ellipse(ballX, 250, 100, 100);
  ballX = ballX + speed;
  if(ballX > 500 || ballX < 0){
    speed = speed * -1;
  }
}

Edit the code to produce the result animated below in the center. Try to produce the result animated on the right. You need to combine the two earlier versions! If it feels difficult, you can find help below!

if(ballX &#62; 500 &#124;&#124; ballX &#60; 0){
    speed = speed * -1;
  }
What does the expression above do?

Educator notes

Multiplying with negative number always changes a positive number to negative and vice versa. It’s a handy trick when you want to change the direction of a moving object.

The || -sign means OR, as explained on the video.

Activity: if-structures can be easier to understand if you read them out loud, like: “if ballX is greater than 500 or if it is less than zero, change the sign of the speed so that the ball bounces back from the edge”. This is a way to form an analogy between everyday language and often technical programming jargon.

There and Back Again

Transcript

Hi there! Here's the final version of the bouncing ball project. There are now two variables called ballX and ballY. ballX is the x-coordinate and ballY is the y-coordinate of the ball. If ballX is bigger than 500 it starts to decrease and if it's smaller than zero it starts to increase. And the same goes for ballY. There's two speed variables here: speedY for up-and-down movement and speedX for left-right movement. The ball just moves back and forth now. I'll try changing the starting point. Let's change the y-coordinate to 150. Well as you see the ball started a bit lower than previously. What if you change the speed values too? I'll increase speedX a little bit. Whoa! Now the horizontal movement is faster than vertical.
Do this

Copy the code completed in the video from below and test it.

Change the starting point of the ball by changing the initial values of ballX and ballY.

Change the horizontal and vertical speeds of the ball by changing the initial values of speedX and speedY.

int ballX = 0;
int ballY = 150;
int speedX = 5;
int speedY = 3;

void setup(){
  size(500, 500);
}

void draw(){
  ellipse(ballX, ballY, 100, 100);
  ballX = ballX + speedX;
  ballY = ballY + speedY;
  if(ballX > 500 || ballX < 0){
    speedX = speedX * -1;
  }
  if(ballY > 500 || ballY < 0){
    speedY = speedY * -1;
  }
}
Increase the initial value of ballX. What happens?
Increase the initial value of ballY. What happens?
Increase the value of speedY. What happens?

Educator notes

When the ball doesn’t start from the top-left corner, one of the coordinates “has a head start”. For example on the video, ballX is 0 and ballY is 150 in the start. So when ballY becomes 500, ballX is still just 350 and keeps increasing. That’s why the ball bounces back in the vertical direction before bouncing back in the horizontal direction.

In mathematics, the steepness of a line is called a slope or* a gradient*. For example a slope of 1 means that the x- and y-coordinates increase at the same rate. A slope of 2 means that the the line is less steep: when x-coordinate increases by two, y-coordinate increases just by one.

You can calculate the slope of the ball by dividing speedX by speedY. E.g. if speedX is 2 and speedY is 5, the slope is 2/5 = 0,4.

More information: https://en.wikipedia.org/wiki/Slope

Refreshing the Background

Transcript

I'll continue with the bouncing balls one more time. All this looks nice but what if you want to see just one ellipse at a time? I'll draw a shape on top to cover them. I'll draw a rectangle which is the size of the whole canvas in the beginning of the draw. Now the large rectangle is drawn on top and the previous ellipses disappear. I can change the color of the background with a fill-command before the rectangle. I'll change it to black. but I want the ball to be white so I need a new fill-command before the ellipse. Alright. Well now you see just one ellipse. I'll add one more number to the first fill-command. Hmm, why does this happen? Well it's your task to find out!
Do this

Add a fill-command and a rect-command to the start of the draw-method like in the video. You can choose your own filling color.

fill(0);
rect(0, 0, 500, 500);

Add a second parameter to the fill-command. Experiment with different values and see how it affects the result.

fill(0, 10);
rect(0, 0, 500, 500);
If you use two parameters in the fill-command, what does the first parameter do?
If you use two parameters in the fill-command, what does the second parameter do?

Educator notes

It's possible to refresh the background with the background-command too. But while using the background-command, it's not possible to change the opacity of the color. That's why a canvas-size rectangle is sometimes a more handy solution.

Opacity was introduced already in the Autumn Vibes-example but it may still require a little bit extra explaining.

  • If you use four parameters, the first three define the color (RGB) and the fourth is the opacity.
  • If you use just two parameters, the first is the grayscale color and the second one is the opacity. All the parameters inside stroke and fill -commands have to be between 0 and 255.

If you use opacity of 0, the're is no color (opacity is 0 %). The value 127 means that the opacity is 50 % (255/2 -> 127). You can use the stroke- and fill -commands with many parameter-combinations, check the reference for more information.

In the next chapter, students learn to set an image to the background of a sketch. If someone wants to do it now already, here's the info-page in Processing reference.