Options
All
  • Public
  • Public/Protected
  • All
Menu

Class CanvasRenderer

A CanvasRenderer renders an Environment spatially in two dimensions. Importantly, it expects that all Agents in the Environment have numeric "x" and "y" values associated with them.

CanvasRenderers will render all Agents that are visible in the rendered Environment space, with the color of their "color" value (defaulting to black). Depending on the "shape" of the Agent, additional data might be needed. Agent "shape"s can be:

  • "circle" (default) — Draws a circle centered at the Agent's "x" / "y" values.
    • If the Agent has a "size" value, uses that for the circle radius (defaults to 1px).
  • "arrow" — Draws an arrow centered at the Agent's "x" / "y" values.
    • The arrow will point in the direction of the Agents "vx" / "vy" values. For example, an Agent with "vx" = 1 and "vy" = 0 will be rendered as an arrow pointing to the right.
    • Also uses the `"size" value.
  • "rect" — Draws a rectangle with the upper-left corner at "x" / "y".
    • Uses the Agent's "width" and "height" values for the dimensions of the rectangle.
  • "triangle" — Draws a triangle centered at the Agent's "x" / "y" values.
    • Also uses the "size" value.
since

0.0.11

Hierarchy

  • AbstractRenderer
    • CanvasRenderer

Index

Constructors

Properties

Methods

Constructors

constructor

  • The first parameter must be the Environment that this CanvasRenderer will render.

    The second parameter specifies options, which can include:

    • autoPosition (boolean = false) — For Environments using a Network, whether to automatically position the Agents.
    • background (string = "transparent") — The background color to draw before rendering any Agents.
    • connectionColor (string = "black") — For Environments using a Network, the color of lines
    • connectionOpacity (number = 1) — For Environments using a Network, the opacity of lines
    • connectionWidth (number = 1) — For Environments using a Network, the width of lines
    • height (number = 500) — The height, in pixels, of the canvas on which to render
    • origin ({ x: number; y: number } = { x: 0, y: 0 }) — The coordinate of the upper-left point of the space to be rendered
    • scale (number = 1) — The scale at which to render (the larger the scale, the smaller the size of the space that is actually rendered)
    • trace (boolean = false) — If true, the renderer will not clear old drawings, causing the Agents to appear to trace their paths across space
    • width (number = 500) — The width, in pixels, of the canvas on which to render

    Parameters

    Returns CanvasRenderer

Properties

environment

environment: Environment

Points to the Environment that this renderer is tied to. This is automatically set when the renderer is created.

height

height: number

width

width: number

Methods

mount

  • mount(el: string | HTMLElement): void

  • Mount this renderer to a DOM element. Pass either a string representing a CSS selector matching the element or the element itself.

    // mounts the renderer to the element with the ID `container`
renderer.mount('#container');

// mounts the renderer to the element itself
const container = document.getElementById('container');
renderer.mount(container);

    Parameters

    • el: string | HTMLElement

    Returns void

render

  • render(): void

Generated using TypeDoc