max
/
pixsy
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

initial sort-of-working version!! 

still several huge bugs
This commit is contained in:
synth-ruiner 2017-12-23 00:57:52 +00:00
parent 7b7f13d0dd
commit 3c67f54c1d
3 changed files with 112 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -5229,4 +5229,4 @@ DLG ITM_0
You found a nice warm cup of tea
VAR a
42</textarea></div><div class="section" id="image"><h2>image</h2><input id="imageUpload" type="file" accepts="image/*"><div id="croppie"></div></div><div class="section" id="palette"><h2>palette</h2><form id="palettes"><table><tbody></tbody></table></form></div><div class="section" id="crop"><h2>preview</h2><canvas id="preview" width="128" height="128"></canvas><input id="brightness" type="range" min="-255" max="255" value="0"><label for="brightness">brightness</label></div><div class="section" id="output"><h2>output</h2><canvas id="output" width="128" height="128"></canvas><input id="threshold" type="range" min="0" max="64"><br><label for="threshold"> <span class="left">use existing tiles </span><span class="right">create new tiles</span></label><br><input id="roomName" placeholder="room name"><br><br></div></body></html>
42</textarea></div><div class="section" id="image"><h2>image</h2><input id="imageUpload" type="file" accepts="image/*"><div id="croppie"></div></div><div class="section" id="palette"><h2>palette</h2><form id="palettes"><table><tbody></tbody></table></form></div><div class="section" id="crop"><h2>preview</h2><canvas id="preview" width="128" height="128"></canvas><input id="brightness" type="range" min="-255" max="255" value="0"><label for="brightness">brightness</label></div><div class="section" id="output"><h2>output</h2><canvas id="room-output" width="128" height="128"></canvas><input id="threshold" type="range" min="0" max="64"><br><label for="threshold"> <span class="left">use existing tiles </span><span class="right">create new tiles</span></label><br><input id="roomName" placeholder="room name"><br><button id="save">Save</button><br><br></div></body></html>

6
index.pug
View File

@ -57,7 +57,7 @@ html
#output.section
h2 output
canvas#output(width=128, height=128)
canvas#room-output(width=128, height=128)
input#threshold(type="range" min=0 max=64)
br
@ -71,6 +71,10 @@ html
br
button#save Save
br
//-label favour broad strokes | favour details
br

110
script.js
View File

@ -19,6 +19,10 @@ $(document).ready(function() {
}
};
var room = [];
var tiles = [];
var croptions = {
url: 'https://i.imgur.com/ThQZ94v.jpg',
viewport: {width: 128, height: 128, type: 'square'},
@ -61,6 +65,7 @@ $(document).ready(function() {
delete colourOptions.sprite;
_.each(palette, function(colour, name) {
colourOptions[name].name = name;
colourOptions[name].difference = colourDifference(initialColour, colour);
});
@ -104,6 +109,24 @@ $(document).ready(function() {
}
});
// get tiles
bitsyData.tiles = {};
var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}/g);
for (var i = 0; i < tiles.length; i++) {
var name = tiles[i].match(/TIL .*/)[0].replace('TIL ', '');
tiles[i] = tiles[i].replace(/TIL .*\n/, '');
var bitmap = tiles[i].match(/[01]/g);
bitsyData.tiles[name] = {
name: name,
bitmap: _.chunk(bitmap, 8)
};
}
// set palette to first imported palette and redraw
palette = _.first(_.sortBy(bitsyData.palettes, 'sortOrder'));
@ -147,8 +170,9 @@ $(document).ready(function() {
type: 'rawcanvas',
size: 'viewport'
}).then(function (result) {
var imageData = result.getContext('2d').getImageData(0, 0, 128, 128);
var rawData = imageData.data;
var imageData = result.getContext('2d').getImageData(0, 0, 128, 128);
var rawData = imageData.data;
var monochrome = [];
brightnessAdjustment = parseFloat($('#brightness').val());
@ -163,14 +187,92 @@ $(document).ready(function() {
var targetColour = getClosestColour(pixel, palette);
if (targetColour.name === "background") {
monochrome.push(0);
} else { // tile
monochrome.push(1)
}
rawData[i ] = targetColour.red;
rawData[i + 1] = targetColour.green;
rawData[i + 2] = targetColour.blue;
rawData[i + 3] = 255;
}
document.getElementById('preview').getContext('2d').putImageData(imageData, 0, 0);
// split monochrome bitmap into equal chunks for easier x:y access
monochrome = _.chunk(monochrome, 128);
document.getElementById('preview').getContext('2d').putImageData(imageData, 0, 0);
// tiled output
_.times(16, function(tileY) {
_.times(16, function(tileX) {
// make pseudo-tile from monochrome bitmap
var pseudoTile = [];
_.times(8, function(y) {
pseudoTile.push(
_.slice(monochrome[(tileY * 8) + y], (tileX * 8), (tileX * 8) + 8)
);
})
var tilesForMatch = bitsyData.tiles;
_.each(tilesForMatch, function(tile) {
tile.match = 0;
_.each(tile.bitmap, function(row, y) {
_.each(row, function(pixel, x) {
if (parseInt(pixel) === parseInt(pseudoTile[y][x])) {
tile.match++;
}
});
});
});
var bestMatch = _.first(_.sortBy(tilesForMatch, 'match'));
// if best match is under threshold
// turn pseudo-tile into a real tile and add it to the tile data
room.push(bestMatch.name);
});
});
room = _.chunk(room, 16);
// write room to output
imageData = document.getElementById("room-output").getContext('2d').getImageData(0, 0, 128, 128);
rawData = imageData.data;
_.each(room, function(row, tileY) {
_.each(row, function(tileName, tileX) {
if (_.get(bitsyData, 'tiles.' + tileName + '.bitmap')) {
_.each(bitsyData.tiles[tileName].bitmap, function(row, y) {
_.each(row, function(pixel, x) {
var position = (((tileY * 8) + y) * 128) + ((tileX * 8) + x);
position *= 4; // 4 values (rgba) per pixel
if (parseInt(pixel) === 1) { // ?! wtf
pixelColour = palette.background;
} else {
pixelColour = palette.tile;
}
rawData[position ] = pixelColour.red;
rawData[position + 1] = pixelColour.green;
rawData[position + 2] = pixelColour.blue;
rawData[position + 3] = 255;
});
});
}
});
});
document.getElementById('room-output').getContext('2d').putImageData(imageData, 0, 0);
});
}, 12);
}, 30);
$croppie.on('update', renderResult);