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