Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
/
P5js Gesture Interactions

P5js Gesture Interactions

Jul 30, 2021



Using leap motion

  1. Download and Install the leap motion software.
    https://www.leapmotion.com/setup
  2. Open the processing library manager from the context menu:
    Sketch > Import Library > add Library
  3. Search for and install “Leap Motion for Processing” in the “Library Manager” dialogue box.
  4. https://github.com/voidplus/leap-motion-processing

Gesture Interaction References:

https://developer.leapmotion.com/documentation/java/devguide/Leap_Overview.html

Minority report

Contents

Basic hand Location


import de.voidplus.leapmotion.*;

LeapMotion leap;

void setup(){
  size(1000, 800);
  leap = new LeapMotion(this);
}

void draw(){
  background(255);


  // ========= get hand locations from Leapmotion =========
  for(Hand hand : leap.getHands()){

    // ----- Variables -----
    PVector hand_position    = hand.getPosition();
    boolean hand_is_left     = hand.isLeft();
    boolean hand_is_right    = hand.isRight();
    
   if(hand_is_left) {
         // println("left"+hand_position);
          fill(0,0,255);
          ellipse(hand_position.x, hand_position.y, 16, 16);
    } 
  if(hand_is_right) {
        fill(255,0,0);
          //println("right"+hand_position);
          ellipse(hand_position.x, hand_position.y, 16, 16);
    } 
   }
}

Finger and Joint Locations


import de.voidplus.leapmotion.*;

LeapMotion leap;

void setup() {
  size(800, 500);
  leap = new LeapMotion(this);
}

void draw() {
  background(255);

  // ========= HANDS =========

  for (Hand hand : leap.getHands ()) {
    // ----- SPECIFIC FINGER POINT -----

    Finger  finger_thumb     = hand.getThumb();
    PVector  finger_thumb_loc  = finger_thumb.getPosition();

    Finger  finger_index     = hand.getIndexFinger();
    PVector finger_index_loc  = finger_index.getPosition();

    Finger  finger_middle    = hand.getMiddleFinger();
    PVector finger_middle_loc  = finger_middle.getPosition();


    Finger  finger_ring      = hand.getRingFinger();
    PVector finger_ring_loc = finger_ring.getPosition();

    Finger  finger_pink      = hand.getPinkyFinger();
    PVector finger_pink_loc  = finger_pink.getPosition();

    // ----- DRAWING -----

    drawEllipse(finger_thumb_loc);
    drawEllipse(finger_index_loc);
    drawEllipse(finger_middle_loc);
    drawEllipse(finger_ring_loc);
    drawEllipse(finger_pink_loc);

  
  // ========= Joints =========

    for (Finger finger : hand.getFingers()) {

      // ----- SPECIFIC BONE -----

      Bone bone_distal = finger.getDistalBone();

      Bone bone_intermediate = finger.getIntermediateBone();

      Bone bone_proximal = finger.getProximalBone();

      Bone bone_metacarpal = finger.getMetacarpalBone();

      // ----- DRAWING -----
      
      finger.drawJoints();
      finger.drawLines();
      
    }
  }
}

void drawEllipse(PVector point) {
  ellipse(point.x, point.y, 10, 10);
}

Swipe Recognition


import de.voidplus.leapmotion.*;
 
LeapMotion leap;
 
 
void setup(){
    size(800, 500);
    background(255);
    // leap = new LeapMotion(this).withGestures(); // with all gestures
     leap = new LeapMotion(this).withGestures("swipe"); // Leap detects only swipe gestures.
}
 
void draw(){
}
 
// ----- SWIPE GESTURE -----
 
void leapOnSwipeGesture(SwipeGesture g, int state){
   
          int  id                  = g.getId();
          PVector position_start      = g.getStartPosition();
          PVector position            = g.getPosition();
 
    switch(state){
        case 1: // Start
            break;
        case 2: // Update
            break;
        case 3: // Stop
            position.sub(position_start);
            position.normalize();
            if(position.x >= 0) {
               println("towards right");
            } else {
              println("towards left");
            }
             break;
        }
}

 

 

, multiple selections available,
For you

Programming
Results will update as you type.
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
    • p5.js Introduction
    • p5.js Variables
    • p5.js Random Numbers
    • p5.js SVG + Images
    • p5.js WebGL
    • p5.js Classes and Objects
    • p5.js Events and Functions
    • p5.js Loops
    • p5.js Coordinates
    • P5js Nested Loops
    • p5.js Animation Exercise 1
    • p5.js Animation Exercise 2
    • p5.js Conditionals
    • p5.js Arrays and Lists
    • p5.js Simple Collision Detection
    • p5.js Reactors
    • p5.js Tiling and Repetition
    • p5.js Vectors
    • p5.js Animation Solution with Objects
    • p5.js Easing
    • p5.js Perlin Noise
    • p5.js Particle System
    • p5.js Sound
    • p5j.s Typography
    • P5js Archive
      • P5js Motion Reactor
      • P5js Multiple Reactor Points
      • P5js Programming Basics: Parametric and Generative Graphic Design 2016
      • P5js End Exercise 2014
      • P5js End Exercise 2015
      • P5js Ext. Lektion 1 (Force Fields)
      • P5js Ext.Lektionen 2 (Rekursive Funktionen / Fraktale)
      • P5js How Computers Think
      • P5js End Exercise 2016 - Asteroids
      • P5js High Scores
      • P5js Artificial Neural Network
      • P5js Gesture Interactions
        • P5js Lesson 3.1 – Basic Leap Examples
        • P5js Lesson 3.2 – Multiple visualisations with leap
      • P5js Lesson 4.2 – Sine function
      • P5js Lesson 4.5 - Exercises
  • Programming in Processing (java)

{"serverDuration": 43, "requestCorrelationId": "971cfdf1d5ce493282870d56cc87e8e4"}