Graphics

Screens

In order to get access to Pi.js's many graphics functions you must first call the screen function. The screen function will create a canvas, set it as the default screen and append that screen to the page.

$.screen( "320x200" );
$.setColor( "yellow" );
$.rect( 150, 80, 40, 40, "blue" );

You can have multiple screens for a single page. They will be overlayed on top of each other in the order they are created. You can set the background color of the screen to transparent with the setBgColor to see one screen behind another. When calling the screen function, it will return a screen object that you can use to access its graphics functions. If you use graphics functions without a screen object, then it will call the graphics function against the default screen which is the last screen object created or a screen that was set as default with the setScreen command.

var screen1 = $.screen( "320x200" );
var screen2 = $.screen( "80x50" );
screen2.setBgColor( "rgba(0,0,0,0)" );
$.setColor( "blue" );
$.line( 0, 0, 79, 49 );
screen1.setColor( "red" );
screen1.line( 319, 0, 0, 199 );
$.setScreen( 0 );
$.line( 0, 99, 319, 99 );
$.setScreen( 1 );
$.line( 39, 0, 39, 49 );

Images

Pi.js has two ways to draw images, drawImage and drawSprite. The drawImage function will draw the entire image from a file. The drawSprite function will break up the image/spritesheet file into multiple images/sprites. When dealing with image files and other you will have to wait until the images load before you can use them. Use the ready function to make sure enough time has passed to load the images.

var monkey, frame, interval;
$.screen( "300x200" );
monkey = $.loadSpritesheet( "/images/monkey.png", null, 32, 32, 1 );
$.ready( ready );
function ready() {
	frame = 0;
	interval = setInterval( run, 500 );
	run();
}
function run() {
	frame += 1;
	$.cls();
	$.drawSprite( monkey, frame % 2, 150, 100, 0, 0.5, 0.5 );
}

Primitives

One of the most basic graphics functions in pi.js is line, which allows you to draw a line between two points. The syntax for line is straightforward: line(x1, y1, x2, y2). This function draws a straight line between the two specified points, making it ideal for creating basic geometric shapes and connecting various points in a drawing.

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

Another primitive graphics function in pi.js is circle, which allows you to draw circles of varying sizes. The syntax for circle is: circle(x, y, radius, fillColor). With fillColor being optional. This function draws a circle centered on the specified point with the given radius and optionally fills in the area inside the circle if a fillColor parameter is provided.

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

Colors

Pi.js provides a lot of great ways to add color to your Pi.js projects. By default there is a color palette that has 256 colors and you can reference the colors by index values from the palette.

var i, colors, x, y, size;
$.screen( "360x300" );
colors = $.getPal();
x = 0;
y = 0;
size = 20;
for( i = 0; i < colors.length; i++ ) {
	$.setColor( i );
	$.rect( x, y, size, size );
	$.setPosPx( x + 1, y + 4 );
	$.print( i, true );
	x += size;
	if( x >= $.width() ) {
		x = 0;
		y += size;
	}
}

You can use the index values on any Pi.js graphics methods that has a color parameter. You can also access colors by various other means such as color name, rgb values, or a color hex string.

$.screen("300x200");
$.setColor(2);
$.print("This is color 2 which is green");
$.setColor("blue");
$.print("This is the color blue.");
$.setColor("rgb(0,255,255)");
$.print("This is the color cyan");
$.setColor([255,255,255]);
$.print("Below is a rectangle with a white border and purple fill");
$.rect(15, 50, 40, 40, {"r": 136, "g": 58, "b": 128});

You can set your own palettes and defaultPalette to help you control the colors used in your projects.

var colors = [
	"black", "brown", "darkgrey"
];
var brick = [
	"1111111211111112".split(""),
	"1111111211111112".split(""),
	"1111111211111112".split(""),
	"2222222222222222".split(""),
	"1112111111121111".split(""),
	"1112111111121111".split(""),
	"1112111111121111".split(""),
	"2222222222222222".split(""),
	"1111111211111112".split(""),
	"1111111211111112".split(""),
	"1111111211111112".split(""),
	"2222222222222222".split(""),
	"1112111111121111".split(""),
	"1112111111121111".split(""),
	"1112111111121111".split(""),
	"2222222222222222".split("")
];
$.setDefaultPal( colors );
$.screen( "300x200" );
$.put(brick, 16, 16);
$.setPalColor( 1, "blue" );
$.put(brick, 32, 16 );