API: Canvas

The "Canvas" API has the following features:
  • No graphics library.
  • Creates a canvas in a div in the run window.
  • The author has to do their own 2D or WebGL rendering.

World() and Mind() classes must be declared. See below. All other declarations are optional.


Global variables

This API, combined with the underlying system, defines the following global variables:
 

 AB;               // instance of class ABClass - general Ancient Brain functionality     
 ABRun;            // instance of class ABRunClass - extra functionality for runs   
 
 threeworld;       // instance of class ThreeWorldClass - basic functionality for this API
 

The "threeworld" object

The public variables and methods of "threeworld" are as follows:

 

	threeworld.canvas;		
   
		// A canvas that may be drawn on using getContext("2d") or getContext("webgl")
		  
		
  // create canvas:		

	threeworld.init ( color );   
		
		
  // get drawing context:
  
	threeworld.getContext ( type );
		
See the JS of the examples for instances where threeworld is called.
See 2D rendering documentation and WebGL rendering documentation.


Optional: Customised drawing context

The function threeworld.getContext calls threeworld.canvas.getContext with default args to create a drawing context. It is used like:
 
 var ctx = threeworld.getContext ( "2d" );
 var ctx = threeworld.getContext ( "webgl" );

If you want a customised drawing context, call it directly:

 
 var ctx = threeworld.canvas.getContext ( type, args );

Note if you are customising drawing context: To be able to generate World image screenshots, you need:

 
 var ctx = threeworld.canvas.getContext ( type, { preserveDrawingBuffer: true } );	


Examples

Examples of Worlds that use this API:


canvas webgl
344 runs ♦ 2 likes
Starter user
canvas 2d
189 runs ♦ 2 likes
Starter user

Blank JavaScript templates

Here are blank JavaScript templates for Worlds and Minds.

See Object Oriented programming in JavaScript



World with no Mind


// Customise AB run parameters (optional).
// The following 3 parameters can be customised. (They have default values.)

AB.clockTick       = int;    

	// Speed of run: Step every n milliseconds. Default 100.
	
AB.maxSteps        = int;    

	// Length of run: Maximum length of run in steps. Default 1000.

AB.screenshotStep  = int;   
  
	// For automatic generation of World images.
	// Take screenshot on this step. (All resources should have finished loading.) Default 50.

	

function World() { 

	// Optional declaration:
	// If endCondition is declared, runs will check for endCondition true and then terminate.
	// If not declared, runs will make no such check.
	
	this.endCondition = false;				  


	// Optional functions:
	// The following 3 function declarations are optional.
	// If not declared, nothing happens and the run continues.
	
	this.newRun = function()
	{
 		// Code for initial graphics drawing of objects.  
		// Canvas setup:
		
		threeworld.init ( arguments ); 	
				
		// To draw on canvas:
			
		var ctx = threeworld.getContext ( type );		// type = "2d" or "webgl"
	};


	this.nextStep = function()		 
	{
		// Code for graphics re-drawing of objects.  
		// To draw on canvas, see threeworld.getContext as above.
		
		if ( some condition )	   // Optional: Check for condition that will end the run early.
		{
			this.endCondition = true;	// This will end the run. 
		}
	};


	this.endRun = function()
	{
	};

}



World with a Mind


// Customise AB run parameters (optional).
// The following 3 parameters can be customised. (They have default values.)

AB.clockTick       = int;    

	// Speed of run: Step every n milliseconds. Default 100.
	
AB.maxSteps        = int;    

	// Length of run: Maximum length of run in steps. Default 1000.

AB.screenshotStep  = int;   
  
	// For automatic generation of World images.
	// Take screenshot on this step. (All resources should have finished loading.) Default 50.

	

function World() { 

	// Optional declaration:
	// If endCondition is declared, runs will check for endCondition true and then terminate.
	// If not declared, runs will make no such check.

	this.endCondition = false;				  

	
	// Optional functions:
	// The following 5 function declarations are optional.
	// If not declared, either nothing happens, or, if a return is expected, return is taken as 0.

	this.newRun = function()
	{
		// Code for initial graphics drawing of objects.  
		// Canvas setup:
		
		threeworld.init ( arguments ); 	
				
		// To draw on canvas:
			
		var ctx = threeworld.getContext ( type );		// type = "2d" or "webgl"
	};


	this.getState = function()
	{
	  return ( state );  				// State format defined by this World.
	};


	this.takeAction = function ( action )		// Action format defined by this World.
	{
		// Code for graphics re-drawing of objects.  
		// To draw on canvas, see threeworld.getContext as above.

		if ( some condition )	   // Optional: Check for condition that will end the run early.
		{
			this.endCondition = true;	// This will end the run. 
		}
	};


	this.endRun = function()
	{
	};


	this.getScore = function()
 	{
	 return ( float );		
	};

}



Mind


function Mind() { 

	// Optional functions:
	// The following 3 function declarations are optional.
	// If not declared, either nothing happens, or, if a return is expected, return is taken as 0.

	
	this.newRun = function()
	{
	};


	this.getAction = function ( state )		// State format is defined by each World.
	{ 
	 return  ( action );		 		// Action format is defined by each World.
	};


	this.endRun = function()
	{
	};

}

The background is a program, showing the JavaScript graphics used on this site.
Customise background:  
Font:

© Ancient Brain Ltd. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Beta      Contact      Stats      The name      Terms and conditions