Coding hints III: User Input

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

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);
}

keyReleased event

Executes when a key is released

function keyReleased()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}

keyTyped event

Executes when a key is typed execept for special keys

function keyTyped()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}

mouseClicked event

Executes once when the mouse is pressed and released

function mouseClicked()
{
    circle(mouseX, mouseY, 10);
}

mousePressed event

Executes once when the mouse button is pressed

function mousePressed()
{
    stroke("red");
    circle(mouseX, mouseY, 10);
}

mouseReleased event

Executes when the mouse button is released

function mouseReleased()
{
    stroke("blue");
    circle(mouseX, mouseY, 10);
}

mouseMoved event

Executes when the mouse is moved and button is not pressed

function mouseMoved()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}

mouseDragged event

Executes when the mouse is moved an a button is pressed

function mouseDragged()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}

doubleClicked event

Executes when the mouse is double clicked

function doubleClicked()
{
    circle(mouseX, mouseY, 10);
}

mouseWheel event

Executes when the user uses the mouse wheel or touchpad

function mouseWheel()
{

}

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);
}

key

System variable containing the last typed key.

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

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");
    }
}

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);
}

mouseY

System variable containing the vertical coordinate of the mouse coursor

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

pmouseX

System variable containing the previous horizontal coordinate of the mouse coursor

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

pmouseY

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

function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}

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);
}

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);
}

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);
}

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:

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

Read more blog articles Browse JavaScript projects

About codeguppy

CodeGuppy is a FREE coding platform for schools and independent learners. If you don't have yet an account with codeguppy.com, you can start by visiting the registration page and sign-up for a free account. Registered users can access tons of fun projects!

Follow @codeguppy on Twitter for coding tips and news about codeguppy platform. For more information, please feel free to contact us.