Help with space bar movement of ellipses

Processing Coding Questions
1

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:

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

2 Likes
2

Hello,

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

:)

1 Like
3

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:

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

:)

2 Likes
4

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.

5

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


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--;
  }
}
2 Likes
6

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:

:)

1 Like