How to make spheres stay green?

2»

Answers

  • edited November 2017

    this must be in draw:

            else if (estado.equals("end")) {
              fill(0, 50);
              rect(width/2, height/2, width, height);
              image(fin, width/2, height/2);
            }
    
  • import peasy.*;
    import gifAnimation.*;
    
    // camera 
    PeasyCam cam;
    
    // invisible PGraphics
    PGraphics pg;
    
    //define hot spots
    PVector[] hotSpotsPosition=new PVector[5];
    color[] hotSpotsColor =new color [hotSpotsPosition.length];
    String[] hotSpotsText = new String [hotSpotsPosition.length];
    PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length];
    boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];
    Gif [] hotSpotsGif = new Gif [hotSpotsPosition.length];
    boolean [] sphereIsPermanentlyGreen = new boolean [hotSpotsPosition.length];
    int clickFin = 0;
    int countHotSpotsClicked = 0; 
    
    boolean almejacerrada;
    
    
    boolean showingAnim=false;
    PShape ammonite;
    PImage fondo, titulo, titulo2, ammoniteinicio, almeja, gestos, flecha, fin;
    String estado;
    PFont helvetica, nexa;
    
    final int undefined=-1;     // a constant 
    int hotSpotFound=undefined; // when undefined no image shown / no text is displayed
    
    int mousePressedAtX;
    int mousePressedAtY;
    
    // button data
    int buttonX, buttonY, 
      buttonWidth, buttonHeight;
    
    // -----------------------------------------------------------------------------
    
    void setup() {
    
      fullScreen(P3D);
      // size(900, 900, P3D);
    
      rectMode(CENTER);
      imageMode(CENTER);
      textAlign(CENTER);
      // textMode(CENTER);
    
      cam = new PeasyCam(this, 100);
      cam.setMinimumDistance(1);
      cam.setMaximumDistance(500);
      cam.rotateZ(radians(180));  // rotate around the x-axis passing through the subject
    
      ammonite = loadShape("ammonite.obj");
    
      // important sub function 
      defineHotSpots(); 
    
      fondo = loadImage("fondo.jpg");
      titulo = loadImage("titulo.png");
      titulo2 = loadImage("conociendo.png");
      ammoniteinicio = loadImage("ammoniteparainicio.png");
      almeja = loadImage("almeja.png");
      gestos = loadImage("gestos2.png");
      flecha = loadImage("flecha.png");
      fin = loadImage("fin.png");
    
      buttonX = 0;
      buttonY = 0;
      buttonWidth = 400;
      buttonHeight = 400;
    
      estado = "inicio";
      //almejacerrada = false;
      helvetica = createFont("HelveticaWorld-Regular.ttf", 30);
      nexa = createFont("Nexa Bold.otf", 50);
    
      pg = createGraphics(width, height, P3D);
    
      fondo.resize(width, height);
      image(fondo, width/2, height/2);
    } //func
    
    void draw() {
      if (estado.equals("inicio")) {
        doEstadoInicio();
      }//if
      //  next estado --------
      else if ( estado.equals("modelo")) {
        doEstadoModelo(); // most important
      }//else if
      //  EROR - NO estado - program error  --------
      else {
        println ("--- EROR - NO estado in draw() --- ");
        exit();
        return;
      }//else
    }//func draw()
    
    //------------------------------------------------------------------------
    
    void mousePressed() {
    
      // mouse is pressed
    
      if (estado.equals("inicio")) {
        // start screen
        estado = "modelo";
      } 
      //  next estado  --------
      else if ( estado.equals("modelo")) {
        // estado modelo
        mousePressedParaEstadoModelo();
        //---
      }//else if 
      //  EROR - NO estado
      else {
        println ("---- EROR - NO estado in mousePressed()  --------");
        exit();
        return;
      }//else
    } //func
    
    // ----------------------------------------------------------
    // ----------------------------------------------------------
    // called from setup() 
    
    void defineHotSpots() {
    
      // define the hot spots in parallel arrays
      // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] and so on
      // positions:
      hotSpotsPosition[0] = new PVector(-15, -20, 5);
      hotSpotsPosition[1] = new PVector(-5, -5, -25);
      hotSpotsPosition[2] = new PVector(-20, -10, 3);
      hotSpotsPosition[3] = new PVector(-30, -10, 20);
      hotSpotsPosition[4] = new PVector(-5, 19, -5);
    
      //colors: colors are not visible but must be unique
      hotSpotsColor[0] = color(255, 0, 0);
      hotSpotsColor[1] = color(100, 0, 0);
      hotSpotsColor[2] = color(110, 0, 0);
      hotSpotsColor[3] = color(120, 0, 0);
      hotSpotsColor[4] = color(160, 0, 0);
    
      // texts
      hotSpotsText[0] = "Embudo";
      hotSpotsText[1] = "Caparazón";
      hotSpotsText[2] = "Ojos";
      hotSpotsText[3] = "Tentáculos";
      hotSpotsText[4] = "Sifón";
    
      //images
      hotSpotsImg[0] = loadImage ("calamares.png");
      hotSpotsImg[1] = loadImage ("tamaños.png");
      hotSpotsImg[2] = loadImage ("estatica.png"); 
      hotSpotsImg[3] = loadImage ("tentaculos.png");
      hotSpotsImg[4] = loadImage ("limitados.png");
    
      //  for (PImage img : hotSpotsImg)
      //     img.resize(200, 0);
    
      // Gifs
      hotSpotsGif[0]  = new Gif(this, "embudoanim.gif");
      hotSpotsGif[1]  = new Gif(this, "caparazonanim.gif");
      hotSpotsGif[2]  = new Gif(this, "ojosanim.gif");
      hotSpotsGif[3]  = new Gif(this, "tentaculosanim.gif");
      hotSpotsGif[4]  = new Gif(this, "sifonanim.gif");
    
      for (Gif g1 : hotSpotsGif) {
        g1.play();
      }
    
      // whether we display the spot left or right
      hotSpotsRightSide[0] = false;
      hotSpotsRightSide[1] = true;
      hotSpotsRightSide[2] = true;
      hotSpotsRightSide[3] = true;
      hotSpotsRightSide[4] = false;
    
      // whether we display the that it's not green
      sphereIsPermanentlyGreen[0] = false;
      sphereIsPermanentlyGreen[1] = false;
      sphereIsPermanentlyGreen[2] = false;
      sphereIsPermanentlyGreen[3] = false;
      sphereIsPermanentlyGreen[4] = false;
    }
    
    // ----------------------------------------------------------
    // called from draw() 
    
    void doEstadoInicio() {
    
      // so the graphic AMMONITE is not cut when rotating
      avoidClipping(); 
    
      //-----------Stopping peasy ------
      cam.beginHUD();
    
      image(fondo, width/2, height/2);
      image(almeja, width-300, height-130, 250, 250);
      fill(0, 50);
      rect(width/2, height/2, width, height);
      fill(0, 30);
      noStroke();
      rect(width/2, 75, width, 150);
      fill(255);
      textFont(nexa);
      text("AMMONITE", width/2, height/6 - 50);
      text("EL ANCESTRO MARINO", width/2, height/6);
      textFont(helvetica);
      text("Toca para comenzar", width/2, height/2 + 300);
      if (gestos!=null)
        scale(0.5);
      image(gestos, width/2 + 100, height/2+300);
    
      cam.endHUD(); //--------------------------------
    
      //----------- AMMONITE ------
      pushMatrix();
      spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2);
      directionalLight(255, 255, 255, width/2, height/2, 20);
      scale(20);
      shape(ammonite);
      popMatrix();
    }
    
    void doEstadoModelo() {
    
      // so the graphic AMMONITE is not cut when rotating
      avoidClipping();
    
      makeInternalPGraphics();
    
      showBackground(); 
    
      showAmmonite(); 
    
      showTextField(); 
    
      showSpheres();
    }//func
    
    void showBackground() {
    
      // background
    
      cam.beginHUD(); // ----
      image(fondo, width/2, height/2, width, height);
      fill(0, 20);
      rect(width/2, height/2, width, height);
      textFont(nexa);
      fill(0, 40);
      rect(width/2, 75, width, 150);
      fill(255);
      text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);
      text(countHotSpotsClicked+"/"+ hotSpotsPosition.length, 
        width-150, height/2 - 110); 
      textSize(20);
      text("PARTES DESCUBIERTAS", width-150, height/2 - 80 );  
      if (almejacerrada == true) {
        image(almeja, width-300, height-130, 250, 250);
      }
      almejacerrada = true;
      if (flecha!=null)
        image(flecha, 125, height/6 - 60, 125, 125);
      if (mousePressed && 
        mouseX < 200 && mouseX > 0 && mouseY > 0 && mouseY < 200 && 
        estado.equals("modelo")) {
        estado = "inicio";
        countHotSpotsClicked = 0;
        sphereIsPermanentlyGreen[0] = false;
        sphereIsPermanentlyGreen[1] = false;
        sphereIsPermanentlyGreen[2] = false;
        sphereIsPermanentlyGreen[3] = false;
        sphereIsPermanentlyGreen[4] = false;
    
    
      }
    
    
      cam.endHUD(); // ----
    }
    
    void showAmmonite() {
      // show Ammonite
      pushMatrix();
      spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2);
      directionalLight(255, 255, 255, width/2, height/2, 20);
      scale(20);
      shape(ammonite);
      popMatrix();
    }
    
    void showTextField() {
    
      // text field
    
      if (hotSpotFound==undefined) {
        return;   // quit here
      }
    
      cam.beginHUD(); // ----
    
      if (hotSpotsRightSide[hotSpotFound]) {
        // show rect with text
        // on right side
        pushMatrix();
        //  translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z);
        translate(mousePressedAtX, mousePressedAtY );
        buttonX=mousePressedAtX;
        buttonY=mousePressedAtY;
        scale(0.5);
        fill(250, 250, 35);
        // rect(mousePressedAtX, mousePressedAtY, 100, 100);
        fill(255);
        textFont(nexa);
        textSize(90);
        //  textMode(SHAPE);
        translate(0, 0, 0);
    
        if (hotSpotsImg[hotSpotFound]!=null) {
          // translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
    
          image(hotSpotsImg[hotSpotFound], 0, 0);
          text(hotSpotsText[hotSpotFound], width/2 + 150, -420);
    
    
          //fill(0, 0, 0, 50);
        }
        popMatrix();
      } else
      {
        // show rect with text
        // on left side
        pushMatrix();
    
        translate(mousePressedAtX, mousePressedAtY );
        buttonX=mousePressedAtX;
        buttonY=mousePressedAtY;
    
        fill(250, 250, 35, 0);
        scale(0.5);
        fill(255);
    
        textFont(nexa);
        textSize(90);
        // textMode(SHAPE);
        translate(0, 0, 0);
    
        if (hotSpotsImg[hotSpotFound]!=null) {
    
          image(hotSpotsImg[hotSpotFound], 0, 0);
          text(hotSpotsText[hotSpotFound], width/2 + 150, -420);
        }
        popMatrix();
      } // else
      cam.endHUD(); // ----
    }
    
    void showSpheres() {
    
      // spheres
    
      for (int i=0; i<hotSpotsPosition.length; i++) {
        PVector pv = hotSpotsPosition[i];
    
        pushMatrix();
        translate(pv.x, pv.y, pv.z);
    
        if (i==hotSpotFound || sphereIsPermanentlyGreen[i]) {
          fill(2, 255, 100, 0); // highlight
        } else {
          fill(255, 0); // normal
        }
        sphere(9);
    
        popMatrix();
      }//for
    }//func
    
    // ----------------------------------------------------------
    // called from mousePressed() 
    
    void mousePressedParaEstadoModelo() {
      //
      mousePressedAtX = width/2 - 450;
      mousePressedAtY = height/2-50;
      //
      color colorFromMouse = pg.get(mouseX, mouseY);
      int oldHotSpotFound=hotSpotFound; 
    
      // hotSpotFound=undefined; // reset // ??????
    
      for (int i=0; i<hotSpotsPosition.length; i++) {
    
        // found a sphere? 
        if (colorFromMouse==hotSpotsColor[i]) {
          // Yes, we found a sphere that has been clicked on
          // Is the sphere the current one? 
          if (i==oldHotSpotFound) {
            hotSpotFound=undefined; // reset (off)
          } else {
            // set sphere ON
            // Do we need to count it?  
            if (!sphereIsPermanentlyGreen[i]) { 
              countHotSpotsClicked++; // yes
            }
            // mark as permanently green 
            sphereIsPermanentlyGreen[i] = true;
            // set current index hotSpotFound to i 
            hotSpotFound=i; // set current
          }
          break;
        } 
    
        if (hotSpotFound!=undefined) { // ??????
          hotSpotFound = undefined;
        }
      }//for
    }//func 
    
    // ---------------------------------------------------------------
    // Minor functions 
    
    void makeInternalPGraphics() {
      pg.beginDraw();
      pg. perspective(PI/3.0, (float) width/height, 1, 1000000);
      pg.setMatrix(getMatrix()); // replace the PGraphics-matrix
      pg.background(0);
      pg.noLights();
      for (int i=0; i<hotSpotsPosition.length; i++) {
        PVector pv=hotSpotsPosition[i];
        pg.pushMatrix();
        pg.translate(pv.x, pv.y, pv.z);
        pg.noStroke();
        pg.fill(hotSpotsColor[i]);
        pg.sphere(9);
        pg.popMatrix();
      }//for
      pg.endDraw();
    }//func
    
    void avoidClipping() {
      // avoid clipping :
      // https : // // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
      perspective(PI/3.0, (float) width/height, 1, 1000000);
    }//func
    //
    

    This is the entire code!

  • upload project, not post code

    and also with the changes with new estado "end" please

  • Sorry, I upload it to mediafire and I post it.

  • Sent you a message with the full project.

  • edited November 2017 Answer ✓

    you need to use else if in draw, not only if

    you also need this in mousePressed

      // ----
      else if (estado.equals("end")) {
        //
      }
    
  • import peasy.*;
    import gifAnimation.*;
    
    // camera 
    PeasyCam cam;
    
    // invisible PGraphics
    PGraphics pg;
    
    //define hot spots
    PVector[] hotSpotsPosition=new PVector[5];
    color[] hotSpotsColor =new color [hotSpotsPosition.length];
    String[] hotSpotsText = new String [hotSpotsPosition.length];
    PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length];
    boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];
    Gif [] hotSpotsGif = new Gif [hotSpotsPosition.length];
    boolean [] sphereIsPermanentlyGreen = new boolean [hotSpotsPosition.length];
    
    int clickFin = 0;
    int countHotSpotsClicked = 0; 
    
    boolean almejacerrada;
    
    
    boolean showingAnim=false;
    PShape ammonite;
    PImage fondo, titulo, titulo2, ammoniteinicio, almeja, gestos, flecha, fin;
    String estado;
    PFont helvetica, nexa;
    
    final int undefined=-1;     // a constant 
    int hotSpotFound=undefined; // when undefined no image shown / no text is displayed
    
    int mousePressedAtX;
    int mousePressedAtY;
    
    // button data
    int buttonX, buttonY, 
      buttonWidth, buttonHeight;
    
    // -----------------------------------------------------------------------------
    
    void setup() {
    
      fullScreen(P3D);
      // size(900, 900, P3D);
    
      rectMode(CENTER);
      imageMode(CENTER);
      textAlign(CENTER);
      // textMode(CENTER);
    
      cam = new PeasyCam(this, 100);
      cam.setMinimumDistance(1);
      cam.setMaximumDistance(500);
      cam.rotateZ(radians(180));  // rotate around the x-axis passing through the subject
    
      ammonite = loadShape("ammonite.obj");
    
      // important sub function 
      defineHotSpots(); 
    
      fondo = loadImage("fondo.jpg");
      titulo = loadImage("titulo.png");
      titulo2 = loadImage("conociendo.png");
      ammoniteinicio = loadImage("ammoniteparainicio.png");
      almeja = loadImage("almeja.png");
      gestos = loadImage("gestos2.png");
      flecha = loadImage("flecha.png");
      fin = loadImage("fin.png");
    
      buttonX = 0;
      buttonY = 0;
      buttonWidth = 400;
      buttonHeight = 400;
    
      estado = "inicio";
      //almejacerrada = false;
      helvetica = createFont("HelveticaWorld-Regular.ttf", 30);
      nexa = createFont("Nexa Bold.otf", 50);
    
      pg = createGraphics(width, height, P3D);
    
      fondo.resize(width, height);
      image(fondo, width/2, height/2);
    } //func
    
    void draw() {
      if (estado.equals("inicio")) {
        doEstadoInicio();
      }//if
      //  next estado --------
      else if ( estado.equals("modelo")) {
        doEstadoModelo(); // most important
      } 
      // ---------------
      else if (estado.equals("end")) {
        // end 
        //-----------Stopping peasy ------
        cam.beginHUD();
        fill(0, 50);
        rect(width/2, height/2, width, height);
        image(fin, width/2, height/2);
        cam.endHUD();
      }
      //else if
      //  EROR - NO estado - program error  --------
      else {
        println ("--- EROR - NO estado in draw() --- ");
        exit();
        return;
      }//else
    }//func draw()
    
    //------------------------------------------------------------------------
    
    void mousePressed() {
    
      // mouse is pressed
    
      if (estado.equals("inicio")) {
        // start screen
        estado = "modelo";
      } 
      //  next estado  --------
      else if ( estado.equals("modelo")) {
        // estado modelo
        mousePressedParaEstadoModelo();
        //---
      }//else if 
      // ----
      else if (estado.equals("end")) {
        //
      }
      //  EROR - NO estado
      else {
        println ("---- EROR - NO estado in mousePressed()  --------");
        exit();
        return;
      }//else
    } //func
    
    // ----------------------------------------------------------
    // ----------------------------------------------------------
    // called from setup() 
    
    void defineHotSpots() {
    
      // define the hot spots in parallel arrays
      // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] and so on
      // positions:
      hotSpotsPosition[0] = new PVector(-15, -20, 5);
      hotSpotsPosition[1] = new PVector(-5, -5, -25);
      hotSpotsPosition[2] = new PVector(-20, -10, 3);
      hotSpotsPosition[3] = new PVector(-30, -10, 20);
      hotSpotsPosition[4] = new PVector(-5, 19, -5);
    
      //colors: colors are not visible but must be unique
      hotSpotsColor[0] = color(255, 0, 0);
      hotSpotsColor[1] = color(100, 0, 0);
      hotSpotsColor[2] = color(110, 0, 0);
      hotSpotsColor[3] = color(120, 0, 0);
      hotSpotsColor[4] = color(160, 0, 0);
    
      // texts
      hotSpotsText[0] = "Embudo";
      hotSpotsText[1] = "Caparazón";
      hotSpotsText[2] = "Ojos";
      hotSpotsText[3] = "Tentáculos";
      hotSpotsText[4] = "Sifón";
    
      //images
      hotSpotsImg[0] = loadImage ("calamares.png");
      hotSpotsImg[1] = loadImage ("tamaños.png");
      hotSpotsImg[2] = loadImage ("estatica.png"); 
      hotSpotsImg[3] = loadImage ("tentaculos.png");
      hotSpotsImg[4] = loadImage ("limitados.png");
    
      //  for (PImage img : hotSpotsImg)
      //     img.resize(200, 0);
    
      // Gifs
      hotSpotsGif[0]  = new Gif(this, "embudoanim.gif");
      hotSpotsGif[1]  = new Gif(this, "caparazonanim.gif");
      hotSpotsGif[2]  = new Gif(this, "ojosanim.gif");
      hotSpotsGif[3]  = new Gif(this, "tentaculosanim.gif");
      hotSpotsGif[4]  = new Gif(this, "sifonanim.gif");
    
      for (Gif g1 : hotSpotsGif) {
        g1.play();
      }
    
      // whether we display the spot left or right
      hotSpotsRightSide[0] = false;
      hotSpotsRightSide[1] = true;
      hotSpotsRightSide[2] = true;
      hotSpotsRightSide[3] = true;
      hotSpotsRightSide[4] = false;
    
      // whether we display the that it's not green
      sphereIsPermanentlyGreen[0] = false;
      sphereIsPermanentlyGreen[1] = false;
      sphereIsPermanentlyGreen[2] = false;
      sphereIsPermanentlyGreen[3] = false;
      sphereIsPermanentlyGreen[4] = false;
    }
    
    // ----------------------------------------------------------
    // called from draw() 
    
    void doEstadoInicio() {
    
      // so the graphic AMMONITE is not cut when rotating
      avoidClipping(); 
    
      //-----------Stopping peasy ------
      cam.beginHUD();
    
      image(fondo, width/2, height/2);
      image(almeja, width-300, height-130, 250, 250);
      fill(0, 50);
      rect(width/2, height/2, width, height);
      fill(0, 30);
      noStroke();
      rect(width/2, 75, width, 150);
      fill(255);
      textFont(nexa);
      text("AMMONITE", width/2, height/6 - 50);
      text("EL ANCESTRO MARINO", width/2, height/6);
      textFont(helvetica);
      text("Toca para comenzar", width/2, height/2 + 300);
      if (gestos!=null)
        scale(0.5);
      image(gestos, width/2 + 100, height/2+300);
    
      cam.endHUD(); //--------------------------------
    
      //----------- AMMONITE ------
      pushMatrix();
      spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2);
      directionalLight(255, 255, 255, width/2, height/2, 20);
      scale(20);
      shape(ammonite);
      popMatrix();
    }
    
    void doEstadoModelo() {
    
      // so the graphic AMMONITE is not cut when rotating
      avoidClipping();
    
      makeInternalPGraphics();
    
      showBackground(); 
    
      showAmmonite(); 
    
      showTextField(); 
    
      showSpheres();
    }//func
    
    void showBackground() {
    
      // background
    
      cam.beginHUD(); // ----
      image(fondo, width/2, height/2, width, height);
      fill(0, 20);
      rect(width/2, height/2, width, height);
      textFont(nexa);
      fill(0, 40);
      rect(width/2, 75, width, 150);
      fill(255);
      text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);
      text(countHotSpotsClicked+"/"+ hotSpotsPosition.length, 
        width-150, height/2 - 110); 
      textSize(20);
      text("PARTES DESCUBIERTAS", width-150, height/2 - 80 );  
      if (almejacerrada == true) {
        image(almeja, width-300, height-130, 250, 250);
      }
      almejacerrada = true;
      if (flecha!=null)
        image(flecha, 125, height/6 - 60, 125, 125);
      if (mousePressed && 
        mouseX < 200 && mouseX > 0 && mouseY > 0 && mouseY < 200 && 
        estado.equals("modelo")) {
        estado = "inicio";
        countHotSpotsClicked = 0;
        sphereIsPermanentlyGreen[0] = false;
        sphereIsPermanentlyGreen[1] = false;
        sphereIsPermanentlyGreen[2] = false;
        sphereIsPermanentlyGreen[3] = false;
        sphereIsPermanentlyGreen[4] = false;
      }
    
    
      cam.endHUD(); // ----
    }
    
    void showAmmonite() {
      // show Ammonited
      pushMatrix();
      spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2);
      directionalLight(255, 255, 255, width/2, height/2, 20);
      scale(20);
      shape(ammonite);
      popMatrix();
    }
    
    void showTextField() {
    
      // text field
    
      if (hotSpotFound==undefined) {
        return;   // quit here
      }
    
      cam.beginHUD(); // ----
      noLights(); //!!!! 
    
      if (hotSpotsRightSide[hotSpotFound]) {
        // show rect with text
        // on right side
        pushMatrix();
        //  translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z);
        translate(mousePressedAtX, mousePressedAtY );
        buttonX=mousePressedAtX;
        buttonY=mousePressedAtY;
        scale(0.5);
        fill(250, 250, 35);
        // rect(mousePressedAtX, mousePressedAtY, 100, 100);
        fill(255);
        textFont(nexa);
        textSize(90);
        //  textMode(SHAPE);
        translate(0, 0, 0);
    
        if (hotSpotsImg[hotSpotFound]!=null) {
          // translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
    
          image(hotSpotsImg[hotSpotFound], 0, 0);
          text(hotSpotsText[hotSpotFound], width/2 + 150, -420);
    
    
          //fill(0, 0, 0, 50);
        }
        popMatrix();
      } else
      {
        // show rect with text
        // on left side
        pushMatrix();
    
        translate(mousePressedAtX, mousePressedAtY );
        buttonX=mousePressedAtX;
        buttonY=mousePressedAtY;
    
        fill(250, 250, 35, 0);
        scale(0.5);
        fill(255);
    
        textFont(nexa);
        textSize(90);
        // textMode(SHAPE);
        translate(0, 0, 0);
    
        if (hotSpotsImg[hotSpotFound]!=null) {
    
          image(hotSpotsImg[hotSpotFound], 0, 0);
          text(hotSpotsText[hotSpotFound], width/2 + 150, -420);
        }
        popMatrix();
      } // else
      cam.endHUD(); // ----
    }
    
    void showSpheres() {
    
      // spheres
    
      for (int i=0; i<hotSpotsPosition.length; i++) {
        PVector pv = hotSpotsPosition[i];
    
        pushMatrix();
        translate(pv.x, pv.y, pv.z);
    
        if (i==hotSpotFound || sphereIsPermanentlyGreen[i]) {
          fill(2, 255, 100, 0); // highlight
        } else {
          fill(255, 0); // normal
        }
        sphere(9);
    
        popMatrix();
      }//for
    }//func
    
    // ----------------------------------------------------------
    // called from mousePressed() 
    
    void mousePressedParaEstadoModelo() {
      //
      mousePressedAtX = width/2 - 450;
      mousePressedAtY = height/2-50;
      //
      color colorFromMouse = pg.get(mouseX, mouseY);
      int oldHotSpotFound=hotSpotFound; 
    
      // hotSpotFound=undefined; // reset // ??????
    
      for (int i=0; i<hotSpotsPosition.length; i++) {
    
        // found a sphere? 
        if (colorFromMouse==hotSpotsColor[i]) {
          // Yes, we found a sphere that has been clicked on
          // Is the sphere the current one? 
          if (i==oldHotSpotFound) {
            hotSpotFound=undefined; // reset (off)
          } else {
            // set sphere ON
            // Do we need to count it?  
            if (!sphereIsPermanentlyGreen[i]) { 
              countHotSpotsClicked++; // yes
            }
            // mark as permanently green 
            sphereIsPermanentlyGreen[i] = true;
            // set current index hotSpotFound to i 
            hotSpotFound=i; // set current
          }
          break;
        } 
    
        if (hotSpotFound!=undefined) { // ??????
          hotSpotFound = undefined;
        }
    
        if (countHotSpotsClicked == 5 && hotSpotFound == undefined) {
          estado = "end";
        }
      }//for
    }//func 
    
    // ---------------------------------------------------------------
    // Minor functions 
    
    void makeInternalPGraphics() {
      pg.beginDraw();
      pg. perspective(PI/3.0, (float) width/height, 1, 1000000);
      pg.setMatrix(getMatrix()); // replace the PGraphics-matrix
      pg.background(0);
      pg.noLights();
      for (int i=0; i<hotSpotsPosition.length; i++) {
        PVector pv=hotSpotsPosition[i];
        pg.pushMatrix();
        pg.translate(pv.x, pv.y, pv.z);
        pg.noStroke();
        pg.fill(hotSpotsColor[i]);
        pg.sphere(9);
        pg.popMatrix();
      }//for
      pg.endDraw();
    }//func
    void avoidClipping() {
      // avoid clipping :
      // https : // // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
      perspective(PI/3.0, (float) width/height, 1, 1000000);
    }//func
    //
    
  • you needed beginHUD in the new state "end" in draw

    I inserted noLights() so the text at the clicked spheres looks better

  • when you enter this by the way you can have an animation:

      image(hotSpotsImg[hotSpotFound], 0, 0);
      text(hotSpotsText[hotSpotFound], width/2 + 150, -420);
      // new lines: 
      hotSpotsGif[hotSpotFound].play();
      image(hotSpotsGif[hotSpotFound], 55, 55); 
    
  • Wow, okey!!! I add that lines and it's everything running okey, thanks Chris!

    Would it be easy to add something like a timer in the estadoModelo that if the program is in estadoModelo for more than 3, 4 minutes with no one using it, it resets and goes to the estadoInicio?

  • look at lastTimer and mouseIsDown using the search again

    import peasy.*;
    import gifAnimation.*;
    
    // camera 
    PeasyCam cam;
    
    // invisible PGraphics
    PGraphics pg;
    
    //define hot spots
    PVector[] hotSpotsPosition=new PVector[5];
    color[] hotSpotsColor =new color [hotSpotsPosition.length];
    String[] hotSpotsText = new String [hotSpotsPosition.length];
    PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length];
    boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];
    Gif [] hotSpotsGif = new Gif [hotSpotsPosition.length];
    boolean [] sphereIsPermanentlyGreen = new boolean [hotSpotsPosition.length];
    
    int clickFin = 0;
    int countHotSpotsClicked = 0; 
    
    boolean almejacerrada;
    
    
    boolean showingAnim=false;
    PShape ammonite;
    PImage fondo, titulo, titulo2, ammoniteinicio, almeja, gestos, flecha, fin;
    String estado;
    PFont helvetica, nexa;
    
    final int undefined=-1;     // a constant 
    int hotSpotFound=undefined; // when undefined no image shown / no text is displayed
    
    int mousePressedAtX;
    int mousePressedAtY;
    
    // button data
    int buttonX, buttonY, 
      buttonWidth, buttonHeight;
    
    int lastTimer; 
    boolean mouseIsDown=false; 
    
    
    // -----------------------------------------------------------------------------
    
    void setup() {
    
      fullScreen(P3D);
      // size(900, 900, P3D);
    
      rectMode(CENTER);
      imageMode(CENTER);
      textAlign(CENTER);
      // textMode(CENTER);
    
      cam = new PeasyCam(this, 100);
      cam.setMinimumDistance(1);
      cam.setMaximumDistance(500);
      cam.rotateZ(radians(180));  // rotate around the x-axis passing through the subject
    
      ammonite = loadShape("ammonite.obj");
    
      // important sub function 
      defineHotSpots(); 
    
      fondo = loadImage("fondo.jpg");
      titulo = loadImage("titulo.png");
      titulo2 = loadImage("conociendo.png");
      ammoniteinicio = loadImage("ammoniteparainicio.png");
      almeja = loadImage("almeja.png");
      gestos = loadImage("gestos2.png");
      flecha = loadImage("flecha.png");
      fin = loadImage("fin.png");
    
      buttonX = 0;
      buttonY = 0;
      buttonWidth = 400;
      buttonHeight = 400;
    
      estado = "inicio";
      //almejacerrada = false;
      helvetica = createFont("HelveticaWorld-Regular.ttf", 30);
      nexa = createFont("Nexa Bold.otf", 50);
    
      pg = createGraphics(width, height, P3D);
    
      fondo.resize(width, height);
      image(fondo, width/2, height/2);
    } //func
    
    void draw() {
      if (estado.equals("inicio")) {
        doEstadoInicio();
      }//if
      //  next estado --------
      else if ( estado.equals("modelo")) {
        doEstadoModelo(); // most important
      } 
      // ---------------
      else if (estado.equals("end")) {
        // end 
        //-----------Stopping peasy ------
        cam.beginHUD();
        fill(0, 50);
        rect(width/2, height/2, width, height);
        image(fin, width/2, height/2);
        cam.endHUD();
      }
      //else if
      //  EROR - NO estado - program error  --------
      else {
        println ("--- EROR - NO estado in draw() --- ");
        exit();
        return;
      }//else
    }//func draw()
    
    //------------------------------------------------------------------------
    
    void mousePressed() {
    
      // mouse is pressed
    
      lastTimer=millis(); 
      mouseIsDown=true; 
    
      if (estado.equals("inicio")) {
        // start screen
        estado = "modelo";
        lastTimer=millis();
      } 
      //  next estado  --------
      else if ( estado.equals("modelo")) {
        // estado modelo
        mousePressedParaEstadoModelo();
        //---
      }//else if 
      // ----
      else if (estado.equals("end")) {
        //
      }
      //  EROR - NO estado
      else {
        println ("---- EROR - NO estado in mousePressed()  --------");
        exit();
        return;
      }//else
    } //func
    
    void mouseReleased() {
      mouseIsDown=false;
    }
    
    void mouseMoved() {
      lastTimer=millis();
    }
    
    void mouseWheel() {
      lastTimer=millis();
    }
    
    // ----------------------------------------------------------
    // ----------------------------------------------------------
    // called from setup() 
    
    void defineHotSpots() {
    
      // define the hot spots in parallel arrays
      // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] and so on
      // positions:
      hotSpotsPosition[0] = new PVector(-15, -20, 5);
      hotSpotsPosition[1] = new PVector(-5, -5, -25);
      hotSpotsPosition[2] = new PVector(-20, -10, 3);
      hotSpotsPosition[3] = new PVector(-30, -10, 20);
      hotSpotsPosition[4] = new PVector(-5, 19, -5);
    
      //colors: colors are not visible but must be unique
      hotSpotsColor[0] = color(255, 0, 0);
      hotSpotsColor[1] = color(100, 0, 0);
      hotSpotsColor[2] = color(110, 0, 0);
      hotSpotsColor[3] = color(120, 0, 0);
      hotSpotsColor[4] = color(160, 0, 0);
    
      // texts
      hotSpotsText[0] = "Embudo";
      hotSpotsText[1] = "Caparazón";
      hotSpotsText[2] = "Ojos";
      hotSpotsText[3] = "Tentáculos";
      hotSpotsText[4] = "Sifón";
    
      //images
      hotSpotsImg[0] = loadImage ("calamares.png");
      hotSpotsImg[1] = loadImage ("tamaños.png");
      hotSpotsImg[2] = loadImage ("estatica.png"); 
      hotSpotsImg[3] = loadImage ("tentaculos.png");
      hotSpotsImg[4] = loadImage ("limitados.png");
    
      //  for (PImage img : hotSpotsImg)
      //     img.resize(200, 0);
    
      // Gifs
      hotSpotsGif[0]  = new Gif(this, "embudoanim.gif");
      hotSpotsGif[1]  = new Gif(this, "caparazonanim.gif");
      hotSpotsGif[2]  = new Gif(this, "ojosanim.gif");
      hotSpotsGif[3]  = new Gif(this, "tentaculosanim.gif");
      hotSpotsGif[4]  = new Gif(this, "sifonanim.gif");
    
      for (Gif g1 : hotSpotsGif) {
        g1.play();
      }
    
      // whether we display the spot left or right
      hotSpotsRightSide[0] = false;
      hotSpotsRightSide[1] = true;
      hotSpotsRightSide[2] = true;
      hotSpotsRightSide[3] = true;
      hotSpotsRightSide[4] = false;
    
      // whether we display the that it's not green
      sphereIsPermanentlyGreen[0] = false;
      sphereIsPermanentlyGreen[1] = false;
      sphereIsPermanentlyGreen[2] = false;
      sphereIsPermanentlyGreen[3] = false;
      sphereIsPermanentlyGreen[4] = false;
    }
    
    // ----------------------------------------------------------
    // called from draw() 
    
    void doEstadoInicio() {
    
      // so the graphic AMMONITE is not cut when rotating
      avoidClipping(); 
    
      //-----------Stopping peasy ------
      cam.beginHUD();
    
      image(fondo, width/2, height/2);
      image(almeja, width-300, height-130, 250, 250);
      fill(0, 50);
      rect(width/2, height/2, width, height);
      fill(0, 30);
      noStroke();
      rect(width/2, 75, width, 150);
      fill(255);
      textFont(nexa);
      text("AMMONITE", width/2, height/6 - 50);
      text("EL ANCESTRO MARINO", width/2, height/6);
      textFont(helvetica);
      text("Toca para comenzar", width/2, height/2 + 300);
      if (gestos!=null)
        scale(0.5);
      image(gestos, width/2 + 100, height/2+300);
    
      cam.endHUD(); //--------------------------------
    
      //----------- AMMONITE ------
      pushMatrix();
      spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2);
      directionalLight(255, 255, 255, width/2, height/2, 20);
      scale(20);
      shape(ammonite);
      popMatrix();
    }
    
    void doEstadoModelo() {
    
      // so the graphic AMMONITE is not cut when rotating
      avoidClipping();
    
      makeInternalPGraphics();
    
      showBackground(); 
    
      showAmmonite(); 
    
      showTextField(); 
    
      showSpheres();
    
    
      if (mouseIsDown) {
        lastTimer=millis();
      }
    
      if (millis()-lastTimer > 3000) {
        estado = "inicio";
      }
    }//func
    
    void showBackground() {
    
      // background
    
      cam.beginHUD(); // ----
      image(fondo, width/2, height/2, width, height);
      fill(0, 20);
      rect(width/2, height/2, width, height);
      textFont(nexa);
      fill(0, 40);
      rect(width/2, 75, width, 150);
      fill(255);
      text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);
      text(countHotSpotsClicked+"/"+ hotSpotsPosition.length, 
        width-150, height/2 - 110); 
      textSize(20);
      text("PARTES DESCUBIERTAS", width-150, height/2 - 80 );  
      if (almejacerrada == true) {
        image(almeja, width-300, height-130, 250, 250);
      }
      almejacerrada = true;
      if (flecha!=null)
        image(flecha, 125, height/6 - 60, 125, 125);
      if (mousePressed && 
        mouseX < 200 && mouseX > 0 && mouseY > 0 && mouseY < 200 && 
        estado.equals("modelo")) {
        estado = "inicio";
        countHotSpotsClicked = 0;
        sphereIsPermanentlyGreen[0] = false;
        sphereIsPermanentlyGreen[1] = false;
        sphereIsPermanentlyGreen[2] = false;
        sphereIsPermanentlyGreen[3] = false;
        sphereIsPermanentlyGreen[4] = false;
      }
    
    
      cam.endHUD(); // ----
    }
    
    void showAmmonite() {
      // show Ammonited
      pushMatrix();
      spotLight(255, 255, 255, 80, 20, 40, -1, 0, 0, PI/2, 2);
      directionalLight(255, 255, 255, width/2, height/2, 20);
      scale(20);
      shape(ammonite);
      popMatrix();
    }
    
    void showTextField() {
    
      // text field
    
      if (hotSpotFound==undefined) {
        return;   // quit here
      }
    
      cam.beginHUD(); // ----
      noLights(); //!!!! 
    
      if (hotSpotsRightSide[hotSpotFound]) {
        // show rect with text
        // on right side
        pushMatrix();
        //  translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z);
        translate(mousePressedAtX, mousePressedAtY );
        buttonX=mousePressedAtX;
        buttonY=mousePressedAtY;
        scale(0.5);
        fill(250, 250, 35);
        // rect(mousePressedAtX, mousePressedAtY, 100, 100);
        fill(255);
        textFont(nexa);
        textSize(90);
        //  textMode(SHAPE);
        translate(0, 0, 0);
    
        if (hotSpotsImg[hotSpotFound]!=null) {
          // translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
    
          image(hotSpotsImg[hotSpotFound], 0, 0);
          text(hotSpotsText[hotSpotFound], width/2 + 150, -420);
          hotSpotsGif[hotSpotFound].play();
          image(hotSpotsGif[hotSpotFound], 55, 55); 
    
          //fill(0, 0, 0, 50);
        }
        popMatrix();
      } else
      {
        // show rect with text
        // on left side
        pushMatrix();
    
        translate(mousePressedAtX, mousePressedAtY );
        buttonX=mousePressedAtX;
        buttonY=mousePressedAtY;
    
        fill(250, 250, 35, 0);
        scale(0.5);
        fill(255);
    
        textFont(nexa);
        textSize(90);
        // textMode(SHAPE);
        translate(0, 0, 0);
    
        if (hotSpotsImg[hotSpotFound]!=null) {
    
          image(hotSpotsImg[hotSpotFound], 0, 0);
          text(hotSpotsText[hotSpotFound], width/2 + 150, -420);
        }
        popMatrix();
      } // else
      cam.endHUD(); // ----
    }
    
    void showSpheres() {
    
      // spheres
    
      for (int i=0; i<hotSpotsPosition.length; i++) {
        PVector pv = hotSpotsPosition[i];
    
        pushMatrix();
        translate(pv.x, pv.y, pv.z);
    
        if (i==hotSpotFound || sphereIsPermanentlyGreen[i]) {
          fill(2, 255, 100, 0); // highlight
        } else {
          fill(255, 0); // normal
        }
        sphere(9);
    
        popMatrix();
      }//for
    }//func
    
    // ----------------------------------------------------------
    // called from mousePressed() 
    
    void mousePressedParaEstadoModelo() {
      //
      mousePressedAtX = width/2 - 450;
      mousePressedAtY = height/2-50;
      //
      color colorFromMouse = pg.get(mouseX, mouseY);
      int oldHotSpotFound=hotSpotFound; 
    
      // hotSpotFound=undefined; // reset // ??????
    
      for (int i=0; i<hotSpotsPosition.length; i++) {
    
        // found a sphere? 
        if (colorFromMouse==hotSpotsColor[i]) {
          // Yes, we found a sphere that has been clicked on
          // Is the sphere the current one? 
          if (i==oldHotSpotFound) {
            hotSpotFound=undefined; // reset (off)
          } else {
            // set sphere ON
            // Do we need to count it?  
            if (!sphereIsPermanentlyGreen[i]) { 
              countHotSpotsClicked++; // yes
            }
            // mark as permanently green 
            sphereIsPermanentlyGreen[i] = true;
            // set current index hotSpotFound to i 
            hotSpotFound=i; // set current
          }
          break;
        } 
    
        if (hotSpotFound!=undefined) { // ??????
          hotSpotFound = undefined;
        }
    
        if (countHotSpotsClicked == 5 && hotSpotFound == undefined) {
          estado = "end";
        }
      }//for
    }//func 
    
    // ---------------------------------------------------------------
    // Minor functions 
    
    void makeInternalPGraphics() {
      pg.beginDraw();
      pg. perspective(PI/3.0, (float) width/height, 1, 1000000);
      pg.setMatrix(getMatrix()); // replace the PGraphics-matrix
      pg.background(0);
      pg.noLights();
      for (int i=0; i<hotSpotsPosition.length; i++) {
        PVector pv=hotSpotsPosition[i];
        pg.pushMatrix();
        pg.translate(pv.x, pv.y, pv.z);
        pg.noStroke();
        pg.fill(hotSpotsColor[i]);
        pg.sphere(9);
        pg.popMatrix();
      }//for
      pg.endDraw();
    }//func
    void avoidClipping() {
      // avoid clipping :
      // https : // // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
      perspective(PI/3.0, (float) width/height, 1, 1000000);
    }//func
    //
    
  • I have to go

    Bye.

  • Wow, that's amazing Chrisir! Thanks a lot for everything, that code run perfectly, is just what I need, now I think we are done, I believe the code is almost ready to be handed it.

    Thanks a lot for all your help and your patience with me, someone with no much knowledge about processing.

    Thanks Chrisir!!!

  • edited November 2017

    you are most welcome!

    did you figure out what to do with the 2 buttons in the image after all 5 spheres have been clicked?

    this is the main timer line:

      if (millis()-lastTimer > 3000) {
    

    3000 is 3 seconds... so better say something like

      if (millis()-lastTimer > 1000 * 60 *3) {
    

    which would be 3 minutes I think

  • I put 180000, that is 3 minutes in milis!

    And for the two buttons I did this

    if (mousePressed && mouseX > 278 && mouseX  < 624 && mouseY > 450 && mouseY < 530 && estado.equals("end")) {
          estado = "modelo";
        } else if (mousePressed && mouseY > 450 && mouseY < 530 && mouseX > 743 && mouseX < 1092 && estado.equals("end")) {
          estado = "inicio";
        }
    
  • if (millis()-lastTimer > 1000 * 60 *3) {

    I did the same but I put the result of that instead of doing the multiplication

  • this

    if (mousePressed && mouseX > 278 && mouseX  < 624 && mouseY > 450 && mouseY < 530 && estado.equals("end")) {
          estado = "modelo";
        } else if (mousePressed && mouseY > 450 && mouseY < 530 && mouseX > 743 && mouseX < 1092 && estado.equals("end")) {
          estado = "inicio";
        }
    

    would belong in mousePressed in section estado.equals("end")

Sign In or Register to comment.