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