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

**URL:** <https://discourse.processing.org/t/newbie-trying-to-make-a-taiko-like-game/9120>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 8, 2019, 6:10pm UTC](https://discourse.processing.org/t/newbie-trying-to-make-a-taiko-like-game/9120 "2019-03-08T18:10:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shii](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@Shii](https://discourse.processing.org/u/Shii)\
**Post date:** [March 8, 2019, 6:10pm UTC](https://discourse.processing.org/t/newbie-trying-to-make-a-taiko-like-game/9120/1 "2019-03-08T18:10:37Z")

</div>

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](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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/108dd92958e7a31bd8cdb52de7f75760c289b74e.png)

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 :

```auto
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 :

```auto
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

---

<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:** [March 9, 2019, 8:36am UTC](https://discourse.processing.org/t/newbie-trying-to-make-a-taiko-like-game/9120/2 "2019-03-09T08:36:02Z")

</div>

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:

```auto
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():

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

```

---

<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:** [March 9, 2019, 9:00am UTC](https://discourse.processing.org/t/newbie-trying-to-make-a-taiko-like-game/9120/3 "2019-03-09T09:00:25Z")

</div>

> [@Shii](#):
>
> I also want the balls to come every second,

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:

```auto

if(millis() - timeStarted > 1000){

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

}

```

**Example**

Example not using your code above…

```auto

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
//

```

---

<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:** [March 10, 2019, 5:41pm UTC](https://discourse.processing.org/t/newbie-trying-to-make-a-taiko-like-game/9120/4 "2019-03-10T17:41:41Z")

</div>

I added an example now

I hope this helps