How to created a hand like structure in Processing?

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



  • can you post your code?

    do you get the serial signal already?

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

  • I am using Polulu MinIMU-9 v2 board and their open source code 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?

  • edited February 2016

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


    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?


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

    Understand the code.


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


    Then later join the two codes.


    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?


  • 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.

  • 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

  • Yes. ;-)

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

    Then replace the mousex and y with your data

  • 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.

  • float a1;
    void setup() {
      size(900, 990, P3D);
    } // func 
    void draw() {
      translate(width/4, height/4);
      fill(2, 2, 222);
    } // func 
    void hand() {
      // the hand 
        // the core of the hand
      box(40, 70, 20);
      translate(-18, 0, 0);
      box(20, 40, 10);
      //index finger 
      translate(6, -52, 0);
      box(11, 40, 10);
  • Answer ✓

    above code for a simple hand

    when you have three values (which range)

    you could apply them to the 3 rotation axis




  • // 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);
    } // func 
    void draw() {
      camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 
      0, 0, 0, 
      0, 1, 0);
      rotateZ (rotateZToUse); 
      scale (scaleLevel);
      // draw stuff 
      // HUD 
      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;
          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() {
      fill(111, 111, 222); 
      translate(0, 8, 0);
      // noFill();
      // stroke(255);
      translate(-58, -48, -200);
      fill(255, 0, 0);
      sphere (30);
      translate(48, 248, 0);
      //  noFill();
  • 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
  • thank you very much

  • 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

  • sorry not 2 values its 3 values

  • Answer ✓

    Use map as shown in my sketch

    Map 0 to 5000 to the range 0 to 2 PI

Sign In or Register to comment.