# Help with space bar movement of ellipses

**URL:** <https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 30, 2020, 1:33pm UTC](https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428 "2020-05-30T13:33:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![s6277](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@s6277](https://discourse.processing.org/u/s6277)\
**Post date:** [May 30, 2020, 1:33pm UTC](https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428/1 "2020-05-30T13:33:40Z")

</div>

Hi, im new to processing and i was wondering if anyone could help me out me in this task. I want to move an ellipse up and down, and basically every time i press the space bar the previous ellipse stops on its spot and another one appears to its right moving up and down as usual, then when i press the space bar again the same thing happens and the previous ellipse pauses and a new one appears to its right. My program is working but not correctly.

In my program every time i press the space bar a new ellipse appears, but the previous one doesn’t stop and my ellipse moves up and down but with the previous ellipse, they are all supposed to move down individually not attached to the previous ones. Each row of the ellipse is supposed to move up and down on its own, once the space bar is pressed and they appear, NOT attached to the previous one and it moves up and down with it. I think the problem may be within the steps part, where i make it move in steps slowly. I’ve tried many different ways but it doesn’t seem to work.

This is my code:

```auto
final int ellipseSize = 20, rowSize = 4;
int yspeed = 5;
int xPos=0, yPos;
int[] x = {xPos}, y = {0};
float wX, hY, Steps, yha =0;
boolean pause = true;

void setup() { 
  size(500, 400); 
 Steps = (float)height/720;
 wX = (float)width/14.2;
 hY = (float)height/8f;
} 

void draw() { 
  background(255);
  fill(0); 
 int ellipseSteps = ((int)(yha/hY+0.5))* (int) hY;
  int index = y.length - 1;
  y[index] += yspeed;

  for (int i = 0; i < x.length; i++) { 
    for (int j = 0; j < rowSize; j+=20) {
   stroke(0);
   fill(255,0,0);
      ellipse(x[i], ellipseSteps + j , wX, hY);
    }
  }
  if(pause) {
        yha = yha + yspeed;
 }
    if ((yha > 350) || (yha < 0)){ 
   //Turn around!
   yspeed = yspeed*- 1;
   }
}

void keyPressed() { 
  if (key == ' ') { 
 pause = !pause;
      xPos += ellipseSize;
      x = append(x, xPos); 
      y = append(y, yPos); 
  }
}

```

thank you

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 30, 2020, 2:23pm UTC](https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428/2 "2020-05-30T14:23:47Z")

</div>

Hello,

Please format your code as a courtesy to the community:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 30, 2020, 4:48pm UTC](https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428/3 "2020-05-30T16:48:28Z")

</div>

Hello,

I spent a moment only on this:

- Created 2 arrays to store last position when I pressed ‘space’ bar
- Added a for loop to plot last positions
- Modified existing loop so it only plotted current x, y positions and not scroll across.
- Added a keyReleased() method; otherwise it updated twice for keyPressed() on pause and then again to !pause

I did not do this exactly as per your description; point form is always better than a paragraph for steps.

Example to get you started:

```auto
void keyPressed()
  { 
  if (key == ' ') 
    { 
    pause = !pause;
    //xPos += ellipseSize;
    //x = append(x, xPos); 
    //y = append(y, yPos);
    
    //x2 = append(x2, xPos); 
    //y2 = append(y2, yha);
    //println(xPos, yPos);
    }
  }

void keyReleased()
  { 
  if (key == ' ') 
    { 
    pause = !pause;
    xPos += ellipseSize;
    x = append(x, xPos); 
    y = append(y, yPos);
    
    x2 = append(x2, xPos); 
    y2 = append(y2, yha);
    println(xPos, yPos);
    }
  }

```

Use println() here and there to watch your variables when developing your code.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/84964b2d56ace71c3523eda306bbe691b4d7dc1e.png)

`:)`

---

<div class="post-metadata">

**Author:** ![s6277](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@s6277](https://discourse.processing.org/u/s6277)\
**Post date:** [May 31, 2020, 7:08am UTC](https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428/4 "2020-05-31T07:08:24Z")

</div>

Hey, thank you and yes i did try to do what you said but it’s still not displaying the results i wanted. I’m really confused sorry.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 31, 2020, 10:46am UTC](https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428/5 "2020-05-31T10:46:15Z")

</div>

Hello,

in this version when you press the Space Bar,

- the current position gets copied into the list of ellipses (arrays x and y) and
- a new column starts.
- Also the number is decreased.

All ellipses are displayed in pink, the moving one in white. Number is shown as text.  
Nothing is paused.

Warmest regards,

Chrisir

```auto

final int ellipseSize = 20, rowSize = 4;
int yspeed = 5;
//int xPos=0, yPos;
int[] x = {}, y = {};
float wX, hY, Steps, yha =0;
//boolean pause = true;
float currentMovingX=0; 

int number=4; 

void setup() { 
  size(500, 400); 
  Steps = (float)height/720;
  wX = (float)width/14.2;
  hY = (float)height/8f;

  currentMovingX=wX;
} 

void draw() { 
  background(255);
  fill(0); 
  // int ellipseSteps = ((int)(yha/hY+0.5))* (int) hY;
  // int index = y.length - 1;
  //y[index] += yspeed;

  for (int i = 0; i < x.length; i++) { 
    stroke(0);
    fill(255, 0, 220);
    ellipse(x[i], y[i], 
      wX, hY);
  }

  fill(255);
  ellipse(currentMovingX, yha, 
    wX, hY);
  fill(0); 
  text(number, 
    currentMovingX, yha); 

  yha = yha + yspeed;

  if ((yha > 350) || (yha < 0)) { 
    //Turn around!
    yspeed = yspeed*- 1;
  }
}

void keyPressed() { 
  if (key == ' ') { 

    // xPos += ellipseSize;
    x = (int[]) append(x, int(currentMovingX)); 
    y = (int[]) append(y, int(yha));

    currentMovingX += ellipseSize;
    number--;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 31, 2020, 11:51am UTC](https://discourse.processing.org/t/help-with-space-bar-movement-of-ellipses/21428/6 "2020-05-31T11:51:20Z")

</div>

Hello,

There are often many approaches and solutions to the same problem.  
I just took one quick look at this.

You may have to go down a lot of dead ends early on but in the end you become a better programmer.

One of the best tools in a programmers tool chest is knowing the resources available to you and learning to navigate them.

This is a very short list:

> **Resources \< Click here to expand !**
>
> I encourage you to review the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, etc.  
> [https://processing.org/](https://processing.org/)
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the tabs will reveal what is available; libraries, tools and local examples there.
> - The Coding Train  
> [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)  
> Many of the Processing functions are here:  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java)
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the tabs.  
> In the education tab, there is a reference to the Coding Train.
> - And the Internet. `:)`

`:)`