DEV Community: Peacoke

Como funciona o algoritmo do Teste de Ideologia Política 12 Axes (TanStack Start, Vite e 12 Dimensões)

Peacoke — Mon, 19 Oct 2026 12:48:13 +0000

Nos últimos meses, testes de bússola política voltaram a viralizar com força no TikTok e no X (Twitter). No entanto, o clássico modelo 2D (Esquerda vs. Direita no eixo econômico e Autoritário vs. Libertário no social) mostrou-se insuficiente para capturar as complexidades do debate moderno — especialmente em democracias multifacetadas como as da América Latina e do Brasil.

Para resolver essa limitação matemática e conceitual, criamos a versão moderna do teste de ideologia política 12 eixos, uma plataforma web estática, aberta e com zero armazenamento em banco de dados, construída sobre TanStack Start, React 19, Vite e Cloudflare Workers.

Neste artigo, explicamos como funciona o modelo matemático de 12 vetores, as garantias de privacidade zero-backend e por que essa arquitetura garante velocidade e transparência absolutas.

1. Por que 2 eixos (ou 4 quadrantes) falham matematicamente?

O clássico Political Compass comprime dezenas de variáveis políticas em apenas dois números $(X, Y)$. Essa compressão resulta em perdas graves de informação:

Confusão entre Diplomacia e Comércio: Um intervencionista militar pode ser favorável ao livre comércio, enquanto um pacifista pode defender tarifas protecionistas estritas. No modelo 2D, ambos são jogados no mesmo ponto arbitrário.
Confusão entre Segurança do Estado e Liberdade Civil: Medidas de vigilância governamental não se alinham perfeitamente com valores morais tradicionais ou progressistas.
Reducionismo Tecnológico: Como posicionar aceleração tecnológica, automação por inteligência artificial e bioética em um simples eixo esquerda-direita?

O modelo 12axes.site/pt/ expande essa análise para 12 dimensões ortogonais, agrupadas em quatro esferas fundamentais:

Governamental: Federal vs. Unitário | Democrático vs. Autocrático | Segurança vs. Liberdade
Diplomático: Nacionalismo vs. Internacionalismo | Militarista vs. Pacifista | Assimilacionista vs. Multiculturalista
Econômico: Coletivização vs. Privatização | Economia Planejada vs. Laissez-faire | Globalismo vs. Protecionismo
Societal: Tradicionalista vs. Progressista | Teocrático vs. Secular | Aceleracionista vs. Bioconservador

2. O Algoritmo de Cálculo Vetorial e Correspondência de Ideologias

Cada afirmação do teste (oferecemos opções de 36, 60 ou 288 perguntas) possui um vetor de peso pré-definido $W_{i, a} \in [-1, 1]$ para cada eixo $a \in {1..12}$.

Cálculo da Pontuação por Eixo

A resposta do usuário varia em uma escala Likert de 5 pontos (Discordo Totalmente, Discordo, Neutro, Concordo, Concordo Totalmente), mapeada para multiplicadores $M_i \in {-1.0, -0.5, 0.0, 0.5, 1.0}$.

Para cada eixo $a$, a pontuação final $S_a \in [0, 100]$ é calculada como uma proporção normalizada:

$$S_a = 50 \times \left(1 + \frac{\sum_{i} M_i \cdot W_{i,a}}{\sum_{i} |W_{i,a}|}\right)$$

Um valor $S_a = 50\%$ representa perfeita neutralidade no eixo; $S_a < 50\%$ inclina-se para o primeiro polo e $S_a > 50\%$ para o segundo polo.

Correspondência com as 38 Ideologias

Para identificar a ideologia política mais próxima do usuário, calculamos a Distância Euclidiana Ponderada no espaço vetorial de 12 dimensões em relação ao catálogo de 38 ideologias de referência:

$$D(u, k) = \sqrt{\sum_{a=1}^{12} (S_{u, a} - I_{k, a})^2}$$

A ideologia correspondente é aquela que minimiza a distância $D(u, k)$, acompanhada de uma taxa percentual de proximidade semântica.

3. Privacidade Absoluta: Arquitetura Zero-Backend

Um teste de convicção política lida com dados extremamente sensíveis. Ao contrário de plataformas tradicionais que exigem cadastro de e-mail e salvam preferências em bancos de dados na nuvem, o 12axes.site foi desenhado sob o princípio de privacidade por design:

Sem Contas e Sem Banco de Dados: Suas respostas nunca saem do navegador. O cálculo é feito 100% no cliente em TypeScript puro.
Resultados Codificados na URL: O resultado completo dos 12 eixos é compactado em uma string alfanumérica de base 36 e anexado ao parâmetro hash ?r=.... Quando você compartilha seu resultado com amigos ou baixa seu card 9:16 para o Instagram/WhatsApp, o link carrega todo o estado de forma puramente matemática.
Geração Local de Cards de Compartilhamento: O card gráfico para redes sociais é renderizado via canvas HTML5 localmente no dispositivo do usuário, garantindo exportação instantânea e confidencial.

4. Conclusão

Entender seu posicionamento político não deve se limitar a um rótulo binário ou a uma pergunta simplista de "esquerda ou direita". O espectro multidimensional de 12 eixos oferece um espelho muito mais nítido para autocrítica e diálogo cívico.

Você pode fazer o teste político de 12 eixos grátis e explorar a definição detalhada de cada eixo em português com total privacidade.

O código-fonte de cálculo das fórmulas matemáticas e as definições dos 12 eixos estão abertos para estudo da comunidade.

How We Built a 100% In-Browser Image to Bead Pattern Generator (CIE Lab Color Matching & Zero-Cost Architecture)

Peacoke — Sun, 18 Oct 2026 00:57:02 +0000

When converting user-uploaded photographs into physical fuse bead patterns (such as Perler, Hama, or Artkal beads) or retro 8-bit game sprites, most web services take the expensive path: upload the JPEG to a server, process it with OpenCV or ImageMagick in Python, and return a grid of hex codes.

For BeadPattern, we wanted a completely different architecture: 100% client-side processing directly in the user's browser. No image leaves the user's device, zero server compute or egress costs for image transformations, and instant feedback when users tweak bead counts or contrast sliders.

Here is an architectural walkthrough of how we solved the three core engineering bottlenecks: perceptual color quantization, real-time canvas dithering, and responsive mobile interaction.

1. The Trap of Euclidean RGB Distance (Why Skin Tones Look Gray)

The simplest way to match a pixel $(R_1, G_1, B_1)$ to a known manufacturer's bead palette is calculating Euclidean distance in standard sRGB space:

$$\text{distance} = \sqrt{(R_1 - R_2)^2 + (G_1 - G_2)^2 + (B_1 - B_2)^2}$$

If you implement this, you quickly notice a serious visual problem: subtle peach, skin tones, and pastels turn into dull gray or olive green.

The human visual cortex does not perceive light linearly. A 10-unit delta in pure green is far more noticeable to the human eye than a 10-unit delta in dark blue. To get accurate plastic bead matches, we convert every pixel and every catalog bead color into CIE L*a*b* color space:

$L^*$: Perceptual Lightness (0 = black, 100 = white)
$a^*$: Position between green (negative) and red/magenta (positive)
$b^*$: Position between blue (negative) and yellow (positive)

The Conversion Pipeline

// Step 1: sRGB to linear RGB with inverse gamma companding
function srgbToLinear(c: number): number {
  c /= 255;
  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}

// Step 2: Linear RGB to CIE XYZ (D65 standard illuminant)
function rgbToXyz(r: number, g: number, b: number): [number, number, number] {
  const rLin = srgbToLinear(r);
  const gLin = srgbToLinear(g);
  const bLin = srgbToLinear(b);

  const x = rLin * 0.4124564 + gLin * 0.3575761 + bLin * 0.1804375;
  const y = rLin * 0.2126729 + gLin * 0.7151522 + bLin * 0.0721750;
  const z = rLin * 0.0193339 + gLin * 0.1191920 + bLin * 0.9503041;
  return [x * 100, y * 100, z * 100];
}

// Step 3: XYZ to CIE L*a*b*
function xyzToLab(x: number, y: number, z: number): [number, number, number] {
  // Normalized to D65 reference white
  const xn = x / 95.047;
  const yn = y / 100.0;
  const zn = z / 108.883;

  const f = (t: number) => t > 0.008856 ? Math.cbrt(t) : (7.787 * t) + (16 / 116);

  const fx = f(xn);
  const fy = f(yn);
  const fz = f(zn);

  const L = (116 * fy) - 16;
  const a = 500 * (fx - fy);
  const b = 200 * (fy - fz);
  return [L, a, b];
}

Once colors are in $L^a^*b^$, we measure delta using the standard CIE76 Euclidean distance:

$$\Delta E = \sqrt{(L_1 - L_2)^2 + (a_1 - a_2)^2 + (b_1 - b_2)^2}$$

This single math adjustment immediately eliminated the "muddy portrait" bug when matching plastic beads against official catalogs. You can inspect the real-time cross-brand color mappings on our BeadPattern Interactive Color Directory.

2. High-Performance Palette Quantization with Precomputed Lookups

A typical high-resolution photograph downsampled to a $58 \times 58$ pegboard grid contains 3,364 cells. While that is small, comparing each pixel against 200+ commercial bead codes (Perler + Hama + Artkal + Mard) on every slider change requires roughly $3,364 \times 200 = 672,800$ distance calculations.

To keep slider dragging at 60 FPS without dropping frames:

Precompute $L^a^*b^$ vectors for the palette: When the app boots, we parse all official color codes into typed Float32Array buffers so coordinate lookups don't trigger JavaScript garbage collection.
K-d Tree Nearest Neighbor Lookup: Instead of scanning linearly through the palette for each pixel, we index the active palette into a balanced 3D K-d tree in $L^a^*b^$ space. This drops search complexity from $O(N)$ to $O(\log N)$ per bead cell.

3. Spatial Error Diffusion (Floyd-Steinberg Dithering)

Downsampling natural photographs to a fixed 48-color plastic palette causes harsh visual color banding, particularly across smooth gradients like skies and sunsets.

To preserve perceived detail without adding artificial noise, we implemented 2D error diffusion (Floyd-Steinberg algorithm):

// Error weights distributed to neighboring unfinished pixels:
//           [ current ]   7/16 (x+1, y)
// 3/16(x-1, y+1)  5/16(x, y+1)  1/16(x+1, y+1)

function applyErrorDiffusion(
  width: number,
  height: number,
  pixels: Float32Array, // RGB buffer in 0..255 range
  palette: ColorEntry[]
) {
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const idx = (y * width + x) * 3;
      const oldR = pixels[idx];
      const oldG = pixels[idx + 1];
      const oldB = pixels[idx + 2];

      const closest = findClosestPaletteColor(oldR, oldG, oldB, palette);
      pixels[idx] = closest.r;
      pixels[idx + 1] = closest.g;
      pixels[idx + 2] = closest.b;

      const errR = oldR - closest.r;
      const errG = oldG - closest.g;
      const errB = oldB - closest.b;

      // Distribute error
      distributeError(pixels, width, height, x + 1, y, errR * (7 / 16), errG * (7 / 16), errB * (7 / 16));
      distributeError(pixels, width, height, x - 1, y + 1, errR * (3 / 16), errG * (3 / 16), errB * (3 / 16));
      distributeError(pixels, width, height, x, y + 1, errR * (5 / 16), errG * (5 / 16), errB * (5 / 16));
      distributeError(pixels, width, height, x + 1, y + 1, errR * (1 / 16), errG * (1 / 16), errB * (1 / 16));
    }
  }
}

The difference is night and day: smooth skin tones and skies transition gracefully into stippled dots that naturally mimic physical bead art. For detailed step-by-step visual comparisons between clustered quantization vs dithered sprites, see our engineering guide on Photo to Pixel Art Conversion.

4. Zero-Server Cost Architecture

Because all computational heavy lifting happens in client memory:

Static Delivery: The application shell is served as lightweight static assets on Cloudflare Workers edge nodes.
Privacy by Design: Crafters frequently upload family portraits, custom anime art, and personal logos. Zero bytes of image data touch any server disk or cloud database.
Instant Export: Vectorized 1:1 printable PDF pegboard charts and bead inventory tables are assembled on the client using jsPDF and offscreen canvas renderers.

You can try the live tool directly in your browser at BeadPattern—no signup or installation required.

Screens from BeadPattern

The editor keeps the bead grid and palette controls together.

Brand color charts show codes alongside the available shades.

The library provides ready-made patterns to open in the editor.

Cómo funciona el test de ideología política 12 Axes: matemáticas, privacidad y 12 ejes

Peacoke — Sat, 17 Oct 2026 17:23:12 +0000

En los últimos días, el test de ideología política 12 Axes se ha vuelto viral en redes sociales y medios de América Latina como una alternativa mucho más precisa a la tradicional brújula política bidimensional (Political Compass).

A diferencia de los cuestionarios que reducen toda la visión política a dos ejes (económico y social), este modelo evalúa 12 dimensiones independientes. Desarrollamos una versión moderna, gratuita y de código abierto en español: test de ideología política 12 axes.

Aquí te explicamos la arquitectura técnica detrás del cálculo, cómo protegemos la privacidad y por qué funciona en el navegador.

1. Doce dimensiones en lugar de dos

El test mide 12 escalas independientes del 0 al 100:

Constructo (Económico): Comunismo vs. Capitalismo
Autoridad (Poder): Anarquismo vs. Autoritarismo
Frontera (Diplomacia): Globalismo vs. Nacionalismo
Gobierno (Estado): Democracia directa vs. Autocracia
Cultura: Progresismo vs. Tradicionalismo
Sociedad: Igualitarismo vs. Jerarquía
Justicia: Rehabilitación vs. Punitivismo
Ecología: Ecologismo vs. Productivismo
Tecnología: Transhumanismo vs. Bioconservadurismo
Militarismo: Pacifismo vs. Militarismo
Religión: Secularismo vs. Teocracia
Seguridad: Libertad civil vs. Seguridad del Estado

Cada afirmación afecta únicamente a un eje específico con una ponderación fija (de fuertemente en desacuerdo a fuertemente de acuerdo).

2. Tres modalidades: 36, 60 y 288 preguntas

El cuestionario original de 288 afirmaciones es exhaustivo, pero requiere más de 25 minutos. Para adaptarlo al uso en dispositivos móviles sin perder rigor estadístico:

Modo Express (36 preguntas): 3 afirmaciones por eje, diseñado para resolverse en unos 4 minutos.
Modo Estándar (60 preguntas): 5 afirmaciones por eje, el equilibrio recomendado entre precisión y tiempo.
Modo Completo (288 preguntas): La prueba completa para investigación profunda.

3. Privacidad 100% en el cliente (Zero-Knowledge)

La mayoría de los cuestionarios de personalidad almacenan tus respuestas en bases de datos o rastrean tu perfil.

En 12axes.site, todo el cálculo se ejecuta en JavaScript dentro del navegador del usuario:

Sin cuentas ni correos: No pedimos registro.
Sin base de datos: Las respuestas nunca se envían a ningún servidor.
Resultados en la URL: La puntuación final se codifica en un parámetro compacto Base36 (?r=...) que el usuario puede compartir si lo desea, garantizando total soberanía de datos.

4. Coincidencia con 38 ideologías y figuras históricas

Al completar el cuestionario, el algoritmo calcula la distancia euclidiana multidimensional normalizada entre tu vector de 12 ejes y una matriz de 38 ideologías políticas documentadas:

$$D = \sqrt{\sum_{i=1}^{n} (P_{\text{usuario}, i} - P_{\text{ideología}, i})^2}$$

Además, compara tu perfil con más de 70 figuras políticas históricas para mostrar qué pensadores tenían posturas similares a las tuyas.

Pruébalo gratis y en español

Si quieres conocer tu ubicación exacta en los doce ejes y descargar tu tarjeta de resultados:

👉 Hacer el test político 12 ejes en español

El código está optimizado con Vite, TanStack Router y Cloudflare Workers para cargar de forma instantánea en cualquier móvil.