finite_automata.html

   1 <html>
   2 <title>Finite Automata</title>
   3 <noscript>
   4         <b>Your browser does not support JavaScript or JavaScript is disabled.</b>
   5 </noscript>
   6 <script>
   7 var PI = 3.141592654;
   8 var TWO_PI = PI * 2;
   9
  10 var BLUE   = "#00f";
  11 var GREEN  = "#0f0";
  12 var RED    = "#f00";
  13 var YELLOW = "#ff0";
  14
  15 var stage = new Array();        /* status of stage - all details stored here            */
  16 var store = new Array();        /* status of input                                      */
  17
  18 var stage_rows = 8;             /* number of rows on stage                              */
  19 var stage_cols = 9;             /* number of columns on stage                           */
  20 var store_bit_count = 10;       /* number of bits stored in machine                     */
  21
  22 var input_count = 10;           /* number of input bits                                 */
  23
  24 var grid_status = 1;            /* turn grid lines on and off                           */
  25 var grid_size = 50;             /* size in pixels of grid lines - both X and Y          */
  26 var canvas;                     /* object id of canvas tag                              */
  27 var canvas_input;               /* object id of input tag                               */
  28
  29 var ctx;                        /* context of canvas                                    */
  30 var input;                      /* context of input canvas                              */
  31
  32 /* each square on grid has an associated block of data tied to it */
  33 function grid(type, bit, dir, col){
  34         this.type = type;       /* type of machine part                         */
  35         this.bit  = bit;        /* data in this block - if any          */
  36         this.dir  = dir;        /* direction this item is turned        */
  37         this.col  = col;        /* color of machine part (if any)       */
  38 }
  39
  40 /* this is used to display all bits on all active items */
  41 function test_types(){
  42         var i = 0, j = 0, k = 1, l = 2, col = 1;
  43         for(i = 0; i < stage_rows; i++) {
  44                 for(j = 0; j < stage_rows; j++){
  45                         if(k == 6) { k = 1; }
  46                         switch(k){
  47                                 case 1: stage[i][j].type = "branch"; break;
  48                                 case 2: stage[i][j].type = "bus"; break;
  49                                 case 3: stage[i][j].type = "input"; break;
  50                                 case 4: stage[i][j].type = "output"; break;
  51                                 case 5:
  52                                         stage[i][j].type = "bitadd";
  53                                         if(col == 5) { col = 1; }
  54                                         switch(col){
  55                                                 case 1: stage[i][j].col = RED;    break;
  56                                                 case 2: stage[i][j].col = GREEN;  break;
  57                                                 case 3: stage[i][j].col = YELLOW; break;
  58                                                 case 4: stage[i][j].col = BLUE;   break;
  59                                         };
  60                                         col++;
  61                                         break;
  62                         };
  63                         k++;
  64                         if(l == 5) { l = 1; }
  65                         switch(l){
  66                                 case 1: stage[i][j].bit = RED; break;
  67                                 case 2: stage[i][j].bit = GREEN; break;
  68                                 case 3: stage[i][j].bit = YELLOW; break;
  69                                 case 4: stage[i][j].bit = BLUE; break;
  70                         };
  71                         l++;
  72                 }
  73         }
  74 }
  75
  76 /* create all output data structures and draw inital values on screen */
  77 function init_stage(){
  78         var x; var y;
  79
  80         /* create blank grid data structure */
  81         for(x = 0; x < stage_cols; x++) {
  82                 stage[x] = new Array();
  83                 for(y = 0; y < stage_rows; y++) {
  84                         stage[x][y] = new grid('', '', '', '');
  85                 }
  86         }
  87         stage[5][0].type = "input";
  88         stage[5][0].bit = "red";
  89         stage[5][1].type = "branch";
  90         stage[5][2].type = "bus";
  91         stage[5][6].type = "branch";
  92         stage[5][7].type = "branch";
  93         stage[5][8].type = "output";
  94
  95         stage[0][1].type = "bus";
  96         stage[0][1].dir = 1;
  97
  98         stage[0][2].type = "bus";
  99         stage[0][2].dir = 2;
 100         stage[0][3].type = "bus";
 101         stage[0][3].dir = 3;
 102         stage[0][4].type = "bus";
 103         stage[0][4].dir = 4;
 104
 105         test_types();
 106
 107 }
 108
 109 /* set initial values for input */
 110 function init_input(){
 111         store.push(RED);
 112         store.push(BLUE);
 113         store.push(YELLOW);
 114         store.push(GREEN);      /* add to end           */
 115         //store.unshift("red"); /* add to front         */
 116         //store.pop();          /* remove from end      */
 117         //store.shift();        /* remove from front    */
 118 }
 119
 120 /* draw faint gridlines on stage - used as a guide for the user */
 121 function draw_grid(){
 122         var x, y; /* current x and y position */
 123         var offset = 10; /* x and y maximum offset (far bottom or side of the window) */
 124         ctx.strokeStyle = "#ccc";
 125         ctx.lineWidth = 1;
 126         /* draw vertical lines */
 127         for(x = grid_size, y = 0, offset = window.innerWidth; x < window.innerWidth; x = x + grid_size)
 128         {
 129                 ctx.beginPath();
 130                 ctx.moveTo(x,y);
 131                 ctx.lineTo(x,y+offset);
 132                 ctx.stroke();
 133                 stage_cols++;
 134         }
 135         /* draw horizontal lines */
 136         for(x = 0, y = grid_size, offset = window.innerWidth; y < window.innerWidth; y = y + grid_size)
 137         {
 138                 ctx.beginPath();
 139                 ctx.moveTo(x,y);
 140                 ctx.lineTo(x+offset,y);
 141                 ctx.stroke();
 142                 stage_rows++;
 143         }
 144 }
 145
 146 /*
 147 move through each grid in stage and draw contents.
 148 this function can be used to refresh the screen at any time.
 149 */
 150 function draw_stage(){
 151         var x; var y;
 152         /* loop through all grids on stage, drawing contents */
 153         for(x=0; x < stage_cols; x++) {
 154                 for(y = 0; y < stage_rows; y++) {
 155                         draw_tile(x,y);
 156                 }
 157         }
 158 }
 159
 160 function init_form(){
 161         var x; var y;
 162         /* initalize canvas element for use */
 163         canvas = document.getElementById("stage");
 164         ctx = canvas.getContext("2d");
 165
 166         canvas_input = document.getElementById("input");
 167         input = canvas_input.getContext("2d");
 168
 169         /* get width and height of window and set stage (canvas) with it. */
 170         canvas.height = window.innerHeight-125;
 171         canvas.width = window.innerWidth - 45;
 172         if(grid_status) {draw_grid(); }
 173         init_stage();
 174         draw_stage();
 175         init_input();
 176         draw_tape();
 177 }
 178
 179 /* returns coordinates of canvas in pixels */
 180 function cnvs_get_coordinates(e){
 181         var x_offset = canvas.offsetLeft;
 182         var y_offset = canvas.offsetTop;
 183         if(canvas == 'undefined') { alert("Canvas parameter is undefined"); }
 184         x_offset = e.clientX - x_offset;
 185         y_offset = e.clientY - y_offset;
 186         document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x_offset + "," + y_offset + ")";
 187         return [x_offset,y_offset];
 188 }
 189
 190 /* move through tape and draw bits */
 191 function draw_tape(){
 192         var i = 0; var x = 50;
 193         input.fillStyle = "#f00";
 194         while(i < input_count){
 195                 if(store[i]) {
 196                         input.beginPath();
 197                         input.fillStyle = store[i];
 198                         input.arc(x,25,20,0,TWO_PI,0);
 199                         input.fill();
 200
 201                         input.strokeStyle = "#000";
 202                         input.lineWidth = 2;
 203                         input.beginPath();
 204                         input.arc(x,25,20,0,TWO_PI,0);
 205                         input.stroke();
 206                 }
 207                 x += 50;
 208                 i++;
 209         }
 210 }
 211
 212 /* (re)draws any map tile on grid */
 213 function draw_tile(x,y){
 214         ctx.save();
 215         ctx.translate(grid_size * x, grid_size * y);
 216         switch (stage[x][y].type){
 217                 case "bitadd":
 218                         draw_bitadd(stage[x][y].col);
 219                         break;
 220                 case "branch":
 221                         draw_branch();
 222                         break;
 223                 case "bus":
 224                         draw_bus(stage[x][y].dir);
 225                         break;
 226                 case "input":
 227                         draw_input();
 228                         break;
 229                 case "output":
 230                         draw_input();
 231                         break;
 232                 default: clear_square();
 233         };
 234
 235         if(stage[x][y].bit){ draw_bit(stage[x][y].bit); }
 236         ctx.restore();
 237 }
 238
 239 /* draws small bit of correct color on grid */
 240 function draw_bit(color){
 241         ctx.fillStyle = "#f00";
 242         ctx.beginPath();
 243         ctx.fillStyle = color;
 244         ctx.arc(25,25,10,0,TWO_PI,0);
 245         ctx.fill();
 246
 247         ctx.strokeStyle = "#000";
 248         ctx.lineWidth = 2;
 249         ctx.beginPath();
 250         ctx.arc(25,25,10,0,TWO_PI,0);
 251         ctx.stroke();
 252 }
 253
 254 /* draw gray square with black outline */
 255 function draw_input(){
 256         ctx.lineWidth = 1;
 257         ctx.strokeStyle = "#000";
 258         ctx.strokeRect(0,0,grid_size,grid_size);
 259         ctx.fillStyle = "#aaa";
 260         ctx.fillRect(0,0,grid_size,grid_size);
 261 }
 262
 263 /* a bus moves bits from one location to another */
 264 function draw_bus(dir){
 265         var i = 0;
 266         ctx.lineWidth = 2;
 267         ctx.fillStyle = "#aaa";
 268         ctx.strokeStyle = "#000";
 269
 270         switch(dir){
 271                 case 2:
 272                         ctx.translate(grid_size,0);
 273                         ctx.rotate(PI/2);
 274                         break;
 275                 case 3:
 276                         ctx.translate(grid_size,grid_size);
 277                         ctx.rotate(PI);
 278                         break;
 279                 case 4:
 280                         ctx.translate(0,grid_size);
 281                         ctx.rotate(-PI/2);
 282                         break;
 283         };
 284
 285         while(i < 2){
 286                 if(i == 1) { ctx.save(); ctx.translate(0, grid_size/2); }
 287                 ctx.beginPath();
 288                 ctx.moveTo(0,0);
 289                 ctx.lineTo(grid_size/2,grid_size/2);
 290                 ctx.lineTo(grid_size,0);
 291                 ctx.lineTo(grid_size/2,grid_size/4);
 292                 ctx.closePath();
 293                 ctx.fill();
 294
 295                 ctx.beginPath();
 296                 ctx.moveTo(0,0);
 297                 ctx.lineTo(grid_size/2,grid_size/2);
 298                 ctx.lineTo(grid_size,0);
 299                 ctx.lineTo(grid_size/2,grid_size/4);
 300                 ctx.closePath();
 301                 ctx.stroke();
 302                 if(i == 1) { ctx.restore(); }
 303                 i++;
 304         }
 305 }
 306
 307 /* tiles branch movement of each bit */
 308 function draw_branch(){
 309         /* left */
 310         ctx.lineWidth = 1;
 311         ctx.fillStyle = "#f00";
 312         ctx.beginPath();
 313         ctx.moveTo(0,0);
 314         ctx.lineTo(grid_size/2,grid_size/2);
 315         ctx.lineTo(0,grid_size);
 316         ctx.closePath();
 317         ctx.fill();
 318
 319          /* top */
 320         ctx.fillStyle = "#000";
 321         ctx.beginPath();
 322         ctx.moveTo(0,0)
 323         ctx.lineTo(grid_size/2,grid_size/2);
 324         ctx.lineTo(grid_size,0);
 325         ctx.closePath();
 326         ctx.fill();
 327
 328
 329          /* right */
 330         ctx.fillStyle = "#00f";
 331         ctx.beginPath();
 332         ctx.moveTo(grid_size,0);
 333         ctx.lineTo(grid_size/2,grid_size/2);
 334         ctx.lineTo(grid_size,grid_size);
 335         ctx.closePath();
 336         ctx.fill();
 337
 338          /* bottom */
 339         ctx.fillStyle = "#aaa";
 340         ctx.beginPath();
 341         ctx.moveTo(0,grid_size)
 342         ctx.lineTo(grid_size/2,grid_size/2);
 343         ctx.lineTo(grid_size,grid_size);
 344         ctx.closePath();
 345         ctx.fill();
 346 }
 347
 348 function draw_bitadd(color){
 349         var i = 0;
 350         while(i < 2){
 351                 if(i==1){
 352                         ctx.strokeStyle = color;
 353                         ctx.lineWidth = 10;
 354                 } else {
 355                         ctx.strokeStyle = "#000";
 356                         ctx.lineWidth = 15;
 357                 }
 358                 ctx.beginPath();
 359                 ctx.moveTo(grid_size/2,0);
 360                 ctx.lineTo(grid_size/2,grid_size);
 361                 ctx.closePath();
 362                 ctx.stroke();
 363
 364                 ctx.beginPath();
 365                 ctx.moveTo(0, grid_size/2);
 366                 ctx.lineTo(grid_size,grid_size/2);
 367                 ctx.closePath();
 368                 ctx.stroke();
 369                 i++;
 370         }
 371         ctx.strokeStyle = "#000";
 372         ctx.lineWidth = 1;
 373         ctx.beginPath();
 374         ctx.moveTo(0, 0);
 375         ctx.lineTo(0,grid_size);
 376         ctx.lineTo(grid_size,grid_size);
 377         ctx.lineTo(grid_size,0);
 378         ctx.lineTo(0,0);
 379         ctx.closePath();
 380         ctx.stroke();
 381 }
 382
 383 /* clear this square by setting area to white */
 384 function clear_square(){
 385         ctx.fillStyle = "#fff";
 386         ctx.fillRect(1,1,grid_size-2,grid_size-2);
 387 }
 388
 389 /* canvas has been clicked find out which grid and make correct change to square if needed. */
 390 function cnvs_clicked(e){}
 391
 392 </script>
 393
 394 <style type="text/css">
 395
 396 </style>
 397
 398 <body onLoad="init_form();">
 399
 400 <div id="topsection">
 401 <!--
 402 <center>
 403 <button onClick='reset();'><img src="http://opentextbook.info/icons/32x32/resultset_first.png" title="Restart" alt="Restart"></button>
 404 &nbsp;&nbsp;
 405 <button onClick='step_back();'><img src="http://opentextbook.info/icons/32x32/resultset_previous.png" title="Step Back" alt="Step Back"></button>
 406 &nbsp;&nbsp;
 407 <button onClick='step_next();'><img src="http://opentextbook.info/icons/32x32/resultset_next.png" title="Next Step" alt="Next Step"></button>
 408 &nbsp;&nbsp;
 409 <button onClick='run();'><img src="http://opentextbook.info/icons/32x32/resultset_last.png" title="Run" alt="Run"></button>
 410 &nbsp;&nbsp;
 411
 412 <!--
 413 <button onClick='halt();'><img src="http://opentextbook.info/icons/32x32/cancel.png" title="Halt Execution" alt="Halt Execution"></button>
 414 &nbsp;&nbsp;
 415
 416 <button disabled><img src="http://opentextbook.info/icons/32x32/disk.png" title="Save Code" alt="Save Code"></button>
 417 &nbsp;&nbsp;
 418 <button onClick='display_docs();'><img src="http://opentextbook.info/icons/32x32/book_open.png" title="Open Documentation" alt="Open Documentation"></button>
 419 -->
 420 </center>
 421
 422 </div>
 423
 424 <div id="xycoordinates">Coordinates:</div>
 425 <canvas id="input" width="579" height="100"></canvas>
 426 <canvas id="stage" width="579" height="770" onmousemove="cnvs_get_coordinates(event)" onclick="cnvs_clicked(event);">
 427 Your browser does not support HTML5 Canvas.
 428 </canvas>
 429
 430 </body>
 431 </html>