How to display text/images in sequence automatically??

edited February 2018 in Library Questions

How to display text/images in sequence automatically??

Answers

  • 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.

  •                 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
    
                    }
    
  • Please don't post your full program. Please narrow your problem down to a minimal example. Where exactly are you stuck?

  • 1

    Here is the mistake

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

  • I am a novice and I can not solve this problem

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

  • 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!

  • Please don't post duplicates, it confuses people.

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

    Example of previous discussion:

Sign In or Register to comment.