There is another MyCanvas at the end of this page that is used to test changing mouse listeners.
MyCanvas events occur only when the mouse is over the MyCanvas. ( mouseOut, keyUp and dragLeave occur when the mouse leaves the MyCanvas.) mouseX and mouseY track the mouse only when it is over the canvas.
You can drag images (1 or more at a time) and drop them onto either canvas. One of the images will show in the upper left in that canvas. All of the images dropped on the MyCanvas will have a thumbnail in a tray below the canvases. Then you can click on an image and it will be displayed in the MyCanvas below the first image.
The mouse events (include drag events) can be changed by just calling the function with a new handler or deleted by calling the handler function without any arguments (E. g. mouseMoved(). But unfortunately, the other events (key and drop) cannot be deleted and should not be changed. Changing and deleting event handlers is tested at the end of this page
keyIsDown() when using MyCanvas. Use the MyCanvas key properties and methods when you want a particular canvas to respond to the key press.| mouseX | The x value of the mouse's position relative the left side of the MyCanvas. Touch events also update the mouseX value. It is updated only when the mouse or touch is over the MyCanvas. Moving the mouse while touching may cause unpredictable results. |
| mouseY | The y value of the mouse's position relative to the top of the MyCanvas. Touch events also update the mouseY value. It is updated only when the mouse or touch is over the MyCanvas. |
| isOver * | True when the mouse is over the MyCanvas. Otherwise it is false. |
| mouseIsPressed | True when any mouse button is pressed and the mouse is over the MyCanvas. Otherwise it is false. |
| keyIsPressed | True when any key is pressed and the mouse is over the MyCanvas. Otherwise it is false. |
| key | The key currently being pressed. Otherwise, the empty string. |
| touches | An array with one entry for each "finger" touching the canvas. touches.length gives the number of touches. The mouseX and mouseY values are set equal to the location in touches[0]. The members in a touches entry are x, y, winX, winY, and id. At computer speeds, a separate event is normally recorded each time a finger hits the canvas. The touches array is printed in the console by touchStart(event). |
| mousePressed(event) | Callback function event is called when the mouse button is pressed. Use system variable mouseButton to determine which button was pressed last |
| mouseReleased(event) | Callback function event is called when the mouse button is released over the canvas. |
| mouseClicked(event) | Callback function event is called after the mouse button was pressed and released over the MyCanvas. The order of events: mousePressed, mouseReleased, mouseClicked. |
| doubleClicked(event) | Callback function event is called when there is a double click over the MyCanvas. |
| mouseWheel(event) | Callback function event is called every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad and the mouse is over the MyCanvas. The position of the blue square is adjusted with the mouse wheel. Unfortunately, the event also moves the canvas if that is possible. (But that seems true for the p5 canvas as well.) |
| mouseMoved(event) | Callback function event is called when the mouse is moved over the MyCanvas. |
| mouseOver(event) | Callback function event is called when the mouse enters the MyCanvas. |
| mouseOut(event) | Callback function event is called when the mouse exits the MyCanvas. |
| keyDown(event) * | Callback function event is called when
once when a key is pressed and the mouse is over the MyCanvas.
The value (including some non-ASCII keys) is placed in the
p5js system variable key. One can also use the p5js
system variable keyCode and function keyTyped()
to handle the key. Some
strange things may when more than key is pressed. Standard control
function may occur when control key combinations are pressed.
The p5.js key related properties and functions are global and not connect to a canvas in any way. Thus, you can use any of them (keyIsPressed, key, keyCode, keyPressed(), keyReleased, keyTyped(), |
| keyUp(event) * | The call back function is called even if the mouse is not over or has not been over the canvas. |
| dragOver(event) | Callback function event is called when a file is dragged over the MyCanvas. |
| dragLeave(event) | Callback function event is called when the dragged file exits the MyCanvas. |
| drop(fileEvent, [concludingEvent]) | The drop
method as a similar function to p5js drop but there some differences.
The images produced by this method are MyCanvas images. There
several functions that can be applied to the dropped files in addition
to hide. fileEvent is called once for every file dropped. After all the files are processed, concludingEvent is called to signal file loading has finished. By default, drop produces an HTML span element containing the name of the file and some other information. It the file is an image, the image is added to the span using an HTML img tag. Example: function setup();
can = createMyCanvas(400, 300);
can.drop(processFile, finished);
...
function processFile(file) {
if (fileType == "image") {
// some file info and a full sized image is displayed below the canvas
can.image(file.data, 0, 0); // display image in canvas upper left corner
can.hide(); // hide the file info and image
} else if (fileType == "text" || fileType == "application" ) {
// Some file info is displayed below the canvas.
// Note: only Javascript applications are read.
console.log(file.data);
}
}
function finished() {
print("All files are loaded");
}
Actually, "file" is an object - not a file. It has the following properties:
The file info and image (if it is an image file) is put in a span element whose id is "S" + idNum. By default, the span is placed below the MyCanvas. If the file is an image, it is processed as an HTML image inside the span. It's id is "I" + idNum. I created this object before realizing it quite similar to the p5.js image file. Several functions can be applied to the file or its image:
Caution: Modern digital cameras and phone take large pictures that can easily exceed our monitors. For example. my wife's camera takes pictures that are 3072 x 4096 and often are up to 5 mb in size. My digital camera takes 4896 x 3672 pictures and which are often nearly 9 mb in size. But my desktop monitor is only 1920 x 1080 and my wife's lap top is set to 1280 x 720. Full size pictures will typically overwhelm your monitor. Suggestions: Reduce the size of pictures. Use the hide or thumb options. Use the 5, 7, or 9 parameter options for image(). And don't load a large number of pictures into your apt. Doing so could be a significant drag on your browser. See also, browse which adds a browse button but works in the same manner. |
| touchStarted(event) | Callback function event is called when a
touch of the screen starts. MyCanvas' mouseX and mouseY are updated
before the callback function is called. Notice that if you touch the
MyCanvas the red circle start point is at the point of touch. In multi finger
touches, a separate start event will normally happen each time a finger
touches the canvas. At computer speeds, it is probably impossible to
touch more than one finger at exactly the same time.
(It appears that p5's touchStarted
is called before its mouseX and mouseY are updated. Notice the behavior
in the pink p5 canvas. When one touches the p5 canvas, the start point red
circle is located at the previous mouseX, mouseY location.) In this test, toucheStarted prints the touches array to the console. |
| touchMoved(event) | Callback function event is called every time the touch is moved. In this test, the touchMoved callback doesn't do anything. |
| touchEnded(event) | Callback function event is called every time a touch is ended. |
* This property or method is not a p5.js standard item.
let cnv;
let d;
let g;
function setup() {
cnv = createCanvas(100, 100);
cnv.mouseClicked(changeGray); // attach listener for
// activity on canvas only. The MyCanvas way of handling events
d = 10;
g = 100;
}
function draw() {
background(g);
ellipse(width / 2, height / 2, d, d);
}
// this function fires after the mouse has been
// clicked anywhere. No MyCanvas equivalent.
function mouseClicked() {
d = d + 10
}
// this function fires after the mouse has been
// clicked on canvas. The MyCanvas way to handle events
function changeGray() {
g = random(0, 255);
}
The p5.js file: eventTest.pjs
James Brink, 5/21/2020