iio Functions

The iio package includes static functions that are available to any script through the global iio namespace.

 

Object Extension

iio has implemented an object inheritance structure that you can use to extend iio objects or create your own object hierarchies.

 

iio.inherit( Class child, Class parent )

- makes the child class inherit all data and functions from the parent class.

//Extending iio.Rect to create a Character class

//Definition
function Character(){
    this.Character.apply(this, arguments);
}; 

//Inheritance
iio.inherit(Character, iio.Rect)

//Constructor
Character.prototype._super = iio.Rect.prototype;
Character.prototype.Character = function(x,y,w,h,health){

    //call parent constructor
    this._super.Rect.call(this,x,y,w,h);

    //add new properties
    this.maxHealth = 100;
    this.health = health;

    //call parent functions
    this.setFillStyle('green');
    this.rotate(Math.PI/4);
}

//Character Functions
Character.prototype.injure = function(amount){
  this.health -= amount;
}
Character.prototype.heal = function(){
  this.health = this.maxHealth;
}

//Create a Character
var mCharacter = io.addObj( new Character(io.canvas.center,50,50,50));

//use Character functions
mCharacter.injure(10);
mCharacter.setSize(40,40);

mCharacter.heal();
mCharacter.setSize(50,50);
 

Start Functions

Use one of these functions to start your application. They instantiate an AppManager and attach or create a canvas element, then they run the given app script.

 

iio.start( Function app )

:: Returns AppManager

- Initializes and starts the given application script.

- A full screen canvas is automatically created and positioned. The new canvas element is assigned the css class 'ioCanvas', and is given the following css properties: position=absolute, display=block, top=0.

- This function also sets the margin and padding of the body element to 0 to ensure a full screen.

//start an iio Application in fullscreen mode
iio.start( myApp );
 

iio.start( Function app, String canvasId )

:: Returns AppManager

- Initializes and starts the given application script with the specified canvas. No css properties are changed, and no css classes are added.

//Somewhere in an HTML file
<canvas id="myCanvas" width="600px" height="600px"/>

//..

//In the JavaScript
//start an application on the existing canvas
iio.start( myApp, 'myCanvas' );
 

iio.start( Function app, Dim: width, height )

:: Returns AppManager

- Initializes and starts the given application script.

- Dim is an abbreviation of dimensions. You can specify a Number for a fixed pixel size, or pass 'auto' or null, which will make iio automatically resize your canvas to its parent elements dimension whenever a screen resize occurs.

- A canvas with the given dimensions (width x height) is automatically created and attached to the body element. If dimensions are not specified, they default to the size of the viewing window.

- The new canvas is assigned the css class 'ioCanvas', but no css properties are changed.

//start an iio Application with a 400x400 canvas
//attached to the body element
iio.start( myApp, 400, 400 );

//start an iio Application on a new 100%x400 canvas
//attached to the body element
iio.start( myApp, 'auto', 400 );
 

iio.start( Function app, String elementId, Dim: width, height )

:: Returns AppManager

- Initializes and starts the given application script.

- Dim is an abbreviation of dimensions. You can specify a Number for a fixed pixel size, or pass 'auto' or null, which will make iio automatically resize your canvas to its parent elements dimension whenever a screen resize occurs.

- A new canvas with the given dimensions (width x height) is automatically created and attached to the element with the given elementId. If dimensions are not specified, they default to the size of the viewing window.

- if 'body' is passed as the elementId, the canvas will be attached to the body element.

- The new canvas element is assigned the class 'ioCanvas', but no styles are altered.

//start an iio Application on a new, 400x400 canvas
//and attach the canvas to an 'appWrapper' element
iio.start( myApp, 'appWrapper', 400, 400 );

//start an iio Application on a new 100%x400 canvas
//and attach the canvas to the body element
iio.start( myApp, 'appWrapper', 'auto', 400 );
 

Utility Functions

 

iio.getRandomNum( Number: min, max )

:: Returns Number

- returns a random number in the range [min, max) - inclusive of min, exclusive of max. The given parameters can be floating point or whole, positive or negative.

//get a random number between -1 and 1
var random = iio.getRandomNum(-1,1);
 

iio.getRandomInt( Number: min, max )

:: Returns Number

- returns an integer in the range [min, max) - inclusive of min, exclusive of max. The given parameters can be floating point or whole, positive or negative.

//get a random int between -10 and 10
var random = iio.getRandomNum(-10,10);
 

iio.isNumber( Anything )

:: Returns Boolean

- returns true if the given object is a number, false otherwise.

 

iio.isBetween( Number: value, bound1, bound2)

:: Returns Boolean

- returns true if the given value is in the range defined by the two given bounds. false otherwise.

- this function is inclusive of the boundaries: [bound1,bound2].

 

iio.rotatePoint( Vec point, Number angle )

iio.rotatePoint( Number: x, y, angle )

:: Returns Vec

- rotates the given point relative to 0,0 and returns the resulting vector.

- angle should be specified in radians.

 

iio.getCentroid( Array vectors )

:: Returns Vec

- returns the centroid of the given vector group.

 

iio.getSpecVertex( Array vectors, Function comparator )

:: Returns Vec

- returns a specific vertex from the given group, with respect to the given comparator.

- for example, we could use the function to get the left-most vector in the group with this code:

//get the vector with the lowest x coordinate 
var leftMostV = iio.getSpecVertex(vectorArray
                      ,function(v1,v2){
                        if(v1.x<v2.x)
                           return true;
                        return false
                      });
 

iio.getVecsFromPointList( Array points )

:: Returns Array

- returns an array of Vec objects corresponding to the given list of points.

- a point can be given as a Vec, or as x and y Number Objects.

//get an array of Vec objects
var vectors = iio.getVecsFromPointList([io.canvas.center
                                       ,20,50
                                       ,100,100
                                       ,io.canvas.width,500]);
 

iio.hasKeyCode( String key, Event event )

:: Returns Boolean

- returns true if the key code corresponding to the given key string is active in the given onkeydown or onkeyup Event.

//check if the space key is pushed down
var spaceDown;
this.keyDown = function(event){
  spaceDown = iio.hasKeyCode('space', event);
}

//AVAILABLE KEY STRINGS
'backspace'
'tab'
'enter'
'shift'
'ctrl'
'alt'
'pause'
'caps lock'
'escape'
'space'
'page up'
'page down'
'end'
'home'
'left arrow'
'up arrow'
'right arrow'
'down arrow'
'insert'
'delete'
'0'
'1'
'2'
'3'
'4'
'5'
'6'
'7'
'8'
'9'
'a'
'b'
'c'
'd'
'e'
'f'
'g'
'h'
'i'
'j'
'k'
'l'
'm'
'n'
'o'
'p'
'q'
'r'
's'
't'
'u'
'v'
'w'
'x'
'y'
'z'
'left window'
'right window'
'select key'
'n0'
'n1'
'n2'
'n3'
'n4'
'n5'
'n6'
'n7'
'n8'
'n9'
'multiply'
'add'
'subtract'
'dec'
'divide'
'f1'
'f2'
'f3'
'f4'
'f5'
'f6'
'f7'
'f8'
'f9'
'f10'
'f11'
'f12'
'num lock'
'scroll lock'
'semi-colon'
'equal'
'comma'
'dash'
'period'
'forward slash'
'grave accent'
'open bracket'
'back slash'
'close bracket'
'single quote'
 

Intersection Functions

There is little reason to call most of these functions directly. iio can handle collision detection for you.

See the Collision Detection docs for more info.

 

iio.lineContains( Vector: lineStart, lineEnd, point )

:: Returns Boolean

- return indicates whether or not the given line contains the given point.

 

iio.intersects( Shape: shape1, shape2 )

:: Returns Boolean

- returns true if the given shapes intersect, false otherwise.

 

iio.lineXline( Vector: l1Start, l1End, l2Start, l2End )

:: Returns Boolean

- return indicates whether or not the given lines intersect.

 

iio.rectXrect( SimpleRect: rect1, rect2 )

:: Returns Boolean

- returns true if the given rectangles intersect. Returns false otherwise.

 

iio.polyXpoly( Poly: poly1, poly2 )

:: Returns Boolean

- returns true if the given polygons intersect, false otherwise.

 

iio.circleXcircle( Circle: circle1, circle2 )

:: Returns Boolean

- return indicates whether or not the given circles intersect.

 

iio.polyXcircle( Poly poly, Circle circle )

:: Returns Boolean

- return indicates whether or not the given polygon and circle intersect.