I'm trying to fake a Depth of Field effect in a 3D scene. More specifically, I would like to use a z-buffer (depth buffering) to adjust the level of blur of a an object based on its distance from the camera. While searching the forum I found the following vertex and fragment shaders provided by @Poersch (from this topic ).

vert.glsl

uniform mat4 transform;

attribute vec4 vertex;
attribute vec4 color;

varying vec4 vertColor;

void main() {
    gl_Position = transform * vertex;
    vertColor = color;
}

frag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform vec4 nearColor = vec4(1.0, 1.0, 1.0, 1.0);
uniform vec4 farColor = vec4(0.0, 0.0, 0.0, 1.0);
uniform float near = 0.0;
uniform float far = 100.0;

varying vec4 vertColor;

void main() {
    gl_FragColor = mix(nearColor, farColor, smoothstep(near, far, gl_FragCoord.z / gl_FragCoord.w));
}

You can see the shaders in action with this sketch example:

sketch.pde

PShader depthShader;
float angle = 0.0;


void setup(){

    // Set screen size and renderer
    size(600, 480, P3D);
    noStroke();

    // Load shader
    depthShader = loadShader("frag.glsl", "vert.glsl");
    //depthShader.set("near", 40.0); // Standard: 0.0
    //depthShader.set("far", 60.0); // Standard: 100.0
    //depthShader.set("nearColor", 1.0, 0.0, 0.0, 1.0); // Standard: white
    //depthShader.set("farColor", 0.0, 0.0, 1.0, 1.0); // Standard: black

}


void draw(){

    // Fill background and set camera
    background(#000000);
    camera(0.0, 0.0, 50.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

    // Bind shader
    shader(depthShader);

    // Calculate angle
    angle += 0.01;

    // Render "sky"-cube
    pushMatrix();
    rotate(angle, 0.0, 1.0, 0.0);
    box(100.0);
    popMatrix();

    // Render cubes
    pushMatrix();
    translate(-30.0, 20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    box(25.0);
    popMatrix();
    pushMatrix();
    translate(30.0, -20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    box(25.0);
    popMatrix();

    // Render spheres
    pushMatrix();
    translate(-30.0, -20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    sphere(20.0);
    popMatrix();
    pushMatrix();
    translate(30.0, 20.0, -50.0);
    rotate(angle, 1.0, 1.0, 1.0);
    sphere(20.0);
    popMatrix();

}

Here, the z-buffer is used to change the color of an object: the closer the lighter, the farther, the darker.

QUESTION

• How can I use the same z-buffer to change the blur level of an object ?

Ideally I would like to use the Gaussian blur shader from the PostFX library:

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif


#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;


uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }

  gl_FragColor = (avgValue / coefficientSum);
}

Unfortunately I can't figure out how to make the two (z-buffer and blur fragment shader) work together. Any hint would be greatly appreciated !

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.

camX = map(m, 0, width,-200,200);
camY = map(k, 0, width,-200,200);
camZ = map(n, 0, width,-200,200);   
camera(-camY+300,0,-camY+200,-camZ,camX,0,0,-1,0)
fill (0,0,255);
box(150);

t1 =  0.7
aZ = accelerationZ;
S1 = Vox*t1 + (aZ*t1*t1)/2;
if (aZ>-0.2 && aZ<0.2) {Vox = 0}
else {Vox = Vox + aZ*t1;}
k = k + S1;
S1 = 0;

I need to do it more realistic. Could you help me?

This program should allow the user move to the cube and away from it. But when I, for example, move to the cube at first it approximation and then it becomes small like it was in the beginning. I though that it was so because of the acceleration, but I can not find the solution

the final program should imitate the movement. that is why I use formulas

• play music from mp3 file
• create a box and make it rotating, changing sizes and colors
• create a circle by clicking on a screen and make the circle moving down outside of the screen
• import txt file and make lines of text from this file rotating around the box

I managed to do 3 tasks (although not very good, I think), but I have no idea how to cope with the fourth one. Any suggestions? This is my code, maybe someone may have some suggestions on how to improve other tasks.

Thank you very much.

import ddf.minim.*;
Minim minim;
AudioPlayer player;

void setup(){
  size(500,500,P3D);
  background(#F0AB16);
  smooth();

  minim=new Minim(this);
  player=minim.loadFile("music.mp3",512);
  player.play(); 
}

void draw(){
  background(#F0AB16);

  if (mouseButton==LEFT){
     fill(#CE2A92);
     ellipse(mouseX,mouseY,100,100);
      mouseY++;
  if (mouseY > height) {
    ;
  }
  }

  translate(width/2,height/2);
  rotateX(millis()/1000.0f);
  rotateY(millis()/1000.0f);
  fill(255.0*sin(millis()/650.0),255.0*sin(millis()/800.0),255.0*sin(millis()/1000.0));
  box(250*abs(sin(millis()/1000.0))); 

}

I'm looking for a motion something like this:

I have the following code, which does what I want it do for now:

int flipTime;
float rotation;

void setup() {
  size(400, 400, P3D);
  rotation = 0.0;
  flipTime = 100;
}

void draw() {

  background(128);
  translate(200, 200, 20);

  if ( (frameCount % flipTime) < (flipTime/2) ) {
    rotation = HALF_PI * ( 1+ sin( ( (frameCount % (flipTime/2)) * PI / (flipTime/2) ) -HALF_PI) );
  } else {
    rotation = PI + (HALF_PI * ( 1+ sin( ( (frameCount % (flipTime/2)) * PI / (flipTime/2) ) -HALF_PI) ));
  }

  rotateY(rotation);

  fill(255);
  box(200, 200, 20);
  fill(0);
  translate(0, 0, -20);
  box(200, 200, 20);
}

However, the if/else structure seems like it's going to make things complicated further down the line. I'd like to stack many such rotations and translations on different axes and apply them to the same object, all out of phase with each other, and be able to tweak the variables, maybe using sin(x)^3, sin(x)^5 etc. for more eased motion.

Is there a more elegant way to do this?

Also, is there a page somewhere that gives examples on how to manipulate sine functions for these kinds of purposes? Something like the Trigonometry Primer, but part 2?

int baris, kolom;
int kotak = 40;
int w = 2200;
int h = 800;

void setup() {
  fullScreen(P3D); // 1366 x 768
  baris = h / kotak;
  kolom = w / kotak;
}

void draw() {
  background(255);
  axisPlot();
  objek();
}

void axisPlot() {
  pushMatrix();
  stroke(255);
  fill(#D6D6D6);
  translate(width/2, height/2);
  rotateX(PI/3);
  translate(-w/2, -height/2);
  for (int y = 0; y < baris; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < kolom; x++) {
      vertex(x * kotak, y * kotak);
      vertex(x * kotak, (y+1) * kotak);
    }
    endShape();
  }
  popMatrix();
}

void objek() {
  pushMatrix();
  lights();
  noStroke();
  fill(246, 225, 65);
  translate(mouseX, mouseY);
  rotateX(-PI/6);
  box(100, 50, 150);
  popMatrix();
}

I am currently working on a side project and I was playing with the box() object.

When I tweak the z parameter, both ends are affected.

Can I make it that only the top end is affected by the z parameter?

Thanks!

PImage body1;
int w = 400;    
int h = 200;

void setup() {    
  size(1000, 700, P3D);   
  body1 = loadImage("Basketball.png");    
}

void draw() {    
  background(200);   
  translate(width/2, height/2);   
  float x = map(mouseX, 0, width, -PI/2, PI/2);   
  rotateY(x);

  noFill();   
  box(w, h, w);

  pushMatrix();
  translate(-100, 15);
  scale(.25);    
  image(body1, 0, 0);    
  popMatrix();    
}

I have this example,

void setup() {
  size(400, 400, P3D);
  ortho(0, width, 0, height); // same as ortho()
  stroke(255);
  noFill();
}

void draw() {
  //lights();
  background(0);
  translate(width/2, height/2, 0);
  rotateX(-PI/6);
  rotateY(map(mouseX, 0, width, 0, 2*PI));  
  box(width/3);
}

However, I am rotating the whole canvas. Should I rotate the camera instead? Is there any little advice on how to make an isometric room, considering walls in a future?

You know, when making a 2d grid, you start from the top left generally, so you're attached to that point when rotating for example. would it be convenient to make everything relative to the center of the grid?

void setup()
{
  size(640,360,P3D);

}
float n=0;
void draw(){
background(255);
//GREEN LINE
pushMatrix();
stroke(0,255,0);
translate(width/2, height/2);
rotate(n);
box(90,1,1);
popMatrix();

//RED LINE
pushMatrix();
stroke(255,0,0);
translate(width/2, height/2);
rotate(n);
line(0,0,-95,100);
popMatrix();
n=n+0.01;
}

But I have a big problem, the third box 's rotation isn't what I want, I don't know how to explain it but here is my code. How to fix this and have a good mouvement of index ? Thanks for the help.

int a = 80;
int z = 0;
int e =50;
int r = 60;
float rot1;//rotation of cube_1
float rot2;//rotation of cube_2
float rot3;//rotation of cube_3




void setup() {
  size(400, 400, P3D);
  smooth();
}

void  draw() {
  background(20, 50, 80);

  //base
  translate(width/4, height/4);
  box(80, 50, 50);
  pushMatrix();
  // 1/2/3
  translate(a, z);//1
  rotateZ(rot1);
  box(r, e, e);
  translate(a, z);//2
  rotateZ(rot2);
  box(r, e, e);

  translate(a, z);//3
  rotateZ(rot3);
  box(r, e, e);
  popMatrix();

  if  (keyPressed == true)
  {
    if (key =='a') {  //Rot1
      rot1 = rot1 + 0.01;
    } else if (key == 'z') {
      rot1 = rot1 - 0.01;
    }

    if (key =='a') { //rot2
      rot2 = rot2 + 0.01;
    } else if (key == 'z') {
      rot2 = rot2 - 0.01;
    }

    if (key =='a') { //rot3
      rot3 = rot3 + 0.01;
    } else if (key == 'z') {
      rot3 = rot3 - 0.01;
    }
  }

  if (rot1 > 1.5) {
    rot1 = 1.5;
  } else if (rot1 < -0.5) {
    rot1 = -0.5;
  }
  if (rot2 > 1.0) {
    rot2 =60;
  } else if (rot2 < 0.0) {
    rot2 = 0.0;
  }
  if (rot3 > 1.5) {
    rot3 = 1.5;
  } else 
  if (rot3 < 0) {
    rot3 = 0;
  }
  println(rot3);
}

what i m trying is that when my camera starts running it should show box as soon as the marker is shown by me for detection. But it does not detect any marker or show any cube. But camera does start.

    import jp.nyatla.nyar4psg.*; // NyAR2 library from cpbotha.net for multi markers

    import processing.opengl.*;
    import processing.video.*;

    Capture vid; 
    NyARMultiBoard nya;

    void setup(){
      size(640,480,P3D);

      vid= new Capture(this, 640,480, 30);
      String[] patts= {"patt.kanji"};
      double[] widths= {80};
      nya= new NyARMultiBoard(this, width, height, "camera_para.dat", patts, widths);

      vid.start();
    }


    void draw(){
      background(200);
      vid.read();
      image(vid,0,0);
           if(nya.detect(vid)) // marker detection code starts here
         {
          nya.markers[0].beginTransform();
          box(40);
          nya.markers[0].endTransform();

         }
    } 

I was trying to use "applyMatrix()" directly. BUT this is flattening everything, meaning object back faces and occluded faces becomes visible. Lights have no effect. stroke and fill get mixed.

PMatrix3D p; 

void setup() {
  size(600, 400, P3D);
}

void draw() {

  float x = map(mouseX, 0, width, -10, 10);
  float z = map(mouseY, 0, height, -10, 10);

 p = new PMatrix3D(
 5.400566, 0.519709, -4.3888016, 193.58757, 
 5.284709, -9.016302, 3.312224, 266.927, 
 0.012042404, 7.253584E-5, 0.0084899925, 1.0, 
 0, 0, 0, 1);

  applyMatrix(p);
  background(20);
  translate(x,0,z);
  fill(100);
  box(10);

}

second attempt was to apply transformation on PGraphicsOpenGL, but I still couldn't figure out how to do it properly.

PMatrix3D p; 

void setup() {
  size(600, 400, P3D);

  p = new PMatrix3D(
    5.400566, 0.519709, -4.3888016, 193.58757, 
    5.284709, -9.016302, 3.312224, 266.927, 
    0.012042404, 7.253584E-5, 0.0084899925, 1.0, 
    0, 0, 0, 1);

  p.invert();
}

void draw() {

  float x = map(mouseX, 0, width, -200, 200);
  float z = map(mouseY, 0, height, -150, 150);

  //((PGraphicsOpenGL) g).modelview.set(p);
  ((PGraphicsOpenGL) g).camera.set(p);
  //((PGraphicsOpenGL) g).projection.set(p);
  //((PGraphicsOpenGL) g).projmodelview.set(p);

  background(20);
  lights();
  translate(width/2, height/2);
  translate(x, 0, z);
  box(100);
}

from here: //https://github.com/processing/processing/issues/2904 I got the idea of making a shader but I have never done this before, so I am clueless so far...

Cube[] cubes = new Cube[5];

void setup() {
  size(500, 800, P3D);
  frameRate(5); //this is part of the problem
  for (int i = 0; i <cubes.length; i++) {
    cubes[i] = new Cube();
  }
}

void draw() {
  translate(0, 75);
  for (int i = 0; i < cubes.length; i++) {
    background(255);
    cubes[i].display();
  }
}

class Cube {
  float rot;

  public Cube() {
    this.rot = random(PI);
  }

  void display() {
    for (int i = 0; i < 5; i++) {
      int yoff = height/5;
      pushMatrix();
      translate(width/2, i*yoff);
      rotateY(rot*random(-1, 1)*millis()*.01); //not very elegant
      fill(100, 50);
      box(100);
      popMatrix();
    }
  }
}

this is my (very simple) code that i'm trying to run :

void setup(){
  size(400, 400, P3D);
  background(0);
}

void draw(){
  stroke(255);
  noFill();
  translate(-100, 20, 30);
  box(50);
}

Thanks !

int sketch_width=600;
int sketch_height=400;

void setup() {
  size(sketch_width, sketch_height, P3D);
}

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

  float near = 0.1;
  float far = 1000.0;
  float fov = tan( 120 *(PI / 360));
  float ratio = sketch_width / sketch_height;
  float mouse_X;
  float mouse_Y;
  float dis = -200;

mouse_X = ((mouseX/2) / 950.0 * 2.0) - 1.0;
  mouse_Y = ((500.0 - (mouseY/2)) / 500.0 * 2.0) - 1.0;
  mouse_X *= 0.5;
  mouse_Y *= 0.25;

  frustum(near*(-fov * ratio + mouse_X),
               near*(fov * ratio + mouse_X),
               near*(-fov + mouse_Y),
               near*(fov + mouse_Y),
               near, far);



camera( mouse_X * dis, mouse_Y * dis, 0, mouse_X * dis, mouse_Y * dis, -1, 0, 1, 0);
   translate( 0.0, 0.0, dis);

  println(mouseX);


  translate(0,0,0);
  box(50);

}

1. Display a grid of dots. Grid points only. No lines (ex. 90x90)
2. Allow the user to switch between a 2d and "3D View"
3. Allow the user to spin, pivot, tilt, rotate the cube using the mouse. (Ex. http://visjs.org/graph3d_examples.html)
4. Allow the user to zoom in/out using the mouse scroll button. (Ex. http://visjs.org/graph3d_examples.html)
5. Allow the user to select a dot within in the cube.
6. Allow the user to left-click on a dot highlighting it (the dot becomes bigger/bold)

7. Allow the user to select a second dot in the same plane connecting a straight line between them. Allow the user to go on creating lines in a plane until:

8. The user right-clicks a dot in the selected plane and chooses (perhaps from a pop-up/drop-down menu) "degrees of arc" (45, 90, 135).

9. Once chosen a straight "arc line" is created between the "arc point" and a landing point in the adjacent plane determined by the angle chosen (i.e 90 degree arc creates a line running along the z axis (perpendicular to the plane) connecting the "arc dot" to the corresponding dot in the above plane (closer to the user). If 45, or 135 degrees the "arc line" will end at one of two points in-between visible grid dots in the above plane.)

10. The new plane is automatically selected and any further points (left) clicked will create a line similar to step 7 above (snapping to the nearest grid point (45, 90, 135).

Optional:

A control panel may be displayed (perhaps at the bottom of the screen) Where: The user can view/edit the number/color of the highlighted plane. The user can highlight the 45/135 grid points within the cube (smaller than initial 90 degree grid dots) The user can "take back" previous line creation/dot selections.

I have copied code from two examples I found in the forums here and managed the stitch them together to sort of do the job.

Ive managed to get LINES (not dots) drawn and rotate the shape in 3d however it seems like the grid is made up of separate

boxes all being rotated individually. See code below:

// Below - (Added from rotating cube script) 
float rotx = PI/4;
float roty = PI/4;
float rotz = PI/4;
// Above - (Added from rotating cube script) 

void setup() {
  size(500, 500, P3D);
  strokeWeight(.5);
  stroke(0, 0, 0);
}
void draw() {

  background(152);


  for (int x = 0; x <= height/2; x += 50) {
    for (int y = 0; y <= height/2; y += 50) {
      for (int z = 0; z <= height/2; z += 50) {
        pushMatrix();
        translate(height/4 + x, height/4 + y, -125);

        // Below - (Added from rotating cube script) 
        rotateX(rotx);
        rotateY(roty);
        //scale(90);
        // Above - (Added from rotating cube script) 

        fill(255);
        box(150, 150, 150);
        popMatrix();
      }
    }
  }
}
// Below - (Added from rotating cube script) 
void mouseDragged() {
  float rate = 0.01;
  rotx += (pmouseY-mouseY) * rate;
  roty += (mouseX-pmouseX) * rate;
}
// Above - (Added from rotating cube script) 

Any help would be appreciated.

size(700,700,P3D); }

void draw(){ background(0);

if(mousePressed){// This if statement should allow the user to click and make a box appear pushMatrix(); translate(mouseX0.01,mouseY0.01); rotateX(mouseX); rotateY(mouseY); box(150); popMatrix(); } }

Thanks for your help

below the script that I'm trying to modify.

import processing.video.*;
import jp.nyatla.nyar4psg.*;

Capture cam;
MultiMarker nya;

void setup() {
  size(640,480,P3D);
  colorMode(RGB, 100);
  println(MultiMarker.VERSION);  
  cam=new Capture(this,640,480);
  nya=new MultiMarker(this,width,height,"camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  nya.addARMarker("patt.hiro",80);//id=0
  nya.addARMarker("patt.kanji",80);//id=1
  cam.start();
}

void draw()
{
  if (cam.available() !=true) {
      return;
  }
  cam.read();
  nya.detect(cam);
  background(0);
  nya.drawBackground(cam);
  for(int i=0;i

This code right here makes a 3D box that I can edit but it keep making the same box over and over again, how can i make one box and keep it there without it making another box? I tried putting it on setup but it didnt work.

(Time)   (X-axis)         (Y-axis)      (Z-axis)
0        -0.00478796     -0.017262705  -0.002968556
1.7      -0.006942641    -0.020502579  -0.004041603
...

Now, the box is rotating with the data in the first row, but I want to add each data like this.

step1 X += -0.00478796
step2 X += -0.006942641
...

Could you give me an advice? And thank you!

int tsvWidth = 0;
int LENGTH;
String [][] tsv;
float t, rotX, rotY, rotZ, X, Y, Z;

void setup() {
  size(800, 800, P3D);
  frameRate(20);
  smooth();

  String lines [] = loadStrings("Satelite_time_Axis_1_Axis_2_Axis_3.txt");

  //calculate max width of tsv file
  for (int i=0; i < lines.length; i++) {
    String [] chars  =  split(lines[i], TAB); //split by TAB, not comma
    if (chars.length > tsvWidth) {
      tsvWidth = chars.length;
    }
  }

  //create tsv array based on # of rows and columns in csv file
  tsv    = new String [lines.length][tsvWidth];
  LENGTH = lines.length; 
  println(LENGTH);
  //parse values into 2d array
  for (int i = 0; i < lines.length; i++) {
    String [] temp = new String [lines.length];
    temp = split(lines[i], TAB);
    for (int j = 0; j < temp.length; j++) {
      tsv[i][j] = temp[j];
    }
  }
}


void draw() {
  background(0);
  println(X, Y, Z);
  renderBox();
  X += Float.parseFloat(tsv[0][1]);
  Y += Float.parseFloat(tsv[0][2]);
  Z += Float.parseFloat(tsv[0][3]);
}

void renderBox() {
  pushMatrix();
  translate(width/2, height/2, 0.0);
  rotateX(X); 
  rotateY(Y); 
  rotateZ(Z);
  fill(128);
  box(400);
  popMatrix();
}

I'm trying to complete this exercise which involves controlling an avatar through a forest using matrix transformation. However when I press the Space button to move the view back to the camera (as opposed to FPV) I can't get it to follow the avatar.

Could someone please point me in the right direction?

Many thanks, Charles

//Avatar eye height
int viewHeight = 100;

//matrix to capture position and orientation of match
PMatrix3D eye = new PMatrix3D();

Boolean record = false;
Boolean view = true;

int treeCount = 400;
float[] treeX = new float[treeCount];
float[] treeY = new float[treeCount];
float [] treeH = new float[treeCount];

void setup()
{
  //3D rendering
  size(700, 500, P3D);
  //white fill
  fill(255);
  strokeWeight(0.5);

  //translate eye matrix
  eye.translate(100, 100, viewHeight);
  eye.rotate(PI/6);

  //initialize tree position and height
  for (int i = 0; i < treeCount; i++) {
    treeX[i] = random(width*-5, width*5);
    treeY[i] = random(width*-5, width*5);
    treeH[i] = random(200, 1000);
  }
}

void draw()
{  
  background(255);
  camera(500, 0, 200, 0, 0, 125, 0, 0, -1);

  /*
        Create a new matrix to transform the ****whole scene****
   except the match, which we're not drawing
   because we're in the head of the match!
   */
  PMatrix3D camera = new PMatrix3D();

  //(when we apply this, it will) drag the origin up to the camera
  camera.translate(500, 0, 200);

  /*
        Invert the match transformation; or, move the whole scene
   so the origin is at the avatar and it's
   */
  PMatrix3D inv =  new PMatrix3D(eye);
  inv.invert();
  camera.apply(inv);

  if (view) { // FPV state
    applyMatrix(camera);
    for (int i = 0; i < treeCount; i++) {
      drawTree(treeX[i], treeY[i], treeH[i]);
    }
    drawGrid();
  } else { // camera state
    for (int i = 0; i < treeCount; i++) {
      drawTree(treeX[i], treeY[i], treeH[i]);
    }

    drawGrid();
    applyMatrix(eye);
    avatar();
  }

  recordFrames();
  movements();
}

void drawGrid() {
  //how far should the lines go?
  int horizon = width*5;
  //line separation
  int sep = 100;

  stroke(100);
  for (int i=-horizon; i<horizon; i += sep)
  {
    //lines in x-direction
    line(horizon, i, -horizon, i);
    //lines in y-direction
    line(i, -horizon, i, horizon);
  }
}

//create a simple avatar
void avatar() {

  noStroke();
  fill(200);
  pushMatrix();
  sphere(20);
  //start at the top - translate down half the height of the match
  translate(0, 0, -viewHeight/2);
  //draw the stick
  fill(150);
  box(20, 20, viewHeight);
  popMatrix();
}

void keyPressed() {

  if (key=='f') saveFrame("images/image.png");
  if (key=='r') record = !record;
  if (key==' ') view = !view;
}

void movements() {
  if (keyPressed && keyCode==LEFT) eye.rotateZ(-0.05);
  if (keyPressed && keyCode==RIGHT) eye.rotateZ(0.05);
  if (keyPressed && keyCode==UP) eye.translate(-10, 0, 0);
  if (keyPressed && keyCode==DOWN) eye.translate(10, 0, 0);
}

void recordFrames() {
  if (record) saveFrame("frame_#####.png");
}

void drawTree(float x, float y, float h) {

  noStroke();
  fill(#715448);
  pushMatrix();
  translate(x, y, h/2);
  box(h*0.06, h*0.03, h);
  popMatrix();
  pushMatrix();
  translate(x, y, h);
  fill(#7EFF8C);
  sphere(h*0.3);
  popMatrix();
}

void setup() {
  size(400, 400, P3D);
  ortho();
}

void draw() {
  background(0);
  translate(200, 200, 145);
  box(200);
  ortho(0, width, 0, height, mouseY, mouseY + 1);
}

What would be the correct way to do this?

add_library('peasycam')

class MyObject(object):
    dim = 40
    x =0
    y=0
    z = 0
    picked = False
    c_face = color(255)


    def pick (self, xp, yp):
        if (dist(xp,yp,screenX(x,y,z), screenY(x,y,z))<dim):
            MyObject.picked = True
        else:
            MyObject.picked = False

    def draw3(self):
        if (MyObject.picked == True):
            fill(255,0,0)
        else:
            fill(MyObject.c_face)
        box(MyObject.dim)

b =  MyObject()

def setup():

    size(200,200,P3D)
    #PeasyCam(this,100)
    camera(-100,100,-100,0,0,0,0,0,1)

def draw():

    b.draw3()

    def mousePressed():
        b.pick(mouseX,mouseY)

I am using it to try to correctly simulate simultaneous rotation of a cube in multiple dimensions at once. (processing's standard rotation functions make this tricky)

It works okay, but it is a little bit off, which causes it to be glitchy sometimes. For example, if you do rotate2D(90,90); I want it to look just like it does if you do rotate2D(0,0);(disregarding the position of the axes) but it seems like X and Y don't quite get rotated enough. For example if youare doing a 90 90 rotation and you change the test condition on line 51 to i<=abs(rotations[0])+37 you get what you expect.

please feel free to ask me to clarify further. Can anyone help me out?

float y=0;
float x=0;
float box_size=50.0;
float rotation_scale=(90.0/50.0);
void setup()
{
  size(1000,1000,P3D);
}    

void draw()
{

   background(255);
   translate(500,500);
   translate(x*rotation_scale,-y*rotation_scale);
   rotate2D(x,y);
   x++;
   y++;      
  draw_axes();
  box(box_size);
}

void draw_axes()
{
    stroke(255,0,0);
    line(0,-250,0,250);
    stroke(0,250,0);
    line(-250,0,250,0);
    stroke(0,0,255);
    line(0,0,-250,0,0,250);
    stroke(0);
}

void rotate2D(float horizontal, float vertical)
{  
  float[] rotations ={horizontal, vertical};
  if(rotations[0]>rotations[1])
  {
    float tmp = rotations[1];
    rotations[1]=rotations[0];
    rotations[0]=tmp;
  } 

  if(rotations[1]==vertical) rotateX(radians(rotations[1]-rotations[0]));
  else rotateY(radians(rotations[1]-rotations[0]));

  float hIncr= (horizontal<0) ? -0.1 : 0.1;
  float vIncr= (vertical<0) ? -0.1 : 0.1;
  for(float i=0; i<=abs(rotations[0]);i+=0.1)
  {    
    rotateY(radians(hIncr));
    rotateX(radians(vIncr));
  }   
}

Edit for clarity

The point of this function is to try to create semi-realistic, visually appealing rotation of a box given movement in a particular direction. Although, in this case, I am deciding the rotations first and then translating accordingly, just for simplicity.

Explanation of horizonal andvertical parameters and their meaning:

To get an idea of the exact significance of these parameters and their meanings, try calling the function with one of the values set to zero.

calling rotate2D(45,0) causes the box to rotate to the right but not upwards.

calling rotate2D(0,45) causes the box to rotate upwards but not to the right.

These results can be achieved by simply calling rotateY(45) and rotateX(45) respectively, however, if you want to rotate in 2 directions simultaneously, simply calling these functions will likely not yield a desirable result because once you rotate about the Y axis, the X axis itself has been rotated. I am trying to simulate the rotation about a fixed set of axis, by slowly rotating in each direction until the bounds are reached. And it does yield a desirable rotation but It seems like the box is just not rotating enough given each parameter. I'm looking for a way to correct this while still yielding the same general rotational pattern.

In response to quark: I am aware that the box just rolls off of the screen, I was just providing a template for people to play around with the increments to see the way the rotation was affected.

The reason I have it at x++; y++; is because, (because of the problem I am trying to solve here) this increment pattern gives the best results currently, but even this is not perfect as you can see it glitch sometimes.

simple question, but I couldn't find anything about it.

I want to do a Picking with 3D boxes.

I don't want to use the shapes lib.

All boxes have different colors, So I just wanted to take the color via get(mouseX, mouseY), bu I realized that doesn't work since I use lights().

Then I decided to draw everything in a second PGraphics and do the get(mouseX, mouseY) there - but since I use peasyCam, the boxes on the screen and in PGraphics don't match. So it doesn't work.

So my question here is: How can I do a picking without lib but with lights() and peasyCam in use?

Or in other words: How can I impose peasyCam on my PGraphics?

(or can I use modelX etc. and use it to paint my boxes in my PGraphics?)

Thank you all!

Greetings, Chrisir ;-)

• part of my class:

  void display() {

  noStroke();
  stroke(0);
  fill(boxFillColor);
  
  if (selected) {  // only outline
    noFill();
    strokeWeight(2);
    stroke(boxFillColor);
  }
  
  if (allNoFill) { // only outline
    noFill();
    strokeWeight(2);
    stroke(boxFillColor);
  }
  
  //pg.beginDraw();
  pg.pushMatrix();
  pg.fill(boxFillColor);
  pg.noStroke();
  pg.translate (Position.x, Position.y, Position.z);
  pg.box ( boxSize.x );
  pg.popMatrix();
  // pg.endDraw();
  
  // the box
  pushMatrix(); 
  translate (Position.x, Position.y, Position.z);
      box ( boxSize.x ); 
  
      popMatrix();
  
  }