cacatoo
Version:
Building, exploring, and sharing spatially structured models
108 lines (85 loc) • 4.59 kB
HTML
<!--
EXAMPLE FILE: Interacting grids
Here, two models are defined, one following the rules of Game of Life (i.e. example 01),
and one following the rules of majority voting (take the state that most of your neighbours)
have. However, the "alive" pixels in game of life, also vote! This is a good example to
understand how to make your different grids interact.
-->
<html>
<script src="../../dist/cacatoo.js"></script> <!-- Include cacatoo library (compiled with rollup) -->
<script src="../../lib/all.js"></script> <!-- Load other packages -->
<link rel="stylesheet" href="../../style/cacatoo.css"> <!-- Set style sheet -->
<script>
/*-----------------------Start user-defined code ---------------------*/
let sim;
function cacatoo() {
let config = {
title: "Interacting grids",
description: "An example of how you can make grids interact. GoL (left-hand side, purple) influences vote (right-hand side) to vote blue.",
maxtime: 10000,
ncol: 200,
nrow: 100, // dimensions of the grid to build
wrap: [true, true], // Wrap boundary [COLS, ROWS]
scale: 3, // scale of the grid (nxn pixels per grid cell)
statecolours: {
'alive': { 0: 'black', 1: '#FF00AA' },
'overlay': { 0: 'black', 1: '#5555FF', 2: 'red' }
}
}
sim = new Simulation(config)
sim.makeGridmodel("gol");
sim.initialGrid("gol", 'alive', 0, 1, 0.1)
sim.createDisplay("gol", "alive", "Game of life (solo)")
sim.makeGridmodel("vote");
sim.initialGrid("vote", 'left', 0, 1, 0.5) // Give each grid-point object a new property names 'val', with 50% 1, otherwise 0
sim.initialGrid("vote", 'overlay', 0) // Give each grid-point object a new property names 'val', with 50% 1, otherwise 0
sim.createDisplay("vote", "overlay", "Vote / Game of life interact")
sim.gol.nextState = function (x,y) // Define the next-state function. This example is game of life + vote
{
// Count living neighbours
let neighbours = sim.gol.countMoore8(this, x, y, 'alive',1) // In the Moore8 neighbourhood of this grid count # of 1's for the 'alive' property
// Store own state
let state = this.grid[x][y].alive;
// Apply the three rules of GoL
if (state == 0 && neighbours == 3) {
this.grid[x][y].alive = 1;
}
else if (state == 1 && (neighbours < 2 || neighbours > 3))
this.grid[x][y].alive = 0;
else
this.grid[x][y].alive = state;
}
sim.vote.nextState = function (x, y) // Define the next-state function. This example is game of shmife
{
//Count living neighbours. countMoore9 is self-inclusive
let neighbours = sim.vote.countMoore9(this, x,y, 'left',1)
let gol_neighbours = sim.vote.countMoore9(sim.gol, x,y, 'alive',1)
if (neighbours + gol_neighbours > 4)
this.grid[x][y].left = 1 // If majority votes left, this position also votes left
else
this.grid[x][y].left = 2 // If majority votes right, this position also votes right
if (sim.gol.grid[x][y].alive) this.grid[x][y].overlay = 0
else this.grid[x][y].overlay = this.grid[x][y].left
}
for (model of sim.gridmodels) {
model.update = function () // Give each grid the same update steps (update grid, then display)
{
this.synchronous()
}
}
sim.addCustomSlider("Sleeping time (ms)",function (new_value) { sim.sleep = new_value },0,1000,1,0) // addCustomSlider(function, minimal, maximal, step-size, default, label)
sim.addButton("record video ⏺ ", function() {
sim.makeMovie(sim.vote.canvases["Vote / Game of life interact"])
})
sim.start()
//
}
</script>
<body onload="cacatoo()">
<div class="header" id="header"></div>
<div class="content" id="canvas_holder"> </div>
<div class="content" id="form_holder"></div>
<div class="content" id="graph_holder"> </div>
<div class="footer" id="footer"></div>
</body>
</html>