cell.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <html>
  2. <head>
  3. <title>Automaton Explorer</title>
  4. <script type="text/javascript" src="../../protovis-d3.2.js"></script>
  5. <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
  6. <script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script>
  7. <script type="text/javascript" src="cell.js"></script>
  8. <link type="text/css" href="ui-lightness/jquery-ui-1.8rc3.custom.css" rel="stylesheet"/>
  9. <link type="text/css" href="../../tests/style.css" rel="stylesheet"/>
  10. <style type="text/css">
  11. .ui-slider {
  12. font-size: 10px;
  13. width: 300px;
  14. margin-top: 5px;
  15. }
  16. sup, sub {
  17. line-height: 0;
  18. }
  19. .ui-state-focus {
  20. outline: none;
  21. }
  22. #slider {
  23. width: 300px;
  24. display: inline-block;
  25. margin-left: 10px;
  26. margin-right: 10px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <h3>Automaton Explorer</h3>
  32. <div style="width:8in;">
  33. rule: <span id="slider"></span><span id="rule">30</span>
  34. <span style="float:right;">
  35. start: <input type="radio" checked id="point" name="start" value="point">
  36. <label for="point">point</label>
  37. <input type="radio" id="random" name="start" value="random">
  38. <label for="random">random</label>
  39. </span>
  40. </div><p>
  41. <script type="text/javascript+protovis">
  42. var h = 128,
  43. w = h << 1,
  44. start = "point",
  45. rule = 30;
  46. var vis = new pv.Panel()
  47. .width(w * 3)
  48. .height(h * 3)
  49. .top(40);
  50. vis.add(pv.Panel)
  51. .data(pv.range(8))
  52. .right(function(i) (i + .5) * w * 3 / 8)
  53. .top(-35)
  54. .event("mousedown", function(i)
  55. ($("#rule").html(rule ^= 1 << i),
  56. $(slider).slider('value', rule),
  57. vis))
  58. .add(pv.Bar)
  59. .top(10)
  60. .right(-5)
  61. .width(10)
  62. .height(10)
  63. .title(function(j, i) "Toggle bit " + i + ".")
  64. .strokeStyle("#bbb")
  65. .fillStyle(function(i) rule >> i & 1 ? "#000" : "#fff")
  66. .add(pv.Bar)
  67. .data(pv.range(3))
  68. .top(0)
  69. .right(function(i) i * 10 - 15)
  70. .fillStyle(function(i, j) j >> i & 1 ? "#000" : "#fff");
  71. vis.add(pv.Image)
  72. .def("cell", cell)
  73. .imageWidth(w)
  74. .imageHeight(h)
  75. .image(pv.colors("#fff", "#000").by(function(x, y) this.cell()[y][x]));
  76. vis.render();
  77. $(slider).slider({
  78. min: 1, value: 30, max: 255, slide: function(e, ui) {
  79. $("#rule").html(rule = ui.value);
  80. vis.render();
  81. }
  82. });
  83. $([point, random]).change(function() {
  84. start = this.value;
  85. vis.render();
  86. });
  87. </script>
  88. <p>From <a href="http://mathworld.wolfram.com/CellularAutomaton.html">MathWorld</a>:
  89. "A cellular automaton is a collection of 'colored' cells on a grid of
  90. specified shape that evolves through a number of discrete time steps
  91. according to a set of rules based on the states of neighboring cells." This
  92. example explores binary, nearest-neighbor, one-dimensional automata, of
  93. which there are 256 (2<sup>8</sup>) possible rules. The eight possible
  94. outcomes for the current rule are shown across the top; click to toggle the
  95. selected bit.
  96. </body>
  97. </html>