CODEWITHSUNDEEP
processingincrementellipse
Cyrill
Cyrill

Reputation: 833

Carousel of three ellipses in Processing

I am trying to create a vertical carousel in processing with three ellipses. I am able to get this done with two ellipses – that the carousel repeats itself over and over. So far so good – it thought I could use the same logic for three but I am wrong. I started to think it works with more variables but wrong again… what am I missing in the logic? I really can not figure out how to set the values to make it seamless repeating itself…

Here is the example with two (this one is "seamless"):

float yspeed = 5;
float circleY;
int d = 720;
void setup() {
  
 size(1080, 1620 );
 circleY = 0;
 
 }
 
 void draw() {
   background(255);
   fill(0);
   noStroke();
   ellipse(width/2, circleY+height/2, d,d);
   ellipse(width/2, circleY-height/2, d,d );
   circleY = circleY + yspeed;
   
if (circleY > height) {
 circleY=0;}

 }

Here is my WIP with three … (BTW colors are only to see better):

float yspeed1 = 5;
float yspeed2 = 5;
float yspeed3 = 5;
float circleY1;
float circleY2;
float circleY3;
int d = 720;
void setup() {

  size(1080, 1620);
  circleY1 = 0;
  circleY2 = 0;
  circleY3 = 0;
}

void draw() {
  background(255);
  noStroke();

  fill(255, 0, 0);
  ellipse(width/2, circleY1, d, d);
  circleY1= circleY1 + yspeed1;
  if (circleY1 > height+d/2  ) {
    circleY1=0;
  }

  fill(0, 255, 0);
  ellipse(width/2, circleY2-810, d, d);
  circleY2= circleY2 + yspeed2;
  if (circleY2 > height+d/2  ) {
    circleY2=0  ;
  }


  fill(0, 0, 255);
  ellipse(width/2, circleY2-1620, d, d);
  circleY3= circleY3 + yspeed3;
  if (circleY3 > height+d/2  ) {
    circleY3=0  ;
  }
}

The one with three always starts at the intital point for all of them – but I thought that using individual variables would change it?

Thank you for any kind of help!

Upvotes: 2

Views: 127

Answers (1)

Cyrill
Cyrill

Reputation: 833

I found a solution myself! I used a trick – I did it with a loop and used four instead of three – three is in the end the only ones you see anyway!

float yspeed = 1;
float circleY;
int d = 360;
void setup() {

  size(540, 810 );
  circleY = 0;
}

void draw() {
  background(255);
  fill(0);
  noStroke();
  //  fill(255,0,0);
  translate(0, - height/2);

  for (int i = 0; i< 5; i++) {    
    ellipse(width/2, circleY+height/2*i, d, d);
  }
  circleY = circleY + yspeed;  


  if (circleY > 405) {
    circleY= 0;
  }
}

Upvotes: 2

Related Questions