flocc.ASCIIRenderer class (from here on, just
ASCIIRenderer) renders a
GridEnvironment on a web page. After mounting, it automatically updates the view every time its environment ticks.
ASCIIRenderer requires a
GridEnvironment to render:
const environment = new GridEnvironment(2, 2); const renderer = new ASCIIRenderer(environment);
.mount specifies where on the page the renderer should render the environment. If passed a CSS selector (like
.class), the renderer will look for the first matching element on the page, and use that as a container. If passed an element directly, the renderer will use that element as a container.
renderer.mount('#some-element'); // or... const element = document.getElementById('some-element'); renderer.mount(element);
Renders a view of the renderer’s
GridEnvironment into the HTML element that was mounted previously.
The renderer draws the result of
agent.get('value') for each
Agent in the
GridEnvironment, so make sure that you have called
agent.set('value', 'x') (or 0, 1, etc.) for each agent!
Each time the renderer’s
ticks, this method is automatically called, but you still might want to call it manually (for example, if making manual changes to agents).
const agent1 = environment.addAgent(0, 0); const agent2 = environment.addAgent(1, 2); const agent3 = environment.addAgent(2, 1); agent1.set('value', 'a'); agent2.set('value', 'b'); agent3.set('value', 'c'); renderer.render();
a c b
If instead of a discrete, checkerboard-like environment, you’re rendering agents in a continuous 2d environment, you should use a CanvasRenderer.