Documentation Index
Fetch the complete documentation index at: https://mintlify.com/soymatudev/Pokedex-Fleek/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The ColorService module provides utilities for calculating color distances using the Euclidean distance formula and finding the closest matching Pokémon based on RGB color values. This service is essential for the camera-based Pokémon detection feature, where captured colors are matched against a palette of known Pokémon colors.
Methods
getDistance
Calculates the Euclidean distance between two RGB colors in 3D color space.
The Euclidean distance between the two colors. A lower value indicates more similar colors, with 0 being identical.
d = √((r2-r1)² + (g2-g1)² + (b2-b1)²)
Implementation
getDistance: (c1, c2) => {
return Math.sqrt(
Math.pow(c1.r - c2.r, 2) +
Math.pow(c1.g - c2.g, 2) +
Math.pow(c1.b - c2.b, 2)
);
}
Example Usage
import { ColorService } from './services/ColorService';
const color1 = { r: 255, g: 0, b: 0 }; // Red
const color2 = { r: 255, g: 100, b: 50 }; // Orange-ish
const distance = ColorService.getDistance(color1, color2);
console.log(distance); // 111.80
findClosestPokemon
Finds the Pokémon with the closest matching color from a palette by comparing RGB values.
The target color to match against Array of Pokémon objects with color datapokemonColorPalette[].rgb
RGB color object with r, g, b properties
pokemonColorPalette[].name
Pokémon name (optional, but typically included)
Pokémon ID (optional, but typically included)
The Pokémon object from the palette with the closest matching color. Returns null if the palette is empty.
Algorithm
The method iterates through all Pokémon in the palette, calculates the color distance for each, and returns the one with the minimum distance.
Implementation
findClosestPokemon: (targetColor, pokemonColorPalette) => {
let closest = null;
let minDistance = Infinity;
pokemonColorPalette.forEach((pokemon) => {
const distance = ColorService.getDistance(targetColor, pokemon.rgb);
if (distance < minDistance) {
minDistance = distance;
closest = pokemon;
}
});
return closest;
}
Example Usage
import { ColorService } from './services/ColorService';
const capturedColor = { r: 255, g: 220, b: 0 }; // Yellow from camera
const pokemonPalette = [
{ id: 25, name: 'Pikachu', rgb: { r: 252, g: 224, b: 56 } },
{ id: 133, name: 'Eevee', rgb: { r: 205, g: 170, b: 120 } },
{ id: 7, name: 'Squirtle', rgb: { r: 85, g: 160, b: 200 } }
];
const match = ColorService.findClosestPokemon(capturedColor, pokemonPalette);
console.log(match);
// Output: { id: 25, name: 'Pikachu', rgb: { r: 252, g: 224, b: 56 } }
Complete Module
export const ColorService = {
// d = sqrt((r2-r1)^2 + (g2-g1)^2 + (b2-b1)^2)
getDistance: (c1, c2) => {
return Math.sqrt(
Math.pow(c1.r - c2.r, 2) +
Math.pow(c1.g - c2.g, 2) +
Math.pow(c1.b - c2.b, 2)
);
},
findClosestPokemon: (targetColor, pokemonColorPalette) => {
let closest = null;
let minDistance = Infinity;
pokemonColorPalette.forEach((pokemon) => {
const distance = ColorService.getDistance(targetColor, pokemon.rgb);
if (distance < minDistance) {
minDistance = distance;
closest = pokemon;
}
});
return closest;
}
};
Use Cases
- Camera-based Pokémon Detection: Match colors captured from the device camera to identify Pokémon
- Color Similarity Analysis: Determine how visually similar two Pokémon are based on their primary colors
- Palette Generation: Build color-based categorization systems for Pokémon collections