trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: findBlockFromRgb()

Browse source
This commit is contained in:
trafficlunar 2024-12-26 20:00:35 +00:00
parent abd869bf0a
commit 6ddcd1bbdf
3 changed files with 17 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/canvas/Blocks.tsx
View file

@ -5,8 +5,7 @@ import * as PIXI from "pixi.js";
import { useApp } from "@pixi/react"; import { useApp } from "@pixi/react";
import { CompositeTilemap, settings } from "@pixi/tilemap"; import { CompositeTilemap, settings } from "@pixi/tilemap";
import _blockData from "@/data/blocks/programmer-art/data.json"; import { findBlockFromRgb } from "@/utils/findBlockFromRgb";
const blockData: BlockData = _blockData;
interface Props { interface Props {
blocks: Block[]; blocks: Block[];
@ -66,23 +65,6 @@ function Blocks({ blocks, setBlocks, missingTexture, textures, solidTextures, im
tilemapRef.current.scale.set(scale, scale); tilemapRef.current.scale.set(scale, scale);
}, [coords, scale]); }, [coords, scale]);
const findClosestBlock = (r: number, g: number, b: number, a: number) => {
let closestBlock = "";
let closestDistance = Infinity;
Object.entries(blockData).forEach(([block, data]) => {
const distance = Math.sqrt(
Math.pow(r - data.color[0], 2) + Math.pow(g - data.color[1], 2) + Math.pow(b - data.color[2], 2) + Math.pow(a - data.color[3], 3)
);
if (distance < closestDistance) {
closestDistance = distance;
closestBlock = block;
}
});
return closestBlock;
};
useEffect(() => { useEffect(() => {
if (!image) return; if (!image) return;
@ -98,7 +80,7 @@ function Blocks({ blocks, setBlocks, missingTexture, textures, solidTextures, im
const newBlocks: Block[] = []; const newBlocks: Block[] = [];
for (let i = 0; i < imageData.data.length; i += 4) { for (let i = 0; i < imageData.data.length; i += 4) {
const block = findClosestBlock(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2], imageData.data[i + 3]); const block = findBlockFromRgb(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2], imageData.data[i + 3]);
const x = Math.floor((i / 4) % imageData.width); const x = Math.floor((i / 4) % imageData.width);
const y = Math.floor(i / 4 / imageData.width); const y = Math.floor(i / 4 / imageData.width);

2
src/components/canvas/Canvas.tsx
View file

@ -206,7 +206,7 @@ function Canvas() {
default: default:
break; break;
} }
}, [tool, holdingAlt, scale, zoomToMousePosition, setScale]); }, [tool, holdingAlt, scale, mouseCoords, blocks, zoomToMousePosition, setScale, setSelectedBlock]);
const onKeyDown = (e: KeyboardEvent) => { const onKeyDown = (e: KeyboardEvent) => {
switch (e.key) { switch (e.key) {

14
src/utils/findBlockFromRgb.ts Normal file
View file

@ -0,0 +1,14 @@
import _blockData from "@/data/blocks/programmer-art/data.json";
const blockData: BlockData = _blockData;
export const findBlockFromRgb = (r: number, g: number, b: number, a: number): string => {
return Object.entries(blockData).reduce(
(closestBlock, [block, data]) => {
const distance = Math.sqrt(
Math.pow(r - data.color[0], 2) + Math.pow(g - data.color[1], 2) + Math.pow(b - data.color[2], 2) + Math.pow(a - data.color[3], 2)
);
return distance < closestBlock.distance ? { block, distance } : closestBlock;
},
{ block: "", distance: Infinity }
).block;
};