├── .gitignore
├── LICENSE.md
├── README.md
├── canvas.js
├── img
    ├── adder.png
    ├── adder_chain.png
    ├── adder_plus_plus.png
    ├── and.png
    ├── dirswitch.png
    ├── multiplexer.png
    ├── srnor.png
    └── srnor_small.png
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /sublime-text


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Shreyas Raman <skraman1999@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | HexLogic
 2 | ========
 3 | 
 4 | A clone of [LogicHex](https://mojang.com/notch/logichex/) by [Notch](https://mojang.com/notch/) (yes, the guy who made Minecraft) using Javascript canvas. Try it out: http://anubiann00b.github.io/HexLogic/
 5 | 
 6 | Here are some examples of what you can make:
 7 | 
 8 | Switch direction:
 9 | 
10 | ![Switching direction](img/dirswitch.png)
11 | 
12 | AND gate:
13 | 
14 | ![AND gate](img/and.png)
15 | 
16 | Multiplexer:
17 | 
18 | ![Multiplexer](img/multiplexer.png)
19 | 
20 | Adder:
21 | 
22 | ![Example of an adder](img/adder.png)
23 | 
24 | Adder that's more chainable:
25 | 
26 | ![Chainable adder](img/adder_chain.png)
27 | 
28 | SR-NOR latch:
29 | 
30 | ![SR-NOR Latch](img/srnor.png)
31 | 
32 | Better SR-NOR latch:
33 | 
34 | ![Better SR-NOR latch](img/srnor_small.png)
35 | 
36 | Much better Adder:
37 | 
38 | ![Much better adder](img/adder_plus_plus.png)


--------------------------------------------------------------------------------
/canvas.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var neighbors = [
  3 |  [ [+1, +1], [+1,  0], [ 0, -1],
  4 |    [-1,  0], [-1, +1], [ 0, +1] ],
  5 |  [ [+1,  0], [+1, -1], [ 0, -1],
  6 |    [-1, -1], [-1,  0], [ 0, +1] ]
  7 | ];
  8 | 
  9 | var size = 15;
 10 | var map;
 11 | 
 12 | var canvas = document.getElementById('canvas')
 13 | 
 14 | var xs;
 15 | var ys
 16 | 
 17 | configureMap();
 18 | 
 19 | var xo = 0;
 20 | var yo = 0;
 21 | 
 22 | var xpo = size;
 23 | var ypo = size;
 24 | 
 25 | canvas.addEventListener('click', onClick, false);
 26 | var g = canvas.getContext('2d');
 27 | drawAll();
 28 | 
 29 | window.setInterval(function() {
 30 |   for (var i=0; i<map.length; i++) {
 31 |     for (var j=0; j<map[i].length; j++) {
 32 |       updateHex(map[i][j]);
 33 |     }
 34 |   }
 35 |   for (var i=0; i<map.length; i++) {
 36 |     for (var j=0; j<map[i].length; j++) {
 37 |       map[i][j].oldstate = map[i][j].state;
 38 |     }
 39 |   }
 40 |   repaint();
 41 | }, 100);
 42 | 
 43 | function configureMap() {
 44 |   var ox = xs;
 45 |   var oy = ys;
 46 | 
 47 |   xs = Math.floor(canvas.width/size/3*2);
 48 |   ys = Math.floor(canvas.height/size/Math.sqrt(3))-1;
 49 | 
 50 |   if (map === undefined) {
 51 |     map = new Array(xs);
 52 | 
 53 |     for (var i=0; i<map.length; i++) {
 54 |       map[i] = new Array(ys);
 55 |     }
 56 | 
 57 |     for (i=0; i<xs; i++) {
 58 |       for (var j=0; j<ys; j++) {
 59 |         map[i][j] = { state:0, type:0, x:i, y:j, repaint:false, oldstate:0};
 60 |       }
 61 |     }
 62 |   } else {
 63 |     for (var i=ox; i<xs; i++) {
 64 |       map.push(new Array(ys));
 65 |     }
 66 | 
 67 |     for (i=ox; i<xs; i++) {
 68 |       for (var j=oy; j<ys; j++) {
 69 |         map[i].push({ state:0, type:0, x:i, y:j, repaint:false});
 70 |       }
 71 |     }
 72 |   }
 73 | }
 74 | 
 75 | function drawAll() {
 76 |   for (var i=-xo; i<map.length-xo; i++) {
 77 |     for (var j=-yo; j<map[i+xo].length-yo; j++) {
 78 |       drawHex(map[i+xo][j+yo], xpo + i*size*3/2, ypo + j*size*Math.sqrt(3) + (i%2==0?Math.sqrt(3)/2*size:0));
 79 |     }
 80 |   }
 81 | }
 82 | 
 83 | function repaint() {
 84 |   for (var i=-xo; i<map.length-xo; i++) {
 85 |     for (var j=-yo; j<map[i+xo].length-yo; j++) {
 86 |       var hex = map[i+xo][j+yo];
 87 |       if (hex.repaint)
 88 |         drawHex(hex, xpo + i*size*3/2, ypo + j*size*Math.sqrt(3) + (i%2==0?Math.sqrt(3)/2*size:0));
 89 |       hex.repaint = false;
 90 |     }
 91 |   }
 92 | }
 93 | 
 94 | function updateHex(hex) {
 95 |   var preState = hex.state;
 96 |   switch(hex.type) {
 97 |     case 3:
 98 |       hex.state = 1;
 99 |       break;
100 |     case 0:
101 |       hex.state = 0;
102 |       break;
103 |     case 2:
104 |       if (getNeighbor(hex, 1).oldstate == 1 || getNeighbor(hex, 3).oldstate == 1 || getNeighbor(hex, 5).oldstate == 1)
105 |         hex.state = 1;
106 |       else
107 |         hex.state = 0;
108 |       break;
109 |     case 1:
110 |       if ((getNeighbor(hex, 1).oldstate + getNeighbor(hex, 3).oldstate + getNeighbor(hex, 5).oldstate) % 2 == 1)
111 |         hex.state = 1;
112 |       else
113 |         hex.state = 0;
114 |       break;
115 |   }
116 |   if (hex.state != preState)
117 |     hex.repaint = true;
118 | }
119 | 
120 | function getNeighbor(hex, d) {
121 |   var n = neighbors[(hex.x&1)][d];
122 | 
123 |   var nx = hex.x+n[0];
124 |   var ny = hex.y+n[1]
125 | 
126 |   if (nx<0 || nx>=xs || ny<0 || ny>=ys)
127 |     return { state:0, type:0, x:nx, y:ny};
128 | 
129 |   var newHex = map[nx][ny];
130 | 
131 |   return newHex;
132 | }
133 | 
134 | function onClick(e) {
135 |   var pp = getPosition(e.currentTarget);
136 |   var xp = e.clientX - pp.x - xpo;
137 |   var yp = e.clientY - pp.y - ypo;
138 | 
139 |   var hx = 2/3 * xp / size;
140 |   var hy = Math.sqrt(3)/3 * yp / size + (Math.round(hx)%2)*Math.sqrt(3)/3;
141 | 
142 |   var h = map[Math.round(hx)][Math.floor(hy)];
143 |   h.type++;
144 |   if (h.type>3)
145 |     h.type=0;
146 | 
147 |   h.repaint = true;
148 | 
149 |   repaint();
150 | }
151 | 
152 | function drawHex(hex, xp, yp) {
153 |   g.beginPath();
154 |   var i;
155 |   for (i=0; i<=6; i++) {
156 |     var angle = 2 * Math.PI / 6 * i;
157 |     x = xp + size * Math.cos(angle);
158 |     y = yp + size * Math.sin(angle); 
159 |     if (i === 0)
160 |       g.moveTo(x,y);
161 |     else
162 |       g.lineTo(x,y);
163 |   }
164 |   g.stroke();
165 | 
166 |   if (hex.type === 0)
167 |     g.fillStyle='#AAAAAA';
168 |   else if (hex.state==0)
169 |     g.fillStyle='#FFFFFF';
170 |   else
171 |     g.fillStyle='#FFFF00';
172 |   g.fill();
173 | 
174 |   g.beginPath();
175 |   switch(hex.type) {
176 |     case 0: // Blank
177 |       break;
178 |     case 1: // XOR
179 |       g.moveTo(xp - size/4, yp - size/4);
180 |       g.lineTo(xp + size/4, yp + size/4);
181 |       g.moveTo(xp - size/4, yp + size/4);
182 |       g.lineTo(xp + size/4, yp - size/4);
183 |       break;
184 |     case 2: // OR
185 |       g.arc(xp, yp, size/4, 0, 2*Math.PI);
186 |       break;
187 |     case 3: // Power
188 |       g.moveTo(xp - size/4, yp);
189 |       g.lineTo(xp + size/4, yp);
190 |       g.moveTo(xp, yp + size/4);
191 |       g.lineTo(xp, yp - size/4);
192 |       break;
193 |   }
194 |   g.stroke();
195 | }
196 | 
197 | function getPosition(e) {
198 |   var xp = 0;
199 |   var yp = 0;
200 | 
201 |   while (e) {
202 |     xp += (e.offsetLeft - e.scrollLeft + e.clientLeft);
203 |     yp += (e.offsetTop - e.scrollTop + e.clientTop);
204 |     e = e.offsetParent;
205 |   }
206 |   return { x: xp, y: yp };
207 | }


--------------------------------------------------------------------------------
/img/adder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/adder.png


--------------------------------------------------------------------------------
/img/adder_chain.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/adder_chain.png


--------------------------------------------------------------------------------
/img/adder_plus_plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/adder_plus_plus.png


--------------------------------------------------------------------------------
/img/and.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/and.png


--------------------------------------------------------------------------------
/img/dirswitch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/dirswitch.png


--------------------------------------------------------------------------------
/img/multiplexer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/multiplexer.png


--------------------------------------------------------------------------------
/img/srnor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/srnor.png


--------------------------------------------------------------------------------
/img/srnor_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sylvia43/HexLogic/7aa3ea98e21fae17213ae55af1159e4a652773c2/img/srnor_small.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>HexLogic</title>
 4 |   <style type="text/css">
 5 |     body {
 6 |       -webkit-user-select: none;
 7 |       -moz-user-select: none;
 8 |       -khtml-user-select: none;
 9 |       -ms-user-select: none;
10 |     }
11 |   </style>
12 | </head>
13 | <body>
14 |   <a href="https://github.com/anubiann00b/HexLogic"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
15 |   <h1>HexLogic</h1>
16 |   <canvas id="canvas" width="1300" height="700"></canvas>
17 |   <script type="text/javascript" src="canvas.js" onClick=""></script>
18 |   
19 |   <p>Click to toggle cell types.</p>
20 |   <p>Cell types:</p>
21 |   <ul>
22 |     <li>[empty] : No power</li>
23 |     <li>X : XOR gate</li>
24 |     <li>O : OR gate</li>
25 |     <li>+ : Power</li>
26 |   </ul>
27 | 
28 |   <p>Cell inputs are straight down, and diagonally up right and left.</p>
29 |   <p>Cell outputs are straight up, and diagonally down right and left.</p>
30 | 
31 |   <p>Web clone of <a href="https://mojang.com/notch/logichex/">LogicHex</a> by <a href="https://mojang.com/notch/">Notch</a>, who's also the creator of Minecraft.</p>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------