help me for code programming *** processing ***

Asma_

alsalam ealaykum Can you help me for code programming *** processing ***? I want a code for > Displaying elements sequentially if put object in smart table

Chrisir

Hello and welcome!

What do you mean by "put object in smart table" please?

Ah, I see, a table for output and input.

Chrisir ;-)

Asma_

Hello make skip for that "put object in smart table"

I want the code I want a code for > Displaying elements sequentially

like that first display num1 than 2.....

Asma_

code for display text with images in sequence

Chrisir

//
// current page:
int state = 0; 

// -------------------------------------------------

void setup() {
  // init (runs only once)
  size(800, 600);
} // func 

void draw() { 
  // draw() runs on and on 

  switch (state) {

  case 0: 
    // 
    handleState0();
    break; 

  case 1:
    // 
    handleState1(); 
    break;

  default:
    // error
    println("Error number 939; unknown state : " 
      + state + ".");
    exit();
    break;
  } // switch
  //
} // func 

// ------------------------------------------------
// functions for states - called from draw() 

void handleState0() {
  // 0
  background(11);
  fill(244, 3, 3); // red 
  text ("This is Page 1 ....\n", 210, 313); // add images, see command image()
} // func 

void handleState1() {
  // 
  background(255);
  fill(2, 223, 3); // green 
  text ("This is Page 2 ....\n", 210, 313);// add images, see command image()
} // func 

// ----------------------------------------
// keyboard input 

void keyPressed() {

  switch (state) {

  case 0: 
    // 0
    state++;
    break; 

  case 1:
    // 1
    state++; 
    break;

  default:
    // error
    println("Error number 1039; unknown state : " 
      + state + ".");
    exit();
    break;
  } // switch
} // func 
// 

Asma_

Thank very much,,,You're great

Asma_

I apologize, not that I want on the same page as the PowerPoint page, and if we click on the mouse, the title gets the title and therefore the content is 1,2,3,4

Chrisir

That‘s hard to understand.

You can click the keyboard to go to next page

You can add more pages the way I did for page 0 and 1

You can use a function void mousePressed () { state++;}

state is the number of your page

Asma_

No this is not required

Asma_

I saw the attached picture this is my project

I want to display the content sequentially

Asma_

do you speak Arabic??

Chrisir

I don’t speak arabic, sorry!

I saw your image

You need to Program the content for each page

I just wanted to show how to do it sequentially

Asma_

Ok no problem just want to text without pictures

TfGuy44

int state = 0;

void setup(){
  size(400,400);
  rectMode(CENTER);
}

void draw(){
  background(0);
  switch(state){
    case 5:
      fill(255,0,255);
      rect(200,200,20,20);
    case 4:
      fill(0,0,255);
      rect(300,300,20,20);
    case 3:
      fill(0,255,0);
      rect(100,300,20,20);
    case 2:
      fill(255,255,0);
      rect(300,100,20,20);
    case 1:
      fill(255,0,0);
      rect(100,100,20,20);
    case 0:
      break;  
  }
}

void mousePressed(){
  state++;
  state%=6;
}

Here, have a nice example that uses states.

Asma_

Ok thanks i will try it

Asma_

and I want to add animations moving horizontally in the format gif

Chrisir

Do it step by step

Don’t do the animation now

Do the other parts with pages and text and images first

Post your code here then

When images are involved load it up to github

Asma_

I apologized but did not understand

Chrisir

Break your idea down into steps

Take one step after another step

Do you use google translate?

Asma_

yes this ---> do you have the animation inside one single gif (that’s moving in itself)

Chrisir

as said, skip the animation for now and do the pages first, since animation is only decoration

for later:

you wrote:

yes this ---> do you have the animation inside one single gif (that’s moving in itself)

then follow kfrajers link from the other discussion: https://forum.processing.org/two/search?Search=gifanimation

Best, Chrisir ;-)

Asma_

Ok thanks, i will try it

Chrisir

here is an example code for playing one gif:

// https : // forum.processing.org/two/discussion/12737/gifanimation-for-processing-v3

import gifAnimation.*;

Gif myAnimation;


void setup() {
  size(1110, 900); 

  myAnimation = new Gif(this, "ec828ffa1181f74b16a33eddbbe26787.gif");
  myAnimation.play();
}

void draw() {
  image(myAnimation, 10, 10);
}

and here is the same thing but in addition moving left to right :

// https : // forum.processing.org/two/discussion/12737/gifanimation-for-processing-v3

import gifAnimation.*;

Gif myAnimation;

float posx=111, add=1; 

void setup() {
  size(1110, 900); 

  myAnimation = new Gif(this, "ec828ffa1181f74b16a33eddbbe26787.gif");
  // myAnimation.resize(244, 0);
  myAnimation.play();
  background(0);
}

void draw() {
  background(0);
  image(myAnimation, posx, 100);
  posx+=add;
  if (posx>width-myAnimation.width||
    posx<0) 
    add*=-1;
}

Asma_

how to add this library gifAnimation???

Asma_

How to add code Here?????

kfrajer

@Asma_ Please format your code. Edit your post (gear on top right side of any of your posts), select your code and hit ctrl+o. Leave an empty line above and below your block of code. Details here: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

how to add this library gifAnimation???

You need to download the library from the github repo. Click on the button clone or download on the right side: https://github.com/01010101/GifAnimation

Notice Chrisir provide the link in his post: https://forum.processing.org/two/discussion/12737/gifanimation-for-processing-v3

To install the library, follow the instructions in Manual install here: https://github.com/processing/processing/wiki/How-to-Install-a-Contributed-Library

The reason why you need to do a manual install is because it seems the current library in the PDE's Library Manager has not been updated to Processing 3.3.6.

Kf

Asma_

Possible correct this code

kfrajer

Please explain where did you get the library from? What version of Processing are you using? Also, in the PDE, go to the menu File>>Examples Then go to the folder Contributed libraries>>GifAnimation and run the provided examples. Tell us if they work or if they don't.

Kf

Asma_

i put copy the gifAnimation-folder into your Processing libraries folder,,, version of Processing3.3.6.

examples they don't work the same error

Asma_

              PFont font;                           // STEP 1 Declare PFont variable
              PFont ff;
            PImage bg;
              PFont f;                           // STEP 1 Declare PFont variable
              PImage imgs;
              PImage im;
              PImage imgs_;
              PImage imgs__;
              PImage map;  // Declare variables f type PImage
              PImage location;
              PFont f1;  // STEP 1 Declare PFont variable
              PImage img1;  // Declare variables f type PImage
            PImage img2;
            //PImage V;
            int state = 0;


              import ddf.minim.*; 
            Minim minim;
            AudioPlayer song;
            Play play;
            Rewind rewind;
            Forward ffwd;

            void setup() {

              size(1000, 800);

              // SOUND 
               minim = new Minim(this);

              song = minim.loadFile("Australia.mp3",1000);

              play = new Play(width/4 + 660,750,30,20);
              rewind = new Rewind(width/4, 500, 600,10);
              ffwd = new Forward(width/4 + 500, 600, 20, 10);


              // FONTS 
              font = loadFont ("CooperBlack-48.vlw");
              textFont(font);
              f = createFont("Arial",20,true); // STEP 2 Create Font
              ff = createFont("CalifornianFB-Bold-48",20,true); // STEP 2 Create Font


            // VOLUME IMG
            //V =loadImage("v1.png");

            // CURRENCY IMG
            imgs = loadImage("aus.png");

            // OBJECT IMG
            im =loadImage("Opera.png");

            // POPULATION IMG 
            imgs_ = loadImage("g1.png");

            // INDUSTRIES IMG
            imgs__= loadImage("carsflat.png");

            // MAP AND LOCATION IMG
            map = loadImage("Aus1.png");  // Load the image into the program 
            location =loadImage("lo.png");

            // CLIMATE IMG 
              img1 = loadImage("kh.png");  // Load the image into the program 
              img2 =loadImage("c.png");


              f = createFont("Arial",24,true); // STEP 2 Create Font
              size(1000, 800);

              // BG IMG
              bg = loadImage("000.jpg");

            }




            void draw() {
               background(bg);

              fill(#192016);  

               //SOUND


               stroke(255);
              float x = map(song.position(),0, song.length(), 0, width);
              stroke(255, 0, 0);

              play.update();
              play.draw();
              rewind.update();








              switch(state){
                 case 10:

            // MAB AND LOCATION
              image(map,20,460,width/3.8, height/3);
              image(location,13,700,50,70);
              textFont(font,19);                  // STEP 3 Specify font to be used
              textAlign(LEFT);
              text("  Located in Australia "+"\n"+"         continent.",50,753);


             // VOLUME
             // image(V,890, 720, width/10, height/10);

                 case 9:
             // SUN
              image(img1,250, 300, width/6, height/6);
              textFont(font,22);                  // STEP 3 Specify font to be used
              fill(0);    // STEP 4 Specify font color 
              textAlign(CENTER);
              text("    Hot dry in "+"\n"+"   summer",330,460);

                 case 8: 
              // CLOUD
              image(img2,330, 500, width/6, height/6);
              textFont(font,22);                  // STEP 3 Specify font to be used
              fill(0);    // STEP 4 Specify font color 
              text("Very cold "+"\n"+"in winter",390,640);   // STEP 5 Display Text

                 case 7:
               // POPUATION
                 image(imgs_, 530, 567, width/8, height/6);
                 textSize(22);
                 fill(#000000); // Fill color gray
                 textFont(font,22);                  // STEP 3 Specify font to be used
                 text("   Population : "+"\n"+"  24,638,928", 588, 730);


                 case 6:      
                // INDUSTRIES
                image(imgs__, 700,  477, width/6, height/6);
                textFont(font,22);                  // STEP 3 Specify font to be used
                fill(#000000); // Fill color gray
                text("   Cars Industries",  780, 640);

                case 5:
                // CURRENCY
               image(imgs, 660, 260, width/6, height/8);
               fill(#000000); // Fill color gray
               textFont(font,22);                  // STEP 3 Specify font to be used
               text("Currency :"+"\n"+" Australian Dollar", 750, 394);


                case 4:  
                 textSize(25);
                 text(" Capital : "+"\n\n"+" Canberra",530,320);   // STEP 5 Display Text

                case 3:
                // OBJECT
                 image(im, 500, 390, width/6, height/6);

                case 2:
                textFont(f);
                textAlign(CENTER);
                text("The only country that represent a whole continent located in the southern  " + "\n"+ 
                "part of the globe. Australia takes the kangaroo, the amo and the  "+"\n"+" golden tree as its symbol of the Australian animal and plant kingdom.",540,128);   // STEP 5 Display Text


                case 1:
                fill(#192016);  
                textAlign(CENTER);
                // STEP 4 Specify font color 
                textFont(font);
                text(" Australia",500,70);   // STEP 5 Display Text
                case 0:
                  break;  
              }




             }

              //sound

             void mousePressed()
            {
              play.mousePressed();
              rewind.mousePressed();
              ffwd.mousePressed();
               state++;
              state%=11;
            }

If you want the display content automatically after code object, what i do?

koogs

PImage imgs;
PImage im;
PImage imgs_;
PImage imgs__;
PImage img1;  // Declare variables f type PImage
PImage img2;

Why are you making this so hard for yourself?

Asma_

@koogs How do I do I do not know this language???

Chrisir

just give better names like imgMap, imgLocation .......

Asma_

This is not my problem , but ok thanks

koogs

get one gif working, in a different sketch

do one thing at a time.

Asma_

PFont font;                           // STEP 1 Declare PFont variable
PFont ff;
PImage bg;
PFont f;                           // STEP 1 Declare PFont variable
PImage imgs;
PImage im;
PImage imgs_;
PImage imgs__;
PImage map;  // Declare variables f type PImage
PImage location;
PFont f1;  // STEP 1 Declare PFont variable
PImage img1;  // Declare variables f type PImage
PImage img2;
//PImage V;
int state = 0;


import ddf.minim.*; 
Minim minim;
AudioPlayer song;
Play play;
Rewind rewind;
Forward ffwd;

void setup() {

  size(1000, 800);

  // SOUND 
  minim = new Minim(this);

  song = minim.loadFile("Australia.mp3", 1000);

  play = new Play(width/4 + 660, 750, 30, 20);
  rewind = new Rewind(width/4, 500, 600, 10);
  ffwd = new Forward(width/4 + 500, 600, 20, 10);


  // FONTS 
  font = loadFont ("CooperBlack-48.vlw");
  textFont(font);
  f = createFont("Arial", 20, true); // STEP 2 Create Font
  ff = createFont("CalifornianFB-Bold-48", 20, true); // STEP 2 Create Font


  // VOLUME IMG
  //V =loadImage("v1.png");

  // CURRENCY IMG
  imgs = loadImage("aus.png");

  // OBJECT IMG
  im =loadImage("Opera.png");

  // POPULATION IMG 
  imgs_ = loadImage("g1.png");

  // INDUSTRIES IMG
  imgs__= loadImage("carsflat.png");

  // MAP AND LOCATION IMG
  map = loadImage("Aus1.png");  // Load the image into the program 
  location =loadImage("lo.png");

  // CLIMATE IMG 
  img1 = loadImage("kh.png");  // Load the image into the program 
  img2 =loadImage("c.png");


  f = createFont("Arial", 24, true); // STEP 2 Create Font
  size(1000, 800);

  // BG IMG
  bg = loadImage("000.jpg");
}

void draw() {
  background(bg);
  fill(#192016);  

  //SOUND

  stroke(255);
  float x = map(song.position(), 0, song.length(), 0, width);
  stroke(255, 0, 0);

  play.update();
  play.draw();
  rewind.update();

  switch(state) {
  case 4:

    // MAB AND LOCATION
    image(map, 20, 460, width/3.8, height/3);
    image(location, 13, 700, 50, 70);
    textFont(font, 19);                  // STEP 3 Specify font to be used
    textAlign(LEFT);
    text("  Located in Australia "+"\n"+"         continent.", 50, 753);


    // VOLUME
    // image(V,890, 720, width/10, height/10);

    //case 4:
    // SUN
    image(img1, 250, 300, width/6, height/6);
    textFont(font, 22);                  // STEP 3 Specify font to be used
    fill(0);    // STEP 4 Specify font color 
    textAlign(CENTER);
    text("    Hot dry in "+"\n"+"   summer", 330, 460);

    //case 8: 
    // CLOUD
    image(img2, 330, 500, width/6, height/6);
    textFont(font, 22);                  // STEP 3 Specify font to be used
    fill(0);    // STEP 4 Specify font color 
    text("Very cold "+"\n"+"in winter", 390, 640);   // STEP 5 Display Text

    //case 7:
    // POPUATION
    image(imgs_, 530, 567, width/8, height/6);
    textSize(22);
    fill(#000000); // Fill color gray
    textFont(font, 22);                  // STEP 3 Specify font to be used
    text("   Population : "+"\n"+"  24,638,928", 588, 730);


    //case 6:      
    // INDUSTRIES
    image(imgs__, 700, 477, width/6, height/6);
    textFont(font, 22);                  // STEP 3 Specify font to be used
    fill(#000000); // Fill color gray
    text("   Cars Industries", 780, 640);

    //case 5:
    // CURRENCY
    image(imgs, 660, 260, width/6, height/8);
    fill(#000000); // Fill color gray
    textFont(font, 22);                  // STEP 3 Specify font to be used
    text("Currency :"+"\n"+" Australian Dollar", 750, 394);


    //case 4:  
    textSize(25);
    text(" Capital : "+"\n\n"+" Canberra", 530, 320);   // STEP 5 Display Text

  case 3:
    // OBJECT
    image(im, 500, 390, width/6, height/6);

  case 2:
    textFont(f);
    textAlign(CENTER);
    text("The only country that represent a whole continent located in the southern  " + "\n"+ 
      "part of the globe. Australia takes the kangaroo, the amo and the  "+"\n"+" golden tree as its symbol of the Australian animal and plant kingdom.", 540, 128);   // STEP 5 Display Text

  case 1:
    fill(#192016);  
    textAlign(CENTER);
    // STEP 4 Specify font color 
    textFont(font);
    text(" Australia", 500, 70);   // STEP 5 Display Text
  case 0:
    break;
  }
}

//sound

void mousePressed()
{
  play.mousePressed();
  rewind.mousePressed();
  ffwd.mousePressed();
  state++;
  state%=6;
}

@Lexyth Please convert this code to the code you sent before

Asma_

      PFont font;                           // STEP 1 Declare PFont variable
      PFont ff;
    PImage bg;
      PFont f;                           // STEP 1 Declare PFont variable
      PImage imgs;
      PImage im;
      PImage imgs_;
      PImage imgs__;
      PImage map;  // Declare variables f type PImage
      PImage location;
      PFont f1;  // STEP 1 Declare PFont variable
      PImage img1;  // Declare variables f type PImage
    PImage img2;
    //PImage V;
    int state = 0;


      import ddf.minim.*; 
    Minim minim;
    AudioPlayer song;
    Play play;
    Rewind rewind;
    Forward ffwd;

    void setup() {

      size(1000, 800);

      // SOUND 
       minim = new Minim(this);

      song = minim.loadFile("Australia.mp3",1000);

      play = new Play(width/4 + 660,750,30,20);
      rewind = new Rewind(width/4, 500, 600,10);
      ffwd = new Forward(width/4 + 500, 600, 20, 10);


      // FONTS 
      font = loadFont ("CooperBlack-48.vlw");
      textFont(font);
      f = createFont("Arial",20,true); // STEP 2 Create Font
      ff = createFont("CalifornianFB-Bold-48",20,true); // STEP 2 Create Font


    // VOLUME IMG
    //V =loadImage("v1.png");

    // CURRENCY IMG
    imgs = loadImage("aus.png");

    // OBJECT IMG
    im =loadImage("Opera.png");

    // POPULATION IMG 
    imgs_ = loadImage("g1.png");

    // INDUSTRIES IMG
    imgs__= loadImage("carsflat.png");

    // MAP AND LOCATION IMG
    map = loadImage("Aus1.png");  // Load the image into the program 
    location =loadImage("lo.png");

    // CLIMATE IMG 
      img1 = loadImage("kh.png");  // Load the image into the program 
      img2 =loadImage("c.png");


      f = createFont("Arial",24,true); // STEP 2 Create Font
      size(1000, 800);

      // BG IMG
      bg = loadImage("000.jpg");

    }




    void draw() {
       background(bg);

      fill(#192016);  

       //SOUND


       stroke(255);
      float x = map(song.position(),0, song.length(), 0, width);
      stroke(255, 0, 0);

      play.update();
      play.draw();
      rewind.update();



      switch(state){
         case 4:

    // MAB AND LOCATION
      image(map,20,460,width/3.8, height/3);
      image(location,13,700,50,70);
      textFont(font,19);                  // STEP 3 Specify font to be used
      textAlign(LEFT);
      text("  Located in Australia "+"\n"+"         continent.",50,753);


     // VOLUME
     // image(V,890, 720, width/10, height/10);

         //case 4:
     // SUN
      image(img1,250, 300, width/6, height/6);
      textFont(font,22);                  // STEP 3 Specify font to be used
      fill(0);    // STEP 4 Specify font color 
      textAlign(CENTER);
      text("    Hot dry in "+"\n"+"   summer",330,460);

         //case 8: 
      // CLOUD
      image(img2,330, 500, width/6, height/6);
      textFont(font,22);                  // STEP 3 Specify font to be used
      fill(0);    // STEP 4 Specify font color 
      text("Very cold "+"\n"+"in winter",390,640);   // STEP 5 Display Text

         //case 7:
       // POPUATION
         image(imgs_, 530, 567, width/8, height/6);
         textSize(22);
         fill(#000000); // Fill color gray
         textFont(font,22);                  // STEP 3 Specify font to be used
         text("   Population : "+"\n"+"  24,638,928", 588, 730);


         //case 6:      
        // INDUSTRIES
        image(imgs__, 700,  477, width/6, height/6);
        textFont(font,22);                  // STEP 3 Specify font to be used
        fill(#000000); // Fill color gray
        text("   Cars Industries",  780, 640);

        //case 5:
        // CURRENCY
       image(imgs, 660, 260, width/6, height/8);
       fill(#000000); // Fill color gray
       textFont(font,22);                  // STEP 3 Specify font to be used
       text("Currency :"+"\n"+" Australian Dollar", 750, 394);


        //case 4:  
         textSize(25);
         text(" Capital : "+"\n\n"+" Canberra",530,320);   // STEP 5 Display Text

         case 3:
        // OBJECT
         image(im, 500, 390, width/6, height/6);

        case 2:
        textFont(f);
        textAlign(CENTER);
        text("The only country that represent a whole continent located in the southern  " + "\n"+ 
        "part of the globe. Australia takes the kangaroo, the amo and the  "+"\n"+" golden tree as its symbol of the Australian animal and plant kingdom.",540,128);   // STEP 5 Display Text


        case 1:
        fill(#192016);  
        textAlign(CENTER);
        // STEP 4 Specify font color 
        textFont(font);
        text(" Australia",500,70);   // STEP 5 Display Text
        case 0:
          break;  
      }




     }

      //sound

     void mousePressed()
    {
      play.mousePressed();
      rewind.mousePressed();
      ffwd.mousePressed();
       state++;
      state%=6;
    }

@Lexyth Please convert this code to the code you sent before

Asma_

@Lexyth Here I get the error

Asma_

Nothing is displayed @Lexyth

Chrisir

Please format your code

Asma_

ok thanks,,you're great

Lexyth

Hey, for some reason my account and all the answers got deleted, so i'll repost the final answer again. :

PFont font;                           // STEP 1 Declare PFont variable
PFont ff;
PImage bg;
PFont f;                           // STEP 1 Declare PFont variable
PImage imgs;
PImage im;
PImage imgs_;
PImage imgs__;
PImage map;  // Declare variables f type PImage
PImage location;
PFont f1;  // STEP 1 Declare PFont variable
PImage img1;  // Declare variables f type PImage
PImage img2;
//PImage V;
int state = 0;

//THIS IS NEW!!!

int Stage = 0, x;
HashMap<Integer, Object[][]> StageImage = new HashMap<Integer, Object[][]>();

//HERE IT ENDS

import ddf.minim.*; 
Minim minim;
AudioPlayer song;
Play play;
Rewind rewind;
Forward ffwd;

void setup() {

  size(1000, 800);

  // SOUND 
  minim = new Minim(this);

  song = minim.loadFile("Australia.mp3", 1000);

  play = new Play(width/4 + 660, 750, 30, 20);
  rewind = new Rewind(width/4, 500, 600, 10);
  ffwd = new Forward(width/4 + 500, 600, 20, 10);


  // FONTS 
  font = loadFont ("CooperBlack-48.vlw");
  textFont(font);
  f = createFont("Arial", 20, true); // STEP 2 Create Font
  ff = createFont("CalifornianFB-Bold-48", 20, true); // STEP 2 Create Font


  // VOLUME IMG
  //V =loadImage("v1.png");

  // CURRENCY IMG
  imgs = loadImage("aus.png");

  // OBJECT IMG
  im =loadImage("Opera.png");

  // POPULATION IMG 
  imgs_ = loadImage("g1.png");

  // INDUSTRIES IMG
  imgs__= loadImage("carsflat.png");

  // MAP AND LOCATION IMG
  map = loadImage("Aus1.png");  // Load the image into the program 
  location =loadImage("lo.png");

  // CLIMATE IMG 
  img1 = loadImage("kh.png");  // Load the image into the program 
  img2 =loadImage("c.png");


  f = createFont("Arial", 24, true); // STEP 2 Create Font
  size(1000, 800);

  // BG IMG
  bg = loadImage("000.jpg");

  // THIS IS NEW!!!
  Object[][] EachStageOfImages = new Object[2][6]; //Increase last Number, to add more Variables, like different Font or Color for each Text || Increase first Number, to add more Object Steps
  //Use [0][] for first Stage displayed at beginning. If Beginning has to be empty, change [0][] to [1][] 
  EachStageOfImages[0][0] = imgs; //Use 0 for Image
  EachStageOfImages[0][1] = 100; //Use for x Coordinate of Image
  EachStageOfImages[0][2] = 100; //Use for y Coordinate of Image
  EachStageOfImages[0][3] = "This is Australia!"; //Use for Text
  EachStageOfImages[0][4] = 150; //Use for x Coordinate of Text
  EachStageOfImages[0][5] = 100; //Use for y Coordinate of Text
  //Add more if you need
  //Next Step is [1][]
  EachStageOfImages[1][0] = im; //Use 0 for Image
  EachStageOfImages[1][1] = 100; //Use for x Coordinate of Image
  EachStageOfImages[1][2] = 200; //Use for y Coordinate of Image
  EachStageOfImages[1][3] = "There is something!"; //Use for Text
  EachStageOfImages[1][4] = 150; //Use for x Coordinate of Text
  EachStageOfImages[1][5] = 200; //Use for y Coordinate of Text
  //All Stages have to be same lenght!!! If last of first is [0][5], last of all has to be [?][5] and length is 6(newObject[?][6])!
  //Add more if you need (you need 7 as far as i saw, but might be more. Just remember to edit the Object[][] EachStageOfImages = new Object[x][6] x length for the number of steps required!!
  //Another way to add Steps Information would be : Object[][] EachStageOfImages = new Object[][] {{imgs, 100, 100, "This is Australia!", 150, 100}, {im, 100, 200, "There is something!", 150, 200}}; its easier to write, but harder to edit and read. I'm not sure, but might also allow different lengths for each Stage... But not sure!!
  for (x = 0; x < EachStageOfImages.length; x++) {
    StageImage.put(x, EachStageOfImages[x]);
  }

  //HERE IT ENDS
}

void draw() {
  background(bg);
  fill(#192016);  

  //SOUND

  stroke(255);
  float x = map(song.position(), 0, song.length(), 0, width);
  stroke(255, 0, 0);

  play.update();
  play.draw();
  rewind.update();

//SWITCHING STATES WILL NOT BE USED, BUT I'LL LEAVE IT IN CASE YOU NEED IT FOR SOMETHING ELSE. ---
/*
  switch(state) {
  case 4:

    // MAB AND LOCATION
    image(map, 20, 460, width/3.8, height/3);
    image(location, 13, 700, 50, 70);
    textFont(font, 19);                  // STEP 3 Specify font to be used
    textAlign(LEFT);
    text("  Located in Australia "+"\n"+"         continent.", 50, 753);


    // VOLUME
    // image(V,890, 720, width/10, height/10);

    //case 4:
    // SUN
    image(img1, 250, 300, width/6, height/6);
    textFont(font, 22);                  // STEP 3 Specify font to be used
    fill(0);    // STEP 4 Specify font color 
    textAlign(CENTER);
    text("    Hot dry in "+"\n"+"   summer", 330, 460);

    //case 8: 
    // CLOUD
    image(img2, 330, 500, width/6, height/6);
    textFont(font, 22);                  // STEP 3 Specify font to be used
    fill(0);    // STEP 4 Specify font color 
    text("Very cold "+"\n"+"in winter", 390, 640);   // STEP 5 Display Text

    //case 7:
    // POPUATION
    image(imgs_, 530, 567, width/8, height/6);
    textSize(22);
    fill(#000000); // Fill color gray
    textFont(font, 22);                  // STEP 3 Specify font to be used
    text("   Population : "+"\n"+"  24,638,928", 588, 730);


    //case 6:      
    // INDUSTRIES
    image(imgs__, 700, 477, width/6, height/6);
    textFont(font, 22);                  // STEP 3 Specify font to be used
    fill(#000000); // Fill color gray
    text("   Cars Industries", 780, 640);

    //case 5:
    // CURRENCY
    image(imgs, 660, 260, width/6, height/8);
    fill(#000000); // Fill color gray
    textFont(font, 22);                  // STEP 3 Specify font to be used
    text("Currency :"+"\n"+" Australian Dollar", 750, 394);


    //case 4:  
    textSize(25);
    text(" Capital : "+"\n\n"+" Canberra", 530, 320);   // STEP 5 Display Text

  case 3:
    // OBJECT
    image(im, 500, 390, width/6, height/6);

  case 2:
    textFont(f);
    textAlign(CENTER);
!!!/*Info*\/    text("The only country that represent a whole continent located in the southern  " + "\n"+  // There is no need to add + sign : "southern\npart of" will do the same.
      "part of the globe. Australia takes the kangaroo, the amo and the  "+"\n"+" golden tree as its symbol of the Australian animal and plant kingdom.", 540, 128);   // STEP 5 Display Text

  case 1:
    fill(#192016);  
    textAlign(CENTER);
    // STEP 4 Specify font color 
    textFont(font);
    text(" Australia", 500, 70);   // STEP 5 Display Text
  case 0:
    break;
  } */
  //---

  //THIS IS NEW!!!

 for (x = 0; x < Stage; x++) {
         image((PImage)StageImage.get(x)[x][0], (Float)StageImage.get(x)[x][1], (Float)StageImage.get(x)[x][2]);
         textFont(font); //Can use different Fonts for each Stage, if you add a Variable to the StageImage Object[]. Then just change this to : textFont((PFont)StageImage.get(x)[6]) or what number the font variable will be;
         textAlign(CENTER); //Can use different Align for each Stage, as above, just change from PFont to String, which will be "CENTER" for example;
         fill(#192016); //Can use different fills. But must declare as Color Variable
         text((String)StageImage.get(x)[x][3], (Float)StageImage.get(x)[x][4], (Float)StageImage.get(x)[x][5]);
      }

  //HERE IT ENDS

}

//sound

void mousePressed() {

  //THIS IS NEW!!!

  if (mouseButton == LEFT && Stage <= StageImage.size()) {
    Stage += 1;
  } else if (mouseButton == RIGHT && Stage >= 0) {
    Stage -= 1;
  }

  //HERE IT ENDS

  play.mousePressed();
  rewind.mousePressed();
  ffwd.mousePressed();

  //This wont be needed

  state++;
  state%=6;

  //Until here

}

This is the final answer, even though you could just do the same without having it as a hashmap.