Commits

Anonymous committed 8c8a2ea

These have employment in yoob.js now.

Comments (0)

Files changed (7)

javascript/canvas3.html

-<!DOCTYPE html>
-<head>
-  <meta charset="utf-8">
-  <title>HTML5 Canvas experiment #3</title>
-  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
-  <script src="playfield.js"></script>
-  <script src="canvas3.js"></script>
-  <script>
-$(document).ready(function() {
-    CanvasExperiment3($('#canvas')[0], $('#textarea'), $('#button')).start();
-});
-  </script>
-  <style>
-#canvas { border: 1px solid blue; }
-  </style>
-</head>
-<body>
-
-<h1>HTML5 Canvas experiment #3</h1>
-
-<textarea id="textarea" rows="10" cols="40">
-</textarea>
-
-<button id="button" value="Load">Load</button>
-
-<canvas id="canvas" width="400" height="400">
-Your browser doesn't support displaying an HTML5 canvas.
-</canvas>
-
-</body>

javascript/canvas3.js

-function CanvasExperiment3(canvas, textarea, button) {
-    var self = {};
-    var p;
-    var interval_id;
-
-    self.draw = function() {
-        var ctx = canvas.getContext('2d');
-
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.textBaseline = "top";
-
-        var height = 20;
-        ctx.font = height + "px monospace";
-        var width = ctx.measureText("@").width;
-
-        p.foreach(function (x, y, value) {
-            ctx.fillText(value, x * width, y * height);
-            if (Math.random() > 0.95) {
-                ctx.strokeStyle = "green";
-                ctx.strokeRect(x * width, y * height, width, height);
-            }
-        });
-    }
-
-    self.start = function() {
-        p = Playfield();
-        self.draw();
-        interval_id = setInterval(self.draw, 500);
-        button.click(function() {
-            p.load(0, 0, textarea.val());
-            self.draw();
-        });
-    }
-
-    return self;
-}

javascript/canvas4.html

-<!DOCTYPE html>
-<head>
-  <meta charset="utf-8">
-  <title>HTML5 Canvas experiment #4</title>
-  <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
-  <script src="playfield.js"></script>
-  <script src="canvas4.js"></script>
-  <script>
-$(document).ready(function() {
-    var eso = EsolangController($('#canvas')[0]);
-    $('#load').click(function() {
-        eso.load($('#program'));
-    });
-    $('#start').click(function() {
-        eso.start();
-    });
-    $('#stop').click(function() {
-        eso.stop();
-    });
-});
-  </script>
-  <style>
-#canvas { border: 1px solid blue; }
-  </style>
-</head>
-<body>
-
-<h1>HTML5 Canvas experiment #4</h1>
-
-<canvas id="canvas" width="400" height="400">
-Your browser doesn't support displaying an HTML5 canvas.
-</canvas>
-
-<span>
-<textarea id="program" rows="10" cols="40">
-   #
-#$ @#
-    @#
-
-
-     @
-</textarea>
-
-<button id="load">Load</button>
-<button id="start">Start</button>
-<button id="stop">Stop</button>
-
-</body>

javascript/canvas4.js

-function EsolangController(canvas) {
-    var self = {};
-    var interval_id;
-
-    var p = Playfield();
-    var ip_x;
-    var ip_y;
-    var ip_dx;
-    var ip_dy;
-
-    self.draw = function() {
-        var ctx = canvas.getContext('2d');
-
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.textBaseline = "top";
-
-        var height = 20;
-        ctx.font = height + "px monospace";
-        var width = ctx.measureText("@").width;
-
-        ctx.fillStyle = "#50ff50";
-        ctx.fillRect(ip_x * width, ip_y * height, width, height);
-
-        ctx.fillStyle = "black";
-        p.foreach(function (x, y, value) {
-            ctx.fillText(value, x * width, y * height);
-        });
-    }
-
-    self.step = function() {
-        var instr = p.get(ip_x, ip_y);
-
-        if (instr === '@') {
-            ip_dx = 1;
-            ip_dy = 0;
-        } else if (instr === '#') {
-            ip_dx = 0;
-            ip_dy = 1;
-        }
-
-        ip_x += ip_dx;
-        ip_y += ip_dy;
-        self.draw();
-    }
-
-    self.start = function() {
-        if (interval_id !== undefined)
-            return;
-        self.step();
-        interval_id = setInterval(self.step, 333);
-    }
-
-    self.stop = function() {
-        if (interval_id === undefined)
-            return;
-        clearInterval(interval_id);
-        interval_id = undefined;
-    }
-
-    self.load = function(textarea) {
-        self.stop();
-        p.load(0, 0, textarea.val());
-        p.foreach(function (x, y, value) {
-            if (value === '$') {
-                ip_x = x;
-                ip_y = y;
-            }
-        });
-        ip_dx = 1;
-        ip_dy = 0;
-        self.draw();
-    }
-
-    return self;
-}

javascript/playfield.js

-/*
- * This is not a recommended way to make a class in Javascript, but it works
- * (after a fashion).  You don't need to use the "new" keyword, you just call
- * Playfield() to create a new Playfield object.  You could call this the
- * "closure-based object" pattern, and you can do it in any language that
- * provides both closures and mutable variables (I've also done it in Lua and
- * Bhuna.)
- *
- * For a more Javascriptic Playfield class, see the Gemooy repository (also
- * in the public domain.)
- */
-function Playfield() {
-    var self = {}
-    var store = {}
-    self.min_x = undefined;
-    self.min_y = undefined;
-    self.max_x = undefined;
-    self.max_y = undefined;
-
-    /*
-     * Cells are undefined if they were never written to.
-     */
-    self.get = function(x, y) {
-        return store[x+','+y];
-    }
-
-    self.put = function(x, y, value) {
-        if (self.min_x === undefined || x < self.min_x) self.min_x = x;
-        if (self.max_x === undefined || x > self.max_x) self.max_x = x;
-        if (self.min_y === undefined || y < self.min_y) self.min_y = y;
-        if (self.max_y === undefined || y > self.max_y) self.max_y = y;
-        store[x+','+y] = value;
-    }
-
-    /*
-     * Load a string into the playfield.
-     * The string may be multiline, with newline (ASCII 10)
-     * characters delimiting lines.  ASCII 13 is ignored.
-     * A space in the string does not write anything into
-     * the playfield.
-     */
-    self.load = function(x, y, string) {
-        var lx = x;
-        var ly = y;
-        for (var i = 0; i < string.length; i++) {
-            var c = string.charAt(i);
-            if (c === '\n') {
-                lx = x;
-                ly++;
-            } else if (c === '\r') {
-            } else if (c === ' ') {
-                lx++;
-            } else {
-                self.put(lx, ly, c);
-                lx++;
-            }
-        }
-    }
-
-    /*
-     * fun is a callback which takes three parameters:
-     * x, y, and value.
-     * This function ensures a particular order.
-     */
-    self.foreach = function(fun) {
-        for (var y = self.min_y; y <= self.max_y; y++) {
-            for (var x = self.min_x; x <= self.max_x; x++) {
-                var key = x+','+y;
-                var value = store[key];
-                if (value === undefined)
-                    continue;
-                fun(x, y, value);
-            }
-        }
-    }
-
-    return self;
-}

javascript/text-console.html

-<!DOCTYPE html>
-<head>
-  <meta charset="utf-8">
-  <title>TextConsole Demo</title>
-  <script src="text-console.js"></script>
-</head>
-<body>
-
-<h1>TextConsole Demo</h1>
-
-<canvas id="canvas" width="400" height="400" tabindex="0">
-  Your browser doesn't support displaying an HTML5 canvas.
-</canvas>
-
-</body>
-<script>
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  var t = new TextConsole();
-  var z = 0;
-  t.init(canvas, 20, 80, 25);
-  t.write("Click me!\n");
-  canvas.onclick = function(e) {
-    t.write("Hello, world! (" + z + ")  ");
-    t.textColor = "white";
-    t.write("How's by you? ");
-    t.textColor = "yellow";
-    t.backgroundColor = "purple";
-    t.write("That's nice.");
-    t.textColor = "green";
-    t.backgroundColor = "black";
-    t.write(" Supercalifragilisticexpialadociousness!!!!!\n");
-    t.overStrike = true;
-    t.write("Whatever\b\b!!\n");
-    t.overStrike = false;
-    t.write("Whatever\b\b!!\n");
-    z++;
-  };
-  var ib = new LineInputBuffer();
-  ib.init(canvas, t, function(str) {
-    alert(str);
-  });
-  canvas.focus();
-</script>

javascript/text-console.js

-/*
- * A text-based console simulation in Javascript on an HTML5 canvas.
- *
- * Note that I am not suggesting that this is a *good* thing in most
- * circumstances.  I mean, you have a GUI!  You have graphics!  Why would
- * you want to limit your interaction to a text-based console?  And you
- * can't even select text in it, and if you want to handle input you'll
- * have to write a bunch of stuff to do line editing and everything.
- *
- * But still, sometimes, for art's sake, what you want to do is
- * simulate a text-based console.  So be it.  You can use this.
- *
- * Create a new TextConsole object t, then call t.init(), then call
- * t.write() to write text to the console.
- *
- * You can also change the textColor and backgroundColor attributes
- * between calls to t.write().  You can call t.reset() to clear the
- * simulated screen (to the selected backgroundColor.)  You can also set
- * or clear overStrike mode.
- */
-TextConsole = function() {
-  this.canvas = null;
-  this.charHeight = null;
-  this.charWidth = null;
-  this.rows = null;
-  this.cols = null;
-  this.row = null;
-  this.col = null;
-  this.overStrike = null;
-  this.textColor = null;
-  this.backgroundColor = null;
-
-  this.cursorEnabled = null;  
-  this.blinkInterval = null;
-  this.cursorIsShowing = null;
-
-  /*
-   * Attach a canvas to this TextConsole.  The canvas will
-   * be resized to match the given dimensions.
-   */
-  this.init = function(canvas, charHeight, cols, rows) {
-    this.canvas = canvas;
-    this.charHeight = charHeight;
-    this.rows = rows;
-    this.cols = cols;
-
-    var ctx = this.canvas.getContext('2d');
-    ctx.font = this.charHeight + "px monospace";
-    this.charWidth = ctx.measureText("@").width;
-
-    this.textColor = "green";
-    this.backgroundColor = "black";
-    this.reset();
-  };
-
-  this.drawCursor = function(sty) {
-    var ctx = this.canvas.getContext('2d');
-    ctx.strokeStyle = sty;
-    ctx.lineWidth = 2;
-    var x = this.col * this.charWidth;
-    var y = (this.row+1) * this.charHeight - 1;
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-    ctx.lineTo(x + this.charWidth, y);
-    ctx.stroke();
-  };
-
-  /*
-   * Start the cursor blinking, if it's not already.
-   */
-  this.startCursor = function() {
-    if (!this.cursorEnabled) {
-      return;
-    }
-    if (this.blinkInterval !== null) {
-      clearInterval(this.blinkInterval);
-    }
-    var me = this;
-    me.drawCursor(me.textColor);
-    me.cursorIsShowing = true;
-    this.blinkInterval = setInterval(function() {
-      if (!me.cursorIsShowing) {
-        me.drawCursor(me.textColor);
-        me.cursorIsShowing = true;
-      } else {
-        me.drawCursor(me.backgroundColor);
-        me.cursorIsShowing = false;
-      }
-    }, 500);
-  };
-
-  /*
-   * Start the cursor blinking, if it's not already.
-   */
-  this.stopCursor = function() {
-    if (!this.cursorEnabled) {
-      return;
-    }
-    if (this.blinkInterval !== null) {
-      clearInterval(this.blinkInterval);
-    }
-    this.drawCursor(this.backgroundColor);
-    this.cursorIsShowing = false;
-  };
-
-  /*
-   * Resize the TextConsole to match the given dimensions,
-   * clear it to the current backgroundColor, turn off
-   * overstrike mode, make the cursor visible, and home it.
-   */
-  this.reset = function() {
-    this.overStrike = false;
-    this.row = 0;
-    this.col = 0;
-    this.canvas.width = this.charWidth * this.cols;
-    this.canvas.height = this.charHeight * this.rows;
-    var ctx = this.canvas.getContext('2d');
-    ctx.fillStyle = this.backgroundColor;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    this.cursorEnabled = true;
-    this.startCursor();
-  };
-
-  /*
-   * Advance the cursor to the next line, scrolling the
-   * TextConsole display if necessary.
-   */
-  this.advance = function() {
-    this.col = 0;
-    this.row += 1;
-    var ctx = this.canvas.getContext('2d');
-    while (this.row >= this.rows) {
-      var imgData = ctx.getImageData(
-          0, this.charHeight, canvas.width, canvas.height - this.charHeight
-      );
-      ctx.putImageData(imgData, 0, 0);
-      ctx.fillStyle = this.backgroundColor;
-      ctx.fillRect(
-          0, canvas.height - this.charHeight, canvas.width, this.charHeight
-      );
-      this.row -= 1;
-    }
-  };
-
-  /*
-   * Write a string to the TextConsole.  Line feeds will cause a
-   * new line, and backspaces will move the cursor left if it is not
-   * already at the left edge.
-   */
-  this.write = function(string) {
-    var i = 0;
-    var ctx = this.canvas.getContext('2d');
-    ctx.textBaseline = "top";
-    ctx.font = this.charHeight + "px monospace";
-    this.stopCursor();
-    while (i < string.length) {
-      var c = string.charAt(i);
-      if (c === '\n') {
-        this.advance();
-      } else if (c === '\b' && this.col > 0) {
-        this.col--;
-      } else if (c >= ' ') {
-        if (!this.overStrike) {
-          ctx.fillStyle = this.backgroundColor;
-          ctx.fillRect(this.col * this.charWidth, this.row * this.charHeight,
-                       this.charWidth, this.charHeight);
-        }
-        ctx.fillStyle = this.textColor;
-        ctx.fillText(c, this.col * this.charWidth, this.row * this.charHeight);
-        this.col += 1;
-        if (this.col >= this.cols) {
-          this.advance();
-        }
-      }
-      i++;
-    };
-    this.startCursor();
-  };
-
-  /*
-   * Move the cursor around the TextConsole.  x is the column number
-   * (0-based) and y is the row number (also 0-based.)
-   */
-  this.gotoxy = function(x, y) {
-    this.stopCursor();
-    this.col = x;
-    this.row = y;
-    this.startCursor();
-  };
-
-  this.enableCursor = function(b) {
-    b = !!b;
-    if (b) {
-      this.cursorEnabled = true;
-      this.startCursor();
-    } else {
-      this.stopCursor();
-      this.cursorEnabled = false;
-    }
-  };
-};
-
-/*
- * Object that captures keystrokes and optionally updates a TextConsole.
- * Mostly for demonstration purposes so far.
- */
-
-LineInputBuffer = function() {
-  this.listenObject = undefined;
-  this.console = undefined;
-  this.callback = undefined;
-  this.text = undefined;
-
-  this.init = function(listenObject, console, callback) {
-    this.listenObject = listenObject;
-    this.console = console;
-    this.callback = callback;
-    this.text = "";
-    
-    me = this;
-    listenObject.addEventListener('keyup', function(e) {
-      //alert(e.keyCode);
-      switch (e.keyCode) {
-        case 8:   /* Backspace */
-          if (me.console !== undefined) {
-            me.console.write('\b \b');
-          }
-          if (me.text.length > 0) {
-            me.text = me.text.substring(0, me.text.length-2);
-          }
-          e.cancelBubble = true;
-          break;
-        case 13:  /* Enter */
-          if (me.console !== undefined) {
-            me.console.write('\n');
-          }
-          me.text = me.text.substring(0, me.text.length-1);
-          if (me.callback !== undefined) {
-            me.callback(me.text);
-          }
-          me.text = "";
-          e.cancelBubble = true;
-          break;
-        case 38:  /* Up arrow */
-          break;
-        case 40:  /* Down arrow */
-          break;
-        case 37:  /* Left arrow */
-          break;
-        case 39:  /* Right arrow */
-          break;
-      }
-    }, true);
-    listenObject.addEventListener('keypress', function(e) {
-      if (e.altKey) {
-        //alert(e.charCode);
-        return;
-      }
-      var chr = String.fromCharCode(e.charCode);
-      if (me.console !== undefined) {
-        me.console.write(chr);
-      }
-      me.text += chr;
-      e.cancelBubble = true;
-    }, true);
-  };
-};