The ProcessingJS version used in these projects has an implementation of the Pointer event specification for mouse, touch and pen interaction. This specification is drawn from the W3C Working Draft in the form published as of Feburary 19, 2013.

The Pointer events are required for Windows Phone and Windows 8 multi-touch interactions, but we thought it valuable to have them documented in the reference style of the ProcessingJS team.

Name

PointerEvent p

Examples
void pointerDown(PointerEvent p){
    rect(p.offsetX, p.offsetY, 20, 20);
}
Description PointerEvent is the result of a pointer interaction, which can be mouse, touch or pen based.

A PointerEvent contains the following properties
int pointerId - a unique identifier for each pointer
int offsetX - the X position of the pointer on the canvas
int offsetY - the Y position of the pointer on the canvas
int width (touch only) - the geometric width of the area the pointer is touching
int height (touch only) - the geometric height of the area the pointer is touching
int pressure (pen only) - pressure of the pen touch point
pointerType - can be MOUSE_POINTER, PEN_POINTER, or TOUCH_POINTER

Syntax
void [pointerMethod](PointerEvent p){ ... }
void [pointerMethod](p){ ... }

Available pointer methods
void pointerDown(p)
void pointerMove(p)
void pointerUp(p)
void pointerCancel(p)
void pointerOver(p)
void pointerOut(p)

Parameters  none

 

Name

pointerDown()

Examples
void pointerDown(p){
    rect(p.offsetX, p.offsetY, 20, 20);
}
Description The pointerDown() method occurs when there is an active pointer interaction. This can be a mouse click, a pen touch or a touch point on the screen.
Syntax
void pointerDown(p){ ... } 

Parameters
  A PointerEvent (p) contains the following properties
int pointerId - a unique identifier for each pointer
int offsetX - the X position of the pointer on the canvas
int offsetY - the Y position of the pointer on the canvas
int width (touch only) - the geometric width of the area the pointer is touching
int height (touch only) - the geometric height of the area the pointer is touching
int pressure (pen only) - pressure of the pen touch point
pointerType - can be MOUSE_POINTER, PEN_POINTER, or TOUCH_POINTER

 

Name

pointerMove()

Examples
void pointerMove(p){
    ellipse(p.offsetX, p.offsetY, 20, 20);
}
Description The pointerMove() method occurs when the pointer changes. This applies to any change including the x or y coordinate, button state, pen pressure or tilt, or touch contact geometry (width or height).
Syntax
void pointerMove(p){ ... } 

Parameters
  A PointerEvent (p) contains the following properties
int pointerId - a unique identifier for each pointer
int offsetX - the X position of the pointer on the canvas
int offsetY - the Y position of the pointer on the canvas
int width (touch only) - the geometric width of the area the pointer is touching
int height (touch only) - the geometric height of the area the pointer is touching
int pressure (pen only) - pressure of the pen touch point
pointerType - can be MOUSE_POINTER, PEN_POINTER, or TOUCH_POINTER

 

Name

pointerOver()

Examples
void pointerOver(p){
    ellipse(p.offsetX, p.offsetY, 20, 20);
}
Description The pointerOver() method occurs when pointer is moved into the sketch. This can be when there is a mouse or touch move inside the sketch bondaries but is also valuable for when stylus enters the hover range of the sketch.
Syntax
void pointerOut(p){ ... } 

Parameters
  A PointerEvent (p) contains the following properties
int pointerId - a unique identifier for each pointer
int offsetX - the X position of the pointer on the canvas
int offsetY - the Y position of the pointer on the canvas
int width (touch only) - the geometric width of the area the pointer is touching
int height (touch only) - the geometric height of the area the pointer is touching
int pressure (pen only) - pressure of the pen touch point
pointerType - can be MOUSE_POINTER, PEN_POINTER, or TOUCH_POINTER

 

Name

pointerOut()

Examples
void pointerOut(p){
    ellipse(p.offsetX, p.offsetY, 20, 20);
}
Description The pointerOut() method occurs when pointer is moved out of the sketch. This can be when a mouse or touch point move outside the sketch bondaries but is also valuable for when stylus leaves the hover range of the sketch.
Syntax
void pointerOut(p){ ... } 

Parameters
  A PointerEvent (p) contains the following properties
int pointerId - a unique identifier for each pointer
int offsetX - the X position of the pointer on the canvas
int offsetY - the Y position of the pointer on the canvas
int width (touch only) - the geometric width of the area the pointer is touching
int height (touch only) - the geometric height of the area the pointer is touching
int pressure (pen only) - pressure of the pen touch point
pointerType - can be MOUSE_POINTER, PEN_POINTER, or TOUCH_POINTER

 

Name

pointerUp()

Examples
void pointerUp(p){
    rect(p.offsetX, p.offsetY, 20, 20);
}
Description The pointerUp() method occurs when an active pointer leaves the interaction state. This can be when a mouse click is released, when a pen touch is removed or when a the physical contact of a touch point is removed.
Syntax
void pointerUp(p){ ... } 

Parameters
  A PointerEvent (p) contains the following properties
int pointerId - a unique identifier for each pointer
int offsetX - the X position of the pointer on the canvas
int offsetY - the Y position of the pointer on the canvas
int width (touch only) - the geometric width of the area the pointer is touching
int height (touch only) - the geometric height of the area the pointer is touching
int pressure (pen only) - pressure of the pen touch point
pointerType - can be MOUSE_POINTER, PEN_POINTER, or TOUCH_POINTER

Last edited Mar 20, 2013 at 6:12 AM by matthiasshapiro, version 4

Comments

No comments yet.