diff options
| -rw-r--r-- | all.html | 8 | ||||
| -rw-r--r-- | js/stochasticca.js | 79 | ||||
| -rw-r--r-- | mathematical.html | 12 | ||||
| -rw-r--r-- | stochasticca.html | 23 |
4 files changed, 120 insertions, 2 deletions
@@ -170,6 +170,14 @@ <div class="row"> <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/stochastic.png" width="400" height="400"><br> + <div class="project-title"><a href="stochasticca.html">Stochastic elementary cellular automata</a></div> + Run <a href="https://en.wikipedia.org/wiki/Stochastic_cellular_automaton">Stochastic elementary cellular automata</a>. + </div> + </div> + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> <img src="screenshots/h.png" width=200 height=200><br> <div class="project-title"><a href="h.html">H</a></div> Pick simple rules, and watch a cool pattern diff --git a/js/stochasticca.js b/js/stochasticca.js new file mode 100644 index 0000000..5226c35 --- /dev/null +++ b/js/stochasticca.js @@ -0,0 +1,79 @@ +var params; + +function mod(a, b) +{ + var c = a % b; + while (a < 0) + { + c += b; + } + return c; +} + +function sigmoid(z) +{ + return 1 / (1 + Math.exp(-z)) +} + +function drawCA() +{ + try + { + params = $.parseJSON("[" + $("#params").val() + "]"); + var width = parseInt($("#width").val()); + var time = parseInt($("#time").val()); + } + catch(e) + { + $("#error").text("Error - Invalid parameters: " + $("#params").val() + "."); + return; + } + createCanvas(width, time); + var C = Math.floor(params.length / 2); + var values = [[]]; + for (var i = 0; i < width; i++) + { + values[0][i] = 1; + } + for (var t = 1; t < time; t++) + { + values.push([]); + for (var i = 0; i < width; i++) + { + var total = 0; + for (var c = -C; c <= C; c++) + { + total += params[c+C] * values[t-1][i+c]; + } + values[t].push(Math.random() < sigmoid(total) ? 1 : 0) + } + } + + for (var t = 0; t < time; t++) + { + for (var i = 0; i < width; i++) + { + stroke(values[t][i] === 1 ? 0 : 255); + point(i, t); + } + } +} + +function setup() +{ +} + +$(function() +{ + $("#params").keydown(function (e) + { + if (e.which == 13) + { + drawCA(); + } + }); + $("#display").click(function() + { + drawCA(); + }); +}); diff --git a/mathematical.html b/mathematical.html index 4dde0c1..477fa39 100644 --- a/mathematical.html +++ b/mathematical.html @@ -20,10 +20,18 @@ <div class="project-title"><a href="hypersphere.html">Hypersphere</a></div> Shows a projection of a <a href="https://en.wikipedia.org/wiki/3-sphere">hypersphere</a> onto the plane. It uses a 2x4 matrix to convert 4D points into 2D points. Use the arrow keys and the mouse to rotate it in 4D. - + </div> </div> - + + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/stochastic.png" width="400" height="400"><br> + <div class="project-title"><a href="stochasticca.html">Stochastic elementary cellular automata</a></div> + Run <a href="https://en.wikipedia.org/wiki/Stochastic_cellular_automaton">Stochastic elementary cellular automata</a>. + </div> + </div> + <div class="row"> <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> <img src="screenshots/modularpascal.png" width=256 height=256><br> diff --git a/stochasticca.html b/stochasticca.html new file mode 100644 index 0000000..6f7bba9 --- /dev/null +++ b/stochasticca.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/style.css"> + + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> + + <meta charset="utf-8"> + <title>Stochastic Cellular Automata</title> + </head> + <body> + <div id="navbar"></div> + <script src="navbar.js"></script> + <h2>Stochastic Cellular Automata</h2> + Parameters: <input type="text" value="-3, 3, -3" id="params"><br> + Width: <input type="number" value="400" id="width"><br> + Time: <input type="number" value="400" id="time"><br> + <button id="display">Display</button><br> + <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script> + <script src="js/stochasticca.js"></script> + </body> +</html> |