Padolsey Pattern Generator

codespector.css

/**
 * Padolsey Pattern Generator
 */

body {  color: #fff;  font-family: verdana, sans-serif;  padding: 30px;  text-shadow: 0 1px 1px #000;}h1 {  font-size: 34px;  margin: 0 0 15px;}h2 {  font-size: 18px;}

codespector.html

<h1>Padolsey Pattern Generator</h1><h2>Click to Regenerate</h2>

codespector.js

var c = document.createElement( 'canvas' ),    ctx = c.getContext( '2d' ),    rows = cols = 36,    gap = 1,    grays = [      [ 26, 29 ],      [ 32, 37 ],      [ 42, 50 ],      [ 46, 56 ],      [ 54, 66 ]    ],    sizes = [ 4, 9, 14 ],    frequency = [ false, 30, 9 ],    cw = ch = c.width = c.height = ( sizes[ 0 ] + gap ) * rows;function random( max, min ) {  var min = min || 0;  return Math.random() * ( max - min ) + min;}function cell( x, y, size ) {  var gray = Math.floor( random( grays.length ) ),      fill = grays[ gray ][ 0 ],      stroke = grays[ gray ][ 1 ];  ctx.fillStyle = 'rgb(' + fill + ', ' + fill + ', ' + fill + ')';  ctx.strokeStyle = 'rgb(' + stroke + ', ' + stroke + ', ' + stroke + ')';  ctx.fillRect( x, y, size, size );      ctx.strokeRect( x + 0.5, y + 0.5, size - 1, size - 1 );}function generate() {  var store = [];    ctx.fillStyle = 'rgb(18, 18, 18)';  ctx.fillRect( 0, 0, cw, ch );    for( var x = 0; x < cols; x ++ ){    for( var y = 0; y < rows; y ++ ){      cell(         ( x * sizes[ 0 ] ) + ( x * gap ),         ( y * sizes[ 0 ] ) + ( y * gap ),         sizes[ 0 ]       );       }  }    for( var freq = 0; freq < frequency.length; freq++ ) {    if( frequency[ freq ] ){      for( var i = 0; i < frequency[ freq ]; ) {        var canDraw = true,            sizeNew = sizes[ freq ],            pad = Math.ceil( ( sizeNew / cw ) * rows );            xNew = Math.floor( random( 1, cols - pad ) ) * ( ch / cols ),            yNew = Math.floor( random( 1, rows - pad ) ) * ( cw / rows ),                        storeLength = store.length;        if( storeLength ) {          for( var j = 0; j < storeLength; j++ ) {            var storeCell = store[ j ];            if( !(              xNew + sizeNew + ( cw / cols ) < storeCell.x ||              yNew + sizeNew + ( ch / rows ) < storeCell.y ||              xNew > storeCell.x + storeCell.size + ( cw / cols ) ||              yNew > storeCell.y + storeCell.size + ( ch / rows )            ) ) {              canDraw = false;              break;            }          }                  }        if( canDraw ) {          cell( xNew, yNew, sizeNew );          store.push( { x: xNew, y: yNew, size: sizeNew } );          i++;        }      }    }  }    document.body.style.background = 'url(' + c.toDataURL() + ')';}window.addEventListener( 'click', generate );generate();

settings.json

{"view":"separate","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"javascript"}