I have to make buttons on a 3D shape

tiwis

Hello, I have a code with a 3D shape loaded, it's and obj file and I'm using peasy cam to move it, now I have to make some buttons on the 3D shape but this is going to be moved so I would need that the "buttons" in the 3D shape move with the 3D shape, how could I do it?

Chrisir

Can you post your entire code?

Basically just translate and rotate the buttons together with the shape.

Instead of moving the buttons on the shape you can make a fixed screen area and place the buttons there - then the buttons don’t rotate with the shape

It‘s called HUD, see beginHUD in peasyCam.

To evaluate mouse clicks in real 3D space you can use a color trick I can tell you more about

Chrisir

interesting!

you have a 3D shape loaded and you want to click child shapes of the shape with the mouse and depending on the child / the part of the shape that has been clicked display the name of the part

@jeremydouglass : do you know how to say childShape.hasBeenClicked() ?

or picking in 3D for child shapes?

E.g. shape is a car, you click on shape child wheel, info WHEEL appears, you click on window, info pane WINDOW appears

thanks guys!

Chrisir

Chrisir

still trying to help tiwis here a bit........

related question I

I am not sure why my pg doesn't show the shape ammonite?

in setup ...

    pg = createGraphics(width, height, P3D);

in draw

    pg.beginDraw();
    pg.background(0);
    pg.stroke(255);
    pg.scale(20);
    pg.shape(ammonite); // line(20, 20, mouseX, mouseY);
    pg.endDraw();

or is shape not possible in pg?

related question II

If it would work: How could I apply a peasycam on the shape in my pg?

I'd like to have the peasycam on the pg be exactly the same angle and dist and all as the peasycam on my real screen is. So when I rotate on screen, shape on pg would rotate the same amount.

Is that possible?

thanks !

Chrisir ;-)

Chrisir

I found out how to apply the same peasycam on my pg canvas [see above related question II]:

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<hotSpots.length; i++) {
    PVector pv=hotSpots[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

tiwis

import peasy.*;

Here is the code that Chrisir make to help me, in case anyone needs something similar!

Now, I have the problem that the images that appear when click on the ball shouldnt be rotated, they have to be static in the place you clicked to open it.

PeasyCam cam; PShape ammonite; PImage fondo, titulo, titulo2; String estado; PFont helvetica, nexa;

// invisible PGraphics
PGraphics pg;

//define hot spots 
PVector[] hotSpotsPosition=new PVector[4]; 
color[] hotSpotsColor =new color [hotSpotsPosition.length]; 
String[] hotSpotsText = new String [hotSpotsPosition.length];
PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length]; 
boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];

int undefined=-1; 
int hotSpotFound=undefined; // when undefined no text is displayed

void setup() { 
  fullScreen(P3D);
  imageMode(CENTER); 
  textAlign(CENTER);
  cam = new PeasyCam(this, 100); 
  cam.setMinimumDistance(110); 
  cam.setMaximumDistance(500);

  ammonite = loadShape("ammonite.obj");
  println ("just loaded ammonite");
  println( ammonite.getChildCount() +" child count");

  // define the hot spots in parallel arrays
  // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] 
  // positions:
  hotSpotsPosition[0] = new PVector(-31, -12, -19); 
  hotSpotsPosition[1] = new PVector(9, 0, 0); 
  hotSpotsPosition[2] = new PVector(-9, 20, 20); 
  hotSpotsPosition[3] = new PVector(9, 10, 02);
  //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); 
  // texts 
  hotSpotsText[0] = "dsgs mnvm,s ieit lgkjgflk xm,nxcv "; 
  hotSpotsText[1] = "aaaa bbbb cccccc ddddd eeeeee ffffff"; 
  hotSpotsText[2] = "eeeeee ffffff"; 
  hotSpotsText[3] = "ddddd eeeeee ffffff";
  //images
  // use different file names here 
  hotSpotsImg[0] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[1] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[2] = loadImage ("top shell color.JPG");  
  hotSpotsImg[3] = loadImage ("top shell color.JPG");
  // whether we display the spot left or right 
  hotSpotsRightSide[0] = false; 
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true; 
  hotSpotsRightSide[3] = true;

  for (PImage img : hotSpotsImg)
    img.resize(100, 0); 

  fondo = loadImage("fondo.jpg"); 
  titulo = loadImage("titulo.png"); 
  titulo2 = loadImage("conociendo.png");

  estado = "inicio";

  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() {

  avoidClipping(); // so the graphic AMMONITE is not cut when rotating

  if (estado.equals("inicio")) { 
    //-----------Stopping peasy ------ 
    cam.beginHUD(); 
    image(fondo, width/2, height/2); 
    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); 
    cam.endHUD(); //--------------------------------
  }//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() { 
  if (estado.equals("inicio")) {
    // start screen
    estado = "modelo";
  } 
  // --------------------- next estado !!!! -------- 
  else if ( estado.equals("modelo")) {
    //
    color colorFromMouse = pg.get(mouseX, mouseY);
    int oldHotSpotFound=hotSpotFound; 
    // hotSpotFound=undefined; // reset 
    for (int i=0; i<hotSpotsPosition.length; i++) { 
      if (colorFromMouse==hotSpotsColor[i]) {
        if (i==oldHotSpotFound)
          hotSpotFound=undefined; // reset
        else 
        hotSpotFound=i; // set
        break;
      }//if
    }//for 
    //---
  }//else if 
  // --------------------- EROR - NO estado !!!! -------- 
  else { 
    println ("--------------- EROR - NO estado in mousePressed() !!!! --------"); 
    exit(); 
    return;
  }//else
}//func

void doEstadoModelo() {

  makeInternalPGraphics();

  // HUD ----
  cam.beginHUD(); 
  image(fondo, width/2, height/2, width, height); 
  textFont(nexa); 
  fill(255); 
  text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);   
  cam.endHUD(); // ----

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

  // spheres
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv = hotSpotsPosition[i];
    pushMatrix(); 
    translate(pv.x, pv.y, pv.z); 
    noStroke(); 
    // use any color your want here
    fill(255, 2, 2, 66); 
    if (i==hotSpotFound) {
      fill(2, 255, 2, 88);
    }
    sphere(8); 
    popMatrix();
  }

  // if a hot spot has been clicked:
  if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text 
      // on right side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      scale(0.5);
      fill(250, 250, 35); 
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    } else
    {
      // show rect with text 
      // on left side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x-50, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      //  translate(-50, 0, 0);
      fill(250, 250, 35);
      scale(0.5);
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    }//else
  }//if
}//func

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

Just move the part lines 167 to 215 in the HUD section

tiwis

I put that part between beginHUD and endHUD and the program crashes, why can it be?

tiwis

Also, the things that appear in screen when a part is clicked shouldn't be rotated but if I do it in a way they stay estatic, the program crashes :(( :(( :((

What could I do?

Chrisir

Post your entire code

How can we see what you did wrong now without seeing your code??

tiwis

import peasy.*;

PeasyCam cam;

PShape ammonite; 
PImage fondo, titulo, titulo2; 
String estado; 
PFont helvetica, nexa;

// invisible PGraphics
PGraphics pg;

//define hot spots 
PVector[] hotSpotsPosition=new PVector[4]; 
color[] hotSpotsColor =new color [hotSpotsPosition.length]; 
String[] hotSpotsText = new String [hotSpotsPosition.length];
PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length]; 
boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];

int undefined=-1; 
int hotSpotFound=undefined; // when undefined no text is displayed

void setup() { 
  fullScreen(P3D);

  imageMode(CENTER); 
  textAlign(CENTER);

  cam = new PeasyCam(this, 100); 
  cam.setMinimumDistance(110); 
  cam.setMaximumDistance(500);

  ammonite = loadShape("ammonite.obj");
  println ("just loaded ammonite");
  println( ammonite.getChildCount() +" child count");

  // define the hot spots in parallel arrays
  // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] 
  // positions:
  hotSpotsPosition[0] = new PVector(-15, -20, 0);
  hotSpotsPosition[1] = new PVector(-5, -5, -25); 
  hotSpotsPosition[2] = new PVector(-20, -10, 3); 
  hotSpotsPosition[3] = new PVector(-25, -10, 15);
  //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); 
  // texts 
  hotSpotsText[0] = "embudo"; 
  hotSpotsText[1] = "caparazon"; 
  hotSpotsText[2] = "ojos"; 
  hotSpotsText[3] = "tentaculos";
  //images
  // use different file names here 
  hotSpotsImg[0] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[1] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[2] = loadImage ("top shell color.JPG");  
  hotSpotsImg[3] = loadImage ("top shell color.JPG");
  // whether we display the spot left or right 
  hotSpotsRightSide[0] = false; 
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true; 
  hotSpotsRightSide[3] = true;

  for (PImage img : hotSpotsImg)
    img.resize(100, 0); 

  fondo = loadImage("fondo.jpg"); 
  titulo = loadImage("titulo.png"); 
  titulo2 = loadImage("conociendo.png");

  estado = "inicio";

  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() {

  avoidClipping(); // so the graphic AMMONITE is not cut when rotating

  if (estado.equals("inicio")) { 
    //-----------Stopping peasy ------ 
    cam.beginHUD(); 
    image(fondo, width/2, height/2); 
    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); 
    cam.endHUD(); //--------------------------------
  }//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() { 
  if (estado.equals("inicio")) {
    // start screen
    estado = "modelo";
  } 
  // --------------------- next estado !!!! -------- 
  else if ( estado.equals("modelo")) {
    //
    color colorFromMouse = pg.get(mouseX, mouseY);
    int oldHotSpotFound=hotSpotFound; 
    // hotSpotFound=undefined; // reset 
    for (int i=0; i<hotSpotsPosition.length; i++) { 
      if (colorFromMouse==hotSpotsColor[i]) {
        if (i==oldHotSpotFound)
          hotSpotFound=undefined; // reset
        else 
        hotSpotFound=i; // set
        break;
      }//if
    }//for 
    //---
  }//else if 
  // --------------------- EROR - NO estado !!!! -------- 
  else { 
    println ("--------------- EROR - NO estado in mousePressed() !!!! --------"); 
    exit(); 
    return;
  }//else
}//func

void doEstadoModelo() {

  makeInternalPGraphics();

  // HUD ----
  cam.beginHUD(); 
  image(fondo, width/2, height/2, width, height); 
  textFont(nexa); 
  fill(255); 
  text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);   
  cam.endHUD(); // ----

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

  // spheres
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv = hotSpotsPosition[i];
    pushMatrix(); 
    translate(pv.x, pv.y, pv.z); 
    noStroke(); 
    // use any color your want here
    fill(255, 2, 2, 50); 
    if (i==hotSpotFound) {
      fill(2, 255, 2, 50);
    }
    sphere(7); 
    popMatrix();
  }
cam.beginHUD();
  // if a hot spot has been clicked:
  if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text 
      // on right side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      scale(0.5);
      fill(250, 250, 35); 
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    } else
    {
      // show rect with text 
      // on left side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x-50, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      //  translate(-50, 0, 0);
      fill(250, 250, 35);
      scale(0.5);
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();

    }//else
  }//if
        cam.endHUD();
}//func

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

Now it doesn't crash but the text appears in another site.

Chrisir

Instead of making an new HUD section bettee use the old one

So move the section up into the HUD section adjust the position there

tiwis

I tried that but it doesn't work, try it yourself so you understand what happened

tiwis

import peasy.*;

PeasyCam cam;

PShape ammonite; 
PImage fondo, titulo, titulo2; 
String estado; 
PFont helvetica, nexa;

// invisible PGraphics
PGraphics pg;

//define hot spots 
PVector[] hotSpotsPosition=new PVector[4]; 
color[] hotSpotsColor =new color [hotSpotsPosition.length]; 
String[] hotSpotsText = new String [hotSpotsPosition.length];
PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length]; 
boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];

int undefined=-1; 
int hotSpotFound=undefined; // when undefined no text is displayed

void setup() { 
  fullScreen(P3D);

  imageMode(CENTER); 
  textAlign(CENTER);

  cam = new PeasyCam(this, 100); 
  cam.setMinimumDistance(110); 
  cam.setMaximumDistance(500);

  ammonite = loadShape("ammonite.obj");
  println ("just loaded ammonite");
  println( ammonite.getChildCount() +" child count");

  // define the hot spots in parallel arrays
  // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] 
  // positions:
  hotSpotsPosition[0] = new PVector(-15, -20, 0);
  hotSpotsPosition[1] = new PVector(-5, -5, -25); 
  hotSpotsPosition[2] = new PVector(-20, -10, 3); 
  hotSpotsPosition[3] = new PVector(-25, -10, 15);
  //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); 
  // texts 
  hotSpotsText[0] = "embudo"; 
  hotSpotsText[1] = "caparazon"; 
  hotSpotsText[2] = "ojos"; 
  hotSpotsText[3] = "tentaculos";
  //images
  // use different file names here 
  hotSpotsImg[0] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[1] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[2] = loadImage ("top shell color.JPG");  
  hotSpotsImg[3] = loadImage ("top shell color.JPG");
  // whether we display the spot left or right 
  hotSpotsRightSide[0] = false; 
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true; 
  hotSpotsRightSide[3] = true;

  for (PImage img : hotSpotsImg)
    img.resize(100, 0); 

  fondo = loadImage("fondo.jpg"); 
  titulo = loadImage("titulo.png"); 
  titulo2 = loadImage("conociendo.png");

  estado = "inicio";

  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() {

  avoidClipping(); // so the graphic AMMONITE is not cut when rotating

  if (estado.equals("inicio")) { 
    //-----------Stopping peasy ------ 
    cam.beginHUD(); 
    image(fondo, width/2, height/2); 
    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 a hot spot has been clicked:

    cam.endHUD(); //--------------------------------
  }//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() { 
  if (estado.equals("inicio")) {
    // start screen
    estado = "modelo";
  } 
  // --------------------- next estado !!!! -------- 
  else if ( estado.equals("modelo")) {
    //
    color colorFromMouse = pg.get(mouseX, mouseY);
    int oldHotSpotFound=hotSpotFound; 
    // hotSpotFound=undefined; // reset 
    for (int i=0; i<hotSpotsPosition.length; i++) { 
      if (colorFromMouse==hotSpotsColor[i]) {
        if (i==oldHotSpotFound)
          hotSpotFound=undefined; // reset
        else 
        hotSpotFound=i; // set
        break;
      }//if
    }//for 
    //---
  }//else if 
  // --------------------- EROR - NO estado !!!! -------- 
  else { 
    println ("--------------- EROR - NO estado in mousePressed() !!!! --------"); 
    exit(); 
    return;
  }//else
}//func

void doEstadoModelo() {

  makeInternalPGraphics();

  // HUD ----
  cam.beginHUD(); 
  image(fondo, width/2, height/2, width, height); 
  textFont(nexa); 
  fill(255); 
  text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);  

   if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text 
      // on right side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      scale(0.5);
      fill(250, 250, 35); 
      rect(100, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    } else
    {
      // show rect with text 
      // on left side
      pushMatrix();
      translate(hotSpotsPosition[hotSpotFound].x-50, 
        hotSpotsPosition[hotSpotFound].y, 
        hotSpotsPosition[hotSpotFound].z);
      //  translate(-50, 0, 0);
      fill(250, 250, 35);
      scale(0.5);
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();

    }//else
  }//if
  cam.endHUD(); // ----

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

  // spheres
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv = hotSpotsPosition[i];
    pushMatrix(); 
    translate(pv.x, pv.y, pv.z); 
    noStroke(); 
    // use any color your want here
    fill(255, 2, 2, 50); 
    if (i==hotSpotFound) {
      fill(2, 255, 2, 50);
    }
    sphere(7); 
    popMatrix();
  }

}//func

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

Now I put it like this and the program runs good and the image is 2D mode, but, which value should I change there

 if (hotSpotsRightSide[hotSpotFound]) {
          // show rect with text 
          // on right side
          pushMatrix();
          translate(hotSpotsPosition[hotSpotFound].x, 
            hotSpotsPosition[hotSpotFound].y, 
            hotSpotsPosition[hotSpotFound].z);
          scale(0.5);
          fill(250, 250, 35); 
          rect(100, 0, 100, 100); 
          fill(0); 
          textFont(helvetica);
          textSize(9);
          textMode(SHAPE); 
          translate(0, 0, 0.2); 
          text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
          if (hotSpotsImg[hotSpotFound]!=null) {
            translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
            image(hotSpotsImg[hotSpotFound], 0, 0);
          }

In order to make it appear in the place I clicked?

Sorry for all the questions, but I don't understand all the code at all. :(

Chrisir

I am not at home so I can really help you

in translate use mouseX,mouseY,0

Or look at screenX, screenY

(Or even modelX....)

You will figure it out - I am sure

tiwis

Thanks, I'm trying with mouseX and mouseY because I know them better but i'm having a problem with how I could make the image be static, because it's following my mouse all the time, I had thought in a boolean but I don't know how to do it really :((

I wish I had the knowledge you have :((

Chrisir

A lot of people share that wish.

Before setup ()

int mousePressedAtX, mousePressedAtY;

set both in function mousePressed() where hit the sphere: set it to mouseX and to mouseY

Use it in translate() in our output section

[EDITED]

tiwis

Sorry, but I don't know if it's because we don't share the same language but I didn't understand this,

int mousePressedAtX ....and ....Y

which is the thing I have to initialize before setup()?

I mean, which text I should put where you put points?

Sorry for asking too much

tiwis

I mean, which value should I give to that int variable?

tiwis

Chrisir, I was able to do it!!

The code is like this right now

import peasy.*;

PeasyCam cam;

PShape ammonite; 
PImage fondo, titulo, titulo2; 
String estado; 
PFont helvetica, nexa;

// invisible PGraphics
PGraphics pg;

//define hot spots 
PVector[] hotSpotsPosition=new PVector[4]; 
color[] hotSpotsColor =new color [hotSpotsPosition.length]; 
String[] hotSpotsText = new String [hotSpotsPosition.length];
PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length]; 
boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];

int undefined=-1; 
int hotSpotFound=undefined; // when undefined no text is displayed

int mousePressedAtX;
int mousePressedAtY;

void setup() { 
  fullScreen(P3D);

  imageMode(CENTER); 
  textAlign(CENTER);

  cam = new PeasyCam(this, 100); 
  cam.setMinimumDistance(110); 
  cam.setMaximumDistance(500);

  ammonite = loadShape("ammonite.obj");
  println ("just loaded ammonite");
  println( ammonite.getChildCount() +" child count");

  // define the hot spots in parallel arrays
  // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] 
  // positions:
  hotSpotsPosition[0] = new PVector(-15, -20, 0);
  hotSpotsPosition[1] = new PVector(-5, -5, -25); 
  hotSpotsPosition[2] = new PVector(-20, -10, 3); 
  hotSpotsPosition[3] = new PVector(-25, -10, 15);
  //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); 
  // texts 
  hotSpotsText[0] = "embudo"; 
  hotSpotsText[1] = "caparazon"; 
  hotSpotsText[2] = "ojos"; 
  hotSpotsText[3] = "tentaculos";
  //images
  // use different file names here 
  hotSpotsImg[0] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[1] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[2] = loadImage ("top shell color.JPG");  
  hotSpotsImg[3] = loadImage ("top shell color.JPG");
  // whether we display the spot left or right 
  hotSpotsRightSide[0] = false; 
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true; 
  hotSpotsRightSide[3] = true;

  for (PImage img : hotSpotsImg)
    img.resize(100, 0); 

  fondo = loadImage("fondo.jpg"); 
  titulo = loadImage("titulo.png"); 
  titulo2 = loadImage("conociendo.png");

  estado = "inicio";

  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() {

  avoidClipping(); // so the graphic AMMONITE is not cut when rotating

  if (estado.equals("inicio")) { 
    //-----------Stopping peasy ------ 
    cam.beginHUD(); 
    image(fondo, width/2, height/2); 
    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 a hot spot has been clicked:

    cam.endHUD(); //--------------------------------
  }//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() { 
  if (estado.equals("inicio")) {
    // start screen
    estado = "modelo";
  } 
  // --------------------- next estado !!!! -------- 
  else if ( estado.equals("modelo")) {
    mousePressedAtX = mouseX;
    mousePressedAtY = mouseY;
    //
    color colorFromMouse = pg.get(mouseX, mouseY);
    int oldHotSpotFound=hotSpotFound; 
    // hotSpotFound=undefined; // reset 
    for (int i=0; i<hotSpotsPosition.length; i++) { 
      if (colorFromMouse==hotSpotsColor[i]) {
        if (i==oldHotSpotFound)
          hotSpotFound=undefined; // reset
        else 
        hotSpotFound=i; // set
        break;
      }//if
    }//for 
    //---
  }//else if 
  // --------------------- EROR - NO estado !!!! -------- 
  else { 
    println ("--------------- EROR - NO estado in mousePressed() !!!! --------"); 
    exit(); 
    return;
  }//else
}//func

void doEstadoModelo() {

  makeInternalPGraphics();

  cam.beginHUD(); // ----
  image(fondo, width/2, height/2, width, height); 
  textFont(nexa); 
  fill(255); 
  text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);  

  cam.endHUD(); // ----
  // 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();
  // HUD ----
  cam.beginHUD(); 


  if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text 
      // on right side
      pushMatrix();
      translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z); 
      scale(2);
      fill(250, 250, 35); 
      rect(100, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    } else
    {
      // show rect with text 
      // on left side
      pushMatrix();
      translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z); 
      //  translate(-50, 0, 0);
      fill(250, 250, 35);
      scale(2);
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    }//else
  }//if
  cam.endHUD(); // ----



  // spheres
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv = hotSpotsPosition[i];
    pushMatrix(); 
    translate(pv.x, pv.y, pv.z); 
    noStroke(); 
    // use any color your want here
    fill(255, 2, 2, 50); 
    if (i==hotSpotFound) {
      fill(2, 255, 2, 50);
    }
    sphere(7); 
    popMatrix();
  }
}//func

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

The only problem is that sometimes when text is showed I click out of the spheres and the text doesn't disappear, it just changes the place.

Chrisir

doEstadoModelo:

You still have two different sections with beginHud endhud

Please write it that you only have one section. It‘s quite processor time costly.

MousePressed:

Where you set mousePressedAtX: both lines belong inside the if clause after line 132, not where they are now

Did you notice: when you click a new sphere text changes. When you click the same sphere again, text is switched off! Nice, isn’t it?

tiwis

Yes, that's correct!

If I set mousePressedAtX after the if clause, it's the same. what could I do to "desactivate" the text when I press in any place?

Also, I will need to make in that text some kind of buttonthat will show an animation when oressed, could I put an if clause in void mousePressed that says something like

"if (mouseX == mousePressedAtX && mouseY == mousePressedAtY) {
load(animation);
}

Or that's not going to work?

Updated

I tried that line of code and it doesn't work.

tiwis

Sorry about my bad writing, I have been awake all the night and my eyes and my brain don't work really good at this time...

tiwis

I could make it disappear when click anywhere, now I have to make the buttons, any advice??

The code is now like this.

`import peasy.*;


PeasyCam cam;

PShape ammonite; 
PImage fondo, titulo, titulo2; 
String estado; 
PFont helvetica, nexa;

// invisible PGraphics
PGraphics pg;    

//define hot spots 
PVector[] hotSpotsPosition=new PVector[4]; 
color[] hotSpotsColor =new color [hotSpotsPosition.length]; 
String[] hotSpotsText = new String [hotSpotsPosition.length];
PImage[] hotSpotsImg = new PImage [hotSpotsPosition.length]; 
boolean [] hotSpotsRightSide = new boolean [hotSpotsPosition.length];

int undefined=-1; 
int hotSpotFound=undefined; // when undefined no text is displayed

int mousePressedAtX;
int mousePressedAtY;

void setup() { 
  fullScreen(P3D);

  imageMode(CENTER); 
  textAlign(CENTER);

  cam = new PeasyCam(this, 100); 
  cam.setMinimumDistance(110); 
  cam.setMaximumDistance(500);

  ammonite = loadShape("ammonite.obj");
  println ("just loaded ammonite");
  println( ammonite.getChildCount() +" child count");

  // define the hot spots in parallel arrays
  // the first hot spot is defined in hotSpotsPosition[0] and hotSpotsColor[0] and hotSpotsText[0] 
  // positions:
  hotSpotsPosition[0] = new PVector(-15, -20, 0);
  hotSpotsPosition[1] = new PVector(-5, -5, -25); 
  hotSpotsPosition[2] = new PVector(-20, -10, 3); 
  hotSpotsPosition[3] = new PVector(-25, -10, 15);
  //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); 
  // texts 
  hotSpotsText[0] = "embudo"; 
  hotSpotsText[1] = "caparazon"; 
  hotSpotsText[2] = "ojos"; 
  hotSpotsText[3] = "tentaculos";
  //images
  // use different file names here 
  hotSpotsImg[0] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[1] = loadImage ("top shell color.JPG"); 
  hotSpotsImg[2] = loadImage ("top shell color.JPG");  
  hotSpotsImg[3] = loadImage ("top shell color.JPG");
  // whether we display the spot left or right 
  hotSpotsRightSide[0] = false; 
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true; 
  hotSpotsRightSide[3] = true;

  for (PImage img : hotSpotsImg)
    img.resize(100, 0); 

  fondo = loadImage("fondo.jpg"); 
  titulo = loadImage("titulo.png"); 
  titulo2 = loadImage("conociendo.png");

  estado = "inicio";

  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() {

  avoidClipping(); // so the graphic AMMONITE is not cut when rotating

  if (estado.equals("inicio")) { 
    //-----------Stopping peasy ------ 
    cam.beginHUD(); 
    image(fondo, width/2, height/2); 
    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 a hot spot has been clicked:

    cam.endHUD(); //--------------------------------
  }//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() { 
  if (estado.equals("inicio")) {
    // start screen
    estado = "modelo";
  } 
  // --------------------- next estado !!!! -------- 
  else if ( estado.equals("modelo")) {
     mousePressedAtX = mouseX;
         mousePressedAtY = mouseY;
    //
    color colorFromMouse = pg.get(mouseX, mouseY);
    int oldHotSpotFound=hotSpotFound; 
    // hotSpotFound=undefined; // reset 
    for (int i=0; i<hotSpotsPosition.length; i++) { 
      if (colorFromMouse==hotSpotsColor[i]) {
        if (i==oldHotSpotFound)
          hotSpotFound=undefined; // reset
        else 
        hotSpotFound=i; // set
        break;

      } if (hotSpotFound!=undefined) {
        hotSpotFound = undefined;
      }
    }//for 
    //---
  }//else if 
  // --------------------- EROR - NO estado !!!! -------- 
  else { 
    println ("--------------- EROR - NO estado in mousePressed() !!!! --------"); 
    exit(); 
    return;
  }//else
}//func

void doEstadoModelo() {

  makeInternalPGraphics();

  cam.beginHUD(); // ----
  image(fondo, width/2, height/2, width, height); 
  textFont(nexa); 
  fill(255); 
  text("CONOCIENDO AL AMMONITE", width/2, height/6 - 50);  

  cam.endHUD(); // ----
  // 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();
  // HUD ----
  cam.beginHUD(); 


  if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text 
      // on right side
      pushMatrix();
      translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z); 
      scale(2);
      fill(250, 250, 35); 
      rect(100, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    } else
    {
      // show rect with text 
      // on left side
      pushMatrix();
      translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z); 
      //  translate(-50, 0, 0);
      fill(250, 250, 35);
      scale(2);
      rect(0, 0, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
      }
      popMatrix();
    }//else
  }//if
  cam.endHUD(); // ----



  // spheres
  for (int i=0; i<hotSpotsPosition.length; i++) {
    PVector pv = hotSpotsPosition[i];
    pushMatrix(); 
    translate(pv.x, pv.y, pv.z); 
    noStroke(); 
    // use any color your want here
    fill(255, 2, 2, 50); 
    if (i==hotSpotFound) {
      fill(2, 255, 2, 50);
    }
    sphere(7); 
    popMatrix();
  }
}//func

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(7); 
    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 //
`

tiwis

I commented unintentionally so i'm editing the comment because i don't know how to delete it.

Chrisir

Check

Chrisir

This

hotSpotFound=undefined;

at start of mousePressed ()

This would turn off text with mousePressed

But you really should understand the code better because only then you learn

tiwis

Yes, I understand ir, I was able to desactivate it by myself! I post the code in my last comment.

But nos, how could I do to make a button on the image that would load another image on the screen?

Chrisir

You could also draw 3 mouse buttons on the text field like close animation image

Then you need to check the buttons position and size against mouseX and mouseY but only when text field is open

if(hotSpotFound != undefined && mouseX > buttonX&&......

See examples: buttons for that

Chrisir

just draw a rect like

rect(mousePressedAtX,...,44, 19);

text („show image“,....);

Check it with mouse - see above

tiwis

I understand the logic you told me but I don't understand why 3 mouse buttons?

tiwis

Okey, I understand, but you are telling me two differents ways to do it? Also, the image showed will be different depending on the part you have clicked, that would be to show the same image every time, doesn't it?

Chrisir

3 buttons or 1 just as you like it

Yeah different ways

Images: line 60 to 63: load different images here

tiwis

Well, I'm gonna tell you what I understand and it didn't work.

//I draw a rect rect(mousePressedAtX, mousePressedAtY, 200, 200)

Then I should write an if clause?

if ( HotSpotFound! == undefined && mouseX == mousePressedAtX && mouseY == mousePressedAtY) {

display the image

}

tiwis

Maybe I was wrong with the place I put it.

But I still thinking that that code has something wrong with the mousePressedAtY and such things.

Chrisir

??

you mixed up my if clause a little

It’s != not !==

It’s > not ==

Listen, no use that you write more here than to look at your code. Just think it through and bend it to your will.

tiwis

Chrisir, look what I'm doing, tell me if it's ok.

if (hotSpotFound!=undefined) {

    if (hotSpotsRightSide[hotSpotFound]) {
      // show rect with text 
      // on right side
      pushMatrix();
      translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z); 

      scale(0.5);
      fill(250, 250, 35); 
      //      rect(mousePressedAtX, mousePressedAtY, 100, 100); 
      fill(0); 
      textFont(helvetica);
      textSize(9);
      textMode(SHAPE); 
      translate(0, 0, 0.2); 
      text(hotSpotsText[hotSpotFound], 4, 4, 90, 92);
      if (hotSpotsImg[hotSpotFound]!=null) {
        translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
        fill(0, 0, 0, 50);
        **box(mousePressedButtonX, mousePressedButtonY, hotSpotsPosition[hotSpotFound].z);**
      }
      popMatrix();
    } else

I'm drawing a box that then i'm going to put the oppacity in 0 and then I'm going to write an if clause which will check if mouseY and X it's equal to mousePressedButtonX && mousePressedButtonY and state is undefined! it will show you the image, am I right with the logic?

tiwis

Listen, no use that you write more here than to look at your code. Just think it through and bend it to your will.

Sorry but I didn't understand

Chrisir

Well the rect above is your button

It‘s in the text field and only visible when the text field is visible. Ok?

When the button is there it can be clicked. But we need to check whther the click was inside the button (check mouseX and mouseY against button position).

It’s slightly complex because different layers what can be clicked when ;-)

tiwis

Yes, I know it, but Is it right using a new variable with the same value as mousePressedAtX and mousePressedAtY to check if the box is clicked?

Chrisir

Well ....

break your problem down into steps

Step A : press a sphere with mouse, text field appears

Step B : text field shows a small button

Step C : press small button with mouse something happens (image) - best set a variable buttonIsClicked to true

Step D : something happens when buttonIsClicked Is true

Chrisir

Is it right using a new variable with the same value as mousePressedAtX and mousePressedAtY to check if the box is clicked?

No. Make new variables.

As i said i am not at home and can’t do anything for you now

tiwis

Step C : press small button with mouse something happens (image) - best set a variable buttonIsClicked to true

Yes it's all okey, but I don't know how to make the if clause in order to check if I pressed the small button :(

Chrisir

Did you look at examples: buttons on the website?

It’s ( mouseX>buttonX &&

mouseY > buttonY &&

mouseX < buttonX+buttonWidth &&

mouseY < buttonY+buttonHeight) {

Basically you check if mouse is inside button

Use this in mousePressed () in the right estado when the text field is open

tiwis

Yes I know that is just checking if the click is insde, but the thing I don't know is which value should I put on buttonY and ButtonX cause the X and Y of the rect it will basically be the mouseX and mouseY.

Chrisir

No.

When the text field is opened you display the text field and you can calculate the button position from the stored mousePressedAtX and Y

Store the calculated position of the button in the 4 variables buttonX, Y , buttonwidth and buttonheight

tiwis

Chrisir, you don't understand what I mean, I don't know what values put there

rect(????, ????, ???, ???);

If this variables are the values I should put there

** buttonX, Y , buttonwidth and buttonheight **

which is the value of that variables????

tiwis

I know it will seem silly for you, sorry it's my first time with such a complex program.

Chrisir

Did you play with the button example??

Chrisir

You should.

Chrisir

rect(????, ????, ???, ???);

If this variables are the values I should put there

** buttonX, buttonY , buttonwidth and buttonheight **

rect(buttonX, buttonY , buttonwidth,buttonheight); 

Correct!!!

Declare them before setup()

The position is just the Position of the text field + 70 or so

The size: buttonWidth can be =44 e.g. and buttonHeight = 19.

The idea is to store the variables upon opening the text field and then use the variables when checking the mouse

But I will keep on spoon feeding you