Generador de arte con puntos circulares

Una foto 3:2 con 48 puntos de ancho da 1536 círculos: cada uno toma el color medio de su celda, y el semitono lo agranda cuanto más oscura es la celda

Convertir una foto en puntos circulares consiste en dividirla en celdas a intervalos regulares y dibujar en cada una un círculo con el color medio de los píxeles que contiene. Tú eliges cuántos puntos hay de ancho y la herramienta calcula las filas según las proporciones de la imagen. Si divides la imagen de ejemplo de 960 × 640 px en 48 puntos de ancho, salen 32 filas y 1536 círculos en total.

Si todos los círculos tienen el mismo tamaño, la imagen se dibuja solo con el color, como en un patrón de cuentas o un panel LED. Con «Según el tono (semitono)», los círculos crecen en las celdas más oscuras y se parece a los puntos de un periódico impreso. Las seis muestras de estilo junto a la imagen son vistas previas hechas con la imagen que has cargado, y «Puntos por color», más abajo, indica cuántos círculos se dibujaron de cada color. La imagen se procesa solo en este navegador y nunca se envía a un servidor.

Cuándo convertir una foto en puntos circulares

• Quieres un cartel de pop art o una ilustración para merchandising: el semitono es el método de impresión que muestra el tono con puntos de distinto tamaño. Los puntos Ben-Day, ideados por el impresor Benjamin Day en 1879, se hicieron famosos con el pop art de Roy Lichtenstein. El estilo «Pop art» reduce la imagen a seis colores y varía el tamaño de los círculos según el tono para lograr ese efecto.
• Estás preparando un patrón de cuentas o pegatinas: un círculo es una cuenta. Las cuentas Hama Midi miden 5,0 mm de diámetro, así que 48 cuentas de ancho ocupan unos 24 cm, y con las Mini (2,5 mm) unos 12 cm. Si reduces la imagen al número de colores de cuentas que tienes, «Puntos por color» es justo la cantidad que necesitas de cada color.
• Quieres una miniatura con aspecto de panel LED o de neón: círculos bien separados sobre fondo negro parecen una pantalla de bombillas encendidas. Cuanto más sencilla es la imagen, mejor se lee.
• Vas a imprimirla en gran formato o enviarla a una máquina de corte: guardada como SVG, cada círculo sigue siendo una forma, así que los bordes no se pixelan al ampliar, y los círculos del mismo color van agrupados, lo que facilita cambiar el color de golpe en un programa de diseño.

Cómo se usa

1. Añade una imagen: pulsa «Elegir imagen» o arrastra una imagen al área de trabajo. Si la has copiado, puedes pegarla con Ctrl+V (⌘V).
2. Elige un estilo: pulsa una de las seis muestras redondas y cambian a la vez la disposición, el tamaño, el espacio, el color y el fondo; los puntos se vuelven a dibujar desde el centro hacia fuera.
3. Fija los puntos de ancho: escribe un número o usa la barra o los valores rápidos, entre 16 y 200. Con menos puntos, los círculos son más grandes y la imagen más simple.
4. Ajusta los detalles: más abajo puedes cambiar por separado la disposición (cuadrícula o alternada), el tamaño del punto (todos iguales o según el tono), el espacio, el fondo y el color. Si eliges un valor distinto del estilo, se deselecciona la muestra.
5. Comprueba y guarda: con «Ver original» alternas entre la original y el resultado, y al pulsar un color en «Puntos por color» solo se resaltan sus círculos. Después elige PNG, JPG o SVG y el tamaño del lado largo, y pulsa «Guardar».

Los seis estilos

Después de elegir un estilo puedes seguir cambiando los valores uno a uno. Los puntos de ancho no cambian al pasar de un estilo a otro.

Cómo elegir los puntos de ancho: foto 3:2

En fotos donde importa el contorno, como rostros o animales, de 48 a 72 puntos de ancho funciona bien, y en los carteles de semitono los tonos se funden con suavidad a partir de unos 96. El tamaño en cuentas es solo la suma de los diámetros, así que puede resultar algo mayor según la separación de tu placa de cuentas.

Cómo se calcula

1. División en celdas: si el ancho de la celda es 1 y los puntos de ancho son c, la cuadrícula tiene round(c × alto ÷ ancho) filas. En la disposición alternada la separación entre filas es √3/2 (unos 0,866), por lo que hay round((c × alto ÷ ancho − 1) ÷ 0,866) + 1 filas, y las filas pares se desplazan media celda y tienen c − 1 círculos.
2. Color del punto: se promedian los píxeles originales situados a ±0,5 celda en horizontal y ±0,5 celda en vertical del centro del círculo (±0,433 celda en la alternada), ponderados por su opacidad. Si la opacidad media es inferior a la mitad, no se dibuja el círculo.
3. Elección de colores: «Reducir colores» agrupa los colores con median cut (Heckbert, 1982), que divide una y otra vez por la mediana del canal más extendido; después afina el resultado cuatro veces en el espacio de color OKLab (Ottosson, 2020) y pinta cada círculo con el color más cercano. Game Boy y PICO-8 también buscan el color más cercano en OKLab. «Escala de grises» mantiene la luminancia relativa como un gris.
4. Tamaño del punto: con «Todos iguales», el radio es (1 − espacio) ÷ 2 celdas. Con «Según el tono», ese radio se multiplica por √k, de modo que el área del círculo es proporcional a k.

k = (Y_fondo − Y_celda) ÷ (Y_fondo − Y_referencia)  (limitado a 0–1)  ·  Y = 0,2126 R + 0,7152 G + 0,0722 B (sRGB lineal)

Y es la luminancia relativa de WCAG 2.2. Y_referencia es el color de la tinta en «Un solo color»; en los demás casos vale 0 si el fondo es claro (Y ≥ 0,5) y 1 si es oscuro. Un fondo transparente se trata como papel blanco. Por eso, sobre fondo blanco crecen los círculos de las zonas oscuras y sobre fondo negro los de las zonas claras. La tabla siguiente muestra el tamaño del círculo para celdas grises en el estilo Semitono (disposición alternada, fondo blanco, tinta #1A1A1A, espacio 0 %). En la disposición alternada cada círculo ocupa un ancho de celda² × 0,866, así que un círculo que toca a sus vecinos cubre el 90,7 % de su parte.

Al guardar, el lado largo que eliges determina cuántos píxeles tiene cada celda. Una foto 3:2 con 48 puntos de ancho guardada a 2048 px tiene celdas de unos 42,7 px y mide 2048 × 1365 px. El SVG escribe cada punto como un círculo en una celda de 10 unidades y agrupa los círculos del mismo color.

Cuadrícula frente a alternada (panal)

De todas las formas de colocar círculos iguales en un plano, la más compacta es la disposición hexagonal, con las filas desplazadas como en un panal, y L. Fejes Tóth demostró que no existe ninguna más densa. Los círculos en contacto cubren el 78,5 % de la superficie en una cuadrícula cuadrada (π/4) y el 90,7 % en la disposición hexagonal (π/(2√3)).

Los huecos entre círculos dejan ver el color de fondo, de modo que la misma foto se ve clara y ligera sobre blanco, y oscura y nítida sobre negro. Si aumentas el espacio, la diferencia es aún mayor.

Errores frecuentes

• Cambié el fondo en el semitono y la imagen se invirtió: el modo según el tono fija el tamaño por la diferencia de brillo con el fondo. Al pasar de blanco a negro, los círculos crecen en las zonas claras. Para el aspecto de tinta oscura sobre papel, usa un fondo claro.
• Conté las cuentas con los colores originales: con los colores originales cada círculo es algo distinto, y por encima de 64 colores «Puntos por color» es solo un recuento aproximado en 12 grupos de colores parecidos. Fija primero el número de colores con «Reducir colores» y consulta después las cantidades que vas a comprar.
• Guardé un fondo transparente como JPG: el JPG no admite transparencia y queda con fondo blanco. Si la necesitas, guarda en PNG o SVG.
• Subí mucho los puntos y guardé como SVG: una foto 3:2 con 144 puntos de ancho tiene 13.824 círculos. Cuantos más círculos, mayor es el archivo y más lento se abre en un programa; si la imagen no es para imprimir en grande, el PNG es más fácil de manejar.
• Me dio un error con una imagen muy alta: caben hasta 60.000 círculos por imagen. Una imagen vertical 1:2 con 200 puntos de ancho necesitaría 400 filas y 80.000 círculos, así que se pasa del límite; reduce los puntos de ancho.

Límites y precauciones

• No imita la trama de una imprenta: ni los ángulos de trama, ni la separación en las cuatro planchas CMYK, ni la ganancia de punto por el avance de la tinta. Cada imagen usa círculos con un único ángulo.
• Incluso en el modo según el tono, los círculos no llegan a cubrir la celda (como máximo el 78,5 % en cuadrícula y el 90,7 % en alternada), de modo que las zonas más oscuras se ven más claras que en el original. Con un espacio de 0 % se obtiene el resultado más intenso.
• Los colores de la pantalla no coinciden con los de las cuentas o la tinta reales. Si lo usas como patrón, compáralo con la carta de colores de tus cuentas y prepara unas cuantas de más.
• Game Boy y PICO-8 solo toman prestados los colores de esos aparatos; no respetan el tamaño de pantalla ni el límite de colores del equipo original.
• Solo se aceptan los formatos que abre tu navegador. Un GIF animado usa únicamente el primer fotograma, y el HEIC no se abre en algunos navegadores, así que conviértelo antes a JPG o PNG. Se aceptan archivos de hasta 40 MB, y la imagen se reduce a 2048 px de lado largo antes de calcular.
• El tamaño máximo de guardado, 4096 px, se fijó para no pasar del límite de lienzo de los navegadores de iOS (4096 × 4096) y que se pueda guardar en cualquier dispositivo.

Datos a 2026-10-20. Las definiciones de semitono y de puntos Ben-Day, la densidad del empaquetado de círculos, el diámetro de las cuentas y la fórmula de la luminancia relativa se comprobaron ese día en las fuentes de abajo. Los valores de los estilos y el límite de 60.000 círculos los fija esta herramienta. La imagen de ejemplo es «Blue, red and green parrot (Unsplash)» de Mikhail Vasilyev en Wikimedia Commons (CC0 1.0), reducida a 960 × 640 px.

Fuentes

• 01Getty AAT — halftone negativesNegativos tomados a través de una trama para que la imagen aparezca como puntos o cuadrados de distinto tamaño, usados en la impresión de semitonos
• 02Getty AAT — Ben Day processTécnica que imprime tramas de puntos con láminas de celuloide, ideada en 1879 por el impresor de Nueva Jersey Benjamin Day y a menudo asociada con la obra del artista pop Roy Lichtenstein
• 03Wolfram MathWorld — Circle PackingEl empaquetado más denso de círculos en el plano es la red hexagonal, como un panal (demostrado por L. Fejes Tóth), con densidad 0,9069 en la hexagonal y 0,7854 en la cuadrada
• 04Hama — Meet our different beadsLas cuentas Midi miden 5,0 mm de diámetro y las Mini, 2,5 mm
• 05W3C — WCAG 2.2: relative luminanceLuminancia relativa sRGB L = 0,2126 R + 0,7152 G + 0,0722 B, con umbral de linealización de 0,04045
• 06MDN — <circle>Forma básica de SVG que dibuja un círculo con un centro (cx, cy) y un radio (r)
• 07Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. Reducción de colores por median cut
• 08Björn Ottosson — A perceptual color space for image processing23-12-2020. El espacio de color OKLab (para buscar el color más cercano)
• 09Lospec — PICO-8 PaletteLos 16 colores de PICO-8 en valores HEX. Los cuatro colores de Game Boy proceden de la Nintendo Gameboy (BGB) Palette del mismo sitio
• 10MDN — <canvas>: Maximum canvas sizeLímite de lienzo de 4096 × 4096 en dispositivos iOS

Preguntas frecuentes

Herramientas que se usan junto con esta