import Canvas from 'Artistoo/src/Canvas.js'

public class | source

Canvas

Class for taking a CPM grid and displaying it in either browser or with nodejs. Note: when using this class from outside the module, you don't need to import it separately but can access it from CPM.Canvas.

Test:

Some tests for drawing methods in the Canvas class.

Constructor Summary

Public Constructor
public	constructor(C: GridBasedModel \| Grid2D \| CoarseGrid, options: object) The Canvas constructor accepts a CPM object C or a Grid2D object.

Member Summary

Public Members
public	C: GridBasedModel \| CPM \| CA The underlying model that is drawn on the canvas.
public	extents: GridSize Grid size in each dimension, taken from the CPM or grid object to draw.
public	grid: Grid2D \| CoarseGrid The underlying grid that is drawn on the canvas.
public	height: number Height of the canvas in pixels (in its unzoomed state)
public	width: number Width of the canvas in pixels (in its unzoomed state)
public	wrap: number[] if nonzero: 'wrap' the grid to these dimensions; eg a pixel with x coordinate 201 and wrap[0] = 200 is displayed at x = 1.
public	zoom: number Zoom level to draw the canvas with, set to options.zoom or its default value 1.

Method Summary

Public Methods
public	clear(col: HexColor) Color the whole grid in color [col], or in black if no argument is given.
public	context(): CanvasRenderingContext2D Return the current drawing context.
public	drawActivityValues(kind: CellKind, A: ActivityConstraint \| ActivityMultiBackground, col: Function) Use to show activity values of the act model using a color gradient, for cells in the grid of cellkind "kind".
public	drawCellBorders(kind: CellKind, col: HexColor) Method for drawing the cell borders for a given cellkind in the color specified in "col" (hex format).
public	drawCells(kind: CellKind, col: HexColor \| function) Draw all cells of cellkind "kind" in color col (hex).
public	drawCellsOfId(id: CellId, col: HexColor) Draw all cells of cellid "id" in color col (hex).
public	drawField(cc: Grid2D \| CoarseGrid, col: HexColor) Use to color a grid according to its values.
public	drawFieldContour(cc: Grid2D \| CoarseGrid, nsteps: number, col: HexColor) Use to color a grid according to its values.
public	drawOnCellBorders(kind: CellKind, col: HexColor \| function) Color outer pixel of all cells of kind [kind] in col [col].
public	drawPixelSet(pixelarray: ArrayCoordinate[], col: HexColor \| function) General drawing function to draw all pixels in a supplied set in a given color.
public	setCanvasId(idString: string) Give the canvas element an ID supplied as argument.
public	writePNG(fname: string) Draw grid to the png file "fname".

Public Constructors

public constructor(C: GridBasedModel | Grid2D | CoarseGrid, options: object) source

The Canvas constructor accepts a CPM object C or a Grid2D object.

Params:

Name	Type	Attribute	Description
C	GridBasedModel \| Grid2D \| CoarseGrid		the object to draw, which must be an object of class GridBasedModel (or its subclasses CPM and CA), or a 2D grid (Grid2D or CoarseGrid). Drawing of other grids is currently not supported.
options	object	optional default: {}	Configuration settings
options.zoom	number	optional default: 1	positive number specifying the zoom level to draw with.
options.wrap	number[]	optional default: [0,0,0]	if nonzero: 'wrap' the grid to these dimensions; eg a pixel with x coordinate 201 and wrap[0] = 200 is displayed at x = 1.
options.parentElement	string	optional default: document.body	the element on the html page where the canvas will be appended.

Example:

A CPM with Canvas

let CPM = require( "path/to/build" )

// Create a CPM, corresponding Canvas and GridManipulator
// (Use CPM. prefix from outside the module)
let C = new CPM.CPM( [200,200], {
	T : 20,
	J : [[0,20][20,10]],
	V:[0,500],
	LAMBDA_V:[0,5]
} )
let Cim = new CPM.Canvas( C, {zoom:2} )
let gm = new CPM.GridManipulator( C )

// Seed a cell at [x=100,y=100] and run 100 MCS.
gm.seedCellAt( 1, [100,100] )
for( let t = 0; t < 100; t++ ){
	C.timeStep()
}

// Draw the cell and save an image
Cim.drawCells( 1, "FF0000" )			// draw cells of CellKind 1 in red
Cim.writePNG( "my-cell-t100.png" )

Public Members

public C: GridBasedModel | CPM | CA source

The underlying model that is drawn on the canvas.

public extents: GridSize source

Grid size in each dimension, taken from the CPM or grid object to draw.

public grid: Grid2D | CoarseGrid source

The underlying grid that is drawn on the canvas.

public height: number source

Height of the canvas in pixels (in its unzoomed state)

public width: number source

Width of the canvas in pixels (in its unzoomed state)

public wrap: number[] source

if nonzero: 'wrap' the grid to these dimensions; eg a pixel with x coordinate 201 and wrap[0] = 200 is displayed at x = 1.

public zoom: number source

Zoom level to draw the canvas with, set to options.zoom or its default value 1.

Public Methods

public clear(col: HexColor) source

Color the whole grid in color [col], or in black if no argument is given.

Params:

Name	Type	Attribute	Description
col	HexColor	optional default: "000000"	hex code for the color to use, defaults to black.

public context(): CanvasRenderingContext2D source

Return the current drawing context.

Return:

CanvasRenderingContext2D

current drawing context on the canvas.

public drawActivityValues(kind: CellKind, A: ActivityConstraint | ActivityMultiBackground, col: Function) source

Use to show activity values of the act model using a color gradient, for cells in the grid of cellkind "kind". The constraint holding the activity values can be supplied as an argument. Otherwise, the current CPM is searched for the first registered activity constraint and that is then used.

Params:

Name	Type	Attribute	Description
kind	CellKind		Integer specifying the cellkind to color. If negative, draw values for all cellkinds.
A	ActivityConstraint \| ActivityMultiBackground	optional	the constraint object to use, which must be of class ActivityConstraint or ActivityMultiBackground If left unspecified, this is the first instance of an ActivityConstraint or ActivityMultiBackground object found in the soft_constraints of the attached CPM.
col	Function	optional	a function that returns a color for a number in [0,1] as an array of red/green/blue values, for example, [255,0,0] would be the color red. If unspecified, a green-to-red heatmap is used.

public drawCellBorders(kind: CellKind, col: HexColor) source

Method for drawing the cell borders for a given cellkind in the color specified in "col" (hex format). This function draws a line around the cell (rather than coloring the outer pixels). If [kind] is negative, simply draw all borders.

See drawOnCellBorders to color the outer pixels of the cell.

Params:

Name	Type	Attribute	Description
kind	CellKind		Integer specifying the cellkind to color. Should be a positive integer as 0 is reserved for the background.
col	HexColor	optional default: "000000"	hex code for the color to use, defaults to black.

public drawCells(kind: CellKind, col: HexColor | function) source

Draw all cells of cellkind "kind" in color col (hex). This method is meant for models of class CPM, where the CellKind is defined. If you apply this method on a CA model, this method will internally call drawCellsOfId by just supplying the "kind" parameter as CellId.

Params:

Name	Type	Attribute	Description
kind	CellKind		Integer specifying the cellkind to color. Should be a positive integer as 0 is reserved for the background.
col	HexColor \| function		Optional: hex code for the color to use. If left unspecified, it gets the default value of black ("000000"). col can also be a function that returns a hex value for a cell id, but this is only supported for CPMs.

Example:

Drawing cells by "kind" or "ID"


// Draw all cells of kind 1 in red
Cim.drawCells( 1, "FF0000" )

// To color cells by their ID instead of their kind, we can parse
// a function to 'col' instead of a string. The example function
// below reads the color for each cellID from an object of keys (ids)
// and values (colors):
Cim.colFun = function( cid ){

	// First time function is called, attach an empty object 'cellColorMap' to
	// simulation object; this tracks the color for each cellID on the grid.
	if( !Cim.hasOwnProperty( "cellColorMap" ) ){
		Cim.cellColorMap = {}
	}

	// Check if the current cellID already has a color, otherwise put a random
	// color in the cellColorMap object
	if( !Cim.cellColorMap.hasOwnProperty(cid) ){
		// this cell gets a random color
		Cim.cellColorMap[cid] = Math.floor(Math.random()*16777215).toString(16).toUpperCase()
	}

	// now return the color assigned to this cellID.
	return Cim.cellColorMap[cid]
}
// Now use this function to draw the cells, colored by their ID
Cim.drawCells( 1, Cim.colFun )

public drawCellsOfId(id: CellId, col: HexColor) source

Draw all cells of cellid "id" in color col (hex). Note that this function also works for CA. However, it has not yet been optimised and is very slow if called many times. For multicellular CPMs, you are better off using drawCells with an appropriate coloring function (see that method's documentation).

Params:

Name	Type	Attribute	Description
id	CellId		id of the cell to color.
col	HexColor		Optional: hex code for the color to use. If left unspecified, it gets the default value of black ("000000").

public drawField(cc: Grid2D | CoarseGrid, col: HexColor) source

Use to color a grid according to its values. High values are colored in a brighter color.

Params:

Name	Type	Attribute	Description
cc	Grid2D \| CoarseGrid	optional	the grid to draw values for. If left unspecified, the grid that was originally supplied to the Canvas constructor is used.
col	HexColor	optional default: "0000FF"	the color to draw the chemokine in.

public drawFieldContour(cc: Grid2D | CoarseGrid, nsteps: number, col: HexColor) source

Use to color a grid according to its values. High values are colored in a brighter color.

Params:

Name	Type	Attribute	Description
cc	Grid2D \| CoarseGrid	optional	the grid to draw values for. If left unspecified, the grid that was originally supplied to the Canvas constructor is used.
nsteps	number	optional default: 10	the number of contour lines to draw. Contour lines are evenly spaced between the min and max log10 of the chemokine.
col	HexColor	optional default: "FFFF00"	the color to draw contours with.

public drawOnCellBorders(kind: CellKind, col: HexColor | function) source

Color outer pixel of all cells of kind [kind] in col [col]. See drawCellBorders to actually draw around the cell rather than coloring the outer pixels. If you're using this model on a CA, CellKind is not defined and the parameter "kind" is instead interpreted as CellId.

Params:

Name	Type	Attribute	Description
kind	CellKind		Integer specifying the cellkind to color. Should be a positive integer as 0 is reserved for the background.
col	HexColor \| function		Optional: hex code for the color to use. If left unspecified, it gets the default value of black ("000000"). col can also be a function that returns a hex value for a cell id.

public drawPixelSet(pixelarray: ArrayCoordinate[], col: HexColor | function) source

General drawing function to draw all pixels in a supplied set in a given color.

Params:

Name	Type	Attribute	Description
pixelarray	ArrayCoordinate[]		an array of ArrayCoordinates of pixels to color.
col	HexColor \| function		Optional: hex code for the color to use. If left unspecified, it gets the default value of black ("000000"). col can also be a function that returns a hex value for a cell id.

public setCanvasId(idString: string) source

Give the canvas element an ID supplied as argument. Useful for building an HTML page where you want to get this canvas by its ID.

Params:

Name	Type	Attribute	Description
idString	string		the name to give the canvas element.

public writePNG(fname: string) source

Draw grid to the png file "fname".

Params:

Name	Type	Attribute	Description
fname	string		Path to the file to write. Any parent folders in this path must already exist.