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