diff --git a/includes/script.js b/includes/script.js index ffc7c54..561bbe0 100644 --- a/includes/script.js +++ b/includes/script.js @@ -1,4 +1,7 @@ $(document).ready(function() { + // todo define things like 16x16, 128x128 etc. as constants? + // also script debounce/throttle times + var bitsyData = {}; var palette = { @@ -132,7 +135,7 @@ $(document).ready(function() { }; // todo: handle animated tiles properly instead of discarding the second animation frame - var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}/g); + var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}(>\n([01]{8}\n){8})?/g); // everything after > is an optional second animation frame _.each(tiles, function(tile, i) { var name = tile.match(/TIL .*/)[0].replace('TIL ', ''); @@ -141,10 +144,16 @@ $(document).ready(function() { var bitmap = tile.match(/[01]/g); - bitsyData.tiles[name] = { - name: name, - bitmap: _.chunk(bitmap, 8) - }; + var newTile = {name: name}; + + if (bitmap.length === 64) { // normal tile + newTile.bitmap = _.chunk(bitmap, 8); + } else if (bitmap.length === 128) { // animated tile + newTile.bitmap = _.chunk(_.take( bitmap, 64), 8); + newTile.secondAnimationFrame = _.chunk(_.takeRight(bitmap, 64), 8); + } + + bitsyData.tiles[name] = newTile; }); // set palette to first imported palette and redraw @@ -219,7 +228,7 @@ $(document).ready(function() { rawData[i ] = targetColour.red; rawData[i + 1] = targetColour.green; rawData[i + 2] = targetColour.blue; - rawData[i + 3] = 255; + rawData[i + 3] = 255; // alpha } // split monochrome bitmap into equal chunks for easier x:y access @@ -254,6 +263,18 @@ $(document).ready(function() { } }); }); + + if (tile.secondAnimationFrame) { + _.each(tile.secondAnimationFrame, function(row, y) { + _.each(row, function(pixel, x) { + if (parseInt(pixel) === parseInt(pseudoTile[y][x])) { + tile.match++; + } + }); + }); + + tile.match /= 2; + } }); var bestMatch = _.first(_.sortBy(tilesForMatch, 'match')); diff --git a/readme.md b/readme.md index 6edfe06..ea6435c 100644 --- a/readme.md +++ b/readme.md @@ -17,6 +17,8 @@ to **Foliotek** for the **Croppie** image plugin ## contributing +Forks and pull requests welcome! + The stylesheet and html are autogenerated; if you want to alter them please edit the pug template or less stylesheet, e.g. from the command line as follows: `pug index.pug index.html` @@ -51,7 +53,7 @@ if (src.match(/^(file|https)?:\/\/|^\/\//)) { * implement slider (*always use existing tiles* -> *always create new tiles*) (representing 0-64 threshold for # of common pixels) * re-style the damn thing * reorganise the page layout for a more logical workflow -* handle animated tiles? +* animate animated tiles * profile script performance and optimise where most needed * make brightness slider trigger redraw every so often while being dragged, instead of waiting until drag stop @@ -66,3 +68,4 @@ if (src.match(/^(file|https)?:\/\/|^\/\//)) { * allow user to draw to canvas * do a 'branching tree' approach to finding the closest tile? i.e. create a 1x1, 2x2, 4x4 version of each tile, so all the broadly darker tiles will sit under '0' and lighter tiles under '1', then tiles that are lighter at the top will sit under '1100', etc... I'm not sure how much more effective this will be or whatever it will give better/faster results but it's worth a try * give heavier weighting to edge pixels when finding a matching tile? (thanks Mark) +* apply grid lines to preview?