]> git.eli173.com Git - hexgrid/commitdiff
home / projects / hexgrid / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 69095fc)
ready to publish in some form i guess master
authorElijah Cohen <eli@eli173.com>
Mon, 21 Nov 2022 22:34:53 +0000 (16:34 -0600)
committerElijah Cohen <eli@eli173.com>
Mon, 21 Nov 2022 22:34:53 +0000 (16:34 -0600)
README patch | blob | history
basic.html [new file with mode: 0644] patch | blob
icn.png [new file with mode: 0644] patch | blob
index.html patch | blob | history
life.html patch | blob | history
life.js patch | blob | history
minplay.js [new file with mode: 0644] patch | blob
rps.js patch | blob | history

diff --git a/README b/README
index ecbd6b6979fe1fa8725963409f331205bc5d7012..60ddffdcf1cb03f7582bfdc8bd8d6bbb07cdd4e6 100644 (file)
--- a/README
+++ b/README
@@ -23,7 +23,7 @@ Finally, the drawState method is probably the most complicated method in this cl
 Finally, extend the Grid class. The constructor needs to call the super's constructor, and pass the subclass you've defined above and your desired 'default' state. There's also an optional 'step' method, which is mostly useful for cellular automata, and enables the play and pause features in the editor (and which can be useful in other contexts as well). This method determines the state of the grid which is to follow immediately from its current state. The 'clone' method from the Hex subclass may be incredibly useful here.
 
 
 Finally, extend the Grid class. The constructor needs to call the super's constructor, and pass the subclass you've defined above and your desired 'default' state. There's also an optional 'step' method, which is mostly useful for cellular automata, and enables the play and pause features in the editor (and which can be useful in other contexts as well). This method determines the state of the grid which is to follow immediately from its current state. The 'clone' method from the Hex subclass may be incredibly useful here.
 
 
-And that's it. To use your new implementation in the editor, just set the variable =g= to a new instance of your grid, and replace 'basic.js' with the name of your file in 'index.html', then load up the 'index.html' in your browser.
+And that's it. There are only a couple more things to do before you can use your new implementation in the editor. First, set the variable =g= to a new instance of your grid. Then, make a copy of 'basic.html' named as you'd like, and then in that file replace 'basic.js' with the name of the file your implementation is in. With that done, you can load up the new html file in your browser and get to it!
 
 
 The editor has copying and pasting features, transformation features, saving, loading, importing and exporting features, and can advance and play cellular automata.
\ No newline at end of file
 
 
 The editor has copying and pasting features, transformation features, saving, loading, importing and exporting features, and can advance and play cellular automata.
\ No newline at end of file
diff --git a/basic.html b/basic.html
new file mode 100644 (file)
index 0000000..d73f976
--- /dev/null
+++ b/basic.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta charset="utf-8">
+<html>
+  <head>
+    <script src="grid.js"></script>
+               <script src="cell.js"></script>
+               <script src="play.js"></script>
+               <script src="basic.js"></script>
+               <script>
+                       function run() {
+                                       lc();
+                       }
+               </script>
+               <style>
+                       span {
+                                       margin=left: 15px;
+                       }
+                       input[type=number] {
+                                       width: 30px;
+                                       margin-left: 15px;
+                       }
+                       select {
+                                       margin-left: 15px;
+                       }
+                       #es {
+                                       margin-left: 15px;
+                       }
+               </style>
+               <link rel="icon" type="image/png" href="icn.png"/>
+    <title>hexagonal grids</title>
+  </head>
+  <body onload="run()" style="background-color: #f8f8ff;">
+               <div class="ctrl">
+                       <span>
+                               <input type="button" id="step" value="step"/>
+                               <input type="button" id="playpause" value="play"/>
+                               <input type="range" id="tempo" value="150" min="20" max="500"/>
+                               <input type="button" id="clear" value="clear"/>
+                               <input type="button" id="reset" value="reset"/>
+                       </span>
+                       <span>
+                               <input type="number" id="rad" value="9" min="1" max="30" step="1"/>
+                               <input type="button" id="rot" value="rotate hex"/>
+                               <input type="button" id="flp" value="flip hex"/>
+                               <input type="button" id="rfl" value="reflect hex"/>
+                               <input type="button" id="copy" value="copy hex"/>
+                               <input type="button" id="paste" value="paste hex"/>
+                       </span>
+                       <span>
+                               <input type="number" id="slot" value="1" min="1" max="9" step="1"/>
+                               <input type="button" id="save" value="save state"/>
+                               <input type="button" id="load" value="load state"/>
+                       </span>
+                       <span>
+                               <input type="button" id="es" value="export state"/>
+                               <input type="button" id="is" value="import state"/>
+                       </span>
+                       <details><summary></summary><span id="outzone"></span></details>
+               </div>
+    <div><canvas width="2000" height="2000" id="c"></canvas></div>
+  </body>
+</html>
diff --git a/icn.png b/icn.png
new file mode 100644 (file)
index 0000000..0baa94f
Binary files /dev/null and b/icn.png differ
diff --git a/index.html b/index.html
index d73f976f20c6fb1233876cf7761c559a27f12798..e92ebcd8029d834bd3cd62cca1143df503d0b136 100644 (file)
--- a/index.html
+++ b/index.html
@@ -4,14 +4,23 @@
   <head>
     <script src="grid.js"></script>
                <script src="cell.js"></script>
   <head>
     <script src="grid.js"></script>
                <script src="cell.js"></script>
-               <script src="play.js"></script>
-               <script src="basic.js"></script>
+               <script src="minplay.js"></script>
+               <script src="life.js"></script>
                <script>
                        function run() {
                                        lc();
                <script>
                        function run() {
                                        lc();
+                                       setInterval(play, 200);
                        }
                </script>
                <style>
                        }
                </script>
                <style>
+                       .d {
+                                       text-align:center;
+                                       margin: 0 auto;
+                       }
+                       .d2 {
+                                       max-width: 600px;
+                                       margin: 0 auto;
+                       }
                        span {
                                        margin=left: 15px;
                        }
                        span {
                                        margin=left: 15px;
                        }
@@ -30,33 +39,27 @@
     <title>hexagonal grids</title>
   </head>
   <body onload="run()" style="background-color: #f8f8ff;">
     <title>hexagonal grids</title>
   </head>
   <body onload="run()" style="background-color: #f8f8ff;">
-               <div class="ctrl">
-                       <span>
-                               <input type="button" id="step" value="step"/>
-                               <input type="button" id="playpause" value="play"/>
-                               <input type="range" id="tempo" value="150" min="20" max="500"/>
-                               <input type="button" id="clear" value="clear"/>
-                               <input type="button" id="reset" value="reset"/>
-                       </span>
-                       <span>
-                               <input type="number" id="rad" value="9" min="1" max="30" step="1"/>
-                               <input type="button" id="rot" value="rotate hex"/>
-                               <input type="button" id="flp" value="flip hex"/>
-                               <input type="button" id="rfl" value="reflect hex"/>
-                               <input type="button" id="copy" value="copy hex"/>
-                               <input type="button" id="paste" value="paste hex"/>
-                       </span>
-                       <span>
-                               <input type="number" id="slot" value="1" min="1" max="9" step="1"/>
-                               <input type="button" id="save" value="save state"/>
-                               <input type="button" id="load" value="load state"/>
-                       </span>
-                       <span>
-                               <input type="button" id="es" value="export state"/>
-                               <input type="button" id="is" value="import state"/>
-                       </span>
-                       <details><summary></summary><span id="outzone"></span></details>
+               <div class="d2">
+                       <div class="d">
+                               <div>
+                                       <p>Here's a nice playground for a few cellular automata on a hexagonal grid:</p>
+                                       <ul>
+                                               <li><a href="rps.html">Game of Life</a></li>
+                                               <li><a href="ww.html">WireWorld</a></li>
+                                               <li><a href="life.html">Rock-Paper-Scissors Automata</a></li>
+                                       </ul>
+                                       <p>In all of these, you'll be brought to a blank canvas, where you can create your own patterns and run them as automata. Clicking in the vast space you're given will add or remove cells from the simulation and change their statuses. You can also change the speed with the slider, and do some advanced editing with the other tools at the top, as well as saving and exporting your arrangements (the export output is hidden by the little triangle until you click it).</p>
+                                       <p>The Game of  Life one is a standard port of the classic. You can even adjust how many neighbors cause cells to survive or spawn.</p>
+                                       <p>WireWorld is another classic automata. This is the one I've done the most with, and it's fairly straightforward to implement various logic gates here. I've done so, and put a 'demo' menu on this page, so you can see some examples of this. There are some cool ones, take a look!</p>
+                                       <p>If you'd like to implement your own form of hexagonal-grid automata, check out the <a href="README">README</a> file.</p>
+                                       <p>Just a note, this is not fast. The primary focus of this was to get something extensible and fun up quickly. I am liable to redesign this with speed in mind, but if I do, it will keep the same extensibility you find in the current version.</p>
+                               </div>
+                               <input type="button" id="step" value="step" hidden />
+                               <input type="range" id="tempo" value="150" min="20" max="500" hidden />
+                               <div><canvas width="200" height="200" id="c"></canvas></div>
+                               <input type="button" id="refr" value="refresh" />
+                               <p>Maybe, one day in the distant future, if we're nice enough, bees will help us compute things. This is the first step towards that.</p>
+                       </div>
                </div>
                </div>
-    <div><canvas width="2000" height="2000" id="c"></canvas></div>
   </body>
 </html>
   </body>
 </html>
diff --git a/life.html b/life.html
index 97b73382f55d8eb1794fad0c759c22187236d248..60fc1c780a3014ec2ca35e505bfb102fdc6cad59 100644 (file)
--- a/life.html
+++ b/life.html
@@ -8,6 +8,7 @@
                <script src="life.js"></script>
                <script>
                        function run() {
                <script src="life.js"></script>
                <script>
                        function run() {
+                                       initRulue();
                                        lc();
                        }
                </script>
                                        lc();
                        }
                </script>
diff --git a/life.js b/life.js
index 6bd3c501044542c8f082be66b24680847fb5e930..16f79ee7d28281088423cde05cb1f7c5daad9851 100644 (file)
--- a/life.js
+++ b/life.js
@@ -9,8 +9,10 @@
 //let PRODUCES = [2];
 
 // alt?
 //let PRODUCES = [2];
 
 // alt?
-let SURVIVAL = [3];
-let PRODUCES = [2];
+//let SURVIVAL = [3];
+//let PRODUCES = [2];
+let SURVIVAL = new Set([3]);
+let PRODUCES = new Set([2]);
 
 
 const LifeState = {
 
 
 const LifeState = {
@@ -79,12 +81,12 @@ class LifeGrid extends Grid {
                                                                }
                                                                let nbrct = nbrs.reduce(reducefn,0);
                                                                if(cellcp[i].state == LifeState.ON) {
                                                                }
                                                                let nbrct = nbrs.reduce(reducefn,0);
                                                                if(cellcp[i].state == LifeState.ON) {
-                                                                               if(!SURVIVAL.includes(nbrct)) {
+                                                                               if(!SURVIVAL.has(nbrct)) {
                                                                                                this.cells[i].state = LifeState.OFF;
                                                                                }
                                                                }
                                                                if(cellcp[i].state == LifeState.OFF) {
                                                                                                this.cells[i].state = LifeState.OFF;
                                                                                }
                                                                }
                                                                if(cellcp[i].state == LifeState.OFF) {
-                                                                               if(PRODUCES.includes(nbrct)) {
+                                                                               if(PRODUCES.has(nbrct)) {
                                                                                                this.cells[i].state = LifeState.ON;
                                                                                }
                                                                }
                                                                                                this.cells[i].state = LifeState.ON;
                                                                                }
                                                                }
@@ -110,7 +112,12 @@ function blankHex(q,r,sz,g) {
                }
 }
 
                }
 }
 
-
+function randHex(q,r,sz,g,val=0.5) {
+               let h = g.copyHex(q,r,sz);
+               for(let c of h) {
+                               g.change(Math.random() > val? LifeState.OFF:LifeState.ON, c.q,c.r);
+               }
+}
 function randomize(q,r,g) {
                // puts random elements in the grid
                for(let i=0;i<q;i++) {
 function randomize(q,r,g) {
                // puts random elements in the grid
                for(let i=0;i<q;i++) {
@@ -125,3 +132,21 @@ function randomize(q,r,g) {
                                }
                }
 }
                                }
                }
 }
+
+function initRulue() {
+               let toggler = (e) => {
+                               let which = parseInt(e.target.name);
+                               let toBeChanged = e.target.id[0] == 'b' ? PRODUCES: SURVIVAL;
+                               if(e.target.checked) {
+                                               toBeChanged.add(which);
+                               }
+                               else {
+                                               toBeChanged.delete(which);
+                               }
+               }
+               let a = ["s1","s2","s3","s4","s5","s6","b1","b2","b3","b4","b5","b6"];
+               for(let i of a) {
+                               console.log(i);
+                               document.getElementById(i).onclick = toggler;
+               }
+}
diff --git a/minplay.js b/minplay.js
new file mode 100644 (file)
index 0000000..5603d7d
--- /dev/null
+++ b/minplay.js
@@ -0,0 +1,33 @@
+
+
+
+var g = null; // must be set elsewhere before using anything in here
+
+//params
+xcenter = 200/2
+ycenter = 200/2
+scale = 5
+
+var ctx = null;
+var c = null;
+
+var timeout = 200;
+var rstgrid = g;
+var intervalID = null;
+
+
+function play() {
+               g.step();
+               drawGrid(g, ctx, xcenter,ycenter,scale);
+}
+function lc() {
+               c = document.getElementById('c');
+               ctx = c.getContext('2d');
+               randHex(5,5,12,g,0.6);
+               drawGrid(g, ctx, xcenter,ycenter,scale);
+               b = document.getElementById('refr');
+               b.onclick = refresh;
+}
+function refresh() {
+               randHex(5,5,12,g,0.5);
+}
diff --git a/rps.js b/rps.js
index ac766d3bea4dbe2cf3ad0bb3b0d1883691cba1ac..10e9dd81f416332522c2006ad1bd52902ea9c65e 100644 (file)
--- a/rps.js
+++ b/rps.js
@@ -153,3 +153,15 @@ function randomize(q,r,g) {
                                }
                }
 }
                                }
                }
 }
+function randHex(q,r,sz,g) {
+               let h = g.copyHex(q,r,sz)
+               for(let c of h) {
+                               let rv = Math.floor(Math.random()*3);
+                               if(rv<1) 
+                                               g.change(RPSState.ROCK,c.q,c.r);
+                               else if(rv<2)
+                                               g.change(RPSState.PAPER,c.q,c.r);
+                               else
+                                               g.change(RPSState.SCISSORS,c.q,c.r);
+               }
+}
javascript library for hexagonal cellular automata