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