Introduction

In learning activity 4 we told p5 to call a function named changeColor whenever the mouse was pressed on a button. We did this by writing the line of code below (in pink):

var button = createButton(); 
//When the mouse is pressed over the button, call the changeColor function
button.mousePressed( changeColor ); 

changeColor is a callback function, and the pink code above attaches it to the mousePressed event. Apart from mousePressed, there are other events that we can attach callback functions to:

• mouseOver ––the mouse is over a certain element.
• mouseOut ––the mouse leaves the area of an element.
• input ––the user has changed the value of an element (they dragged a slider, or typed into an input field).
• changed ––the user has finished changing the value of an element (they have dragged the slider and then released it, or typed text and then hit the Enter key).

Above, when we say 'an element' we mean a button, a slider, a paragraph, an input field, an image, or any other DOM element. This means we can tell p5 what to do when the user clicks on a paragraph, moves the mouse over an image, changes the value of a slider, and any other event/element combination.

Instructions

1) Mouse Over and Mouse Out

mouseOver and mouseOut are triggered by the browser when the mouse enters or leaves the area of an HTML element. Try hovering over this button, slider, and textfield, and look at the label below it: when an event is triggered, you will see its name there.

hover on me
event:

event:

event:

Let's create a header element and have its text change when the user hovers on it.

In the code above, we start by creating the header element (line 5), and storing it in a variable named "header". Initially, the content of header is "Hover on me". Then we attach a callback to the header's mouseOver event —a function named changeText (line 6). On line 15 we define this function, which changes the content of header to the text "too late"(line 14).

2) Changed and Input events

The input and change events happen when the value of an element changes. Each time you drag a slider ever so slightly, an input event is triggered. When you finish your action of changing a value ––when you drag a slider and then release it–– a change event is triggered..

The sketch below illustrates the difference between input and changed:

• whenever you drag the slider, an input event happens, and the x position of the white circle is set to the value of the slider.
• when you finally release the slider, a changed event happens, and the gravity variable is set so that the white circle falls.

Notice that the input event is triggered constantly: whenever there is even a slight change in the value of the slider, the white circle moves. But the changed event is only triggered when you release the slider.

Let's write the code for this sketch. First, we draw an ellipse at an (x, y) position.

var x = 0;
var y = 40;

function setup(){
    createCanvas(600, 200);
}

function draw(){
    background(0);
    ellipse(x, y, 40, 40);
}

Then we add a slider, and store it in a variable. We position it under the canvas, and attach a callback function (named updateX) to the slider's input event. Inside updateX, we set the x position of the ellipse to the value of the slider.

var x = 0;
var y = 40;

var slider;

function setup(){
    createCanvas(600, 200);
    
    slider = createSlider(0, 600, 10);
    slider.position(200, 620);
    
    slider.input(updateX);
}

function draw(){
    background(0);
    ellipse(x, y, 40, 40);
}

function updateX(){
    x = slider.value();
}

Next, we attach a callback function to the changed event of the slider, and call it "drop". The drop function will be executed only when the user releases the slider. We define the drop function at the bottom.

var x = 0;
var y = 40;
var slider;

function setup(){
    createCanvas(600, 200);
    
    slider = createSlider(0, 600, 10);
    slider.position(200, 620);
    
    slider.input(updateX);

    slider.changed(drop);
}

function draw(){
    background(0);
    ellipse(x, y, 40, 40);
}

function updateX(){
    x = slider.value();
}


function drop(){
    
}

Our goal is to have the ball drop when we release the slider. To make the ball move down, we can add a value to its y position every time the draw loop runs. Let's call this value "gravity". We want it to start at 0, so that the ball doesn't move when the sketch starts. Then, inside of the drop function, we can set it to a higher value (like 10). This way the ball will start moving only when the changed event is triggered, which causes the drop function to run.

var x = 0;
var y = 40;

var gravity = 0;

var slider;

function setup(){
    createCanvas(600, 200);
    
    slider = createSlider(0, 600, 10);
    slider.position(200, 620);
    
    slider.input(updateX);
    slider.changed(drop);
}

function draw(){
    background(0);
    
    y = y + gravity;
    ellipse(x, y, 40, 40);
}

function updateX(){
    x = slider.value();
}

function drop(){
    gravity = 10;
}

//maybe add reset button

Exercise: Add a Reset button to your sketch. When clicked, it should set the ball back to its initial position, and gravity back to zero.