JSFiddle

  • Dice Thingy

    I noticed this pattern with the sides of a die. And this is the result.

    (function(container){
        function draw_circle(ctx, x, y, radius){
            ctx.beginPath();
            ctx.arc(x, y, radius, 2 * Math.PI, 0);
            ctx ...
  • Prototypes

    A demo of JS prototypes

    CanvasRenderingContext2D.prototype.fillArc = function(x,y,radius){ 
      // This is called a prototype. It allows you to add functionality to existing ...
  • Here's a way to improve strokeRect() #3 is the latest revision

    This improves upon the strokeRect() function (which renders blurry lines unless you specify half-coordinates) to draw solid lines no matter what

    CanvasRenderingContext2D.prototype.strokeRect = function(x,y,w,h){
      var old_fill = this.fillStyle;
      this.fillStyle = this.strokeStyle;
      this.fillRect(x,y ...
  • Bitwise key tracker

    Using bitwise operation and bitmasks to map every ascii char to an array of 8 integers This would be great in a C application where memory and performance are at a premium. In Javascript, I'm not sure the speed increase really warrants this level of complexity.

    var ns = [0,0,0,0,0,0,0,0]; // this array potentially holds 256 boolean values (8 indices * 32-bits-per-integer ...
  • First Node.js program #8 is the latest revision

    I was trying out an online node.js interpreter, and this was the first thing I hammered out. I thought it was pretty cool so I ported it to client JavaScript to save it here.

    console = {
        log: function(s){
            outp.innerHTML += s+'<br>';
        }
    }
    
    /* Fancy text shifter thingy */
    /* Written in node.js, ported to regular js via ...
  • Text Reverser #4 is the latest revision

    Reverse Text!

    t1.onkeyup = function(){
      t2.value = '';
      var i = t1.value.length;
      while(i--){
        t2.value += t1.value[i];
      }
    }
  • Node thingy

    Left click to drag handles, right click to add new ones

    var ctx = canvas.getContext('2d'),
        W,H,
        nodes = [
            [10,10],
            [25,10],
            [50,10],
            [50,25],
            [50,50],
            [25,50 ...
  • Starfield #3 is the latest revision

    It's a starfield thingy

    var ctx = canvas.getContext('2d'),
        W,H,
        mem = {},
        t = 0;
    canvas.width = W = innerWidth;
    canvas.height = H = innerHeight;
    function add ...
  • Asteroids Demo #5 is the latest revision

    Woohoo! I made a working asteroids game! But holy crap did I make it hard. Not only the wonky controls (maybe having a ship graphic will fix that?), but just the insane amount of asteroids that suffocate you from the get-go. Good luck winning this! I will make graphics for this (rocky irregular circles for asteroids, and a shippy shape for the ship sorta like original asteroids), but resources can't be included in jsfiddle, so I'll post a link to it when I finish it.

    //To do:
    
    // Ship(): draw 8 10x10 sprites for each direction, based on dir, draw the correct sprite
    
    // Asteroid(): draw 4 ...
  • Typo generator

    Generates all the possible single alphabetical typos for a given word you enter.

    inp.onkeyup = function(){
        inp.value = inp.value.toLowerCase().substr(0,15);
    }
    btn.onclick = function(){
        out.innerHTML = '';
        var word = inp.value ...