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:

Constructor Summary

Public Constructor
public

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

Member Summary

Public Members
public

The underlying model that is drawn on the canvas.

public

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

public

The underlying grid that is drawn on the canvas.

public

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

public

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

public

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 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

Return the current drawing context.

public

Use to show activity values of the act model using a color gradient, for cells in the grid of cellkind "kind".

public

Method for drawing the cell borders for a given cellkind in the color specified in "col" (hex format).

public

Draw all cells of cellkind "kind" in color col (hex).

public

Draw all cells of cellid "id" in color col (hex).

public

Use to color a grid according to its values.

public

Use to color a grid according to its values.

public

Color outer pixel of all cells of kind [kind] in col [col].

public

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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
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:

NameTypeAttributeDescription
idString string

the name to give the canvas element.

public writePNG(fname: string) source

Draw grid to the png file "fname".

Params:

NameTypeAttributeDescription
fname string

Path to the file to write. Any parent folders in this path must already exist.