Sign in to queue

Description

See pointers and multi-touch sketches in action 

Windows 8 Store applications support a robust set of Pointer types, including finger tracking, input stylus and traditional mouse events. By expanding on some basic functionality, we can leverage these new Pointer events in our Processing.JS sketch and show how to differentiate between simultaneous and differentiated inputs. We'll also introduce adding basic text to your sketches.

To follow along in Visual Studio, please download the Processing Sketchbook projection.

The finished sketch for this lesson can be found below:

ArrayList pointers = new ArrayList();
int width, height;
String txtOutput;
void setup() {
    width = 500;
    height = 550;
    size(width, height);
    smooth();
    background(0);
    fill(color(255, 255, 255));
    PFont arial = loadFont("arial");
     textFont(arial, 14);
}
 
void draw() {
    fill(color(0, 0, 0, 20));
    noStroke();
    rect(0, 0, width, height);
    txtOutput = pointers.size() + ":";
    for(int i = 0; i < pointers.size(); i++){
      Pointer p = (Pointer)pointers.get(i);
      stroke(p.pColor);
      strokeWeight(p.size);
      txtOutput += p.description;
      switch ( p.description) {
        case "mouse":
        case "pen":
          line(p.oldX, p.oldY, p.x, p.y);
          p.oldX = p.x;
          p.oldY = p.y;
          break;
        case "touch":
          for (int currentLine = 0; currentLine < 4; currentLine++) {
            PointLine pLine = p.lines[currentLine];
            line(pLine.x1, pLine.y1, pLine.x2, pLine.y2);
          }
         updateLines(p);
         break;
       }
    }
    fill(color(255,255,255,255));
    text(txtOutput, 30, 30);
}
 
void pointerDown(TouchEvent e){
    Pointer p = new Pointer();
    p.x = e.offsetX;
    p.y = e.offsetY;
    p.oldX = e.offsetX;
    p.oldY = e.offsetY;
    p.id = e.pointerId;
    switch (e.pointerType) {
        case e.MSPOINTER_TYPE_MOUSE:
            p.pColor = color(255, 255, 255);
            p.size = 4.0;
            p.description = "mouse";
            break;
        case e.MSPOINTER_TYPE_PEN:
            p.pColor = color(0, 255, 0);
            p.size = 1.0;
            p.description = "pen";
            break;
        case e.MSPOINTER_TYPE_TOUCH:
            float r = map(e.offsetX, 0, width, 0, 255);
            float g = map(e.offsetY, 0, height, 0, 255);
            p.pColor = color(r, g, 255-r);
            p.size = 2.0;
            p.description = "touch";
            addLines(p);
            break;
    }
    pointers.add(p);
}
 
void addLines(Pointer _pointer) {
  _pointer.lines[0] = new PointLine(_pointer.x, _pointer.y, 0, height*.5);
  _pointer.lines[1] = new PointLine(_pointer.x, _pointer.y, width, height * .5);
  _pointer.lines[2] = new PointLine(_pointer.x, _pointer.y, width * .5, 0);
  _pointer.lines[3] = new PointLine(_pointer.x, _pointer.y, width * .5, height);
}
 
void updateLines(Pointer _pointer) {
  for (int i = 0; i < 4; i++) {
      _pointer.lines[i].x1 = _pointer.x;
      _pointer.lines[i].y1 = _pointer.y;
  }
}
 
void pointerMove(Pointer e) {
  Pointer heldPointer;
  boolean hasPointer = false;
  int holderPos = -1;
  for(int i = pointers.size()-1; i >=0; i--){
    Pointer p = (Pointer)pointers.get(i);
    if(p.id == e.pointerId){
      heldPointer = p;
      pointers.remove(i);
      holderPos = i;
      hasPointer = true;
    }
  }
  if(hasPointer && holderPos != -1)  {
    heldPointer.x = e.offsetX;
    heldPointer.y = e.offsetY;
    pointers.add(heldPointer);
  }
}
 
void pointerUp(Pointer e) {  removePointer(e.pointerId);  }
 
void pointerCancel(TouchEvent e) {  removePointer(e.pointerId); }
 
void pointerOut(TouchEvent e) {  removePointer(e.pointerId); }
 
void removePointer(float pID) {
  for(int i = pointers.size()-1; i >=0; i--){
    Pointer holderPointer = (Pointer)pointers.get(i);
    if(holderPointer.id == pID){
      pointers.remove(i);
    }
  }
}
 
class Pointer {
    float x = 0.0;
    float y = 0.0;
    float oldX = 0.0;
    float oldY = 0.0;
    color pColor = color(255, 255, 255);
    float size = 1.0;
    float id = 0;
    String description = "";
    PointLine[] lines = new PointLine[4];
}
 
class PointLine {
  float x1 = 0;
  float y1 = 0;
  float x2 = 0;
  float y2 = 0;
 
  PointLine(float _x1, float _y1, float _x2, float _y2)   {
    x1=_x1;
    x2=_x2;
    y1=_y1;
    y2=_y2;
  }
}

Embed

Download

Download this episode

The Discussion

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.