# Moving Shapes in Processing

The steps below walk you through a Processing activity that moves a shape using the looping `draw()`function. All code should allow you to copy and paste.

## Loops

Loops are often used to control movement in some art programs. Here is an example of how a shape can move in Processing using a loop using the `draw()` function's looping nature:

## Step 1:  Create the Shape

In this example, we will use a circle, but this will work with rectangles, squares, and even text!

```java
void setup() {
  // 600 x 600 canvas
  size(600, 600);
  
  // Have the pivot point be the center of the shape
  ellipseMode(CENTER);
}

void draw() {
  // Draws a black background
  background(0);
  
  // Color of the shape
  fill(255, 125, 125);
  
  // Draws a 50 x 50 circle at (100, 100)
  ellipse(100, 100, 50, 50);
}
```

Output when played:

![](https://3674232557-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR1EQixIaV64lGrdh2s%2F-MTYlW1AZfr3kpm8ut6_%2F-MTYo7u_JSTXG48MfVDv%2Fimage.png?alt=media\&token=35aa57b8-3907-41d1-9295-e549453753fa)

## Step 2: Creating Variables for Varying Values

The `x` and `y` locations will change as we move the shape across the screen, so let's put those values in variables.

```java
float x = 100;
float y = 100;

void setup() {
  // 600 x 600 canvas
  size(600, 600);
  
  // Have the pivot point be the center of the shape
  ellipseMode(CENTER);
}

void draw() {
  // Draws a black background
  background(0);
  
  // Color of the shape
  fill(255, 125, 125);
  
  // Draws a 50 x 50 circle at the x and y coordinates
  ellipse(x, y, 50, 50);
}
```

## Step 3: Use the Looping Nature of Draw

`draw()` loops the code once per frame, so we can use this looping nature to update the `x` coordinate for each frame.

Add a speed variable to make the speed of this movement changeable.

```java
float x = 100;
float y = 100;
float speed = 2;

void setup() {
  // 600 x 600 canvas
  size(600, 600);
  
  // Have the pivot point be the center of the shape
  ellipseMode(CENTER);
}

void draw() {
  // Draws a black background
  background(0);
  
  // Color of the shape
  fill(255, 125, 125);
  
  // Draws a 50 x 50 circle at the x and y coordinates
  ellipse(x, y, 50, 50);
  
  // Update x for every frame
  x += speed;
}
```

Output when played:

![](https://3674232557-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR1EQixIaV64lGrdh2s%2F-MTYlW1AZfr3kpm8ut6_%2F-MTYoIJVW2Al6lWJqyNi%2FWeek5As3.gif?alt=media\&token=83143ae6-c575-4b44-9b3d-a702efe6527a)

## Step 4: Change Direction with If Statements

The `draw()` function is taking care of the looping, so let's tell it how to loop by putting in some if statements.

When the circle reaches the `x` coordinate of 500, have it change to moving downward.

```java
float x = 100;
float y = 100;
float speed = 2;

void setup() {
  // 600 x 600 canvas
  size(600, 600);
  
  // Have the pivot point be the center of the shape
  ellipseMode(CENTER);
}

void draw() {
  // Draws a black background
  background(0);
  
  // Color of the shape
  fill(255, 125, 125);
  
  // Draws a 50 x 50 circle at the x and y coordinates
  ellipse(x, y, 50, 50);
  
  // Update x for every frame until it reaches 500
  if (x <= 500) {
    x += speed;
  }
  
  // Update y if x is around 500
  if (x >= 500) {
    y += speed;
  }
}
```

Output when played:

![](https://3674232557-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR1EQixIaV64lGrdh2s%2F-MTYlW1AZfr3kpm8ut6_%2F-MTYoUiIn0rxIK1tweco%2FWeek5As4.gif?alt=media\&token=aa4eea20-4b84-4dc9-b7cc-20343cc7c0ea)

## Step 5: Make a Full Square

You'd think you could just use the values to say when to decrease `x` to move the shape to the left.

HOWEVER, our first if statement includes all the frames in which the `x` value is less than 500, so adding an if statement to subtract the speed will make it appear there was no difference.

Instead, we can use numbers to represent the direction the shape should move.

In each if statement, have a second if/else statement that tests for boundaries/limits. If the limit is reached, the direction is changed to the next one.

```java
float x = 100;
float y = 100;
float speed = 2;

int direction = 0;

// Directions:
// 0: to the right
// 1: downward
// 2: to the left
// 3: upward

void setup() {
  // 600 x 600 canvas
  size(600, 600);
  
  // Have the pivot point be the center of the shape
  ellipseMode(CENTER);
}

void draw() {
  // Draws a black background
  background(0);
  
  // Color of the shape
  fill(255, 125, 125);
  
  // Draws a 50 x 50 circle at the x and y coordinates
  ellipse(x, y, 50, 50);
  
  if (direction == 0) {
    
    // Limit how far
    if (x <= 500) {
      x += speed;
    }
    else {
      // once limit is reached, change direction
      direction = 1;
    }
  } 
  
  if (direction == 1) {
    // Limit how far
    if (y <= 500) {
      y += speed;
    }
    else {
      // once limit is reached, change direction
      direction = 2;
    }
  }
  
  if (direction == 2) {
    // Limit how far
    if (x >= 100) {
      x -= speed;
    }
    else {
      // once limit is reached, change direction
      direction = 3;
    }
  }
  
  if (direction == 3) {
    // Limit how far
    if (y >= 100) {
      y -= speed;
    }
    else {
      // once limit is reached, go back to first direction
      direction = 0;
    }
  }
}
```

Output when played:

![](https://3674232557-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MR1EQixIaV64lGrdh2s%2F-MTYlW1AZfr3kpm8ut6_%2F-MTYofWXilCIu_AtN7Uu%2FWeek5As5.gif?alt=media\&token=b14a5936-f7ee-4c7f-894b-65a99a91d78b)