cacatoo
Version:
Building, exploring, and sharing spatially structured models
101 lines (81 loc) • 4.86 kB
HTML
<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; // Declare a variable named "sim" globally, so that we can access our cacatoo-simulation from wherever we need.
/**
* function cacatoo() contains all the user-defined parts of a cacatoo-model. Configuration, update rules, what is displayed or plotted, etc. It's all here.
*/
function cacatoo() {
/*
1. SETUP. First, set up a configuration-object. Here we define how large the grid is, how long will it run, what colours will the critters be, etc.
*/
let config =
{
title: "5x+1", // The name of your cacatoo-simulation
description: "3x+1... but different. Probably the most pointless CA ever made.", // And a description if you wish
maxtime: 10000, // How many time steps the model continues to run
ncol: 200, // Number of columns (width of your grid)
nrow: 200, // Number of rows (height of your grid)
seed:2,
wrap: [true, true], // Wrapped boundary conditions? [COLS, ROWS]
scale: 2 // Colours for each state. Background (0) defaults to black.
}
/*
1. SETUP. (continued) Now, let's use that configuration-object to generate a new Cacatoo simulation
*/
sim = new Simulation(config) // Initialise the Cacatoo simulation
sim.makeGridmodel("three") // Build a new Gridmodel within the simulation called "gol" (Game Of Life)
sim.initialGrid(sim.three, 'num', 0, 1.0)
sim.three.grid[100][100].num = 4 // Set half (50%) of the Gridmodel's grid points to 1 (alive)
sim.createDisplay_continuous({model:"three",property:"num",label:"Number",maxval:10000,fill:"inferno"}) // Create a display so we can see our newly made gridmodel,
/*
2. DEFINING THE RULES. Below, the user defines the nextState function. This function will be applied for each grid point when we will update the grid later.
*/
sim.three.nextState = function (x, y) {
// So, first we need to know how many cells are alive around a grid point
let self = this.grid[x][y].num
let sum_neigh = this.sumNeumann5(this, x, y, 'num')
if (sum_neigh%2==0)
{
this.grid[x][y].num = self / 2
}
else
{
this.grid[x][y].num = sum_neigh + 1
}
this.grid[x][y].num = Math.min(10e4,this.grid[x][y].num)
}
/*
3. MAIN SIMULATION LOOP. Finally, uwe need to set the update-function, which is the mainwill be applied to the whole grid each time step. For now, all we will do is call "synchronous", which
applies the next-state function shown above to each grid point. All cells are updated at the same time, rather than in turn (for this, use the function "asynchonous")
*/
sim.three.update = function () {
let avg_x = 0
for (let x = 0; x < this.nc; x++) for (let y = 0; y < this.nc; y++) avg_x += this.grid[x][y].num
avg_x /= this.nc * this.nr
this.plotArray(["Average x"], [avg_x], ["black"], "Average x")
// this.MargolusDiffusion()
this.synchronous() // Applied as many times as it can in 1/60th of a second
}
/*
OPTIONAL: Now that we have everything setup, we can also add some interactive elements (buttons or sliders). See cheater.html for more examples of this.
*/
sim.addButton("pause/continue", function () { sim.toggle_play() })
sim.addButton("step", function () { sim.step(); sim.display() })
sim.start()
}
/*-------------------------End user-defined code ---------------------*/
</script>
<body onload="cacatoo()">
<div class="header" id="header">
<h2>Cacatoo </h2>
</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>