Newbie - Trying to make a "Taiko"-like game

Processing Coding Questions
1

Hi, I started Processing recently, and I’m trying to make a project for school, but I’m stuck.
(Before start to explain, I’m sorry for the possible mistakes I could make, I’m not english)

Well, I assume you know what “Taiko” is, it’s a OSU mode, here you can see what it look like : https://www.youtube.com/watch?v=f_uSO2ESCRI

I’m trying to make something similar to it, but with the 4 arrow on the keyboard

Capture1
Capture11266×836 36 KB

The balls will be coming from the right, and will go horizontaly to the left, until they go too far, or if the right arrow is pressed when the ball will be in the zone.

What I want to do and I’m stuck with, is the fact that I can only have one ball on the screen, I don’t know how I can put two balls, (or more) on the screen, and make them move at the same speed. I also want the balls to come every second, and that the ball will be a random ball between the 4 type of ball available (One for each arrow)

Here is my current code :

int Start =1400, vit=2, a=0, diff =120;
Boule ball = new Boule();
void setup() {
  int i;
  background(255);
  size(1250, 800);
  for (i=0; i<=5; i++) {
    line(380, 530+i, 1400, 530+i);
    line(380, 650+i, 1400, 650+i);
    line(380-i, 0, 380-i, 800);
    line(560+i/2, 530, 560+i/2, 650);
    line(660+i/2, 530, 660+i/2, 650);
  }
  ellipse(611, 592, 99, 99);
  frameRate(120);
}


void draw() {
  ball.update();
  ball.display();
}


//                    ---------------Verification-----------------
void keyPressed() {
  if (key == CODED) {
    if (keyCode==UP) {
      println(ball.collision(1));
    }
    if (keyCode==DOWN) {
      println(ball.collision(2));
    }
    if (keyCode==LEFT) {
      println(ball.collision(3));
    }
    if (keyCode==RIGHT) {
      println(ball.collision(4));
    }
  }
}

And the second part for the class :

class Boule {
  int Start =1400;
  int vit=2, pos, type;

  Boule() {
    pos=Start;
    type=1+int(random(4));
  }

  void update() {
    int i;
    noStroke();
    fill(255);
    rect(490, 536, 1000, 113);
    pos -= vit;
    for (i=0; i<=5; i++) {
      stroke(1);
      fill(0);
      line(560+i/2, 530, 560+i/2, 650);
      line(660+i/2, 530, 660+i/2, 650);
    }
    fill(255);
    ellipse(611, 592, 99, 99);

    stroke(1);
    fill(255);
    if (pos<=522) {
      println("Too late !");
      pos=Start;
      noStroke();
      fill(255);
      ellipse(522, 592, 72, 72);
    }
  }

  boolean collision(int touche)
  {
    boolean ret=false;
    if ((pos<=660)&&(pos>=560)) {
      if (type==touche) {
        ret=true;
      }
    }
    return ret;
  }


  void display() {
    switch(type)
    {
    case 1 : 
      stroke(1);
      fill(255, 0, 255);
      ellipse(pos, 592, 64, 64);
      fill(0);
      rect(pos-4, 590, 10, 25);
      triangle(pos-14, 590, pos+1, 570, pos+16, 590);
      break;
    case 2 : 
      stroke(1);
      fill(255, 255, 0);
      ellipse(pos, 592, 64, 64);
      fill(0);
      rect(pos-5, 570, 10, 25);
      triangle(pos-15, 595, pos, 615, pos+15, 595);
      break;
    case 3 : 
      stroke(1);
      fill(0, 255, 255);
      ellipse(pos, 592, 64, 64);
      fill(0);
      rect(pos-18, 587, 25, 11);
      triangle(pos+7, 610, pos+7, 575, pos+25, 592);
      break;
    case 4 : 
      stroke(1);
      fill(50, 255, 70);
      ellipse(pos, 592, 64, 64);
      fill(0);
      rect(pos-6, 587, 25, 11);
      triangle(pos-6, 610, pos-6, 575, pos-22, 592);
      break;
    }
  }
}

I searched for hours and hours with the processing reference, but I’m still stuck with this. Thank you for your help :x

1 Like
2

Easiest is to use an Arraylist of type Boule

ArrayList<Boule> boules = new ArrayList ();

Now instead of handling one ball you need to handle the ArrayList containing several ball

See reference

You add a ball:

boules.add(new Boule(......));

You can display the balls:

for(Boule b : boules) {
  b.display();
}

You can remove balls from the ArrayList

To do this I recommend to have a variable isalive
in the class which is initially true

Turn it to false when you don’t need this ball anymore

Now you need to for loop backwards through the ArrayList and remove the dead balls from the list

Do this at the end of draw():

for(int i=boules.size()-1; i>0; i—){
  boules.get(i).remove();
}
1 Like
3

That requires a small timer and then the boules.add(... part from above. The position of the ball is randomly, see command random().

A timer looks like this:


if(millis() - timeStarted > 1000){

      boules.add(new Boule.........
      timeStarted=millis();

}

Example

Example not using your code above…


ArrayList<Ball> balls = new ArrayList();

int timeStarted=0; 

void setup() {
  size(800, 800);
  noStroke();
  timeStarted=-1000;
} // func 

void draw() {
  background(255);

  // for-loop
  for (int i = balls.size()-1; i >= 0; i--) { 
    Ball ball = balls.get(i);
    ball.move();
    ball.display();
  } // for 

  // a new for-loop to delete balls
  // (it is better to have 2 separate for-loops)
  for (int i = balls.size()-1; i >= 0; i--) { // going backwards 
    Ball ball = balls.get(i);
    if (ball.y+ball.h > height) {
      balls.remove(i);
    } // if
  } // for

  checkTimer();

  fill(0); //black
  text(balls.size(), 
    20, height-20);
} // func 

void checkTimer() {
  // timer

  int rectWidth = 20;
  int rectHeight = 20;

  float rCol, gCol, bCol;

  if (millis() - timeStarted > 1000) {
    // new ball
    rCol = random(255);
    gCol = random(255);
    bCol = random(255);

    balls.add(new Ball(random(width), random(-60, 60), 
      rectWidth, rectHeight, 
      rCol, gCol, bCol));

    timeStarted=millis();
  }
}

// ==================================================

class Ball {  
  // pos
  float x;
  float y;

  // size
  float w;
  float h;

  // movement 
  float speed = 5;

  // color // or use color 
  float r, g, b;

  // constr
  Ball(float tempX, float tempY, 
    float tempW, float tempH, 
    float tempR, float tempG, float tempB) {

    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;

    r = tempR;
    g = tempG;
    b = tempB;
  }// constr

  void move() {
    y = y + speed;
  }

  void display() {
    fill(r, g, b);
    ellipse(x, y, w, h);
  }
  //
} // class
//
1 Like
4

I added an example now

I hope this helps