Powers of 10 PRINT

.block

license: mit
height: 720

README.md

Powers of 10 PRINT

A daydream of what might be hidden within the C64 10print maze using p5.js and leaflet.

You can also use the Open link at right to open this app in a full screen window which additionally supports stateful URLs so you can bookmark favorite found locations.

drawgrid.js

/*
 * This is the funciton to implement to make your own abstract design.
 *
 * arguments:
 * p5: the p5.js object - all draw commands should be prefixed with this object
 * x1, x2, y1, y2: draw the pattern contained in the rectangle x1,y1 to x2, y2
 * z: use this as the noise z offset (can be shifted)
 * zoom: current zoom level (starts at 0), useful to decide how much detail to draw
 *
 * The destination drawing should be in the square 0, 0, 255, 255.
 */
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
  // debug - show border
  p5.noFill();
  p5.stroke(255, 0, 0)
  p5.rect(0, 0, 255, 255);
}

drawgrid_10print.js

var blue = "#0000AA"
var light_blue = "#0088FF"

function getIsBackslash(p5, x, y, z, noiseScale, slashsize) {
  var n_t_l = p5.noise(x * noiseScale, y * noiseScale, z);
  var n_t_r = p5.noise((x + slashsize) * noiseScale, y * noiseScale, z);
  var n_b_l = p5.noise(x * noiseScale, (y + slashsize) * noiseScale, z);
  var n_b_r = p5.noise((x + slashsize) * noiseScale, (y + slashsize) * noiseScale, z);
  var tilt_fs = Math.abs(n_b_l-n_t_r);
  var tilt_bs = Math.abs(n_t_l-n_b_r);
  return(tilt_fs > tilt_bs);
}

var c64_font = {
  "*": [
    "        ",
    " ##  ## ",
    "  ####  ",
    "########",
    "  ####  ",
    " ##  ## ",
    "        ",
    "        "
  ],
  "A": [
    "   ##   ",
    "  ####  ",
    " ##  ## ",
    " ###### ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    "        "
  ],
  "B": [
    " #####  ",
    " ##  ## ",
    " ##  ## ",
    " #####  ",
    " ##  ## ",
    " ##  ## ",
    " #####  ",
    "        "
  ],
  "C": [
    "  ####  ",
    " ##  ## ",
    " ##     ",
    " ##     ",
    " ##     ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "D": [
    " ####   ",
    " ## ##  ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ## ##  ",
    " ####   ",
    "        "
  ],
  "E": [
    " ###### ",
    " ##     ",
    " ##     ",
    " ####   ",
    " ##     ",
    " ##     ",
    " ###### ",
    "        "
  ],
  "F": [
    " ###### ",
    " ##     ",
    " ##     ",
    " ####   ",
    " ##     ",
    " ##     ",
    " ##     ",
    "        "
  ],
  "G": [
    "  ####  ",
    " ##  ## ",
    " ##     ",
    " ## ### ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "H": [
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ###### ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    "        "
  ],
  "I": [
    "  ####  ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "  ####  ",
    "        "
  ],
  "K": [
    " ##  ## ",
    " ## ##  ",
    " ####   ",
    " ###    ",
    " ####   ",
    " ## ##  ",
    " ##  ## ",
    "        "
  ],
  "M": [
    " ##   ##",
    " ### ###",
    " #######",
    " ## # ##",
    " ##   ##",
    " ##   ##",
    " ##   ##",
    "        "
  ],
  "N": [
    " ##  ## ",
    " ### ## ",
    " ###### ",
    " ###### ",
    " ## ### ",
    " ##  ## ",
    " ##  ## ",
    "        "
  ],
  "O": [
    "  ####  ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "P": [
    " #####  ",
    " ##  ## ",
    " ##  ## ",
    " #####  ",
    " ##     ",
    " ##     ",
    " ##     ",
    "        "
  ],
  "R": [
    " #####  ",
    " ##  ## ",
    " ##  ## ",
    " #####  ",
    " ####   ",
    " ## ##  ",
    " ##  ## ",
    "        "
  ],
  "S": [
    "  ####  ",
    " ##  ## ",
    " ##     ",
    "  ####  ",
    "     ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "T": [
    " ###### ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "        "
  ],
  "U": [
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "V": [
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "   ##   ",
    "        "
  ],
  "Y": [
    " ##  ## ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    "        "
  ],
  "0": [
    "  ####  ",
    " ##  ## ",
    " ## ### ",
    " ### ## ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "1": [
    "   ##   ",
    "   ##   ",
    "  ###   ",
    "   ##   ",
    "   ##   ",
    "   ##   ",
    " ###### ",
    "        "
  ],
  "2": [
    "  ####  ",
    " ##  ## ",
    "     ## ",
    "    ##  ",
    "  ##    ",
    " ##     ",
    " ###### ",
    "        "
  ],
  "3": [
    "  ####  ",
    " ##  ## ",
    "     ## ",
    "   ###  ",
    "     ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "4": [
    "     ## ",
    "    ### ",
    "   #### ",
    " ##  ## ",
    " #######",
    "     ## ",
    "     ## ",
    "        "
  ],
  "5": [
    " ###### ",
    " ##     ",
    " #####  ",
    "     ## ",
    "     ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "6": [
    "  ####  ",
    " ##  ## ",
    " ##     ",
    " #####  ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "8": [
    "  ####  ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    " ##  ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  "9": [
    "  ####  ",
    " ##  ## ",
    " ##  ## ",
    "  ##### ",
    "     ## ",
    " ##  ## ",
    "  ####  ",
    "        "
  ],
  ".": [
    "        ",
    "        ",
    "        ",
    "        ",
    "        ",
    "   ##   ",
    "   ##   ",
    "        "
  ],
  ";": [
    "        ",
    "        ",
    "   ##   ",
    "        ",
    "        ",
    "   ##   ",
    "   ##   ",
    "  ##    "
  ],
  ":": [
    "        ",
    "        ",
    "   ##   ",
    "        ",
    "        ",
    "   ##   ",
    "        ",
    "        "
  ],
  "(": [
    "    ##  ",
    "   ##   ",
    "  ##    ",
    "  ##    ",
    "  ##    ",
    "   ##   ",
    "    ##  ",
    "        "
  ],
  ")": [
    "  ##    ",
    "   ##   ",
    "    ##  ",
    "    ##  ",
    "    ##  ",
    "   ##   ",
    "  ##    ",
    "        "
  ],
  "+": [
    "        ",
    "   ##   ",
    "   ##   ",
    " ###### ",
    "   ##   ",
    "   ##   ",
    "        ",
    "        "
  ],
  "$": [
    "   ##    ",
    "  #####  ",
    " ##      ",
    "  ####   ",
    "     ##  ",
    " #####   ",
    "   ##    ",
    "         "
  ],
}

var text_lines = [
  "                                        ",
  "    **** COMMODORE 64 BASIC V2 ****     ",
  "                                        ",
  " 64K RAM SYSTEM  38911 BASIC BYTES FREE ",
  "                                        ",
  "READY.                                  ",
  "10 PRINT CHR$(205.5+RND(1)); : GOTO 10  ",
  "RUN                                     "
]

function render_char(p5, c, x_pos, y_pos, char_width, char_height) {
  if(c == " ") {
    return;
  }
  if (c in c64_font) {
    var char_map = c64_font[c];
    var pixel_width = char_width / 8.0;
    var pixel_height = char_height / 8.0;
    for(var j=0; j<8; j++) {
      var cur_y = y_pos + j * pixel_height;
      for(var i=0; i<8; i++) {
        var cur_x = x_pos + i * pixel_width;
        if(char_map[j][i] != " ") {
          p5.rect(cur_x, cur_y, 0.5+pixel_width, 0.5+pixel_height);
        }
      }
    }
  }
  else {
    p5.rect(x_pos, y_pos, char_width, char_height);
  }
}

var native_charsize = 22;
var offset_x = 3.0;
var offset_y = 11.0;
// at zoom=0 each slash is 16x16
function drawLayer(p5, slashsize, x1, x2, y1, y2, z, line_color, thinness, is_top) {
  var noiseScale=1/48.0;
  var startx = slashsize * (Math.floor(x1/slashsize) - 1);
  var starty = slashsize * (Math.floor(y1/slashsize) - 1);
  var endx = slashsize * (Math.floor(x2/slashsize) + 1);
  var endy = slashsize * (Math.floor(y2/slashsize) + 1);

  var scaled_slashsize = ((x2-x1)/slashsize);
  var thin_frac = 1.0 / (5 + thinness);
  var pixel_denom = p5.map(thin_frac, 1/6.0, 0, 4, 20)
  var char_width = 256 / ((x2-x1)/slashsize);
  var char_height = 256 / ((y2-y1)/slashsize);
  var pixel_width = char_width / pixel_denom;
  var pixel_height = char_height / pixel_denom;
  p5.strokeWeight(pixel_width);
  p5.strokeCap(p5.SQUARE);
  p5.fill(line_color);

  for(var x=startx; x<endx; x+=slashsize) {
    var n_x = x / native_charsize;
    var x_pos = p5.map(x, x1, x2, 0, 256);
    for(var y=starty; y<endy; y+=slashsize) {
      var n_y = y / native_charsize;
      var y_pos = p5.map(y, y1, y2, 0, 256);
      if(n_x - offset_x < 0 || n_x-offset_x >= 40 ||
         n_y - offset_y < 0 || n_y-offset_y >= 25) {
        p5.rectMode(p5.CORNER);
        p5.noStroke();
        p5.rect(x_pos, y_pos, char_width, char_height);
      }
      else if(n_y - offset_y < 8) {
        // do nothing if not top
        if(is_top) {
          var cur_line = Math.floor(n_y - offset_y);
          var cur_char = Math.floor(n_x - offset_x);
          p5.rectMode(p5.CORNER);
          p5.noStroke();
          render_char(p5, text_lines[cur_line][cur_char], x_pos, y_pos, char_width, char_height);          
        }
      }
      else {
        var isBackSlash = getIsBackslash(p5, x, y, z, noiseScale, slashsize);
        p5.noStroke();
        var p2 = pixel_width/2;
        var p4 = 0.35 * pixel_width;
        var diag_p2 = 1.414 * p2;
        p5.rectMode(p5.CENTER);
        if(isBackSlash) {
          p5.rect(x_pos+p4, y_pos+p4, diag_p2, diag_p2);
          p5.rect(x_pos+char_width-p4, y_pos+char_height-p4, diag_p2, diag_p2);
          p5.stroke(line_color);
          p5.line(x_pos+p4, y_pos+p4, x_pos+char_width-p4, y_pos+char_height-p4);
        }
        else {
          p5.rect(x_pos+p4, y_pos+char_height-p4, diag_p2, diag_p2);
          p5.rect(x_pos+char_width-p4, y_pos+p4, diag_p2, diag_p2);
          p5.stroke(line_color);
          p5.line(x_pos+p4, y_pos+char_height-p4, x_pos+char_width-p4, y_pos+p4);
        }

      }
    }
  }
}

function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
  p5.noiseDetail(8,0.5);
  p5.noStroke();

  p5.fill(blue);
  p5.rect(0, 0, 256, 256);
  p5.fill(light_blue);

  var drawStack = [];

  drawStack.push([native_charsize, x1, x2, y1, y2, light_blue, 1, true])

  // drawLayer(p5, 16, x1, x2, y1, y2);
  var nextLayerDown = 2.5;
  var nextLayerIncrement = 1.6;
  var nextLayerTarget = Math.floor(nextLayerDown);
  var alpha = 1.0;
  var curLineLayer = 2;
  for(var i=1; i<=zoom; i++) {
    if(i == nextLayerTarget) {
      var alpha = 0.90 * alpha;
      var curBlue = p5.lerpColor(p5.color(blue), p5.color(light_blue), alpha);
      nextLayerDown += nextLayerIncrement;
      nextLayerTarget = Math.floor(nextLayerDown);
      nextLayerIncrement += 0.8;
      var tileSize = native_charsize / Math.pow(2, i);
      drawStack.push([tileSize, x1, x2, y1, y2, curBlue, curLineLayer, false])
      curLineLayer = curLineLayer + 1;
    }
  }

  for(var i=drawStack.length-1; i>=0; i--) {
    var args = drawStack[i];
    p5.fill(args[5]);
    p5.stroke(args[5]);
    drawLayer(p5, args[0], args[1], args[2], args[3], args[4], z, args[5], args[6], args[7]);
  }
}

example_10print.js

/* This is an example of 10print translated into the PS4 framework */

var blue = "#0000AA"
var light_blue = "#0088FF"

function drawLayer(p5, slashsize, x1, x2, y1, y2, z) {
  var noiseScale=1/16.0;
  var startx = slashsize * (Math.floor(x1/slashsize) - 1);
  var starty = slashsize * (Math.floor(y1/slashsize) - 1);
  var endx = slashsize * (Math.floor(x2/slashsize) + 1);
  var endy = slashsize * (Math.floor(y2/slashsize) + 1);

  var char_width = 256 / ((x2-x1)/slashsize);
  var char_height = 256 / ((y2-y1)/slashsize);
  var pixel_width = char_width / 8;
  var pixel_height = char_height / 8;
  p5.strokeWeight(pixel_width);

  for(var x=startx; x<endx; x+=slashsize) {
    var n_x = x / slashsize;
    var x_pos = p5.map(x, x1, x2, 0, 256);
    for(var y=starty; y<endy; y+=slashsize) {
      var n_y = y / slashsize;
      var y_pos = p5.map(y, y1, y2, 0, 256);
      var noiseValue = p5.noise(x * noiseScale, y * noiseScale, z);
      if (noiseValue < 0.5) {
        p5.line(x_pos, y_pos, x_pos+char_width, y_pos+char_height);
      }
      else {
        p5.line(x_pos, y_pos+char_height, x_pos+char_width, y_pos);
      }
    }
  }
}

function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
  p5.noiseDetail(8,0.5);
  p5.background(blue);
  p5.stroke(light_blue);
  drawLayer(p5, 16, x1, x2, y1, y2, z);
}

example_fence.js

var max_thickness = 64;
var max_movement = 32;
var ball_radius = 32;
var line_width = 8;
var grid_size = 64;

function getOffsetPoint(p5, x, y, z, noiseScale) {
  var noiseX = p5.noise(x * noiseScale,
                        y * noiseScale, z);
  var noiseY = p5.noise(x * noiseScale,
                        y * noiseScale, z+50);
  var offsetX = p5.map(noiseX, 0, 1, -max_movement, max_movement);
  var offsetY = p5.map(noiseY, 0, 1, -max_movement, max_movement);
  return [x+offsetX, y+offsetY]
}

function snap_to_grid(num, gsize) {
  return (num - (num % gsize));
}

/*
 * This is the funciton to implement to make your own abstract design.
 *
 * arguments:
 * p5: the p5.js object - all draw commands should be prefixed with this object
 * x1, x2, y1, y2: draw the pattern contained in the rectangle x1,y1 to x2, y2
 * z: use this as the noise z offset (can be shifted)
 * zoom: current zoom level (starts at 0), useful to decide how much detail to draw
 *
 * The destination drawing should be in the square 0, 0, 255, 255.
 */
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
  // debug - show border
  var max_shift = max_thickness + max_movement;
  var min_x = snap_to_grid(x1 - max_shift, grid_size);
  var max_x = snap_to_grid(x2 + max_shift + grid_size, grid_size);
  var min_y = snap_to_grid(y1 - max_shift, grid_size);
  var max_y = snap_to_grid(y2 + max_shift + grid_size, grid_size);


  var c_p00 = p5.map(0, x1, x2, 0, 256);
  var c_plwidth = p5.map(line_width, x1, x2, 0, 256);
  var c_pball = p5.map(ball_radius, x1, x2, 0, 256);
  var cur_line_width = c_plwidth - c_p00;
  var cur_ball_radius = c_pball - c_p00;

  p5.background(255);
  p5.fill(0, 0, 128);
  for(var x=min_x; x<max_x; x+=grid_size) {
    for(var y=min_y; y<max_y; y+=grid_size) {
      var shift_point = getOffsetPoint(p5, x, y, z, 0.1);
      var x_pos = p5.map(shift_point[0], x1, x2, 0, 256);
      var y_pos = p5.map(shift_point[1], y1, y2, 0, 256);

      p5.strokeWeight(cur_line_width);
      p5.stroke(0, 0, 128);
      var shift_point2 = getOffsetPoint(p5, x+grid_size, y, z, 0.1);
      var x_pos2 = p5.map(shift_point2[0], x1, x2, 0, 256);
      var y_pos2 = p5.map(shift_point2[1], y1, y2, 0, 256);
      p5.line(x_pos, y_pos, x_pos2, y_pos2);

      p5.stroke(0, 128, 0);
      var shift_point2 = getOffsetPoint(p5, x, y+grid_size, z, 0.1);
      var x_pos2 = p5.map(shift_point2[0], x1, x2, 0, 256);
      var y_pos2 = p5.map(shift_point2[1], y1, y2, 0, 256);
      p5.line(x_pos, y_pos, x_pos2, y_pos2);

      p5.noStroke();
      p5.ellipse(x_pos, y_pos, cur_ball_radius);
    }
  }
}

example_framed_dot.js

function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
  console.log(y1, y2);
  p5.background(255);
  p5.rectMode(p5.CORNERS);

  var cx = p5.map(512-960/2, x1, x2, 0, 256);
  var cy = p5.map(512-720/2, y1, y2, 0, 256);
  var cx2 = p5.map(512+960/2, x1, x2, 0, 256);
  var cy2 = p5.map(512+720/2, y1, y2, 0, 256);
  p5.fill(255, 0, 0);
  p5.rect(cx, cy, cx2, cy2);

  cx = p5.map(512-940/2, x1, x2, 0, 256);
  cy = p5.map(512-700/2, y1, y2, 0, 256);
  cx2 = p5.map(512+940/2, x1, x2, 0, 256);
  cy2 = p5.map(512+700/2, y1, y2, 0, 256);
  p5.fill(0);
  p5.rect(cx, cy, cx2, cy2);

  var cx = p5.map(512, x1, x2, 0, 256);
  var cy = p5.map(512, y1, y2, 0, 256);
  var cx2 = p5.map(512+50, x1, x2, 0, 256);
  p5.fill(0, 0, 255);
  p5.ellipse(cx, cy, (cx2-cx));

  var cx = p5.map(412, x1, x2, 0, 256);
  var cy = p5.map(412, y1, y2, 0, 256);
  var cx2 = p5.map(412+50, x1, x2, 0, 256);
  p5.fill(0, 255, 0);
  p5.ellipse(cx, cy, (cx2-cx));
}

example_noise.js

function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
  var noiseScale=0.02; 
  p5.noiseDetail(8,0.5);
  p5.noStroke();
  for(var i=0; i<16; i++) {
    var n_x = p5.map(i, 0, 16, x1, x2);
    for(var j=0; j<16; j++) {
      var n_y = p5.map(j, 0, 16, y1, y2);
      var noiseVal = p5.noise(n_x * noiseScale,
                              n_y * noiseScale, z);
      p5.fill(noiseVal*255);
      p5.rect(i*16, j*16, 16, 16);
    }
  }
  // debug - show border
  // p5.noFill();
  // p5.stroke(255, 0, 0)
  // p5.rect(0, 0, 255, 255);
}

framed.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>framed version</title>

<div class="column">
  <h1>Sketch in a box</h1>
  <div class="index">
    <iframe sandbox="allow-popups allow-scripts allow-forms allow-same-origin" src="index.html" marginwidth="0" marginheight="0" style="width:960px;height:720px;" scrolling="no"></iframe>
  </div>
</div>

index.html

<!DOCTYPE html>
<html>  
<head>
    <title>17.2.MDDN342 PS4</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.dom.js"></script>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script src="leaflet-hash.js"></script>
    <script src="drawgrid_10print.js"></script>
    <script src="map.js"></script>
</body>
</html>

leaflet-hash.js

(function(window) {
	var HAS_HASHCHANGE = (function() {
		var doc_mode = window.documentMode;
		return ('onhashchange' in window) &&
			(doc_mode === undefined || doc_mode > 7);
	})();

	L.Hash = function(map) {
		this.onHashChange = L.Util.bind(this.onHashChange, this);

		if (map) {
			this.init(map);
		}
	};

	L.Hash.parseHash = function(hash) {
		if(hash.indexOf('#') === 0) {
			hash = hash.substr(1);
		}
		var args = hash.split("/");
		if (args.length == 5) {
			var seed = parseInt(args[0], 10),
				zoom = parseInt(args[1], 10),
				lat = parseFloat(args[2]),
				lon = parseFloat(args[3]);
				depth = parseFloat(args[4]);
			if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
				return false;
			} else {
				return {
					center: new L.LatLng(lat, lon),
					zoom: zoom,
					seed: seed,
					depth: depth
				};
			}
		} else {
			return false;
		}
	};

	L.Hash.formatHash = function(map) {
		var seed = map._p5_seed,
			depth = map._p5_depth,
			center = map.getCenter(),
		    zoom = map.getZoom(),
		    precision = 12;
		    // precision = Math.max(0, Math.ceil(Math.log(zoom*zoom) / Math.LN2));

		return "#" + [seed, zoom,
			center.lat.toFixed(precision),
			center.lng.toFixed(precision),
			depth.toFixed(precision)
		].join("/");
	},

	L.Hash.prototype = {
		map: null,
		lastHash: null,

		parseHash: L.Hash.parseHash,
		formatHash: L.Hash.formatHash,

		init: function(map) {
			this.map = map;

			// reset the hash
			this.lastHash = null;
			this.onHashChange();

			if (!this.isListening) {
				this.startListening();
			}
		},

		removeFrom: function(map) {
			if (this.changeTimeout) {
				clearTimeout(this.changeTimeout);
			}

			if (this.isListening) {
				this.stopListening();
			}

			this.map = null;
		},

		onMapMove: function() {
			// bail if we're moving the map (updating from a hash),
			// or if the map is not yet loaded

			if (this.movingMap || !this.map._loaded) {
				return false;
			}

			var hash = this.formatHash(this.map);
			if (this.lastHash != hash) {
				location.replace(hash);
				this.lastHash = hash;
			}
		},

		movingMap: false,
		update: function() {
			var hash = location.hash;
			if (hash === this.lastHash) {
				return;
			}
			var parsed = this.parseHash(hash);
			if (parsed) {
				var do_reset = false;
				if (!("_hash_parsed" in this.map)) {
					do_reset = true;
				}
				this.map._hash_parsed = true;
				this.map._p5_seed = parsed.seed;
				this.map._p5_depth = parsed.depth;

				this.movingMap = true;

				this.map.setView(parsed.center, parsed.zoom, {reset: do_reset});

				this.movingMap = false;
			}
			else if (!("_hash_parsed" in this.map)) {
				this.map._hash_parsed = true;
				var center = this.map.getCenter();
				var zoom = this.map.getZoom();
				this.map.setView(center, zoom, {reset: true});
			}
			else {
				this.onMapMove(this.map);
			}
		},

		// defer hash change updates every 100ms
		changeDefer: 100,
		changeTimeout: null,
		onHashChange: function() {
			// throttle calls to update() so that they only happen every
			// `changeDefer` ms
			if (!this.changeTimeout) {
				var that = this;
				this.changeTimeout = setTimeout(function() {
					that.update();
					that.changeTimeout = null;
				}, this.changeDefer);
			}
		},

		isListening: false,
		hashChangeInterval: null,
		startListening: function() {
			this.map.on("moveend", this.onMapMove, this);

			if (HAS_HASHCHANGE) {
				L.DomEvent.addListener(window, "hashchange", this.onHashChange);
			} else {
				clearInterval(this.hashChangeInterval);
				this.hashChangeInterval = setInterval(this.onHashChange, 50);
			}
			this.isListening = true;
		},

		stopListening: function() {
			this.map.off("moveend", this.onMapMove, this);

			if (HAS_HASHCHANGE) {
				L.DomEvent.removeListener(window, "hashchange", this.onHashChange);
			} else {
				clearInterval(this.hashChangeInterval);
			}
			this.isListening = false;
		}
	};
	L.hash = function(map) {
		return new L.Hash(map);
	};
	L.Map.prototype.addHash = function() {
		this._hash = L.hash(this);
	};
	L.Map.prototype.removeHash = function() {
		this._hash.removeFrom();
	};
})(window);

map.js

var myCRS = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(1, 0,
    // -1, // works like expected
    1, // image travels while zooming
    0)
});

var worldMap = new L.Map('map', {  
  continuousWorld:true, 
  minZoom: 0,
  maxZoom: 45,
  crs: myCRS,
  attributionControl: false,
  center: [512, 512], 
  zoom: 0});

worldMap._p5_seed = Math.floor(Math.random() * 1000);
worldMap._p5_depth = 0.0;
// console.log("Seed start", worldMap._p5_seed)
// Assuming your map instance is in a variable called map
var hash = new L.Hash(worldMap);
// console.log("Seed now", worldMap._p5_seed)

var s = function( p ) {

  p.setup = function() {
    canvas = p.createCanvas(p._L_width, p._L_height);
    p.noLoop();
  };

  p.draw = function() {
    if ("_L_size" in p && "_L_nw" in p) {
      var nw = p._L_nw;
      var t_size = p._L_size;
      var zoom = p._L_zoom;
      var m_x1 = nw.lng;
      var m_y1 = nw.lat;
      var m_x2 = m_x1 + t_size;
      var m_y2 = m_y1 + t_size;
      var depth = p._L_depth;
      p.noiseSeed(p._L_seed)
      drawGrid(p, m_x1, m_x2, m_y1, m_y2, depth, zoom);
    }
  };
};

var tiles = new L.GridLayer({continuousWorld: true});
tiles.createTile = function(coords) {
  if (!("_hash_parsed" in worldMap)) {
    return L.DomUtil.create('canvas', 'leaflet-tile');
  }
  var size = this.getTileSize();
  var myp5 = new p5(s);
  myp5._L_width = size.x;
  myp5._L_height = size.y;
  myp5._L_zoom = coords.z;
  myp5._L_seed = worldMap._p5_seed;
  myp5._L_depth = worldMap._p5_depth;
  myp5._L_coords = coords;
  // calculate projection coordinates of top left tile pixel
  myp5._L_nwPoint = coords.scaleBy(size);
  myp5._L_size = 256.0 / Math.pow(2, coords.z)
  
  // calculate geographic coordinates of top left tile pixel
  myp5._L_nw = worldMap.unproject(myp5._L_nwPoint, coords.z)

  myp5._start();
  var tile = myp5.canvas;
  L.DomUtil.addClass(tile, 'leaflet-tile');

  return tile;
}

tiles.addTo(worldMap)

var curLinkIndex = 0;

linkPath = [
  "#0/0/512/512/0",  // home
  "#0/1/512/512/0",  // home
  "#0/2/512/512/1",  // home
]

function clickHome() {
  curLinkIndex = 0
  location.hash = linkPath[0]
  hash.update()
}

function clickDemo() {
  curLinkIndex = (curLinkIndex + 1) % linkPath.length
  location.hash = linkPath[curLinkIndex]
  hash.update()
}

function clickReset() {
  window.location.reload();
}

attrib = new L.Control.Attribution
attrib.setPrefix("")
attrStr = '<a href="#" onclick="javascript:clickHome();">home</a> | '
// attrStr += '<a href="#" onclick="javascript:clickDemo();">tour</a> | '
attrStr += '<a href="#" onclick="javascript:clickReset();">reset</a>'
attrib.addAttribution(attrStr)
worldMap.addControl(attrib)

preview.png

thumbnail.png