+ *
*
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let bgColor = 50;
+ * let fillColor = 255;
+ * let borderWidth = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(bgColor);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * fill(0);
+ * noStroke();
+ *
+ * // Display the number of touch points.
+ * text(touches.length, 50, 20);
+ *
+ * // Style the touch points.
+ * fill(fillColor);
+ * stroke(0);
+ * strokeWeight(borderWidth);
+ *
+ * // Display the touch points as circles.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ * // Set the background color to a random grayscale value.
* function touchStarted() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
+ * bgColor = random(80, 255);
* }
- * describe('no image displayed');
- *
- *
*
- *
- *
- * // returns a TouchEvent object
- * // as a callback argument
- * function touchStarted(event) {
- * console.log(event);
+ * // Set the fill color to a random grayscale value.
+ * function touchEnded() {
+ * fillColor = random(0, 255);
+ * }
+ *
+ * // Set the stroke weight.
+ * function touchMoved() {
+ * // Increment the border width.
+ * borderWidth += 0.1;
+ *
+ * // Reset the border width once it's too thick.
+ * if (borderWidth > 20) {
+ * borderWidth = 0.5;
+ * }
* }
- * describe('no image displayed');
*
*
*/
@@ -139,29 +293,90 @@ p5.prototype._ontouchstart = function(e) {
};
/**
- * The
touchMoved() function is called every time a touch move is registered.
- * If no
touchMoved() function is defined, the
mouseDragged() function will
- * be called instead if it is defined.
- * Browsers may have different default behaviors attached to various touch
- * events. To prevent any default behavior for this event, add "return false"
- * to the end of the method.
+ * A function that's called when the user touches the screen and moves.
+ *
+ * Declaring the function `touchMoved()` sets a code block to run
+ * automatically when the user touches a touchscreen device and moves:
+ *
+ *
+ * function touchMoved() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The
touches array will be updated with the most
+ * recent touch points when `touchMoved()` is called by p5.js:
+ *
+ *
+ * function touchMoved() {
+ * // Paint over the background.
+ * background(200);
+ *
+ * // Mark each touch point while the user moves.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ *
+ * The parameter, event, is optional. `touchMoved()` will be passed a
+ *
TouchEvent
+ * object with properties that describe the touch event:
+ *
+ *
+ * function touchMoved(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices,
mouseDragged() will
+ * run when the user’s touch points move if `touchMoved()` isn’t declared. If
+ * `touchMoved()` is declared, then `touchMoved()` will run when a user’s
+ * touch points move and
mouseDragged() won’t.
+ *
+ * Note:
touchStarted(),
+ *
touchEnded(), and
+ * `touchMoved()` are all related.
+ *
touchStarted() runs as soon as the user
+ * touches a touchscreen device.
touchEnded()
+ * runs as soon as the user ends a touch. `touchMoved()` runs repeatedly as
+ * the user moves any touch points.
*
* @method touchMoved
- * @param {TouchEvent} [event] optional TouchEvent callback argument.
+ * @param {TouchEvent} [event] optional TouchEvent argument.
+ *
* @example
*
*
- * // Move your finger across the page
- * // to change its value
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
*
* let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square becomes lighter when the user touches the screen and moves.'
+ * );
+ * }
+ *
* function draw() {
+ * background(200);
+ *
+ * // Style the square.
* fill(value);
- * rect(25, 25, 50, 50);
- * describe('50-by-50 black rect turns lighter with touch until white. resets');
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
* }
+ *
* function touchMoved() {
- * value = value + 5;
+ * // Update the grayscale value.
+ * value += 5;
+ *
+ * // Reset the grayscale value.
* if (value > 255) {
* value = 0;
* }
@@ -169,25 +384,66 @@ p5.prototype._ontouchstart = function(e) {
*
*
*
- *
+ *
*
- * function touchMoved() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let bgColor = 50;
+ * let fillColor = 255;
+ * let borderWidth = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+ * );
* }
- * describe('no image displayed');
- *
- *
*
- *
- *
- * // returns a TouchEvent object
- * // as a callback argument
- * function touchMoved(event) {
- * console.log(event);
+ * function draw() {
+ * background(bgColor);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * fill(0);
+ * noStroke();
+ *
+ * // Display the number of touch points.
+ * text(touches.length, 50, 20);
+ *
+ * // Style the touch points.
+ * fill(fillColor);
+ * stroke(0);
+ * strokeWeight(borderWidth);
+ *
+ * // Display the touch points as circles.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ * // Set the background color to a random grayscale value.
+ * function touchStarted() {
+ * bgColor = random(80, 255);
+ * }
+ *
+ * // Set the fill color to a random grayscale value.
+ * function touchEnded() {
+ * fillColor = random(0, 255);
+ * }
+ *
+ * // Set the stroke weight.
+ * function touchMoved() {
+ * // Increment the border width.
+ * borderWidth += 0.1;
+ *
+ * // Reset the border width once it's too thick.
+ * if (borderWidth > 20) {
+ * borderWidth = 0.5;
+ * }
* }
- * describe('no image displayed');
*
*
*/
@@ -210,27 +466,86 @@ p5.prototype._ontouchmove = function(e) {
};
/**
- * The
touchEnded() function is called every time a touch ends. If no
- *
touchEnded() function is defined, the
mouseReleased() function will be
- * called instead if it is defined.
- * Browsers may have different default behaviors attached to various touch
- * events. To prevent any default behavior for this event, add "return false"
- * to the end of the method.
+ * A function that's called once each time a screen touch ends.
+ *
+ * Declaring the function `touchEnded()` sets a code block to run
+ * automatically when the user stops touching a touchscreen device:
+ *
+ *
+ * function touchEnded() {
+ * // Code to run.
+ * }
+ *
+ *
+ * The
touches array will be updated with the most
+ * recent touch points when `touchEnded()` is called by p5.js:
+ *
+ *
+ * function touchEnded() {
+ * // Paint over the background.
+ * background(200);
+ *
+ * // Mark each remaining touch point when the user stops
+ * // a touch.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ *
+ * The parameter, event, is optional. `touchEnded()` will be passed a
+ *
TouchEvent
+ * object with properties that describe the touch event:
+ *
+ *
+ * function touchEnded(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }
+ *
+ *
+ * On touchscreen devices,
mouseReleased() will
+ * run when the user’s touch ends if `touchEnded()` isn’t declared. If
+ * `touchEnded()` is declared, then `touchEnded()` will run when a user’s
+ * touch ends and
mouseReleased() won’t.
+ *
+ * Note:
touchStarted(),
+ * `touchEnded()`, and
touchMoved() are all
+ * related.
touchStarted() runs as soon as the
+ * user touches a touchscreen device. `touchEnded()` runs as soon as the user
+ * ends a touch.
touchMoved() runs repeatedly as
+ * the user moves any touch points.
*
* @method touchEnded
- * @param {TouchEvent} [event] optional TouchEvent callback argument.
+ * @param {TouchEvent} [event] optional `TouchEvent` argument.
+ *
* @example
*
*
- * // Release touch within the image to
- * // change the value of the rectangle
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
*
* let value = 0;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with a black square at its center. The inner square switches color between black and white each time the user stops touching the screen.'
+ * );
+ * }
+ *
* function draw() {
+ * background(200);
+ *
+ * // Style the square.
* fill(value);
- * rect(25, 25, 50, 50);
- * describe('50-by-50 black rect turns white with touch.');
+ *
+ * // Draw the square.
+ * square(25, 25, 50);
* }
+ *
+ * // Toggle colors when a touch ends.
* function touchEnded() {
* if (value === 0) {
* value = 255;
@@ -241,25 +556,66 @@ p5.prototype._ontouchmove = function(e) {
*
*
*
- *
+ *
*
+ * // On a touchscreen device, touch the canvas using one or more fingers
+ * // at the same time.
+ *
+ * let bgColor = 50;
+ * let fillColor = 255;
+ * let borderWidth = 0.5;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'A gray square with the number 0 at the top-center. The number tracks the number of places the user is touching the screen. Circles appear at each touch point and change style in response to events.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(bgColor);
+ *
+ * // Style the text.
+ * textAlign(CENTER);
+ * textSize(16);
+ * fill(0);
+ * noStroke();
+ *
+ * // Display the number of touch points.
+ * text(touches.length, 50, 20);
+ *
+ * // Style the touch points.
+ * fill(fillColor);
+ * stroke(0);
+ * strokeWeight(borderWidth);
+ *
+ * // Display the touch points as circles.
+ * for (let touch of touches) {
+ * circle(touch.x, touch.y, 40);
+ * }
+ * }
+ *
+ * // Set the background color to a random grayscale value.
+ * function touchStarted() {
+ * bgColor = random(80, 255);
+ * }
+ *
+ * // Set the fill color to a random grayscale value.
* function touchEnded() {
- * ellipse(mouseX, mouseY, 5, 5);
- * // prevent default
- * return false;
+ * fillColor = random(0, 255);
* }
- * describe('no image displayed');
- *
- *
*
- *
- *
- * // returns a TouchEvent object
- * // as a callback argument
- * function touchEnded(event) {
- * console.log(event);
+ * // Set the stroke weight.
+ * function touchMoved() {
+ * // Increment the border width.
+ * borderWidth += 0.1;
+ *
+ * // Reset the border width once it's too thick.
+ * if (borderWidth > 20) {
+ * borderWidth = 0.5;
+ * }
* }
- * describe('no image displayed');
*
*
*/