How to make spheres stay green?

Chrisir

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);
        }

tiwis

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!

Chrisir

upload project, not post code

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

tiwis

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

tiwis

Sent you a message with the full project.

Chrisir

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

you also need this in mousePressed

  // ----
  else if (estado.equals("end")) {
    //
  }

Chrisir

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

Chrisir

you needed beginHUD in the new state "end" in draw

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

Chrisir

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); 

tiwis

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?

Chrisir

Yes.

Chrisir

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

Chrisir

I have to go

Bye.

tiwis

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

Chrisir

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

tiwis

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";
    }

tiwis

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

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

Chrisir

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")