Pi.js provides a range of input functions that allow you to handle user input from the keyboard, mouse, touch screen, and gamepads. These functions make it easy to create engaging, interactive experiences that respond to user input in real-time. Whether you’re building a simple game or a complex demo, pi.js provides the tools you need to create dynamic, responsive user interfaces. In this article, we’ll explore the various input functions provided by pi.js and how they can be used to create engaging games and demos.
input
The input function prompts the user to type input from the keyboard and press enter when done. It takes an optional parameter that specifies the message to display to the user. The function returns a string representing the input entered by the user. You can cancel and input prompt using the cancelInput function.
$.screen( "300x200" );
askQuestions();
async function askQuestions() {
let name = await $.input( "What is your name? " );
let age = await $.input( "How old are you? ", null, null, true, true, false, 3 );
$.print( "Your name is " + name + " you are " + age + " years old." );
}inkey
The inkey function reads any keys currently being pressed by the keyboard. It returns a string representing the key being pressed. This function is useful for games that require the player to hold down keys to move continuously.
$.screen( "300x200" );
requestAnimationFrame( run );
function run() {
let keys = $.inkey();
$.cls();
$.print( "Press any key" );
for( const key in $.inkey() ) {
$.print( "--------------------------" );
$.print( "key: " + keys[ key ].key );
$.print( "location: " + keys[ key ].location );
$.print( "code: " + keys[ key ].code );
}
requestAnimationFrame( run );
}onkey
The onkey function triggers an event when a key is pressed down or released. It takes three parameters: the key code or key name to listen for, the mode which can be up or down, and a function to call when the event is triggered.
$.screen( "300x200" );
$.print( "Press any key." );
$.print( "Press q to stop" );
$.onkey( "any", "down", keyPress );
$.onkey( "q", "down", stopPress, true );
// Key press function
function keyPress( key ) {
$.print( "You pressed " + key.key + "!" );
}
// Stop key press function
function stopPress() {
$.print( "You pressed q! Stopping." );
$.offkey( "any", "down", keyPress );
}inmouse
The inmouse function returns an object with properties x and y, and buttons representing the current position of the mouse cursor on the screen and the state of the buttons.
$.screen( "300x200" );
requestAnimationFrame( run );
let tail = [];
let c = 7;
let pal = $.getPal();
function run() {
$.cls();
const mouse = $.inmouse();
if( mouse.buttons > 0 ) {
c = ( c + 1 ) % pal.length;
if( c === 1 ) {
c = 1;
}
}
if( mouse.lastX !== undefined && mouse.lastY !== undefined ) {
tail.push( [ mouse.lastX, mouse.lastY, c ] );
if( tail.length > 50 ) {
tail.shift();
}
}
let lastPt = null;
for( const pt of tail ) {
if( lastPt !== null ) {
$.setColor( pt[ 2 ] );
$.line( lastPt[ 0 ], lastPt[ 1 ], pt[ 0 ], pt[ 1 ] );
}
lastPt = pt;
}
requestAnimationFrame( run );
}onmouse
The onmouse function triggers an event when the mouse is moved or a button is pressed down or released. It requires two parameters: the event type to listen for (e.g. “up”, “down”, “move”), and a function to call when the event is triggered. There are also three optional parameters (e.g. once, hitBox, and customData).
$.screen( "300x200" );
$.print( "Move mouse to paint screen, click to stop." );
$.onmouse( "move", mouseMove );
$.onmouse( "up", mouseStop, true );
// Mouse move function
function mouseMove( data ) {
$.setPosPx( data.x, data.y );
let pos = $.getPos();
$.setPos( pos.col, pos.row );
$.setColor( 8 );
$.print( "+", true );
}
// Mouse stop function
function mouseStop() {
$.setColor( 14 );
let pos = $.getPos();
$.setPos( pos.col - 4, pos.row );
$.print( "Stopped!", true );
$.offmouse( "move", mouseMove );
}intouch
The intouch function returns an array of touch objects representing the current touch points on the screen.
$.screen( "300x200" );
requestAnimationFrame( run );
function run() {
const touches = $.intouch();
for( const touch of touches ) {
$.print( `Touch ${touch.id} at ${touch.x}, ${touch.y}` );
}
requestAnimationFrame( run );
}ontouch
The ontouch function triggers an event when a touch point is added, moved, or removed from the screen. It takes two parameters: the event type to listen for (e.g. “touchstart”, “touchmove”, “touchend”), and a function to call when the event is triggered.
$.screen( "300x200" );
$.print( "Touch to paint screen, touch end to stop." );
$.ontouch( "move", touchMove );
$.ontouch( "end", touchStop, true );
// Touch move function receives touchData and optional customData
function touchMove( touchData, customData ) {
$.setPosPx( touchData[ 0 ].x, touchData[ 0 ].y );
const pos = $.getPos();
$.setPos( pos.col, pos.row );
$.setColor( 8 );
$.print( "+", true );
}
// touch stop function receives touchData and optional customData
function touchStop( touchData, customData ) {
$.setColor( 14 );
const pos = $.getPos();
$.setPos( pos.col - 4, pos.row );
$.print( "Stopped!", true );
$.offtouch( "move", touchMove );
}ingamepad
The ingamepad function returns an array of gamepad objects representing the currently connected gamepads.
$.screen( "300x200" );
$.setColor( 15 );
let x = 150;
let y = 100;
let c = 7;
requestAnimationFrame( run );
function run() {
let factor = 1.5;
let pads = $.ingamepad();
$.cls();
$.setColor( c );
if( pads.length > 0 ) {
if( pads[ 0 ].getButtonJustPressed( 0 ) || pads[ 0 ].getButtonJustPressed( 1 ) ) {
c += 1;
if( c > 240 ) {
c = 1;
}
}
x = Math.min( Math.max( x + pads[ 0 ].axes[ 0 ] * factor, 0 ), 299 );
y = Math.min( Math.max( y + pads[ 0 ].axes[ 1 ] * factor, 0 ), 199 );
$.circle( Math.floor( x ), Math.floor( y ) , 10 );
$.pset( Math.floor( x ), Math.floor( y ) );
} else {
$.print( "Connect gamepad and move axes to begin" );
}
requestAnimationFrame( run );
}inpress
The inpress function works with both mouse and touch events and returns an object with properties x and y representing the current position of the mouse cursor or touch point.
$.screen( "300x200" );
$.setPinchZoom( false );
requestAnimationFrame( run );
let tail = [];
function run() {
const press = $.inpress();
$.cls();
// Draw press indicator
if( press.buttons > 0 ) {
$.setColor( 15 );
$.circle( press.x, press.y, 10 );
// Draw trail while dragging
if(
press.lastX !== undefined && press.lastY !== undefined &&
press.action === "move"
) {
tail.push( [ press.x, press.y ] );
if( tail.length > 50 ) {
tail.shift();
}
let lastPt = null;
for( const pt of tail ) {
if( lastPt !== null ) {
$.setColor( 7 );
$.line( lastPt[ 0 ], lastPt[ 1 ], pt[ 0 ], pt[ 1 ] );
}
lastPt = pt;
}
}
// Show input type
$.setColor( 2 );
$.print( `Input: ${press.type}` );
} else {
$.print( "Press and drag to draw" );
tail = [];
}
requestAnimationFrame( run );
}onpress
The onpress function triggers an event when a mouse button is pressed or released, or a touch point is added or removed from the screen.
$.screen( "300x200" );
$.print(
"Move mouse or touch to paint screen," +
" click/touch up to stop."
);
$.onpress( "move", pressMove );
$.onpress( "up", pressStop, true );
// Press move function
function pressMove( data ) {
$.setPosPx( data.x, data.y );
var pos = $.getPos();
$.setPos( pos.col, pos.row );
$.setColor( 8 );
$.print( "+", true );
}
// Press stop function
function pressStop() {
$.setColor( 14 );
var pos = $.getPos();
$.setPos( pos.col - 4, pos.row );
$.print( "Stopped!", true );
$.offpress( "move", pressMove );
}Please checkout the Pi.js Reference page to see a full listing of input functions.