loading...

Coding Hints. Part III: User Input

codeguppy profile image Adrian ・4 min read

There are two main ways to get keyboard/ mouse user input into a codeguppy.com program: via events or via the loop() function by reading built-in system variables and functions.

Events

System variables

Functions

Alt Text

Events

codeguppy.com engine can notify your program when a keyboard or mouse event occurs. All you have to do is to define the appropriate function (e.g. event handler) in your program and the system will call it automatically when that event appears.

keyPressed event

Executes once when a key is pressed

function keyPressed()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}
Enter fullscreen mode Exit fullscreen mode

keyReleased event

Executes when a key is released

function keyReleased()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}
Enter fullscreen mode Exit fullscreen mode

keyTyped event

Executes when a key is typed execept for special keys

function keyTyped()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}
Enter fullscreen mode Exit fullscreen mode

mouseClicked event

Executes once when the mouse is pressed and released

function mouseClicked()
{
    circle(mouseX, mouseY, 10);
}
Enter fullscreen mode Exit fullscreen mode

mousePressed event

Executes once when the mouse button is pressed

function mousePressed()
{
    stroke("red");
    circle(mouseX, mouseY, 10);
}
Enter fullscreen mode Exit fullscreen mode

mouseReleased event

Executes when the mouse button is released

function mouseReleased()
{
    stroke("blue");
    circle(mouseX, mouseY, 10);
}
Enter fullscreen mode Exit fullscreen mode

mouseMoved event

Executes when the mouse is moved and button is not pressed

function mouseMoved()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

mouseDragged event

Executes when the mouse is moved an a button is pressed

function mouseDragged()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

doubleClicked event

Executes when the mouse is double clicked

function doubleClicked()
{
    circle(mouseX, mouseY, 10);
}
Enter fullscreen mode Exit fullscreen mode

mouseWheel event

Executes when the user uses the mouse wheel or touchpad

function mouseWheel()
{

}
Enter fullscreen mode Exit fullscreen mode

System variables

Besides events, the system also populates automatically some system variables with appropriate event data.

You can access these variables from within the event handlers or from within the main animation / game loop().

This is usually the prefered way of getting user input when building games.

keyIsPressed

Boolean system variable that indicates if a key is pressed.

noStroke();
text("Press any key to change color", 10, 10);

function loop()
{
    let color = keyIsPressed ? "Red" : "Green";

    clear();
    fill(color);
    circle(400, 300, 100);
}
Enter fullscreen mode Exit fullscreen mode

key

System variable containing the last typed key.

function keyPressed()
{
    if (key.toLowerCase() === "s")
    {
        showScene("Game");
    }
}
Enter fullscreen mode Exit fullscreen mode

keyCode

System variable containing the code of the last key pressed.

The following constasts can be used instead of a numeric key code: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. Use them without quotes.

function keyPressed()
{
    let ENTER_KEYCODE = 13;

    if (keyCode === ENTER_KEYCODE)
    {
        showScene("Game");
    }
}
Enter fullscreen mode Exit fullscreen mode

Note: To find the keyCodes you can write a test program or use a site such as keycode.info.

mouseX

System variable containing the horizontal coordinate of the mouse coursor.

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

mouseY

System variable containing the vertical coordinate of the mouse coursor

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

pmouseX

System variable containing the previous horizontal coordinate of the mouse coursor

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

pmouseY

System variable containing the previous vertical coordinate of the mouse coursor.

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

mouseIsPressed

Boolean system variable indicating if any mouse button is pressed.
To detect which button is pressed check mouseButton variable.

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

mouseButton

System variable containing the pressed mouse button. It has one of these values LEFT, RIGHT, CENTER.

To detect if mouse is pressed check mouseIsPressed.

function loop()
{
    let drawColor = mouseButton === LEFT ? "Red" : "Blue";
    stroke(drawColor);

    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
Enter fullscreen mode Exit fullscreen mode

Functions

keyIsDown()

Use keyIsDown() function inside the loop() event to detect if the specified key is pressed. You need to specify the key code.

The following constasts can be used instead of a numeric key code: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. Use them without quotes.

let shipX = width / 2;

function loop()
{
    if (keyIsDown(LEFT_ARROW))
        shipX -= 10;

    else if (keyIsDown(RIGHT_ARROW))
        shipX += 10;

    draw();
}

function draw()
{
    clear();

    noStroke();
    fill("Black");
    text("Use LEFT and RIGHT arrows to move the ship", 10, height - 5);

    fill("Magenta");
    rect(shipX, height - 40, 100, 20);
}
Enter fullscreen mode Exit fullscreen mode

Note: To find key codes you can use a site such as keycode.info

keyWentDown()

keyWentDown() is also intended for loop() event and is similar to keyIsDown().

The difference is that this function returns true just once per key pressed. To retrigger the function, the user need to release the key and press it again.

let shipX = width / 2;
let fireLaser = false;

function loop()
{
    if (keyIsDown(LEFT_ARROW))
        shipX -= 10;

    else if (keyIsDown(RIGHT_ARROW))
        shipX += 10;

    fireLaser = false;

    if (keyWentDown(32)) // SPACE key
        fireLaser = true;

    draw();
}

function draw()
{
    clear();

    noStroke();
    fill("Black");
    text("Use LEFT and RIGHT arrows to move the ship", 10, height - 5);

    fill("Magenta");
    rect(shipX, height - 40, 100, 20);

    if (fireLaser)
    {
        stroke("Red");
        strokeWeight(2);
        line(shipX + 50, height - 40, shipX + 50, 0);
    }
}
Enter fullscreen mode Exit fullscreen mode

This article is part of a series of mini-articles containing JavaScript coding hints applicable to codeguppy.com environment.

Discussion

pic
Editor guide