Pi.js Reference

$.screen( "300x200" );
const indices = $.addPalColors( [ "#ee2233", "gold", [ 10, 200, 30 ] ] );
for( const i of indices ) {
	$.setColor( i );
	$.print( `Color: ${i}`, false, true );
}

const invert = $.createShader( `#version 300 es
precision mediump float;
in vec2 v_texCoord;
uniform sampler2D u_texture;
out vec4 fragColor;
void main() {
	vec4 color = texture(u_texture, v_texCoord);
	fragColor = vec4(color.a - color.rgb, color.a);
}` );

$.screen( "320x200" );
$.rect( 10, 10, 40, 40, 4 );
$.applyShader( invert );
$.line( 0, 0, 50, 50 );

$.screen( "300x200" );
$.arc( 150, 100, 50, 45, 270 );

$.screen( "300x200" );
$.bezier( 15, 10, 45, 135, 195, 75, 280, 185 );

$.screen( "300x200" );
$.loadImage( "media/player.png", "player" );
$.ready( () => {
	const img = $.getImage( "player" );
	$.blitImage( img, 150, 100, null, 0.5, 0.5, 1, 1, 0 );
} );

$.screen( "128x80" );
$.loadSpritesheet( "media/tiles.png", "tiles", 16, 16, 0 );
let tilesData;
let pal;
$.ready( () => {
	pal = $.getPal();
	tilesData = $.getSpritesheetData( "tiles" );
	let keys = "0123456789abcdefghijkl";
	let keyMap = {};
	keys.split( "" ).forEach(
		( key, val ) => keyMap[ key ] = val
	);
	let map = [
		"00ijk0000",
		"00001222",
		"07008999",
		"0012c996",
		"e0899d99",
	];
	let x = 0;
	let y = 0;
	for( const row of map ) {
		const cols = row.split( "" );
		for( const tile of cols ) {
			const frame = keyMap[ tile ];
			$.blitSprite( "tiles", frame, x, y );
			x += 16;
		}
		x = 0;
		y += 16;
	}
} );

$.screen( "320x200" );
$.setFont( 1 );
const width = $.calcWidth( "Hello World" );
$.print( `"Hello World" is ${width} pixels wide` );

$.screen( "300x200" );
$.print( "\n" );
$.input( "What is your name? ", null );
$.onKey( "Escape", "down", function () {
	$.print( "\nInput Canceled" );
	$.cancelInput();
}, true );

$.screen( "300x200" );
$.canvas().style.backgroundColor = "purple";
$.print( "\n\nThe background is now purple." );

$.screen( "300x200" );
$.circle( 150, 100, 50, "red" );

$.screen( "300x200" );
$.print( "Move mouse or touch to paint screen click/touch up to stop." );
$.onPress( "move", pressMove );
$.onPress( "up", pressStop );

// 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 );
	$.clearEvents();
}

$.screen( "128x80" );
$.paint( 0, 0, 4 );
$.print( "The screen is red" );
$.cls();
$.print( "The screen is clear" );
$.paint( 0, 10, 1 );
$.print( "The screen is blue" );
$.cls( 0, 16, 128, 80 );
$.print( "The screen is partially clear" );

const red = $.createColor( "red" );
$.print( `[ ${red.array.join( ", " )} ]` );

$.screen( "300x200" );
$.filterImg( ( color, x, y ) => {
	color[ 0 ] = ( x * y ) % 255;
	color[ 1 ] = ( x * y * 2 ) % 255;
	color[ 2 ] = ( x * y * 3 ) % 255;
	color[ 3 ] = 255;
	return true;
}, 0, 0, 50, 50 );

// Wait a tick because filterImg happens at end of frame
setTimeout( () => {
	const image1 = $.createImageFromScreen( { "x1": 0, "y1": 0, "x2": 50, "y2": 50 } );
	$.createImageFromScreen( "image2", 15, 15, 35, 35 );
	$.drawImage( image1, 100, 0 );
	$.drawImage( "image2", 200, 0 );
}, 0 );

const invert = $.createShader( `#version 300 es
precision mediump float;
in vec2 v_texCoord;
uniform sampler2D u_texture;
out vec4 fragColor;
void main() {
	vec4 color = texture(u_texture, v_texCoord);
	fragColor = vec4(color.a - color.rgb, color.a);
}` );

$.screen( "320x200" );
$.rect( 10, 10, 40, 40, 11 );
$.applyShader( invert );
$.line( 0, 0, 50, 50 );

$.screen( "300x200" );
$.pset( 150, 100 );
$.draw( "C2 R15 D15 L30 U15 R15" );				// Draw House
$.draw( "B G4 C1 L6 D6 R6 U6 BG3 P1" ); 		// Draw Window
$.draw( "B E3 B R14 C1 L6 D6 R6 U6 BG3 P1" ); 	// Draw Window
$.draw( "B E3 B R1 P2" );						// Paint House
$.draw( "B E4 B U C6 H15 G15 B R5 P6" );		// Draw Roof

$.screen( "300x200" );
$.loadImage( "media/player.png", "player" );
$.ready( () => {
	$.drawImage( "player", 150, 100, null, 0.5, 0.5, 1, 1, 0 );
} );

$.screen( "150x100" );
$.loadSpritesheet( "media/cat_sprite.png", "cat", 34, 34, 1 );
let catData;
$.ready( () => {
	catData = $.getSpritesheetData( "cat" );
	requestAnimationFrame( animate );
} );

function animate( t ) {
	$.cls();
	const frame = Math.round( t / 100 ) % catData.frameCount;
	$.drawSprite( "cat", frame, 75, 50, null, 0.5, 0.5 );
	requestAnimationFrame( animate );
}

$.screen( "300x200" );
$.ellipse( 150, 100, 50, 80, "blue" );

$.screen( "300x200" );
$.circle( 150, 100, 50, "red" );
$.filterImg( function ( color, x, y ) {
	color[ 0 ] = color[ 0 ] - Math.round( Math.tan( ( x + y ) / 10 ) * 128 );
	color[ 1 ] = color[ 1 ] + Math.round( Math.cos( x / 7 ) * 128 );
	color[ 2 ] = color[ 2 ] + Math.round( Math.sin( y / 5 ) * 128 );
	return color;
} );

$.screen( "300x200" );
$.circle( 150, 110, 50, 4 );

// Get indices
const indices = $.get( 105, 85, 5, 5 );
$.print( "indices = [" );
for( let i = 0; i < indices.length; i++ ) {
	$.print( "    [ " + indices[ i ].join( ", " ) + " ]," );
}
$.print( "]" );

// Get color values
const colorNames = {
	"rgba(0, 0, 0, 0)": "black",
	"rgba(170, 170, 170, 255)": "gray",
	"rgba(170, 0, 0, 255)": "red",
};
const mapColors = c => colorNames[ `rgba(${c.array.join( ", " )})` ];
const colors = $.get( 105, 85, 5, 5, 1, false );
$.setPos( 0, 15 );
$.print( "colors = [" );
for( let i = 0; i < colors.length; i++ ) {
	$.print( "    [ " +
		colors[ i ].map( mapColors ).join( ", " ) + " ],"
	);
}
$.print( "]" );
$.put( indices, 20, 80 );

$.screen( "320x200" );
$.screen( "320x200" );
const screens = $.getAllScreens();
$.print( `Number of screens = ${screens.length}` );

$.screen( "300x200" );
$.circle( 150, 110, 50, 4 );

getStuff( true );
getStuff( false );

async function getStuff( asIndex ) {

	// Color value names
	const colorNames = {
		"rgba(0, 0, 0, 0)": "black",
		"rgba(170, 170, 170, 255)": " gray",
		"rgba(170, 0, 0, 255)": "  red",
	};
	const mapColors = c => colorNames[ `rgba(${c.array.join( ", " )})` ];

	// Get stuff
	const stuffName = asIndex ? "indices" : "colors";
	const stuff = await $.getAsync( 105, 85, 5, 5, 1, asIndex );
	$.print( `${stuffName} = [` );
	for( let i = 0; i < stuff.length; i++ ) {
		if( asIndex ) {
			$.print( `	[ ${stuff[ i ].join( ", " )} ],` );
		} else {
			$.print( `	[ ${stuff[ i ].map( mapColors ).join( ", " )} ],` );
		}
	}
	$.print( "]" );

	if( asIndex ) {
		$.put( stuff, 80, 85 );
		$.print( "\n\n\n\n\n\n" );
	}
}

$.screen( "300x200" );
const fonts = $.getAvailableFonts();
for( const font of fonts ) {
	$.setFont( font.id );
	$.print( `Font ${font.id}: ${font.width}x${font.height}\n` );
}

$.screen( "300x200" );
$.setColor( 2)
$.print( `Current Color Index: ${$.getColor( true )}` );
$.print( `Current Color Value: [${$.getColor( false ).array.join( ", " )}]` );

$.screen( "320x200" );
$.setFont( 1 );
const cols = $.getCols();
$.print( `Screen fits ${cols} columns` );

$.setDefaultColor( 9 );
$.print( `Default Color Index: ${$.getDefaultColor( true )}` );
$.print( `Default Color Value: [${$.getDefaultColor( false ).array.join( ", " )}]` );

$.screen( "300x200" );
var pal = $.getDefaultPal();
$.setColor( 4 );
$.print( `Color 4 in default pal = [ ${pal[ 4 ].array.join( ", " )} ]` );

$.screen( "300x200" );
$.loadImage( "media/player.png", "player" );
$.ready( () => {
	const img = $.getImage( "player" );
	$.drawImage( img, 150, 100, null, 0.5, 0.5, 1, 1, 0 );
} );

$.screen("300x200");
var pal = $.getPal();
$.setColor( 2 );

// Note pal[ 1 ] = $.setColor( 2 ) because of the missing 0 index from $.getPal.
$.print( "[ " + pal[ 1 ].array.join( ", " ) + " ]" );

$.screen( "300x200" );
const color = $.getPalColor( 2 );
$.setColor( color );
$.print( "Color 2 = [" + color.array.join( ", " ) + "]" );

$.screen( "300x200" );
const idx = $.getPalIndex( "#FF0000", 0.25 );
$.setColor( idx );
$.print( "Color Index = " + idx );

$.screen( "300x200" );
$.circle( 150, 100, 50, "blue" );
const color = $.getPixel( 150, 100 );
$.print( `Circle fill color: [${color.array.join( ", " )}]` );
const idx = $.getPixel( 150, 100, true );
$.print( `Circle fill color index: ${idx}` );

$.screen( "300x200" );
$.circle( 150, 100, 50, "blue" );
getCircleFillColor();

async function getCircleFillColor() {
	const color = await $.getPixelAsync( 150, 100 );
	$.print( `Circle fill color: [${color.array.join( ", " )}]` );
	const idx = await $.getPixelAsync( 150, 100, true );
	$.print( `Circle fill color index: ${idx}` );
}

const plugins = $.getPlugins();
$.screen( "300x200" );
for( const plugin of plugins ) {
	$.print( `Plugin:      ${plugin.name} (${plugin.version}): ${plugin.state}` );
	$.print( `Description: ${plugin.description}` );
	$.print();
}

$.screen( "320x200" );
$.setFont( 1 );
$.print( "Hello" );
const pos = $.getPos();
$.print( `Cursor at column ${pos.col}, row ${pos.row}` );

$.screen( "320x200" );
$.setFont( 1 );
$.print( "Hello" );
const pos = $.getPosPx();
$.print( `Cursor at ${pos.x}, ${pos.y} pixels` );

$.screen( "320x200" );
$.setFont( 1 );
const rows = $.getRows();
$.print( `Screen fits ${rows} rows` );

$.screen( "320x200" );
$.screen( "320x200" );
const screen0 = $.getScreen( 0 );
screen0.print( `Screen: ${screen0.id}` );
const screen1 = $.getScreen( 1 );

// Set screen1 to have a transparent background so it doesn't cover screen 0
screen1.setBgColor( 0 );
screen1.setPosPx( 0, 100 );
screen1.print( `Screen: ${screen1.id}` );
$.print( "Active Screen" );

const invert = $.createShader( `#version 300 es
precision mediump float;
in vec2 v_texCoord;
uniform sampler2D u_texture;
uniform float u_gain;
uniform vec3 u_tint;
out vec4 fragColor;
void main() {
	vec4 color = texture(u_texture, v_texCoord);
	fragColor = vec4((1.0 - color.rgb) * u_tint * u_gain, color.a);
}`, {
	"u_gain": 0.75,
	"u_tint": [ 1, 0.8, 0.6 ]
} );

$.screen( "640x480" );
$.circle( 320, 240, 80, "red" );
$.applyShader( invert, { "u_gain": 0.5 } );
const info = $.getShaderInfo( invert );

$.setFont( 3 );
$.print( `Shader: ${info.id}` );
$.print();
$.print( "Source:" );
$.print( info.fragmentSource );
$.print();
$.print( "Default uniforms:" );
$.print( `  u_gain: ${info.uniforms.u_gain}` );
$.print( `  u_tint: ${info.uniforms.u_tint.join( ", " )}` );
$.print();
$.print( `Compiled screens: ${info.compiledScreenCount}` );
$.print( `Queued passes: ${info.queuedPassCount}` );
$.print( `Display screens: ${info.displayScreenCount}` );
$.print();
if( info.screen ) {
	$.print( "Current screen:" );
	$.print( `  Compiled: ${info.screen.compiled}` );
	$.print( `  Queued passes: ${info.screen.queuedPassCount}` );
	$.print( `  Display active: ${info.screen.displayActive}` );
	$.print( "  Reflected uniforms:" );
	for( const uniform of info.screen.uniforms ) {
		$.print( `    ${uniform.name}: ${uniform.type}, size ${uniform.size}, ` +
			`reserved ${uniform.reserved}` );
	}
}

$.screen( "300x200" );
$.loadSpritesheet( {
	"src": "media/cat_sprite.png",
	"name": "cat",
	"width": 34,
	"height": 34,
	"margin": 1
} );
$.ready( () => {
	const data = $.getSpritesheetData( { "name": "cat" } );
	$.print( `Cat sprite has ${data.frameCount} frames` );
} );

$.screen( "320x200" );
const h = $.height();
$.print( `Screen Height: ${h}` );
$.print( `Canvas CSS height: ${$.canvas().offsetHeight}` );
$.pushView( 30, 20, 50, 50 );
$.print( `Viewport Height: ${$.height()} ` );
$.popView();

$.screen( "300x200" );
let x = 150;
let y = 100;
let lt = 0;
requestAnimationFrame( run );
function run( t ) {
	let gamepads = $.inGamepad();
	let factor = ( t - lt ) * 0.5;
	lt = t;
	$.cls();
	if( gamepads.length > 0 ) {
		x = Math.min( Math.max( x + gamepads[ 0 ].axes[ 0 ] * factor, 0 ), 299 );
		y = Math.min( Math.max( y + gamepads[ 0 ].axes[ 1 ] * factor, 0 ), 199 );
		if( gamepads[ 0 ].getButtonPressed( 0 ) ) {
			$.setColor( 2 );
		} else {
			$.setColor( 15 );
		}
		$.circle( Math.floor( x ), Math.floor( y ) , 9 );
		$.pset( Math.floor( x ), Math.floor( y ) );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );
requestAnimationFrame( run );
function run() {
	const keys = $.inKey();
	$.cls();
	$.print( "Press any key" );
	for( const keyData of keys ) {
		$.print( "--------------------------" );
		$.print( "key:      " + keyData.key );
		$.print( "location: " + keyData.location );
		$.print( "code:     " + keyData.code );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );
requestAnimationFrame( run );
function run() {
	const mouse = $.inMouse();

	// Draw while a button is held; there is no mouse data before the first event
	if( mouse !== null && mouse.buttons > 0 ) {
		$.setColor( 14 );
		$.line( mouse.lastX, mouse.lastY, mouse.x, mouse.y );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );
$.setPinchZoom( false );
requestAnimationFrame( run );
function run() {
	const press = $.inPress();

	// Draw while pressed; there is no press data before the first event
	if( press !== null && press.buttons > 0 ) {
		$.setColor( 15 );
		$.line( press.lastX, press.lastY, press.x, press.y );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );
$.input( "Enter your name: ", async ( name ) => {
	$.print( `Hello, ${name}!` );
	const age = await $.input( {
		"prompt": "Enter age: ",
		"isInteger": true,
		"maxLength": 3
	} );
	$.print( `You are ${age} years old.` );
} );

$.screen( "300x200" );
requestAnimationFrame( run );
function run() {
	$.cls();
	const touches = $.inTouch();
	for( const touch of touches ) {
		$.print( `Touch ${touch.id} at ${touch.x}, ${touch.y}` );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );
$.setColor( 4 );
$.line( 15, 15, 285, 185 );
$.setColor( 2 );
$.line( 15, 185, 285, 15 );

$.screen( "300x200" );
$.loadAudio( "media/bomb.wav", "bomb" );
$.ready( function () {
	$.print( "Press any key to play bomb sound." );
	$.onKey( "any", "down", () => {
		$.print( "BOOM ", true );
		$.playAudio( "bomb" );
	}, false, true );
} );

const fontId = $.loadFont( {
	"src": "media/gnsh.png",
	"width": 5,
	"height": 12,
	"margin": 0,
	"charset": " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]" +
			   "^_`abcdefghijklmnopqrstuvwxyz{|}~"
} );
$.ready( () => {
	$.screen( "300x200" );
	$.setFont( fontId );
	$.setBgColor( "#555" );
	$.setPosPx( 0, 85 );
	$.print( "The quick brown fox jumped over the lazy dogs! 123456789", true, true );
} );

$.screen( "300x200" );
$.loadImage( "media/player.png", "player" );
$.ready( () => {
	$.drawImage( "player", 150, 100 );
} );

$.screen( "150x100" );
$.setDefaultAnchor( 0.5, 0.5 );
$.loadSpritesheet( "media/cat_sprite.png", "cat", 34, 34, 1 );
let catData;
$.ready( () => {
	catData = $.getSpritesheetData( "cat" );
	requestAnimationFrame( animate );
} );

function animate( t ) {
	$.cls();
	const frame = Math.round( t / 100 ) % catData.frameCount;
	$.drawSprite( "cat", frame, 75, 50 );
	requestAnimationFrame( animate );
}

$.screen( "300x200" );
const handler = ( clickData ) => {
	$.setPosPx( clickData.x, clickData.y );
	$.setColor( 3 );
	$.print( "Clicked!", true );
};
$.onClick( handler );
let countDown = 5;
const interval = setInterval( () => {
	$.setColor( 7 );
	$.setPos( 0, 5 - countDown );
	$.print( `Count down to offClick: ${countDown}` );
	countDown -= 1;
	if( countDown === -1 ) {
		$.print( "Click is now disabled!" );
		clearInterval( interval );
		$.offClick( handler );
	}
}, 1000 );

$.screen( "300x200" );
function onConnect( gamepad ) {
	$.print( `Gamepad ${gamepad.index} connected: ${gamepad.id}` );

	// Only the first connection is announced
	$.offGamepad( "connect", onConnect );
}
$.onGamepad( "connect", onConnect );

$.screen( "300x200" );
$.print( "Move with the arrow keys." );
$.print( "Press Escape to stop." );
$.onKey( "ArrowLeft", "down", moveLeft );
$.onKey( "ArrowRight", "down", moveRight );
$.onKey( "Escape", "down", stop );

function moveLeft() {
	$.print( "Left" );
}

function moveRight() {
	$.print( "Right" );
}

// Remove each handler, then the Escape handler itself
function stop() {
	$.print( "Stopped." );
	$.offKey( "ArrowLeft", "down", moveLeft );
	$.offKey( "ArrowRight", "down", moveRight );
	$.offKey( "Escape", "down" );
}

$.screen( "300x200" );
$.print( "Move mouse to paint screen, click to stop." );
$.onMouse( "move", mouseMove );
$.onMouse( "up", mouseStop, true );

// Mouse move function receives mouseData and optional customData
function mouseMove( mouseData, customData ) {
	$.setPosPx( mouseData.x, mouseData.y );
	var pos = $.getPos();
	$.setPos( pos.col, pos.row );
	$.setColor( 8 );
	$.print( "+", true );
}

// Mouse stop function receives mouseData and optional customData
function mouseStop( mouseData, customData ) {
	$.setColor( 14 );
	var pos = $.getPos();
	$.setPos( pos.col - 4, pos.row );
	$.print( "Stopped!", true );
	$.offMouse( "move", mouseMove );
}

$.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 receives pressData and optional customData
function pressMove( pressData, customData ) {
	$.setPosPx( pressData.x, pressData.y );
	var pos = $.getPos();
	$.setPos( pos.col, pos.row );
	$.setColor( 8 );
	$.print( "+", true );
}

// Press stop function receives pressData and optional customData
function pressStop( pressData, customData ) {
	$.setColor( 14 );
	var pos = $.getPos();
	$.setPos( pos.col - 4, pos.row );
	$.print( "Stopped!", true );
	$.offPress( "move", pressMove );
}

$.screen( "300x200" );
$.print( "Touch and drag to paint screen, touch up to stop." );
$.onTouch( "move", touchMove );
$.onTouch( "up", touchStop, true );

// Touch move function receives the touches that moved and optional customData
function touchMove( touches, customData ) {
	$.setPosPx( touches[ 0 ].x, touches[ 0 ].y );
	var pos = $.getPos();
	$.setPos( pos.col, pos.row );
	$.setColor( 8 );
	$.print( "+", true );
}

// Touch stop function receives the touches that ended and optional customData
function touchStop( touches, customData ) {
	$.setColor( 14 );
	var pos = $.getPos();
	$.setPos( pos.col - 4, pos.row );
	$.print( "Stopped!", true );
	$.offTouch( "move", touchMove );
}

$.screen( "300x200" );
let turns = 0;
const handler = ( wheelData ) => {
	turns += 1;
	$.print( `Wheel ${turns}: ${wheelData.deltaY}` );
	if( turns === 5 ) {
		$.offWheel( handler );
		$.print( "Wheel handler removed; the page scrolls again." );
	}
};
$.onWheel( handler );

$.screen( "300x200" );
$.onClick( ( clickData ) => {
	$.setPosPx( clickData.x, clickData.y );
	$.print( `Clicked`, true );
} );

$.screen( "300x200" );
$.print( "Connect gamepad and press a button or move an axis to connect" );
$.onGamepad( "connect", ( gamepad ) => {
	$.print( `Gamepad ${gamepad.index} connected: ${gamepad.id}` );
} );
$.onGamepad( "disconnect", ( data ) => {
	$.print( `Gamepad ${data.index} disconnected: ${data.id}` );
} );

$.screen( "300x200" );

// Game controls use codes, which name the physical key on every layout
$.onKey( "KeyW", "down", () => {
	$.print( "Up" );
} );
$.onKey( "Space", "down", () => {
	$.print( "Jump" );
} );

// Key combination
$.onKey( [ "ControlLeft", "KeyS" ], "down", ( keys ) => {
	$.print( "Ctrl+S pressed!" );
} );

// One-time handler
$.onKey( "Enter", "down", () => {
	$.print( "Enter pressed once!" );
}, true );

// Listen for any key
$.onKey( "any", "down", ( keyData ) => {
	$.print( `Key ${keyData.key} pressed` );
} );

$.screen( "300x200" );
$.onMouse( "down", ( mouseData ) => {
	$.setPosPx( mouseData.x, mouseData.y );
	$.print( `(${mouseData.x}, ${mouseData.y})` );
} );

// With hit box
const hitBox = { "x": 10, "y": 10, "width": 100, "height": 50 };
$.setColor( 2 );
$.rect( hitBox );
$.setColor( 7 );
$.onMouse( "move", ( mouseData ) => {
	$.setColor( 3 );
	$.pset( mouseData.x, mouseData.y );
	$.setColor( 7 );
}, false, hitBox );

// One-time handler
$.onMouse( "up", () => {
	$.setPos( 0, 12 )
	$.print( "Mouse released once", true, true );
}, true );

$.screen( "300x200" );
$.onPress( "down", ( pressData ) => {
	$.setPosPx( pressData.x, pressData.y );
	$.print( `(${pressData.x}, ${pressData.y})` );
} );

// With hit box
const hitBox = { "x": 10, "y": 10, "width": 100, "height": 50 };
$.setColor( 2 );
$.rect( hitBox );
$.setColor( 7 );
$.onPress( "move", ( pressData ) => {
	$.setColor( 3 );
	$.pset( pressData.x, pressData.y );
	$.setColor( 7 );
}, false, hitBox );

// One-time handler
$.onPress( "up", () => {
	$.setPos( 0, 12 )
	$.print( "press released once", true, true );
}, true );

$.screen( "300x200" );
$.onTouch( "down", ( touches ) => {
	for( const touch of touches ) {
		$.setPosPx( touch.x, touch.y );
		$.print( `Touch ${touch.id} started` );
	}
} );

$.onTouch( "move", ( touches ) => {
	$.setColor( 3 );
	for( const touch of touches ) {
		$.line( touch.lastX, touch.lastY, touch.x, touch.y );
	}
	$.setColor( 7 );
} );

$.screen( "300x200" );
let zoom = 1;
$.onWheel( ( wheelData ) => {

	// Zoom in when the wheel turns up, and out when it turns down
	zoom = Math.min( Math.max( zoom - wheelData.deltaY / 500, 0.25 ), 4 );
	$.cls();
	$.print( `Zoom: ${zoom.toFixed( 2 )}` );
} );

$.screen( "300x200" );

// Draw some rects and lines to demo paint routine
$.rect( 20, 20, 100, 60 );
$.setColor( "#111111" );
$.line( 30, 30, 50, 50 );
$.setColor( "#151515" );
$.line( 35, 30, 55, 50 );
$.setColor( "#FFFFFF" );
$.line( 45, 30, 65, 50 );
$.setColor( "red" );
$.rect( 150, 50, 120, 80 );
$.setColor( "#111111" );
$.line( 170, 80, 180, 90 );
$.setColor( "#151515" );
$.line( 190, 80, 200, 90 );
$.setColor( "#FFFFFF" );
$.line( 210, 80, 220, 90 );

// Tolerance fill (similar colors to the starting pixel)
// Should paint over the two dark gray lines but not the white line
$.paint( 25, 25, "#333300", 0.25 );

// Boundary fill (fill until reaching boundary color)
// Should paint over everything expect the boundary color which is red
$.paint( 160, 60, "#0080FF", 0.2, "red" );

$.screen( "300x200" );
const music = $.loadAudio( "media/sound.wav" );
let instance = null;
let paused = false;
$.ready( function () {
	$.print( "Press any key to play, then to pause and resume" );
	$.onKey( "any", "down", () => {
		if( instance === null ) {
			instance = $.playAudio( { "audioId": music, "loop": true } );
		} else if( paused ) {
			$.resumeAudio( instance );
			paused = false;
		} else {
			$.pauseAudio( instance );
			paused = true;
		}
	} );
} );

$.screen( "300x200" );
const tracks = [
	"T120 O3 L4 GAB>C",
	"T120 O3 L4 MS GAB>C ML GAB>C",
	"T120 O4 L2 C, E, G",
	"T120 L8 WN MA0 MD20 MH0 MR20 C C C P8 C C",
	"[[0,1,0,-1],[0,0,0,0]] T120 O3 L4 MP-100 G MP100 A MP0 B>C"
];
$.print( "Press any key to play music" );
$.onKey( "any", "down", () => {
	let t = 0;
	for( const track of tracks ) {
		setTimeout( () => {
			$.print( `Play: ${track}` );
			$.play( track );
		}, t );
		t += 2500;
	}
} );

$.screen( "300x200" );
const bomb = $.loadAudio( "media/bomb.wav" );
$.ready( function () {
	$.print( "Press any key to play bomb sound." );
	$.onKey( "any", "down", () => {
		$.print( "BOOM ", true );
		$.playAudio( {
			"audioId": bomb, "playbackRate": 0.75 + Math.random() * 0.5,
			"pan": Math.random() * 2 - 1
		} );
	}, false, true );
} );

$.screen( "300x200" );
$.setColor( 15 );
$.polygon( [ 20, 20, 140, 30, 100, 120, 40, 90 ], 4 );

$.screen( "320x200" );
$.setColor( 15 );
$.pushView( 20, 20, 100, 80 );
$.paint( 0, 0, 1 );
$.pushView( 8, 8, 80, 60 );
$.paint( 0, 0, 2 );
$.print( "child: This content should wrap here" );
$.popView();
$.print( "parent" );
$.popView();
$.print( "grandparent" );

$.screen( "320x200" );
$.setFont( 1 );
$.print( "Welcome to Pi.js" );
$.print();
$.print( "Line 1" );
$.print( "Inline text", true );
$.print( " more inline", true );
$.print();
$.print( "Centered", false, true );

$.screen( "300x200" );
$.setColor( 2 );
$.pset( 148, 101 );
$.pset( 149, 100 );
$.pset( 150, 101 );
$.pset( 151, 100 );
$.pset( 152, 101 );

$.screen( "320x200" );
$.setColor( 15 );
$.print( "grandparent" );
$.pushView( 20, 20, 100, 80 );
$.paint( 0, 0, 1 );
$.print( "parent" );
$.pushView( 8, 8, 80, 60 );
$.paint( 0, 0, 2 );
$.print( "child: This content should wrap here" );

var data = [
	[  1,  2,  3,  4,  5,  6 ],
	[  7,  8,  9, 10, 11, 12 ],
	[ 13, 14, 15, 16, 17, 18 ]
]
$.screen( "30x20" );
$.put( data, 1, 1 );

$.screen( "128x64" );
$.loadSpritesheet( "media/tiles.png", "tiles", 16, 16, 0 );

// Wait for spritesheet to load using callback
$.ready( async function() {
	for( let y = 0; y < 64; y += 16 ) {
		for( let x = 0; x < 128; x += 16 ) {
			$.drawSprite( "tiles", 0, x, y );
		}
	}
	$.loadImage( { "src": "media/player.png", "name": "player" } );

	// Wait for image to load using await
	await $.ready();
	$.drawImage( "player", 58, 24 );
} );

$.screen( "300x200" );
$.setColor( 5 );
$.rect( 15, 15, 150, 100 );
$.rect( 25, 25, 150, 100, 6 );
$.rect( 35, 35, 150, 100, 2 );

$.registerPlugin( {
	"name": "octogon",
	"version": "1.0.0",
	"description": "Poly plugin",
	"dependencies": [],
	"init": ( pluginApi ) => {
		pluginApi.addCommand( "poly", ( screenData, options ) => {
			const x = options.x ?? 0;
			const y = options.y ?? 0;
			const radius = options.radius ?? 1;
			const sides = options.sides ?? 1;
			let angle = 0
			const fillColor = options.fillColor;
			let da = ( Math.PI * 2 ) / sides;
			let x2 = null;
			let y2 = null;
			for( let i = 0; i < sides + 1; i += 1 ) {
				let x1 = x + Math.cos( angle ) * radius;
				let y1 = y + Math.sin( angle ) * radius;
				if( x2 !== null ) {
					screenData.api.line( x1, y1, x2, y2 );
				}
				x2 = x1;
				y2 = y1;
				angle += da;
			}
			if( fillColor !== null ) {
				screenData.api.paint( x, y, fillColor );
			}
		}, true, [ "x", "y", "radius", "sides", "fillColor" ] );
	}
} );
$.screen( "300x200" );
$.setColor( 15 );
$.poly( 150 , 100, 15, 8, "red" );

$.screen( "200x200" );
$.setActionKeys( [ "Control", "KeyS"] );
let actionKeysRemoved = false;
setTimeout( () => {
	$.removeActionKeys( [ "Control", "KeyS" ] );
	actionKeysRemoved = true;
}, 5000 );
setInterval( function () {
	let keys = $.inKey();
	$.cls();
	$.print( "Press Ctrl+S." );
	if( actionKeysRemoved ) {
		$.print( "Action Keys Removed" );
	}
	let key = $.inKey( "Control" );
	if( key ) {
		$.print( "Control key is pressed." );
	} else {
		$.print( "Control key is not pressed." );
	}
	for( key in keys ) {
		$.print( "--------------------------" );
		$.print( "key:      " + keys[ key ].key );
		$.print( "location: " + keys[ key ].location );
		$.print( "code:     " + keys[ key ].code );
	}
}, 60 );

$.screen( "300x200" );
$.setColor( 5 );
$.rect( 25, 25, 150, 100, 2 );
$.removeAllScreens();

$.screen( "300x200" );
let bombAudio = $.loadAudio( "media/bomb.wav" );
$.ready( function () {
	$.print( "Press any key to try to play bomb sound." );
	$.removeAudio( bombAudio );
	$.onKey( "any", "down", () => {
		try {
			$.playAudio( bombAudio );
		} catch (e) {
			$.print( "SILENCE ", true );
		}
	}, false, true );
} );

$.screen( "300x200" );
const playerA = document.createElement( "canvas" );
playerA.width = 32;
playerA.height = 32;
const context = playerA.getContext( "2d" );
context.fillStyle = "red";
context.font = "16pt Arial Bold";
context.fillText( "A", 0, 16 );
$.loadImage( playerA, "player" );
$.drawImage( "player", 5, 5 );
$.removeImage( "player" );
try {
	$.drawImage( "player", 5, 21 );
} catch( error ) {
	$.print( error.code );
}

const screen1 = $.screen( "320x200" );
$.removeScreen( screen1 );

// Or call as method on screen object
const screen2 = $.screen( "640x480" );
screen2.removeScreen();

const invert = $.createShader( `#version 300 es
precision mediump float;
in vec2 v_texCoord;
uniform sampler2D u_texture;
out vec4 fragColor;
void main() {
	vec4 color = texture(u_texture, v_texCoord);
	fragColor = vec4(1.0 - color.rgb, color.a);
}` );

$.screen( "320x200" );
$.rect( 5, 5, 16, 16, "red" );
$.applyShader( invert );
$.rect( 32, 32, 16, 16, "red" );
$.removeShader( invert );
try {
	$.applyShader( invert );
} catch( ex ) {
	$.setPos( 0, 6 );
	$.print( ex.message );
}

$.screen( "320x200" );
$.pushView( 20, 10, 120, 80 );
$.pushView( 8, 8, 40, 30 );
$.print( "nested" );
$.resetView();
$.print( "full screen" );

$.screen( "300x200" );
const music = $.loadAudio( "media/sound.wav" );
let instance = null;
$.ready( function () {
	$.print( "Hold any key to play the music" );
	$.onKey( "any", "down", () => {
		if( instance === null ) {
			instance = $.playAudio( { "audioId": music, "loop": true } );
		} else {
			$.resumeAudio( instance );
		}
	} );
	$.onKey( "any", "up", () => {
		if( instance !== null ) {
			$.pauseAudio( instance );
		}
	} );
} );

const parent = $.screen( { "aspect": "320x200" } );
const offscreen = $.screen( {
	"aspect": "160x100",
	"isOffscreen": true,
	"parent": parent
} );

$.cls( 1 );
$.circle( 80, 50, 32, "red" );

$.setScreen( parent );
$.drawImage( offscreen, 80, 50 );

$.screen( "320x200" );
$.pushView( 40, 20, 100, 80 );
const local = $.screenToView( 45, 25 );
$.print( local.x + "," + local.y );

$.screen( "300x200" );
$.set( { "color": 10, "font": 2, "pos": { "col": 5, "row": 5 }, "bgColor": "#267" } );
$.print( "Settings have been applied" );

$.screen( "200x200" );
$.setActionKeys( [ "ControlLeft", "KeyS" ] );
setInterval( function () {
	const keys = $.inKey();
	$.cls();
	$.print( "Press Ctrl+S." );
	if( $.inKey( "Control" ) ) {
		$.print( "Control key is pressed." );
	} else {
		$.print( "Control key is not pressed." );
	}
	for( const keyData of keys ) {
		$.print( "--------------------------" );
		$.print( "key:      " + keyData.key );
		$.print( "location: " + keyData.location );
		$.print( "code:     " + keyData.code );
	}
}, 60 );

$.screen( "300x200" );
const engine = $.loadAudio( "media/sound.wav" );
let instance = null;
let rate = 1;
$.ready( function () {
	$.print( "Press up and down to change the pitch" );
	$.onKey( "any", "down", key => {
		if( instance === null ) {
			instance = $.playAudio( { "audioId": engine, "loop": true, "volume": 0.5 } );
		}
		if( key.key === "ArrowUp" ) {
			rate = Math.min( rate * 1.1, 4 );
		} else if( key.key === "ArrowDown" ) {
			rate = Math.max( rate / 1.1, 0.25 );
		}
		$.setAudio( { "instanceId": instance, "playbackRate": rate } );
	} );
} );

$.screen( "300x200" );
$.setBgColor( "navy" );

$.screen( "300x200" );
$.setBlend( "alpha" );
$.rect( 20, 20, 80, 80, "#AA0000FF" );
$.rect( 40, 40, 80, 80, "#00AA0088" );

$.screen( "300x200" );
$.print( "Press M to toggle music" );
let isMuted = false;
$.play( "T120 L8 O4 C E G E C E G E" );
$.onKey( "KeyM", "down", () => {
	isMuted = !isMuted;
	if( isMuted ) {
		$.setBusVolume( "music", 0 );
	} else {
		$.setBusVolume( "music", 1 );
	}
} );

$.screen( "300x200" );
$.setFont( 2 );
$.setChar( 97, "1092ba547cc6fe92" );
$.setChar( 98, "423c2418187e1818" );
$.setChar( 99, "7cd67cfec6aafe00" );
$.setChar( 100, "00183c667e5a42c3" );
$.setChar( 101, "008199FFDBFFBD18" );

$.print( " abcde f" );

$.screen( "300x200" );
$.setColor( 9 );
$.rect( 100, 50, 100, 100 );

$.screen( "300x200" );
$.setContainerBgColor( "#202040" );

$.screen( "300x200" );
$.print( "Right-click to open the context menu." );
$.setContextMenu( true );

$.screen( "300x200" );
$.loadImage( "media/spaceship_0.png", "ship" );

// Set the anchor point to the center of the ship so that the image will rotate correctly
$.setDefaultAnchor( 0.5, 0.5 );
$.ready( () => {
	run();
} );
let angle = 0;
function run() {
	$.cls();
	$.drawImage( { "image": "ship", "x": 150, "y": 100, "angle": angle } );
	angle += 1;
	requestAnimationFrame( run );
}

$.setDefaultColor( 9 );
$.screen( "300x200" );
$.rect( 100, 50, 100, 100 );

const fontId = $.loadFont( {
	"src": "media/gnsh.png",
	"width": 5,
	"height": 12,
	"margin": 0,
	"charset": " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]" +
			   "^_`abcdefghijklmnopqrstuvwxyz{|}~"
} );
$.ready( () => {
	$.setDefaultFont( fontId );
	$.screen( "300x200" );
	$.setBgColor( "#555" );
	$.setPosPx( 0, 85 );
	$.print( "The quick brown fox jumped over the lazy dogs! 123456789", true, true );
} );

const pal = [ "#0000FF", "red", [ 0, 255, 0 ], [ 255, 255, 0, 255 ] ];
$.setDefaultPal( pal );
$.screen( "300x200" );
const newPal = $.getPal( true );
let x = 90;
let y = 5;
for( const color of newPal ) {
	$.setColor( "#AAA" );
	$.print( `Color Index: ${$.getPalIndex( color )}` );
	$.setColor( color );
	$.print( `[${color.array.join( ", " )}]` );
	$.print();
	$.rect( x, y, 100, 100 );
	x += 25;
	y += 15;
}

const invert = $.createShader( `#version 300 es
precision mediump float;
in vec2 v_texCoord;
uniform sampler2D u_texture;
out vec4 fragColor;
void main() {
	vec4 color = texture(u_texture, v_texCoord);
	fragColor = vec4(color.a - color.rgb, color.a);
}` );

// Screen 0 inverts colors
$.screen( "320x200" );
$.setColor( 4 );
$.circle( 160, 100, 40, 4 );
$.setDisplayShader( invert );

// Screen 1 should not invert colors
$.screen( "320x200" );
$.setBgColor( 0 );
$.setColor( 4 );
$.circle( 180, 120, 40, 4 );
$.setDisplayShader( invert );
$.setDisplayShader( null );

const tint = $.createShader( `#version 300 es
precision mediump float;
in vec2 v_texCoord;
uniform sampler2D u_texture;
uniform float u_gain;
out vec4 fragColor;
void main() {
	vec4 color = texture(u_texture, v_texCoord);
	fragColor = vec4(clamp(color.rgb * u_gain, 0.0, color.a), color.a);
}` );

$.screen( "320x200" );
$.setColor( 14 );
$.circle( 160, 100, 40, 4 );
$.setDisplayShader( tint, { "u_gain": 1 } );
$.setDisplayShaderUniforms( { "u_gain": 0.5 } );

$.screen( "300x200" );
for( var i = 0; i < 4; i++ ) {
	$.setFont( i );
	$.print( "Font - " + i );
}

$.screen( "300x200" );
$.setGamepadDeadZone( 0.15 );
run();
function run() {
	const gamepad = $.inGamepad( 0 );
	$.cls();
	if( gamepad ) {

		// The left stick moves the circle in any direction
		const x = gamepad.getAxis( 0 );
		const y = gamepad.getAxis( 1 );
		$.circle( Math.floor( 150 + x * 100 ), Math.floor( 100 + y * 80 ), 8 );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );

// Single value (symmetric range on all channels)
$.setNoise( 24, 0 );
$.rect( 25, 25, 50, 50, 2 );

// Per-channel symmetric ranges
$.setNoise( [ 16, 8, 0, 0 ], 0 );
$.rect( 100, 25, 50, 50, 2 );

// Explicit per-channel min/max ranges
$.setNoise( [ [ 100, 4, 0, 0 ], [ 255, 12, 0, 0 ] ], 0 );
$.rect( 175, 25, 50, 50, 2 );

$.screen( "300x200" );
$.setPal( [ "white", "red", "green", "blue" ] );
$.setColor( 1 );
$.print( "white" );
$.setColor( 2 );
$.print( "red" );
$.setColor( 3 );
$.print( "green" );
$.setColor( 4 );
$.print( "blue" );

$.screen( "300x200" );
$.setPalColors( [ 1, 2, 3 ], [ "white", "#FF00FF", [ 0, 255, 128 ] ] );
$.setColor( 1 );
$.print( "white" );
$.setColor( 2 );
$.print( "#FF00FF" );
$.setColor( 3 );
$.print( [ 0, 255, 128 ] );

$.screen( "300x200" );
$.setPinchZoom( true ); // Let a pinch on the canvas zoom the page
$.setPinchZoom( false ); // Keep every touch on the canvas for the game

$.screen( "320x200" );
$.setFont( 1 );
$.setPos( 5, 10 );
$.print( "X" );
$.setPos( { "col": 10, "row": 15 } );
$.print( "Y" );

$.screen( "320x200" );
$.setFont( 1 );
$.setPosPx( 50, 100 );
$.print( "At pixel 50, 100" );
$.setPosPx( { "x": 100, "y": 150 } );
$.print( "At pixel 100, 150" );

$.screen( "320x200" );
$.setFont( 1 );
$.print( "Normal size" );
$.setPrintSize( 2, 2 );
$.print( "Double size" );
$.setPrintSize( { "scaleWidth": 1, "scaleHeight": 2.5 } );
$.print( "Ultra thin tall font" );

const screen0 = $.screen( "320x200" );
const screen1 = $.screen( "320x200" );
screen1.setBgColor( "rgba(0,0,0,0)" );
$.setScreen( screen0 );
$.line( 0, 0, 320, 200 );
$.setScreen( { "screen": 1 } );
$.line( 0, 0, 320, 200 );

$.screen( "300x200" );
$.print( "Press any key to hear a chord without the limiter" );
$.setSoundLimiter( false );
$.setVolume( 0.2 );
$.onKey( "any", "down", () => {
	$.sound( 262, 1, 0.5 );
	$.sound( 330, 1, 0.5 );
	$.sound( 392, 1, 0.5 );
} );

$.screen( "300x200" );
$.print( "Press any key to hear some music" );
$.onKey( "any", "down", () => {
	$.setVolume( 0.15 );
	$.play( "Q1o3L8ED+ED+Eo2Bo3DCL2o2A" );
	setTimeout( () => {
		$.setVolume( 1 );
	}, 730 );
} );

$.screen( "320x200" );
$.setFont( 1 );
$.setWordBreak( true );
$.print( "This is a very long line of text that will wrap at word boundaries" );
$.setWordBreak( false );
$.print( "This text will break anywhere when it reaches the edge" );

const data = [
  392, 8, "My ", 659, 8, "Bon-", 587, 8, "nie ", 523, 8, "lies ", 587, 8,
  "o-", 523, 8, "ver ", 440, 8, "the ", 392, 8, "o-", 330, 32, "cean\n",
  392, 8, "My ", 659, 8, "Bon-", 587, 8, "nie ", 523, 8, "lies ", 523, 8,
  "o-", 494, 8, "ver ", 523, 8, "the ", 587, 40, "sea\n", 392, 8, "My ",
  659, 8, "Bon-", 587, 8, "nie", 523, 8, " lies ", 587, 8, "o-", 523, 8,
  "ver ", 440, 8, "the ", 392, 8, "o-", 330, 32, "cean\n", 392, 8, "Oh ",
  440, 8, "bring ", 587, 8, "back ", 523, 8, "my ", 494, 8, "Bon-", 440,
  8, "nie ", 494, 8, "to ", 523, 32, "me"
];
const printTimeouts = [];

let totalDuration = 0;
$.screen( "300x200" );
$.print( "Press any key to hear the song" );
$.onKey( "any", "down", () => {
	for( let i = 0; i < data.length; i += 3 ) {
		const length = data[ i + 1 ] / 18.2;
		const word = data[ i + 2 ];
		$.sound( {
			"frequency": data[ i ],
			"duration": length * 0.9,
			"volume": 0.15,
			"oType": "sawtooth",
			"delay": totalDuration,
			"attackTime": length * 0.01,
			"decayTime": length * 0.3,
			"sustainLevel": 0.7,
			"releaseTime": length * 0.1
		} );
		printWord( word, totalDuration );
		totalDuration += length;
	}
} );

function printWord( word, delay ) {
	printTimeouts.push( setTimeout( function () {
		$.print( word, word.indexOf( "\n" ) === -1 );
	}, delay * 1000 ) );
}

$.screen( "300x200" );
$.print( "Connect gamepad and press a button or move an axis to connect" );
$.onGamepad( "connect", ( gamepad ) => {
	$.print( `Gamepad ${gamepad.index} connected: ${gamepad.id}` );
	$.print( "Game is will start in 3 seconds" );
	$.stopGamepad();
	setTimeout( () => {
		$.print( "Gamepad is now started" );
		$.startGamepad();
	}, 3000 );
} );

run();
function run() {
	const gamepad = $.inGamepad( 0 );
	if( gamepad ) {
		const vAxis = gamepad.getAxis( 0 );
		$.cls();
		$.circle( Math.floor( 300 * ( vAxis / 2 ) ) + 150, 100, 8 );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );
$.stopKeyboard();
$.print( "Keyboard will be enabled in 3 seconds." );
$.onKey( "any", "down", () => {
	$.print( "Key pressed!" );
} );
setTimeout( () => {
	$.print( "Keyboard is enabled" );
	$.startKeyboard();
}, 3000 );

$.screen( "300x200" );
$.stopMouse();
$.print( "Mouse will be enabled in 3 seconds." );
$.onMouse( "move", ( mouseData ) => {
	$.setPosPx( mouseData.x, mouseData.y );
	var pos = $.getPos();
	$.setPos( pos.col, pos.row );
	$.setColor( 13 );
	$.print( "+", true );
} );
setTimeout( () => {
	$.setPos( 0, 1 );
	$.setColor( 7 );
	$.print( "Mouse is enabled" );
	$.startMouse();
}, 3000 );

$.screen( "300x200" );
$.stopTouch();
$.print( "Touch will be enabled in 3 seconds." );
$.onTouch( "move", ( touches ) => {
	const touch = touches[ 0 ];
	$.setPosPx( touch.x, touch.y );
	var pos = $.getPos();
	$.setPos( pos.col, pos.row );
	$.setColor( 13 );
	$.print( "+", true );
} );
setTimeout( () => {
	$.setPos( 0, 1 );
	$.setColor( 7 );
	$.print( "Touch is enabled" );
	$.startTouch();
}, 3000 );

$.screen( "300x200" );
const audio = $.loadAudio( "media/sound.wav" );
$.ready( function () {
	$.print( "Press any key to hear sound" );
	$.onKey( "any", "down", () => {
		const instance = $.playAudio( audio );
		setTimeout( function () {
			$.stopAudio( instance );
		}, 500 );
	} );
} );

$.screen( "300x200" );
$.print( "Connect gamepad and press a button or move an axis to connect" );
$.onGamepad( "connect", ( gamepad ) => {
	$.print( `Gamepad ${gamepad.index} connected: ${gamepad.id}` );
	setTimeout( () => {
		$.print( "Gamepad is now stopped" );
		$.stopGamepad();
	}, 3000 );
} );

run();
function run() {
	const gamepad = $.inGamepad( 0 );
	if( gamepad ) {
		const vAxis = gamepad.getAxis( 0 );
		$.cls();
		$.print( "Game will stop in 3 seconds" );
		$.circle( Math.floor( 300 * ( vAxis / 2 ) ) + 150, 100, 8 );
	}
	requestAnimationFrame( run );
}

$.screen( "300x200" );
$.print( "Keyboard will be stopped in 3 seconds." );
$.onKey( "any", "down", () => {
	$.print( "Key pressed!" );
} );
setTimeout( () => {
	$.print( "Keyboard is now stopped" );
	$.stopKeyboard();
}, 3000 );

$.screen( "300x200" );
$.print( "Mouse will be stopped in 3 seconds." );
$.onMouse( "move", ( mouseData ) => {
	$.setPosPx( mouseData.x, mouseData.y );
	var pos = $.getPos();
	$.setPos( pos.col, pos.row );
	$.setColor( 13 );
	$.print( "+", true );
} );
setTimeout( () => {
	$.setPos( 0, 1 );
	$.setColor( 7 );
	$.print( "Mouse is stopped" );
	$.stopMouse();
}, 3000 );

$.screen( "300x200" );
$.print( "Press any key to hear sound" );
$.onKey( "any", "down", () => {
	$.play( "T120 O4 L4 CDEF GAB>C ABCDEFG" );
	setTimeout( () => {
		$.stopPlay();
	}, 500 );
} );

$.screen( "300x200" );
$.print( "Press any key to hear sound" );
$.onKey( "any", "down", () => {
	const soundId = $.sound( 440, 5 );
	setTimeout( () => {
		$.stopSound( soundId );
	}, 500 );
} );

$.screen( "300x200" );
$.print( "Touch will be stopped in 3 seconds." );
$.onTouch( "move", ( touches ) => {
	const touch = touches[ 0 ];
	$.setPosPx( touch.x, touch.y );
	var pos = $.getPos();
	$.setPos( pos.col, pos.row );
	$.setColor( 13 );
	$.print( "+", true );
} );
setTimeout( () => {
	$.setPos( 0, 1 );
	$.setColor( 7 );
	$.print( "Touch is stopped" );
	$.stopTouch();
}, 3000 );

$.screen( "300x200" );
$.print( "Press the south button to rumble" );
function run() {
	const gamepad = $.inGamepad( 0 );
	if( gamepad && gamepad.getButtonJustPressed( "south" ) ) {
		if( !$.vibrateGamepad( 0, 200, 1, 0.5 ) ) {
			$.print( "This gamepad cannot rumble in this browser" );
		}
	}
	requestAnimationFrame( run );
}
run();

$.screen( "320x200" );
$.pushView( 40, 20, 100, 80 );
const p = $.viewToScreen( 0, 0 );
$.print( p.x + "," + p.y );

$.screen( "320x200" );
const w = $.width();
$.print( `Screen Width: ${w} ` );
$.print( `Canvas CSS width: ${$.canvas().offsetWidth}` );
$.pushView( 30, 20, 50, 50 );
$.print( `Viewport Width: ${$.width()} ` );
$.popView();