How to created a hand like structure in Processing?

Rclub

hello , i am new to Processing. i am doing a project related to 9 axis. what i want is i have a 9 axis in my hand. it keeps on sending data to computer serially. Now i want to visualize the human hand. i saw the video in youtube (FreeIMU) in that they have visualized human skeleton hand. even i want to do the same. So how can i do the same in Processing? any references,how to start with it? any help

Chrisir

can you post your code?

do you get the serial signal already?

do you get 9 3D positions or just 9 angles?

Chrisir

http://openprocessing.org/sketch/8274

Rclub

I am using Polulu MinIMU-9 v2 board and their open source code https://www.pololu.com/product/1268 i am new to this(sorry about that), i don't know much about what all the data i need and all.. but i know the code of how to take serial data to Processing(whatever may be the data). i don't know whats next like what data i require , how to draw the shape and how to make that shape move w.r.t serial data real time?

Chrisir

try to break the problem down to smaller steps. What are these small steps?

1.

download the code from them and make it run

can you move the Polulu MinIMU-9 v2 board inspace and see the red bars etc. move on the sccreen? I see a red bar on their website. Can you do this? And move it?

2.

When you have that then look at the data you receive.

Understand the code.

3.

Then in a new program write a hand and experiment with the hand.

4.

Then later join the two codes.

Question

Do you want the Hand to be stiff and just move in 3D space on the screen (e.g. to click something) or do you want to move the fingers of the hand (bend a finger) / deliver different gestures?

;-)

Chrisir

https://processing.org/examples/reach1.html

https://processing.org/examples/reach2.html

https://processing.org/examples/reach3.html

Rclub

i downloaded the code and even i got the other code for visualization. if i run that code i can visualize(as you see in their website blue color rectangle,yellow color bar and green color arrow like that) in real time. that means if move the sensor that blue color rectangle also will move. i gone through the code it is in python, they took only roll,yaw and pitch and done the visualization. i have understood how they created the box,window, arrow and all, how they took the data from serial port. but i cant understand how they process/convert that angle into movement. i just want hand(i dont want fingers,bending of fingers and all) if i move the sensor up, then hand(visual) should also point upwards.

Rclub

https://processing.org/examples/reach1.html this found interesting. i want this thats enough, but it moves based on my mouse pointer position, i want the movement based on my sensor values

Chrisir

Yes. ;-)

You need to take the code from reach1 and put it into your program.

Then replace the mousex and y with your data

Rclub

that is the main problem what data i need to put in place of mouseX and y.. i have accelerometer. it gives 3 value in terms of m/s^2 and the code in reach1 is 2D but i want 3D visualization.

Chrisir

float a1;

void setup() {
  size(900, 990, P3D);
  background(0);
} // func 

void draw() {
  background(0);
  lights();
  scale(1.9);
  translate(width/4, height/4);
  rotateY(a1);
  fill(2, 2, 222);

  hand();

  a1+=.022;
} // func 

void hand() {

  // the hand 

    // the core of the hand
  pushMatrix();
  box(40, 70, 20);
  //popMatrix();

  //thumb
  translate(-18, 0, 0);
  box(20, 40, 10);

  //index finger 
  translate(6, -52, 0);
  box(11, 40, 10);
  popMatrix();
  //
}

Chrisir

above code for a simple hand

when you have three values (which range)

you could apply them to the 3 rotation axis

rotateX

rotateY

rotateZ

Chrisir

// version with rotation und zoom

float angleBox1;     // angle 1 
// float angle2 = 0.0;  // angle 2

float scaleLevel = 1.0; // scale 

float rotateXToUse; // rotate data to use (in radians)
float rotateYToUse; // use those for rotate
float rotateZToUse; // use those for rotate

float rotateX; // rotate data internally
float rotateY; // don't use those for rotate
float rotateZ; // don't use those for rotate

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

void setup() {
  size(900, 990, OPENGL);
  background(0);
} // func 

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

  camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 
  0, 0, 0, 
  0, 1, 0);

  pushMatrix();
  rotateY(rotateXToUse);
  rotateX(rotateYToUse);

  rotateZ (rotateZToUse); 

  scale (scaleLevel);
  // draw stuff 
  drawScene();
  popMatrix();

  // HUD 
  camera();
  noLights(); 
  fill(255); 
  text("move mouse to ROTATE X,Y; click and drag mouse to rotate around Z (space bar: reset rotation), use mouse wheel to zoom", 
  20, 20);
} // func 

// -----------------------------------------------
// Inputs

void mouseWheel(MouseEvent event) {

  //This method controls scaleLevel variable

  if (event.getCount()==-1)
    scaleLevel += 0.2;
  else if (event.getCount()==1)
    if (scaleLevel>=.3)
      scaleLevel -= 0.3;
    else
      scaleLevel = .3;

  // check lower boundary 
  if (scaleLevel<.1)
    scaleLevel = .1;
  println("Scale Level: "+scaleLevel);
}

void mouseMoved() {

  //This method controls rotateXToUse and rotateYToUse variable

  rotateX += mouseX-pmouseX; // internal rotate data 
  rotateY += mouseY-pmouseY;

  rotateXToUse = (map(rotateX, 0, width, -PI, PI)); // rotate data to use
  rotateYToUse = (map(rotateY, 0, height, PI, -PI));
}

void mouseDragged() {

  //This method controls 

  rotateZ += mouseX-pmouseX; // internal rotate data 

  rotateZToUse = (map(rotateZ, 0, width, -PI, PI)); // rotate data to use
}

void keyPressed() {
  rotateXToUse = 0.0;
  rotateYToUse = 0.0;
}

// --------------------------------------------
// other functions 

void drawScene() {
  pushMatrix();
  fill(111, 111, 222); 
  translate(0, 8, 0);
  rotateY(angleBox1);
  // noFill();
  // stroke(255);
  noStroke(); 
  box(40);
  popMatrix();

  pushMatrix();
  translate(-58, -48, -200);
  fill(255, 0, 0);
  noStroke();
  sphere (30);
  popMatrix();

  pushMatrix();
  fill(111); 
  translate(48, 248, 0);
  rotateY(.5);
  //  noFill();
  stroke(255);
  box(40);
  popMatrix();

  angleBox1+=.03;
}
//

Chrisir

sketch for rotation above.

just use map() to apply your serial values to these 3 values:

float rotateXToUse; // rotate data to use (in radians)
float rotateYToUse; // use those for rotate
float rotateZToUse; // use those for rotate

Rclub

thank you very much

Rclub

the 2 values will be in the m/s^2 or 'g'(gravity) units m/s^2 ranges to 0 to 5000(it depends) or else g ranges from -3.9 to +3.9

Rclub

sorry not 2 values its 3 values

Chrisir

Use map as shown in my sketch

Map 0 to 5000 to the range 0 to 2 PI