mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-04-20 18:32:04 +00:00
Correct pixels are now computed, but it is bugged
This commit is contained in:
SwingTheVine
parent
bc60665167
commit
388f1196a9
10 changed files with 208 additions and 78 deletions
125
dist/BlueMarble-For-GreasyFork.user.js
vendored
125
dist/BlueMarble-For-GreasyFork.user.js
vendored
|
|
@ -2,7 +2,7 @@
|
|||
// @name Blue Marble
|
||||
// @name:en Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.88.81
|
||||
// @version 0.88.92
|
||||
// @description A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
|
||||
// @description:en A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
|
||||
// @author SwingTheVine
|
||||
|
|
@ -811,7 +811,7 @@
|
|||
];
|
||||
|
||||
// src/Template.js
|
||||
var _Template_instances, calculateTotalPixelsFromTemplateData_fn;
|
||||
var _Template_instances, calculateTotalPixelsFromImageData_fn;
|
||||
var Template = class {
|
||||
/** The constructor for the {@link Template} class with enhanced pixel tracking.
|
||||
* @param {Object} [params={}] - Object containing all optional parameters
|
||||
|
|
@ -869,7 +869,7 @@
|
|||
context.imageSmoothingEnabled = false;
|
||||
context.drawImage(bitmap, 0, 0);
|
||||
let timer = Date.now();
|
||||
const totalPixelMap = __privateMethod(this, _Template_instances, calculateTotalPixelsFromTemplateData_fn).call(this, context.getImageData(0, 0, imageWidth, imageHeight), paletteBM);
|
||||
const totalPixelMap = __privateMethod(this, _Template_instances, calculateTotalPixelsFromImageData_fn).call(this, context.getImageData(0, 0, imageWidth, imageHeight), paletteBM);
|
||||
console.log(`Calculating total pixels took ${(Date.now() - timer) / 1e3} seconds`);
|
||||
let totalPixels = 0;
|
||||
const transparentColorID = 0;
|
||||
|
|
@ -954,17 +954,17 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
|
|||
}
|
||||
};
|
||||
_Template_instances = new WeakSet();
|
||||
/** Calculates the total pixels for each color for the template.
|
||||
/** Calculates the total pixels for each color for the image.
|
||||
*
|
||||
* @param {ImageData} imageData - The pre-shreaded template "casted" onto a canvas
|
||||
* @param {ImageData} imageData - The pre-shreaded image "casted" onto a canvas
|
||||
* @param {Object} paletteBM - The palette Blue Marble uses for colors
|
||||
* @param {Number} paletteTolerance - How close an RGB color has to be in order to be considered a palette color. A tolerance of "3" means the sum of the RGB can be up to 3 away from the actual value.
|
||||
* @returns {Map<Number, Number>} A map where the key is the color ID, and the value is the total pixels for that color ID
|
||||
* @since 0.88.6
|
||||
*/
|
||||
calculateTotalPixelsFromTemplateData_fn = function(imageData, paletteBM) {
|
||||
calculateTotalPixelsFromImageData_fn = function(imageData, paletteBM) {
|
||||
const buffer32Arr = new Uint32Array(imageData.data.buffer);
|
||||
const { palette, LUT: lookupTable } = paletteBM;
|
||||
const { palette: _, LUT: lookupTable } = paletteBM;
|
||||
const _colorpalette = /* @__PURE__ */ new Map();
|
||||
for (let pixelIndex = 0; pixelIndex < buffer32Arr.length; pixelIndex++) {
|
||||
const pixel = buffer32Arr[pixelIndex];
|
||||
|
|
@ -974,18 +974,15 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
|
|||
} else {
|
||||
bestColorID = lookupTable.get(pixel) ?? -2;
|
||||
}
|
||||
if (_colorpalette.get(bestColorID) == null) {
|
||||
_colorpalette.set(bestColorID, 1);
|
||||
} else {
|
||||
_colorpalette.set(bestColorID, _colorpalette.get(bestColorID) + 1);
|
||||
}
|
||||
const colorIDcount = _colorpalette.get(bestColorID);
|
||||
_colorpalette.set(bestColorID, colorIDcount ? colorIDcount + 1 : 1);
|
||||
}
|
||||
console.log(_colorpalette);
|
||||
return _colorpalette;
|
||||
};
|
||||
|
||||
// src/templateManager.js
|
||||
var _TemplateManager_instances, loadTemplate_fn, storeTemplates_fn, parseBlueMarble_fn, parseOSU_fn;
|
||||
var _TemplateManager_instances, loadTemplate_fn, storeTemplates_fn, parseBlueMarble_fn, parseOSU_fn, calculateCorrectPixelsOnTile_fn;
|
||||
var TemplateManager = class {
|
||||
/** The constructor for the {@link TemplateManager} class.
|
||||
* @since 0.55.8
|
||||
|
|
@ -1002,47 +999,12 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
|
|||
this.drawMult = 3;
|
||||
this.paletteTolerance = 3;
|
||||
this.paletteBM = colorpaletteForBlueMarble(this.paletteTolerance);
|
||||
this.canvasTemplate = null;
|
||||
this.canvasTemplateZoomed = null;
|
||||
this.canvasTemplateID = "bm-canvas";
|
||||
this.canvasMainID = "div#map canvas.maplibregl-canvas";
|
||||
this.template = null;
|
||||
this.templateState = "";
|
||||
this.templatesArray = [];
|
||||
this.templatesJSON = null;
|
||||
this.templatesShouldBeDrawn = true;
|
||||
}
|
||||
/** Retrieves the pixel art canvas.
|
||||
* If the canvas has been updated/replaced, it retrieves the new one.
|
||||
* @param {string} selector - The CSS selector to use to find the canvas.
|
||||
* @returns {HTMLCanvasElement|null} The canvas as an HTML Canvas Element, or null if the canvas does not exist
|
||||
* @since 0.58.3
|
||||
* @deprecated Not in use since 0.63.25
|
||||
*/
|
||||
getCanvas() {
|
||||
if (document.body.contains(this.canvasTemplate)) {
|
||||
return this.canvasTemplate;
|
||||
}
|
||||
document.getElementById(this.canvasTemplateID)?.remove();
|
||||
const canvasMain = document.querySelector(this.canvasMainID);
|
||||
const canvasTemplateNew = document.createElement("canvas");
|
||||
canvasTemplateNew.id = this.canvasTemplateID;
|
||||
canvasTemplateNew.className = "maplibregl-canvas";
|
||||
canvasTemplateNew.style.position = "absolute";
|
||||
canvasTemplateNew.style.top = "0";
|
||||
canvasTemplateNew.style.left = "0";
|
||||
canvasTemplateNew.style.height = `${canvasMain?.clientHeight * (window.devicePixelRatio || 1)}px`;
|
||||
canvasTemplateNew.style.width = `${canvasMain?.clientWidth * (window.devicePixelRatio || 1)}px`;
|
||||
canvasTemplateNew.height = canvasMain?.clientHeight * (window.devicePixelRatio || 1);
|
||||
canvasTemplateNew.width = canvasMain?.clientWidth * (window.devicePixelRatio || 1);
|
||||
canvasTemplateNew.style.zIndex = "8999";
|
||||
canvasTemplateNew.style.pointerEvents = "none";
|
||||
canvasMain?.parentElement?.appendChild(canvasTemplateNew);
|
||||
this.canvasTemplate = canvasTemplateNew;
|
||||
window.addEventListener("move", this.onMove);
|
||||
window.addEventListener("zoom", this.onZoom);
|
||||
window.addEventListener("resize", this.onResize);
|
||||
return this.canvasTemplate;
|
||||
this.templatePixelsCorrect = null;
|
||||
}
|
||||
/** Creates the JSON object to store templates in
|
||||
* @returns {{ whoami: string, scriptVersion: string, schemaVersion: string, templates: Object }} The JSON object
|
||||
|
|
@ -1181,10 +1143,28 @@ Version: ${this.version}`);
|
|||
context.clip();
|
||||
context.clearRect(0, 0, drawSize, drawSize);
|
||||
context.drawImage(tileBitmap, 0, 0, drawSize, drawSize);
|
||||
const tileBeforeTemplates = context.getImageData(0, 0, drawSize, drawSize);
|
||||
const tileBeforeTemplates32 = new Uint32Array(tileBeforeTemplates.data.buffer);
|
||||
for (const template of templatesToDraw) {
|
||||
console.log(`Template:`);
|
||||
console.log(template);
|
||||
context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult);
|
||||
const coordXtoDrawAt = Number(template.pixelCoords[0]) * this.drawMult;
|
||||
const coordYtoDrawAt = Number(template.pixelCoords[1]) * this.drawMult;
|
||||
context.drawImage(template.bitmap, coordXtoDrawAt, coordYtoDrawAt);
|
||||
const templateBeforeFilter = context.getImageData(coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height);
|
||||
const templateBeforeFilter32 = new Uint32Array(templateBeforeFilter.data.buffer);
|
||||
const timer = Date.now();
|
||||
const pixelsCorrect = __privateMethod(this, _TemplateManager_instances, calculateCorrectPixelsOnTile_fn).call(this, tileBeforeTemplates32, templateBeforeFilter32, [coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height]);
|
||||
let pixelsCorrectTotal = 0;
|
||||
const transparentColorID = 0;
|
||||
for (const [color, total] of pixelsCorrect) {
|
||||
if (color == transparentColorID) {
|
||||
continue;
|
||||
}
|
||||
pixelsCorrectTotal += total;
|
||||
}
|
||||
console.log(`Finished calculating correct pixels for the tile ${tileCoords} in ${(Date.now() - timer) / 1e3} seconds!
|
||||
There are ${pixelsCorrectTotal} correct pixels.`);
|
||||
}
|
||||
return await canvas.convertToBlob({ type: "image/png" });
|
||||
}
|
||||
|
|
@ -1264,6 +1244,49 @@ Version: ${this.version}`);
|
|||
*/
|
||||
parseOSU_fn = function() {
|
||||
};
|
||||
/** Calculates the correct pixels on this tile.
|
||||
* @param {Uint32Array} tile32 - The tile without templates as a Uint32Array
|
||||
* @param {Uint32Array} template32 - The template without filtering as a Uint32Array
|
||||
* @param {Array<Number, Number, Number, Number>} templateInformation - Information about template location and size
|
||||
* @returns {Map} - A Map containing the color IDs (keys) and how many correct pixels there are for that color (values)
|
||||
*/
|
||||
calculateCorrectPixelsOnTile_fn = function(tile32, template32, templateInformation) {
|
||||
const pixelSize = this.drawMult;
|
||||
const tileWidth = this.tileSize * pixelSize;
|
||||
const tileHeight = tileWidth;
|
||||
const tilePixelOffsetY = -1;
|
||||
const tilePixelOffsetX = 0;
|
||||
const templateCoordX = templateInformation[0];
|
||||
const templateCoordY = templateInformation[1];
|
||||
const templateWidth = templateInformation[2];
|
||||
const templateHeight = templateInformation[3];
|
||||
const tolerance = this.paletteTolerance;
|
||||
const { palette: _, LUT: lookupTable } = this.paletteBM;
|
||||
const _colorpalette = /* @__PURE__ */ new Map();
|
||||
for (let templateRow = 1; templateRow < templateHeight; templateRow += pixelSize) {
|
||||
for (let templateColumn = 1; templateColumn < templateWidth; templateColumn += pixelSize) {
|
||||
const tileRow = templateCoordY + templateRow + tilePixelOffsetY;
|
||||
const tileColumn = templateCoordX + templateColumn + tilePixelOffsetX;
|
||||
const tilePixelAbove = tile32[tileRow * tileWidth + tileColumn];
|
||||
const templatePixel = template32[templateRow * templateWidth + templateColumn];
|
||||
const templatePixelAlpha = templatePixel >>> 24 & 255;
|
||||
const tilePixelAlpha = tilePixelAbove >>> 24 & 255;
|
||||
if (templatePixelAlpha <= tolerance || tilePixelAlpha <= tolerance) {
|
||||
continue;
|
||||
}
|
||||
const bestTileColorID = lookupTable.get(tilePixelAbove) ?? -2;
|
||||
const bestTemplateColorID = lookupTable.get(templatePixel) ?? -2;
|
||||
if (bestTileColorID != bestTemplateColorID) {
|
||||
continue;
|
||||
}
|
||||
const colorIDcount = _colorpalette.get(bestTemplateColorID);
|
||||
_colorpalette.set(bestTemplateColorID, colorIDcount ? colorIDcount + 1 : 1);
|
||||
}
|
||||
}
|
||||
console.log(`List of template pixels that match the tile:`);
|
||||
console.log(_colorpalette);
|
||||
return _colorpalette;
|
||||
};
|
||||
|
||||
// src/apiManager.js
|
||||
var _ApiManager_instances, getBrowserFromUA_fn, getOS_fn;
|
||||
|
|
@ -1350,7 +1373,9 @@ Did you try clicking the canvas first?`);
|
|||
tileCoordsTile = [parseInt(tileCoordsTile[tileCoordsTile.length - 2]), parseInt(tileCoordsTile[tileCoordsTile.length - 1].replace(".png", ""))];
|
||||
const blobUUID = data["blobID"];
|
||||
const blobData = data["blobData"];
|
||||
const timer = Date.now();
|
||||
const templateBlob = await this.templateManager.drawTemplateOnTile(blobData, tileCoordsTile);
|
||||
console.log(`Finished loading the tile in ${(Date.now() - timer) / 1e3} seconds!`);
|
||||
window.postMessage({
|
||||
source: "blue-marble",
|
||||
blobID: blobUUID,
|
||||
|
|
|
|||
4
dist/BlueMarble-Standalone.user.js
vendored
4
dist/BlueMarble-Standalone.user.js
vendored
File diff suppressed because one or more lines are too long
4
dist/BlueMarble.user.js
vendored
4
dist/BlueMarble.user.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -51,7 +51,7 @@
|
|||
<a href="https://discord.gg/tpeBPy46hf" target="_blank" rel="noopener noreferrer"><img alt="Contact Me" src="https://img.shields.io/badge/Contact_Me-gray?style=flat&logo=Discord&logoColor=white&logoSize=auto&labelColor=cornflowerblue"></a>
|
||||
<a href="https://bluemarble.lol/" target="_blank" rel="noopener noreferrer"><img alt="Blue Marble Website" src="https://img.shields.io/badge/Blue_Marble_Website-crqch-blue?style=flat&logo=globe&logoColor=white"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-111hrs_12mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-579-black?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-590-black?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Lines of Code" src="https://img.shields.io/badge/Lines_Of_Code-498-blue?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Comments" src="https://img.shields.io/badge/Lines_Of_Comments-498-blue?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-70.19%25-blue"></a>
|
||||
|
|
|
|||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.88.81",
|
||||
"version": "0.88.92",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.88.81",
|
||||
"version": "0.88.92",
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"jsdoc": "^4.0.5",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.88.81",
|
||||
"version": "0.88.92",
|
||||
"type": "module",
|
||||
"homepage": "https://bluemarble.lol/",
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// @name Blue Marble
|
||||
// @name:en Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.88.81
|
||||
// @version 0.88.92
|
||||
// @description A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
|
||||
// @description:en A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
|
||||
// @author SwingTheVine
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default class Template {
|
|||
context.drawImage(bitmap, 0, 0); // Draws the template to the canvas
|
||||
|
||||
let timer = Date.now();
|
||||
const totalPixelMap = this.#calculateTotalPixelsFromTemplateData(context.getImageData(0, 0, imageWidth, imageHeight), paletteBM); // Calculates total pixels from the template buffer retrieved from the canvas context image data
|
||||
const totalPixelMap = this.#calculateTotalPixelsFromImageData(context.getImageData(0, 0, imageWidth, imageHeight), paletteBM); // Calculates total pixels from the template buffer retrieved from the canvas context image data
|
||||
console.log(`Calculating total pixels took ${(Date.now() - timer) / 1000.0} seconds`);
|
||||
|
||||
let totalPixels = 0; // Will store the total amount of non-Transparent color pixels
|
||||
|
|
@ -197,22 +197,21 @@ export default class Template {
|
|||
return { templateTiles, templateTilesBuffers };
|
||||
}
|
||||
|
||||
/** Calculates the total pixels for each color for the template.
|
||||
/** Calculates the total pixels for each color for the image.
|
||||
*
|
||||
* @param {ImageData} imageData - The pre-shreaded template "casted" onto a canvas
|
||||
* @param {ImageData} imageData - The pre-shreaded image "casted" onto a canvas
|
||||
* @param {Object} paletteBM - The palette Blue Marble uses for colors
|
||||
* @param {Number} paletteTolerance - How close an RGB color has to be in order to be considered a palette color. A tolerance of "3" means the sum of the RGB can be up to 3 away from the actual value.
|
||||
* @returns {Map<Number, Number>} A map where the key is the color ID, and the value is the total pixels for that color ID
|
||||
* @since 0.88.6
|
||||
*/
|
||||
#calculateTotalPixelsFromTemplateData(imageData, paletteBM) {
|
||||
#calculateTotalPixelsFromImageData(imageData, paletteBM) {
|
||||
|
||||
const buffer32Arr = new Uint32Array(imageData.data.buffer); // RGB values as a Uint32Array. Each index represents 1 pixel.
|
||||
const { palette: palette, LUT: lookupTable } = paletteBM; // Obtains the palette and LUT
|
||||
const { palette: _, LUT: lookupTable } = paletteBM; // Obtains the palette and LUT
|
||||
|
||||
// Makes a copy of the color palette Blue Marble uses, turns it into a Map, and adds data to count the amount of each color
|
||||
const _colorpalette = new Map(); // Temp color palette
|
||||
//palette.forEach(color => _colorpalette.set(color.id, 0));
|
||||
|
||||
// For every pixel...
|
||||
for (let pixelIndex = 0; pixelIndex < buffer32Arr.length; pixelIndex++) {
|
||||
|
|
@ -228,16 +227,10 @@ export default class Template {
|
|||
bestColorID = lookupTable.get(pixel) ?? -2;
|
||||
}
|
||||
|
||||
// If the color has not been counted until now, we define it
|
||||
if (_colorpalette.get(bestColorID) == null) {
|
||||
_colorpalette.set(bestColorID, 1);
|
||||
} else {
|
||||
// Else, we count like normal
|
||||
|
||||
// Adds one to the "amount" value for that pixel in the temporary color palette Map
|
||||
_colorpalette.set(bestColorID, _colorpalette.get(bestColorID) + 1);
|
||||
// This works since the Map keys are the color ID, which can be negative.
|
||||
}
|
||||
// Increments the count by 1 for the best matching color ID (which can be negative).
|
||||
// If the color ID has not been counted yet, default to 1
|
||||
const colorIDcount = _colorpalette.get(bestColorID);
|
||||
_colorpalette.set(bestColorID, colorIDcount ? colorIDcount + 1 : 1);
|
||||
}
|
||||
|
||||
console.log(_colorpalette);
|
||||
|
|
|
|||
|
|
@ -124,7 +124,9 @@ export default class ApiManager {
|
|||
const blobUUID = data['blobID'];
|
||||
const blobData = data['blobData'];
|
||||
|
||||
const timer = Date.now();
|
||||
const templateBlob = await this.templateManager.drawTemplateOnTile(blobData, tileCoordsTile);
|
||||
console.log(`Finished loading the tile in ${(Date.now() - timer) / 1000} seconds!`);
|
||||
|
||||
window.postMessage({
|
||||
source: 'blue-marble',
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ export default class TemplateManager {
|
|||
this.templatesArray = []; // All Template instnaces currently loaded (Template)
|
||||
this.templatesJSON = null; // All templates currently loaded (JSON)
|
||||
this.templatesShouldBeDrawn = true; // Should ALL templates be drawn to the canvas?
|
||||
this.templatePixelsCorrect = null; // An object where the keys are the tile coords, and the values are Maps (BM palette color IDs) containing the amount of correctly placed pixels for that tile in this template
|
||||
}
|
||||
|
||||
/** Creates the JSON object to store templates in
|
||||
|
|
@ -268,15 +269,46 @@ export default class TemplateManager {
|
|||
context.clip();
|
||||
|
||||
context.clearRect(0, 0, drawSize, drawSize); // Draws transparent background
|
||||
context.drawImage(tileBitmap, 0, 0, drawSize, drawSize);
|
||||
context.drawImage(tileBitmap, 0, 0, drawSize, drawSize); // Draw tile to canvas
|
||||
|
||||
const tileBeforeTemplates = context.getImageData(0, 0, drawSize, drawSize);
|
||||
const tileBeforeTemplates32 = new Uint32Array(tileBeforeTemplates.data.buffer);
|
||||
|
||||
// For each template in this tile, draw them.
|
||||
for (const template of templatesToDraw) {
|
||||
console.log(`Template:`);
|
||||
console.log(template);
|
||||
|
||||
// Draws the each template on the tile based on it's relative position
|
||||
context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult);
|
||||
// Draws each template on the tile based on it's relative position
|
||||
const coordXtoDrawAt = Number(template.pixelCoords[0]) * this.drawMult;
|
||||
const coordYtoDrawAt = Number(template.pixelCoords[1]) * this.drawMult;
|
||||
context.drawImage(template.bitmap, coordXtoDrawAt, coordYtoDrawAt);
|
||||
|
||||
const templateBeforeFilter = context.getImageData(coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height);
|
||||
const templateBeforeFilter32 = new Uint32Array(templateBeforeFilter.data.buffer);
|
||||
|
||||
// Filter template colors before drawing to canvas
|
||||
// const filteredTemplate = this.#filterTemplateWithPaletteBlacklist(templateBeforeFilter, this.paletteBM);
|
||||
|
||||
// Take the pre-filter template ImageData + the pre-filter tile ImageData, and use that to calculate the correct pixels
|
||||
const timer = Date.now();
|
||||
const pixelsCorrect = this.#calculateCorrectPixelsOnTile(
|
||||
tileBeforeTemplates32,
|
||||
templateBeforeFilter32,
|
||||
[coordXtoDrawAt, coordYtoDrawAt, template.bitmap.width, template.bitmap.height]
|
||||
);
|
||||
|
||||
let pixelsCorrectTotal = 0;
|
||||
const transparentColorID = 0;
|
||||
|
||||
for (const [color, total] of pixelsCorrect) {
|
||||
|
||||
if (color == transparentColorID) {continue;} // Skip Transparent color
|
||||
|
||||
pixelsCorrectTotal += total;
|
||||
}
|
||||
|
||||
console.log(`Finished calculating correct pixels for the tile ${tileCoords} in ${(Date.now() - timer) / 1000} seconds!\nThere are ${pixelsCorrectTotal} correct pixels.`);
|
||||
}
|
||||
|
||||
return await canvas.convertToBlob({ type: 'image/png' });
|
||||
|
|
@ -379,4 +411,82 @@ export default class TemplateManager {
|
|||
setTemplatesShouldBeDrawn(value) {
|
||||
this.templatesShouldBeDrawn = value;
|
||||
}
|
||||
|
||||
/** Calculates the correct pixels on this tile.
|
||||
* @param {Uint32Array} tile32 - The tile without templates as a Uint32Array
|
||||
* @param {Uint32Array} template32 - The template without filtering as a Uint32Array
|
||||
* @param {Array<Number, Number, Number, Number>} templateInformation - Information about template location and size
|
||||
* @returns {Map} - A Map containing the color IDs (keys) and how many correct pixels there are for that color (values)
|
||||
*/
|
||||
#calculateCorrectPixelsOnTile(tile32, template32, templateInformation) {
|
||||
|
||||
// Size of a pixel in actuality
|
||||
const pixelSize = this.drawMult;
|
||||
|
||||
// Tile information
|
||||
const tileWidth = this.tileSize * pixelSize;
|
||||
const tileHeight = tileWidth;
|
||||
const tilePixelOffsetY = -1; // Shift off of target template pixel to target on tile. E.g. "-1" would be the pixel above the template pixel on the tile
|
||||
const tilePixelOffsetX = 0; // Shift off of target template pixel to target on tile. E.g. "-1" would be the pixel to the left of the template pixel on the tile
|
||||
|
||||
// Template information
|
||||
const templateCoordX = templateInformation[0];
|
||||
const templateCoordY = templateInformation[1];
|
||||
const templateWidth = templateInformation[2];
|
||||
const templateHeight = templateInformation[3];
|
||||
const tolerance = this.paletteTolerance;
|
||||
|
||||
//console.log(`TemplateX: ${templateCoordX}\nTemplateY: ${templateCoordY}\nStarting Row:${templateCoordY+tilePixelOffsetY}\nStarting Column:${templateCoordX+tilePixelOffsetX}`);
|
||||
|
||||
const { palette: _, LUT: lookupTable } = this.paletteBM; // Obtains the palette and LUT
|
||||
|
||||
// Makes a copy of the color palette Blue Marble uses, turns it into a Map, and adds data to count the amount of each color
|
||||
const _colorpalette = new Map(); // Temp color palette
|
||||
|
||||
// For each center pixel...
|
||||
for (let templateRow = 1; templateRow < templateHeight; templateRow += pixelSize) {
|
||||
for (let templateColumn = 1; templateColumn < templateWidth; templateColumn += pixelSize) {
|
||||
|
||||
// The pixel on the tile to target (1 pixel above the template)
|
||||
const tileRow = (templateCoordY + templateRow) + tilePixelOffsetY; // (Template offset + current row) - 1
|
||||
const tileColumn = (templateCoordX + templateColumn) + tilePixelOffsetX; // Template offset + current column
|
||||
|
||||
// Retrieves the targeted pixels
|
||||
const tilePixelAbove = tile32[(tileRow * tileWidth) + tileColumn];
|
||||
const templatePixel = template32[(templateRow * templateWidth) + templateColumn];
|
||||
|
||||
// Obtains the alpha channel of the targeted pixels
|
||||
const templatePixelAlpha = (templatePixel >>> 24) & 0xFF;
|
||||
const tilePixelAlpha = (tilePixelAbove >>> 24) & 0xFF;
|
||||
|
||||
// if (templatePixelAlpha > tolerance) {
|
||||
// console.log(`Opaque tile pixel found: (${tileColumn}, ${tileRow})`);
|
||||
// }
|
||||
|
||||
// If either pixel is transparent...
|
||||
if ((templatePixelAlpha <= tolerance) || (tilePixelAlpha <= tolerance)) {
|
||||
continue; // ...we skip it. We can't match the RGB color of transparent pixels.
|
||||
}
|
||||
|
||||
//console.log(`Opaque template & opaque tile pixel found: (${templateColumn}, ${tileRow-tilePixelOffsetY})`);
|
||||
|
||||
// Finds the best matching color ID for each pixel. If none is found, default to "-2"
|
||||
const bestTileColorID = lookupTable.get(tilePixelAbove) ?? -2;
|
||||
const bestTemplateColorID = lookupTable.get(templatePixel) ?? -2;
|
||||
|
||||
// If the template pixel does not match the tile pixel, then the pixel is skipped.
|
||||
if (bestTileColorID != bestTemplateColorID) {continue;}
|
||||
// If the code passes this point, the template pixel matches the tile pixel.
|
||||
|
||||
// Increments the count by 1 for the best matching color ID (which can be negative).
|
||||
// If the color ID has not been counted yet, default to 1
|
||||
const colorIDcount = _colorpalette.get(bestTemplateColorID);
|
||||
_colorpalette.set(bestTemplateColorID, colorIDcount ? colorIDcount + 1 : 1);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`List of template pixels that match the tile:`);
|
||||
console.log(_colorpalette);
|
||||
return _colorpalette;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue