Text, Pens and Multi-Touch

Download

Right click “Save as…”

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;
  }
}

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.