How can i do?

import controlP5.*;

ControlP5 cp5;
import peasy.*;

ArrayList<Sphere>s;

PGraphics canvas;

PGraphics brightPass;
PGraphics horizontalBlurPass;
PGraphics verticalBlurPass;

PShader bloomFilter;
PShader blurFilter;
PeasyCam cam;
float angle = 0;

final int surfaceWidth = 250;
final int surfaceHeight = 250;

float luminanceFilter = 0.02;
float blurSize = 100;
float sigma = 200;

void setup()
{
  cam = new PeasyCam(this, 1400);
  size(1000, 1000, P3D);

  s = new ArrayList<Sphere>();

  canvas = createGraphics(width, height, P3D);

  brightPass = createGraphics(width, height, P2D);
  brightPass.noSmooth();

  horizontalBlurPass = createGraphics(width, height, P2D);
  horizontalBlurPass.noSmooth(); 

  verticalBlurPass = createGraphics(width, height, P2D);
  verticalBlurPass.noSmooth(); 

  bloomFilter = loadShader("bloomFrag.glsl");
  blurFilter = loadShader("blurFrag.glsl");
}

void draw()
{
  background(0);
  bloomFilter.set("brightPassThreshold", luminanceFilter);
  angle += 0.05;

  for(Sphere s: s){
  blurFilter.set("blurSize", s.p);
  }

  blurFilter.set("sigma", sigma); 

  canvas.beginDraw();
  render(canvas);
  canvas.endDraw();

  // bright pass
  brightPass.beginDraw();
  brightPass.shader(bloomFilter);
  brightPass.image(canvas, 0, 0);
  brightPass.endDraw();

  // blur horizontal pass
  horizontalBlurPass.beginDraw();
  blurFilter.set("horizontalPass", 1);
  horizontalBlurPass.shader(blurFilter);
  horizontalBlurPass.image(brightPass, 0, 0);
  horizontalBlurPass.endDraw();

  // blur vertical pass
  verticalBlurPass.beginDraw();
  blurFilter.set("horizontalPass", 0);
  verticalBlurPass.shader(blurFilter);
  verticalBlurPass.image(horizontalBlurPass, 0, 0);
  verticalBlurPass.endDraw();


  cam.beginHUD();
  blendMode(BLEND);
  blendMode(SCREEN);
  image(brightPass, 0, 0);
  image(verticalBlurPass, 0, 0);

  cam.endHUD();

println(frameRate);
}

void render(PGraphics pg)
{
  cam.getState().apply(pg);

  pg.background(0, 50);

  canvas.pushMatrix();
  canvas.translate(width/2, height/2);
  for(Sphere s: s){
  s.display();

  }
  canvas.popMatrix();


}

void mousePressed() {
  s.add(new Sphere(random(-width/2, width/2), random(-height/2, height/2), random(1000)));
}


class Sphere {

  float p;
  float w;
  float h;

  Sphere(float _w, float _h, float _p) {
  p = _p;
  w = _w;
  h = _h;
  }

  void display() {
    canvas.pushMatrix();
    canvas.translate(w, h);
    noFill();
    canvas.sphere(100);

    canvas.popMatrix();
  }
}

As some of you may already know I'm trying to make a Depth of Field effect in Python mode. I've recently stumbled onto this thread where I could get hold of a Proscene DOF demo sketch based on the following shaders:

depth.glsl

uniform float maxDepth;

void main() {
  float depth = gl_FragCoord.z / gl_FragCoord.w;
  gl_FragColor = vec4(vec3(1.0 - depth/maxDepth), 1.0);
}

dof.glsl

uniform sampler2D texture;

varying vec4 vertexture;
varying vec4 vertTexCoord;

uniform sampler2D tDepth;

uniform float maxBlur; // max blur amount
uniform float aperture; // aperture - bigger values for shallower depth of field

uniform float focus;
uniform float aspect;

void main() {
    vec2 vUv = vertTexCoord.st;

    vec2 aspectcorrect = vec2( 1.0, aspect );

    vec4 depth1 = texture2D( tDepth, vUv );

    float factor = depth1.x - focus;

    vec2 dofblur = vec2 ( clamp( factor * aperture, -maxBlur, maxBlur ) );

    vec2 dofblur9 = dofblur * 0.9;
    vec2 dofblur7 = dofblur * 0.7;
    vec2 dofblur4 = dofblur * 0.4;

    vec4 col = vec4( 0.0 );

    col += texture2D( texture, vUv.xy );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur );
    col += texture2D( texture, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur );

    col += texture2D( texture, vUv.xy + ( vec2( 0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, -0.37 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.15, 0.37 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.37, 0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.37, -0.15 ) * aspectcorrect ) * dofblur9 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.15, -0.37 ) * aspectcorrect ) * dofblur9 );

    col += texture2D( texture, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.40, 0.0 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur7 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur7 );

    col += texture2D( texture, vUv.xy + ( vec2( 0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, -0.4 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, 0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.4, 0.0 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( -0.29, -0.29 ) * aspectcorrect ) * dofblur4 );
    col += texture2D( texture, vUv.xy + ( vec2( 0.0, 0.4 ) * aspectcorrect ) * dofblur4 );

    gl_FragColor = col / 41.0;
    gl_FragColor.a = 1.0;
}

What I'd like is to be able to use those shaders using the PeasyCam library instead of the Proscene dependency.

In the sketch below I'm testing the shaders on a point cloud. I’m drawing the points on the scene PGraphics and then passing it through 2 other PGraphics (canvas and buf). In theory it should work but I’m still stuck with the PeasyCam part at the very end of the script.

If I write:

• cam.getState().apply(canvas): I get a DoF effect BUT on a 2D canvas
• cam.getState().apply(scene) : I get a 3D canvas BUT without a DoF effect

Any help would be really appreciated.

add_library('peasycam')
liste = []

def setup():
    global depthShader, dofShader, cam, canvas, buf, scene
    size(900, 900, P3D)

    cam = PeasyCam(this, 900)
    cam.setMaximumDistance(width)

    for e in range(100):
        liste.append(PVector(random(width), random(height), random(width)))

    depthShader = loadShader("depth.glsl")
    dofShader = loadShader("dof.glsl")

    depthShader.set("maxDepth", cam.getDistance())
    dofShader.set("aspect", width / float(height))
    dofShader.set("maxBlur", 0.015)
    dofShader.set("aperture", 0.02)

    canvas = createGraphics(width, height, P3D)
    canvas.shader(depthShader)
    buf = createGraphics(width, height, P3D)
    buf.shader(dofShader)

    scene = createGraphics(width, height, P3D)

    frameRate(1000)

def draw():

    scene.beginDraw()
    scene.background(255)
    scene.stroke(0)
    scene.strokeWeight(10)
    for e in liste:
        scene.point(e.x-width/2, e.y-height/2, e.z-height/2)
    scene.endDraw()

    canvas.beginDraw()
    canvas.image(scene, 0, 0)
    canvas.endDraw()

    buf.beginDraw()
    dofShader.set("focus", map(mouseX, 0, width, -0.5, 1.5))
    dofShader.set("tDepth", canvas)
    buf.image(scene, 0, 0)
    buf.endDraw()

    cam.beginHUD()
    image(buf, 0, 0)
    cam.endHUD()

    cam.getState().apply(scene)

import peasy.PeasyCam;

PeasyCam cam;

final float gravity = 1; //Inaccurate gravity simulation (impulse rather than force)

// ArrayLists for the class
//ArrayList<Box3D> boxes = new ArrayList(); 
//Box3D box;

// this is a very important size: size boxes
float sizeBox = 70.0;
float sizeLimit = 180;

float rotationX;
float rotationY;
float rotationZ;

float translatex=-sizeBox;
float translatey=-sizeBox;
float translatez=0;

float z = 1.0;

int objectNumber = 0;

// folded triangle 
PShape s; 

float offsetZ=400;

color colCurrent=color(0, 0, 255);

boolean showHelpText=true; 

void setup() {

  size(500, 500, P3D);
  background(0);
  sphereDetail(32);

  cam = new PeasyCam(this, 400); // new
  //box = new Box3D(0, 0, 0, 0, 0, color(255));

  s = createShape();
  s.beginShape();
  s.fill(255, 0, 0);
  s.stroke(177);
  s.vertex(100, 0, -100);
  s.vertex(-60, 0, 200);
  s.vertex(-50, 60, -30);
  s.vertex(110, 160, 40);
  s.scale(0.4);
  s.endShape(CLOSE);
}

void draw() {
  background(0);
  lights();

  //for (Box3D b : boxes ) {
   // box.display();
  //}

  noFill();
  box(sizeLimit*2+sizeBox); // ?

  showObject();

  cam.beginHUD(); 
  /**if (showHelpText) {
    fill(255); // white 
    text ("Use PeasyCam. Use wasd and pl; r/g/b for colors, space bar to toggle object, RETURN to enter object to list.\n\n"
      +"Use x to switch this text on and off. \n"
      +"Use Mousewheel to zoom, double click to reset view. The box you move has a white outline. An item that has been added to the list is marked with a gray box.\n"
      +"On adding to the list the placing box moves two units left. \n"
      +"Current: "
      +translatex
      +", "
      +translatey
      +", "
      +translatez, 
      19, 19);
  }*/ //HUD disabled

  if (keyPressed)
    keyPressed_ForContinuusKeyinput();

  cam.endHUD();
}

// -----------------------------------------------------------

void showObject() {

  // show object 

  pushMatrix();

  translatey+=gravity;

  translatex=constrain(translatex,-sizeLimit,sizeLimit);
  translatey=constrain(translatey,-sizeLimit,sizeLimit);
  translatez=constrain(translatez,-sizeLimit,sizeLimit);

  fill(colCurrent); // color
  //translate(width/3, height/2, 0);
  translate(translatex, translatey, translatez);
  //rotateZ(rotationZ);
  //rotateY(rotationY);
  //rotateX(rotationX);

  stroke(255); 

  if (objectNumber==0) {
    //stroke(111);
    box(sizeBox);
  } else if (objectNumber==1) {
    s.setFill(colCurrent);
    shape(s, 0, 0);
  } else if (objectNumber==2) {
    //noStroke();
    sphere(sizeBox);
  }//else 

  popMatrix();
}

// -----------------------------------------------------------

void keyPressed_ForContinuusKeyinput() {
  // keyPressed for registering a key throughout  

  float speed = 3.9; 

  //speed += gravity; //More accurate gravity simulation, may be removed

  switch(key) {

  case 'a':
    translatex-=speed;
    break; 

  case 'd':
    translatex+=speed;
    break;

  case 'w':
  case ' ':
    translatey-=speed; //Conflicting keypress info: change object
    break;

  case SHIFT:
  case 's':
    translatey+=speed;
    break;

    // --

  case 'p':
    translatez-=speed;
    break; //Unnecessary in 2D version, but useful

  case 'l':
    translatez+=speed;
    break; //Unnecessary in 2D version, but useful

    // -----

    //
  }//switch
  //
}//func

// ----------------------------

void keyPressed() {

  // keyPressed for registering a single key only 

  switch(key) {
    /**
  case ' ':
    objectNumber++;
    if (objectNumber>2)
      objectNumber=0;
    key=0;
    break;
    */ //Object switch disabled in favor of jumping

 /**
  case RETURN:
  case ENTER:
    Box3D newBox = new Box3D (
      translatex, 
      translatey, 
      translatez, 
      rotationY, 
      objectNumber, 
      colCurrent
      ); 
    boxes.add(newBox); 
    translatex-=sizeBox*2;
    break;
    */ //New object function disabled

    // ---
    //colors

  case 'r':
    colCurrent=color(255, 0, 0);
    break;

  case 'b':
    colCurrent=color(0, 0, 255);
    break;

  case 'g':
    colCurrent=color(0, 255, 0);
    break;

    // --

  case 'x':
    showHelpText = !showHelpText; 
    break;
  }//switch
  //
} //func

//=============================================================

class Box3D {

  float x=mouseX, y=410, z=mouseY;

  float offsetX=0; 
  float offsetZ2=0; 

  float rotateY=0;
  color colBox = color(255, 0, 0);

  // type
  final int boxTypeUndefined = -1;
  final int boxType0   = 0;
  final int boxType1   = 1; 
  final int boxType2   = 2; 
  // more needed !!!!! ???? 
  int type = boxTypeUndefined; 

  // constr - full
  Box3D(float x_, 
    float y_, 
    float z_, 
    float rotateY_, 
    int type_, 
    color col1_) {
    //

    x=x_;
    y=y_;
    z=z_;

    rotateY= rotateY_;
    type=type_;

    colBox=col1_;
  } // constr 2 

  void display() {
    pushMatrix();

    translate(x, y, z);
    //  rotateY(radians(rotateY)); 

    fill(colBox);
    noStroke(); 

    // depending on the current buttons tag 
    // 
    switch (type) {

    case boxTypeUndefined:
      // undefined 
      break; 

    case boxType0: 
      stroke(111);
      box(sizeBox);
      break; 

    case boxType1: 
      s.setFill(colBox);
      shape(s, 0, 0);
      break;

    case boxType2: 
      noStroke();
      sphere(sizeBox);
      break;

    default:
      // error 
      break;
    }//switch 

    if (showHelpText) {
      translate(sizeBox/2, -sizeBox/2, sizeBox/2);

      fill(111);
      stroke(0);
      box(sizeBox/6);
    }

    popMatrix();
  } // method 

  String toString() {
    return
      str(x) +","+ 
      str(y) +","+ 
      str(z) +","+ 
      str(rotateY) +","+ 
      str(type) +","+ 
      str(red(colBox)) +","+ 
      str(green(colBox)) +","+ 
      str(blue(colBox)) ;
  }
  //
} // class 
//

I understand there is a redundant class "Box3D", but I will handle that before implementing whatever solution you give me.

PShader sh;
PShader sha;

PGraphics buffer;
PGraphics buffer2;



import com.hamoid.*;
import themidibus.*;
import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.*;

PeasyCam cam;
float count;

void settings () {

  fullScreen(P3D);
}

void setup(){

background(0);


  cam = new PeasyCam(this, 500);


  sh = loadShader("basicShaderFrag.glsl", "basicShader.glsl");
  sha = loadShader("frag2.glsl", "basicShader.glsl");

 buffer = createGraphics(width, height, P3D);
 buffer2 = createGraphics(width, height, P3D);

}

void draw(){

    background(0);
     // println(frameRate);
    count +=0.005;
    sh.set("u_time", count);

    buffer.beginDraw();
    render(buffer);
    buffer.endDraw();

    buffer2.beginDraw();
    buffer2.background(0);
    buffer2.shader(sh);
    buffer2.image(buffer,0, 0);
    buffer2.endDraw();


    cam.getState().apply(buffer2);    // here the question. the image show the shader but like it was a 2D screen. 
    cam.beginHUD();
    image(buffer2, 0,0);
    cam.endHUD();

}


void render(PGraphics a){

  a.background(0, 50);

  a.noStroke();
  s.run(); 
    a.sphere(200);
}

if i skip the buffer2 and apply the shader into buffer it works fine.

i was follow this post https://github.com/jdf/peasycam/issues/25 but it doest work for me.

what im doing wrong?

cam.beginHUD();
image(canvas, 0, 0);
cam.endHUD();

Now I have the problem that things like peasycam do not work anymore because they are attached to the original g and do not transform the camera matrix of my canvas.

So I tried to use the camera matrix of the original graphics and copy it to my canvas:

PGraphics3D p = (PGraphics3D)this.g;
canvas.camera = p.camera;

This did not work, maybe because peasycam is doing something special and it does not change the original camera matrix. So my next idea was to use the static apply method from peasy cam. I had to copy the function out of the original code and make it public:

import peasy.org.apache.commons.math.geometry.Rotation;
import peasy.org.apache.commons.math.geometry.Vector3D;

Vector3D positionVec = new Vector3D(cam.getPosition()[0], cam.getPosition()[1], cam.getPosition()[2]);
Vector3D rotationVec = new Vector3D(cam.getRotations()[0], cam.getRotations()[1], cam.getRotations()[2]);
apply(canvas, positionVec, new Rotation(rotationVec, 0), cam.getDistance());

Here the apply method:

void apply(final PGraphics g, final Vector3D center, final Rotation rotation, 
  final double distance) {
  final Vector3D pos = rotation.applyTo(Vector3D.plusK).scalarMultiply(distance).add(center);
  final Vector3D rup = rotation.applyTo(Vector3D.plusJ);
  g.camera((float)pos.getX(), (float)pos.getY(), (float)pos.getZ(), //
    (float)center.getX(), (float)center.getY(), (float)center.getZ(), //
    (float)rup.getX(), (float)rup.getY(), (float)rup.getZ());
}

There I always have a zero norm for rotation (Arithmetic Exception). So my final idea was to just copy all the rotations and translation to my camera matrix:

canvas.beginCamera();
canvas.camera();

canvas.rotateX(cam.getRotations()[0]);
canvas.rotateY(cam.getRotations()[1]);
canvas.rotateZ(cam.getRotations()[2]);

canvas.translate(
  cam.getPosition()[0], 
  cam.getPosition()[1], 
  cam.getPosition()[2]);

canvas.endCamera();

So now I could rotate my cube, but it was not accurate and I think there is something wrong with some axis.

I would like to ask if someone has done this before and if there is a simple method to do this?

//See draw method to change the shape that appears when program is run.

import peasy.*;
import controlP5.*;

PeasyCam cam;
ControlP5 cp5;
PShape shape;
Accordion accordion;

float Tx, Ty, Tz, Rx, Ry, Rz, Sx, Sy, Sz; //variables for each axis that will be used for the transformations. T - translate, R - rotate, S - scale

  void keyPressed() {
    cam.setActive(false); //stops camera from moving after pressing any key
  }

  void setup() {
    size(800, 400, P3D);  
    cam = new PeasyCam(this, 500);
    gui();

  }

  //sets up the sliders used to controll the transformations
  void gui() {

    cp5 = new ControlP5(this);
    cp5.setAutoDraw(false);

    Group g1 = cp5.addGroup("translations")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(70)
                ;

    cp5.addSlider("Tx")
       .setPosition(0, 0)
       .setSize(100, 20)
       .setRange(-200, 200)
       .setValue(0)
       .moveTo(g1);

       cp5.addSlider("Ty")
       .setPosition(0, 30)
       .setSize(100, 20)
       .setRange(-200, 200)
       .setValue(0)
       .moveTo(g1);

       cp5.addSlider("Tz")
       .setPosition(0, 60)
       .setSize(100, 20)
       .setRange(-200, 200)
       .setValue(0)
       .moveTo(g1);

    Group g2 = cp5.addGroup("rotations")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(70)
                ;

    cp5.addSlider("Rx")
       .setPosition(0, 0)
       .setSize(100, 20)
       .setRange(-360, 360)
       .setValue(0)
       .moveTo(g2);

       cp5.addSlider("Ry")
       .setPosition(0, 30)
       .setSize(100, 20)
       .setRange(-360, 360)
       .setValue(0)
       .moveTo(g2);

       cp5.addSlider("Rz")
       .setPosition(0, 60)
       .setSize(100, 20)
       .setRange(-360, 360)
       .setValue(0)
       .moveTo(g2);   

    Group g3 = cp5.addGroup("scaling")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(70)
                ;

    cp5.addSlider("Sx")
       .setPosition(0, 0)
       .setSize(100, 20)
       .setRange(0, 5)
       .setValue(1)
       .moveTo(g3);

       cp5.addSlider("Sy")
       .setPosition(0, 30)
       .setSize(100, 20)
       .setRange(0, 5)
       .setValue(1)
       .moveTo(g3);

       cp5.addSlider("Sz")
       .setPosition(0, 60)
       .setSize(100, 20)
       .setRange(0, 5)
       .setValue(1)
       .moveTo(g3); 

       accordion = cp5.addAccordion("acc")
                 .setPosition(40,40)
                 .setWidth(100)
                 .addItem(g1)
                 .addItem(g2)
                 .addItem(g3)
                 ;

       accordion.setCollapseMode(Accordion.MULTI);

  }


void move (float x, float y, float z) {
  translate(x, y, z);
}
void turn (float x, float y, float z) {
  rotateX(radians(x));
  rotateY(radians(y));
  rotateZ(radians(z));
}
void stretch (float x, float y, float z) {
  scale(x, y, z);  
}

void draw(){
  background(0);
  lights();
  fill(156, 85, 232);
  stroke(255);

  //to display a different shape, add comments to whichever line is not commented below and remove comments from a different line
  //example: add comments to line 142 and remove comments from 143 to draw a torus

  //shape = createShape(BOX, 100,200,300); //stores box in shape
  //shape = getTorus(100,50,32,32); //stores torus in shape
  shape = loadShape("deer.obj"); //stores deer.obj in shape

  move (Tx, Ty, Tz);
  turn (Rx, Ry, Rz);
  stretch (Sx, Sy, Sz);
  shape(shape); //draws shape

  inFront();
  }

  //allows for drawing the 2D gui in front of the 3D objects
  void inFront() {
  hint(DISABLE_DEPTH_TEST); 
  cam.beginHUD();
  cp5.draw();
  cam.endHUD();
  hint(ENABLE_DEPTH_TEST);
}

//creates torus shape
PShape getTorus(float outerRad, float innerRad, int numc, int numt) {

  PShape sh = createShape();
  sh.beginShape(TRIANGLE_STRIP);
  sh.noStroke();

  float x, y, z, s, t, u, v;
  float nx, ny, nz;
  float a1, a2;
  int idx = 0;
  for (int i = 0; i < numc; i++) {
    for (int j = 0; j <= numt; j++) {
      for (int k = 1; k >= 0; k--) {
         s = (i + k) % numc + 0.5;
         t = j % numt;
         u = s / numc;
         v = t / numt;
         a1 = s * TWO_PI / numc;
         a2 = t * TWO_PI / numt;

         x = (outerRad + innerRad * cos(a1)) * cos(a2);
         y = (outerRad + innerRad * cos(a1)) * sin(a2);
         z = innerRad * sin(a1);

         nx = cos(a1) * cos(a2); 
         ny = cos(a1) * sin(a2);
         nz = sin(a1);
         sh.normal(nx, ny, nz);
         sh.vertex(x, y, z);

      }
    }
  }
   sh.endShape(); 
  return sh;
}

What I need to do is that when they are clicked they stay with the green color instead of turning back again to the original color ir order to make all the spheres look green. This logic hasn't got an order, I mean, any sphere could be pressed first or second, or last... Here is the code

import peasy.*;
import gifAnimation.*;

PeasyCam cam;

Gif myAnimation;

PShape ammonite;
PImage fondo, titulo, titulo2, ammoniteinicio, almeja, gestos, flecha;
String estado;
PFont helvetica, nexa;

// 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 almejacerrada;
int undefined=-1;
int hotSpotFound=undefined; // when undefined 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);

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

  ammonite = loadShape("ammonite.obj");

  // 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, 0);
  hotSpotsPosition[1] = new PVector(-5, -5, -25);
  hotSpotsPosition[2] = new PVector(-20, -10, 3);
  hotSpotsPosition[3] = new PVector(-25, -10, 15);
  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] = "Caparazon";
  hotSpotsText[2] = "Ojos";
  hotSpotsText[3] = "Tentaculos";
  hotSpotsText[4] = "Sifon";

  //images
  hotSpotsImg[0] = loadImage ("EMBUDO.png");
  hotSpotsImg[1] = loadImage ("CAPARAZON.png");
  hotSpotsImg[2] = loadImage ("OJOS.png"); 
  hotSpotsImg[3] = loadImage ("TENTACULOS.png");
  hotSpotsImg[4] = loadImage ("SIFON.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");



  // whether we display the spot left or right
  hotSpotsRightSide[0] = false;
  hotSpotsRightSide[1] = true;
  hotSpotsRightSide[2] = true;
  hotSpotsRightSide[3] = true;
  hotSpotsRightSide[4] = false;

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

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

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

  if (estado.equals("inicio")) {
    //-----------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);
    image(gestos, width/2 + 400, height/2-100);

    cam.endHUD(); //--------------------------------
    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();
  }//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")) {
    mousePressedAtX = width/2 - 400;
    mousePressedAtY = height/2;
    //
    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();

  // background
  cam.beginHUD(); // ----
  image(fondo, 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);
  if (almejacerrada == true) {
    image(almeja, width-300, height-130, 250, 250);
  }
  almejacerrada = true;
  image(flecha, 125, height/6 - 60 , 125, 125);

  if (mousePressed && mouseX < 300 && mouseX > 0 && mouseY > 0 && mouseY < 300) {
    estado = "inicio";
  }
  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();

  cam.beginHUD(); // ----
  // ----


  // text field

  if (hotSpotFound!=undefined) {

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

      if (hotSpotsImg[hotSpotFound]!=null) {
        // translate(100+hotSpotsImg[hotSpotFound].width/2, 0, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
        text(hotSpotsText[hotSpotFound], width/2, -500);
        //fill(0, 0, 0, 50);
      }
      popMatrix();
    } else
    {
      // show rect with text
      // on left side
      pushMatrix();
      // translate(mousePressedAtX, mousePressedAtY, hotSpotsPosition[hotSpotFound].z);
      translate(mousePressedAtX, mousePressedAtY );
      buttonX=mousePressedAtX;
      buttonY=mousePressedAtY;
      //  translate(-50, 0, 0);
      fill(250, 250, 35, 0);
      scale(0.5);
      fill(255);
      // rect(mousePressedAtX, mousePressedAtY, 100, 100);
      textFont(nexa);
      textSize(90);
      textMode(SHAPE);
      translate(0, 0, 0.2);

      if (hotSpotsImg[hotSpotFound]!=null) {
        // translate(-25-hotSpotsImg[hotSpotFound].width/4, hotSpotsImg[hotSpotFound].height/2, 0);
        image(hotSpotsImg[hotSpotFound], 0, 0);
        text(hotSpotsText[hotSpotFound], width/2, -500);
        //fill(0, 0, 0, 50);
        //rect(buttonX, buttonY, buttonWidth, buttonHeight);
      }
      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(0, 255, 255, 70); // normal
    if (i==hotSpotFound) {
      fill(2, 255, 100, 70); // highlight
    } 
    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 part color change is made in line 302.

Any help?? Thanks

I tried putying the code that calls the text with the info between beginHUD(); and endHUD(); but it crashes the program.

Here is the code.

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


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

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

Any help or advice will be so helpful, thanks!

I am attempting to draw a 2D GUI on top of a 3D sketch. I am using PeasyCam in order to move around in 3d Space, so my position and angle where I am looking is changing all the time. I want to create a crosshair in the center of the screen, any help?

I use peasycam to rotate my sphere, and cam.beginHUD() to display some information on the screen. ** in line 120-130 I create 3 lines in line 219-233 I create 3 texts which should be on this lines - but they are UNDER the lines**

why?

int ptsW, ptsH;
import peasy.*;

PeasyCam cam;

PImage img;

int numPointsW;
int numPointsH_2pi; 
int numPointsH;

float[] coorX;
float[] coorY;
float[] coorZ;
float[] multXZ;



PImage heatmap;
PImage cancer;
PImage suicide;
PImage traffic;

PImage currentIcon;


float currentCancer = 0;
float currentTraffic = 0;
float currentSuicide = 0;

int imagestate;
int alphavalue = 255;
int cancerTrigger;
int trafficTrigger;
int suicideTrigger;



void setup() {
  fullScreen(P3D);

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

  background(0);
  noStroke();
  img=loadImage("Heatmap_Cancer_traffic_Suicide_02.png");
  ptsW=30;
  ptsH=30;
  // Parameters below are the number of vertices around the width and height
  initializeSphere(ptsW, ptsH);
    heatmap = loadImage("Heatmap_Cancer_traffic_Suicide_02.png");
  cancer = loadImage("Cancer_01.png");
  suicide = loadImage("Suicide_01.png");
  traffic = loadImage("Traffic_01.png");
  heatmap.loadPixels();

  currentIcon = traffic; // nur für den Anfang, damit es nicht nichts ist.


}

// Use arrow keys to change detail settings
void keyPressed() {
  if (keyCode == ENTER) saveFrame();
  if (keyCode == UP) ptsH++;
  if (keyCode == DOWN) ptsH--;
  if (keyCode == LEFT) ptsW--;
  if (keyCode == RIGHT) ptsW++;
  if (ptsW == 0) ptsW = 1;
  if (ptsH == 0) ptsH = 2;
  // Parameters below are the number of vertices around the width and height
  initializeSphere(ptsW, ptsH);
}

void draw() {
  background(0);
  pushMatrix();
  rotateX(-.5);
  rotateY(-.5);



  textureSphere(400, 400, 400, img);
  popMatrix();

  cam.beginHUD();

  fill(0,120);
  noStroke();
  rect(0,0,width,height/2-1);
  rect(0,height/2+10,width,height);

    pushMatrix();

  currentCancer = red(get(width/2, height/2));
  currentTraffic = blue(get(width/2, height/2));
  currentSuicide = green(get(width/2, height/2));
  //  image (heatmap, 0,0, width, height);

  // debug
  if (keyPressed) {
    if (key == 's') {
      currentSuicide = 150;
    }
    if (key == 't') {
      currentTraffic = 150;
    }
    if (key == 'c') {
      currentCancer = 150;
    }
  }

  cancerTrigger = 0;
  trafficTrigger = 0;
  suicideTrigger = 0;

  //Diagram - tode / 100.000
  stroke(255);
  strokeWeight(36);
  fill(255);
  translate(width/2, height/2);
  line(75, 0, 75+currentCancer, 0);

  rotate(PI*2/3);
  line(75, 0, 75+currentTraffic, 0);

  rotate(PI*2/3);  
  line(75, 0, 75+currentSuicide, 0);

  popMatrix() ;

  //Punkte - "live DeathCounter"
  pushMatrix() ;
  translate(width/2, height/2);

  cancer.resize(70, 70);
  suicide.resize(70, 70);
  traffic.resize(70, 70);


  strokeWeight(1);
  fill(255);
  if (frameCount % (170-currentCancer) == 0) {
    if (random(255) < currentCancer) {
      cancerTrigger = 1;
    }
  }

  if (frameCount % (170-currentTraffic) == 0) {
    if (random(255) < currentTraffic) {
      trafficTrigger = 1;
    }
  }

  if (frameCount % (170-currentSuicide) == 0) {
    if (random(255) < currentSuicide) {
      suicideTrigger = 1;
    }
  }

  //ICONS
  if (cancerTrigger == 1) {
    currentIcon = cancer;
    imagestate=1;
    alphavalue = 255;
  }

  if (trafficTrigger == 1) {
    currentIcon = traffic;
    imagestate=1;
    alphavalue = 255;
  }

  if (suicideTrigger == 1) {
    currentIcon = suicide;
    imagestate=1;
    alphavalue = 255;
  }
  // QUADS

  if (cancerTrigger == 1) {
    quad(0, 35, 0, -35, 75, -18, 75, 18);
    imagestate=1;
    alphavalue = 255;
  }
  rotate(PI*2/3);
  if (trafficTrigger == 1) {
    quad(0, 35, 0, -35, 75, -18, 75, 18);
    imagestate=1;
    alphavalue = 255;
  }
  rotate(PI*2/3);

  if (suicideTrigger == 1) {
    quad(0, 35, 0, -35, 75, -18, 75, 18);
    imagestate=1;
    alphavalue = 255;
  }


  //FADING
  if (imagestate==1) {
    if (frameCount % 2 == 0) {
      alphavalue -= 5;
      if (alphavalue < 10) {
        imagestate = 0;
      }
    }
  }
  tint(255, alphavalue);
  image(currentIcon, -35, -35);
  tint (255, 255);



  // Text auf dem Diagram
  fill(0);

  rotate(PI*2/3);

  textSize(32);
  text(round(currentCancer), 65, 10); 
  rotate(PI*2/3);

  textSize(32);
  text(round(currentTraffic), 65, 10); 
  rotate(PI*2/3);

  textSize(32);
  text(round(currentSuicide), 65, 10); 
  rotate(PI*2/3);

  popMatrix();

  cam.endHUD();

}

void initializeSphere(int numPtsW, int numPtsH_2pi) {

  // The number of points around the width and height
  numPointsW=numPtsW+1;
  numPointsH_2pi=numPtsH_2pi;  // How many actual pts around the sphere (not just from top to bottom)
  numPointsH=ceil((float)numPointsH_2pi/2)+1;  // How many pts from top to bottom (abs(....) b/c of the possibility of an odd numPointsH_2pi)

  coorX=new float[numPointsW];   // All the x-coor in a horizontal circle radius 1
  coorY=new float[numPointsH];   // All the y-coor in a vertical circle radius 1
  coorZ=new float[numPointsW];   // All the z-coor in a horizontal circle radius 1
  multXZ=new float[numPointsH];  // The radius of each horizontal circle (that you will multiply with coorX and coorZ)

  for (int i=0; i<numPointsW ;i++) {  // For all the points around the width
    float thetaW=i*2*PI/(numPointsW-1);
    coorX[i]=sin(thetaW);
    coorZ[i]=cos(thetaW);
  }

  for (int i=0; i<numPointsH; i++) {  // For all points from top to bottom
    if (int(numPointsH_2pi/2) != (float)numPointsH_2pi/2 && i==numPointsH-1) {  // If the numPointsH_2pi is odd and it is at the last pt
      float thetaH=(i-1)*2*PI/(numPointsH_2pi);
      coorY[i]=cos(PI+thetaH); 
      multXZ[i]=0;
    } 
    else {
      //The numPointsH_2pi and 2 below allows there to be a flat bottom if the numPointsH is odd
      float thetaH=i*2*PI/(numPointsH_2pi);

      //PI+ below makes the top always the point instead of the bottom.
      coorY[i]=cos(PI+thetaH); 
      multXZ[i]=sin(thetaH);
    }
  }
}

void textureSphere(float rx, float ry, float rz, PImage t) { 
  // These are so we can map certain parts of the image on to the shape 
  float changeU=t.width/(float)(numPointsW-1); 
  float changeV=t.height/(float)(numPointsH-1); 
  float u=0;  // Width variable for the texture
  float v=0;  // Height variable for the texture

  beginShape(TRIANGLE_STRIP);
  texture(t);
  for (int i=0; i<(numPointsH-1); i++) {  // For all the rings but top and bottom
    // Goes into the array here instead of loop to save time
    float coory=coorY[i];
    float cooryPlus=coorY[i+1];

    float multxz=multXZ[i];
    float multxzPlus=multXZ[i+1];

    for (int j=0; j<numPointsW; j++) { // For all the pts in the ring
      normal(-coorX[j]*multxz, -coory, -coorZ[j]*multxz);
      vertex(coorX[j]*multxz*rx, coory*ry, coorZ[j]*multxz*rz, u, v);
      normal(-coorX[j]*multxzPlus, -cooryPlus, -coorZ[j]*multxzPlus);
      vertex(coorX[j]*multxzPlus*rx, cooryPlus*ry, coorZ[j]*multxzPlus*rz, u, v+changeV);
      u+=changeU;
    }
    v+=changeV;
    u=0;
  }
  endShape();
}

I as a part of a 3D interface that I'm working on, I would like to be able to create a line between a 2D point and 3D point. In order to understand my question better, here is a simplified code:

import peasy.*;
PeasyCam cam;

void setup() {
  size(1600, 900, P3D);
  smooth();
  frameRate(60);
  lights();
  cam = new PeasyCam(this, 100);
}

void draw() {
  background(255);
  cam.beginHUD();
  rect(0, 0, 50, 50);
  cam.endHUD();

  translate(mouseX, mouseY);  
  box(10,10,10);
}

I would like that a line would be connecting a 2D point (for example the lower right corner of the 2D square) with one of the corners (3D point) of the cube. So even if the cube would be rotating, the line would be connecting both points by constantly updating itself.

Has anyone an idea how this could be done? Maybe by defining 2 PVectors, one as a 2D and the other as 3D?

Any help is highly appreciated. Regards,

L

I am new to the Processing coding environment, so I'm struggling a lot, however, I have a problem that I would need some help with. Currently, I'm working on a GUI as a part of an Internet of Things monitoring chain, where I am monitoring a mechanical system. The idea is to present the results on a 3D model, that I will create inside Processing. I am trying to create a 3D environment, where I could rotate the 3D model and add some buttons that would be linked to functions like returning the model in a neutral position etc. For this, I implemented the PeasyCam module since it really makes it neat to rotate and manipulate with the model's orientation, however, if I create a quad with text that would represent a button, it obviously rotates together with the 3D model which I don't want.

Is there a way to exclude the 3D environment from some specific shapes to get a SolidWorks / CATIA like functionality? Here is my code so far, I know its hardly worth to mention, but if you could aid me with some help, I would really appreciate it!

` import peasy.*; PeasyCam cam;

// Pre-settings

void setup(){ size(700,700, P3D); frameRate(60); lights();
cam = new PeasyCam(this, 100); }

// 3D model

void draw(){ background(255);

fill(150); strokeWeight(5); stroke(0); box(100); } `

Kind regards,

Luka

import peasy.*;
import processing.opengl.*;

Withpeasy Mypeasy;
Nopeasy MyNopeasy;


void setup() {

  size(600, 600, OPENGL);
  smooth();
  Mypeasy = new Withpeasy(this);
  MyNopeasy= new Nopeasy();

}

void draw(){
 background(0);  
 Mypeasy.display(); 
 MyNopeasy.display();
 }

public class Withpeasy {
  PeasyCam cam;
//--------First sketch: I want to control it with peasycam
  Withpeasy(processing.core.PApplet parent) {

    cam = new PeasyCam(parent, 1000);

  }
  void display() {
    stroke(235);
    noFill();
    strokeWeight(0.5);
    box(600);

  }
}
//--------Second sketch: I want it static, that doesn't react to peasycam
public class Nopeasy {
  Nopeasy() {}
  void display() {
    stroke(235);
    noFill();
    strokeWeight(0.5);
    ellipse(0,0,200,200);
  }
} 

Thank you all!

The simple code for the string "this text will be instructions" takes on the 'attributes' though and instead of simply displaying for x milliseconds at set co-ords, also fades and is positioned randomly. I know the problem is with my use of loops but can't for the life of me see where / why.

Thank you in advance.

if (millis() < 5000) {
    text("this text will be instructions",width/3,height/3);
  }
  else if (millis() - lastTime >= timeToDisplay) // if statement to allow text to fade in and out.  
  {
    count = int(random(myArray.length)); // use length of array to get word random within its length (size)
    textSize(random(35, 50)); // random sized text - set min / max values
    randomX = random(100, 500); // random placement of text
    randomY = random(100, 500);
    alphaSetting = 255; // set alpha setting of 255 = fully 'there'
    lastTime = millis();
  }
  fill(white, alphaSetting); // white text
  text(myArray[count], randomX, randomY); //  chose word from myArray - an array of the words from 
  alphaSetting -= a; // fade out of text by decrememtning alpha

  cam.endHUD();