How to display text/images in sequence automatically??

Asma_

How to display text/images in sequence automatically??

KevinWorkman

What have you tried?

Break your problem down into smaller pieces and take those pieces on one at a time. Can you get a single image displaying? Can you add to that simple program and show a sequence of two images?

Work forward in small steps. Get it working with three images.

Using a data structure like an array or ArrayList will probably come in handy, as will the millis() function or the frameCount variable.

Then if you get stuck, post a MCVE along with a more specific question. Good luck.

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;

                //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)[0], (Float)StageImage.get(x)[1], (Float)StageImage.get(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)[3], (Float)StageImage.get(x)[4], (Float)StageImage.get(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

                }

KevinWorkman

Please don't post your full program. Please narrow your problem down to a minimal example. Where exactly are you stuck?

Asma_

Here is the mistake

KevinWorkman

Have you tried debugging your code?

Asma_

No

KevinWorkman

Cool, then it sounds like you've got a first step to try!

Asma_

I am a novice and I can not solve this problem

Asma_

Please solve the problem that is required of me tomorrow ,I tried but I do not have time now

KevinWorkman

Sorry, but that's not really how this works. Can you please start with a simple sketch that shows a single image? Then get two images working. Work your way up to three images, and see if you can find a data structure that helps you. Good luck!

Asma_

ok

koogs

Please don't post duplicates, it confuses people.

jeremydouglass

The top warning message about an id3 code is probably harmless -- focus on the line error.

Example of previous discussion:

• https://forum.processing.org/one/topic/getting-a-song-to-play-with-the-help-of-minim.html