Bitmap Processor

damianjalf V 1.1.1

Drag & drop or click to upload

To convert .webm to .mp4, use this site

Video Controls

?
00:00 / 00:00

Image Library (up to 10)

Light & Levels
0
100%
1.00
0
255
Pixel Size
1 px
60
100%
100%
Pixel Style
Pixel Mode
?
Dithering
100%
Color Mode
Color Mode
Color Pixel 4 (new)
Choose for Automation Mode
Text Input
2 px
80 px
100%
0 px
0 px
0 px
0 px
0 px
Automation
0.05 s
Exportación de Medios
Guía de Uso / User Guide
Español

Esta es una herramienta de procesamiento de imágenes y video diseñada para crear efectos visuales de estilo "bitmap". Puede ser usada tanto en escritorio como en **dispositivos móviles**, permitiendo utilizar la cámara frontal y trasera del celular. Su función principal es transformar imágenes estáticas en composiciones artísticas que pueden ser exportadas en formatos como PNG o SVG para su uso en otros programas de diseño o edición. Adicionalmente, la aplicación permite procesar video en tiempo real desde tu webcam o archivos de video, ofreciendo un lienzo dinámico para la experimentación visual.

Recomendaciones

Para un rendimiento óptimo, se recomienda utilizar imágenes de baja resolución y poco peso (archivos pequeños). Si bien se pueden cargar imágenes más grandes, el proceso de renderizado será notablemente más lento. Para la cámara del celular y videos, priorizar resoluciones pequeñas y videos livianos. Si el procesamiento es lento, aumenta el valor de Pixel Size para mejorar la fluidez. Ajusta Brillo y Contraste para obtener una imagen de entrada más nítida.

Carga de Medios

Imágenes: Arrastra y suelta imágenes o haz click en la zona punteada para subirlas. Puedes tener hasta 10 imágenes en la librería. También puedes pegar la URL de una imagen y presionar "Load".

Webcam: Presiona "Start Webcam" para usar tu cámara en tiempo real. Si tienes varias cámaras, aparecerá un selector.

Video: Arrastra y suelta un archivo de video (MP4, MOV) para procesarlo. Aparecerán controles de reproducción.

Capturar Fotograma: Mientras usas la webcam o un video (debe estar pausado), puedes presionar "Capture Frame" para guardar el fotograma actual en tu librería de imágenes.

Visualización

Fill Screen / Keep Aspect Ratio: Alterna entre estirar la imagen para que ocupe toda la pantalla o mantener su proporción original.

Fit to View: Ajusta la imagen (manteniendo la relación de aspecto) para que siempre sea completamente visible dentro del área de visualización. Esto es útil para evitar que se corten los bordes.

Open Output Window: Abre una nueva ventana para mostrar el resultado, ideal para una segunda pantalla.

Librería de Imágenes

Haz click en una miniatura para seleccionarla y procesarla. Pasa el mouse sobre una miniatura y haz click en la 'X' para eliminarla. Puedes agregar y eliminar imágenes incluso durante la automatización ("Play").

Download All: En la sección de Descarga, el botón "Download All" te permite descargar todas las imágenes de tu librería en un único archivo ZIP.

Exportación de Medios

Descargar Imagen: En la sección 'Download' del menú lateral, puedes elegir el formato (PNG, PNG Transparente o SVG) y usar el botón 'Download Preview' para guardar el fotograma actual procesado.

Grabar Video: El botón 'Record' (círculo) inicia la grabación en tiempo real del canvas procesado. Captura todos los frames generados por el procesador de mapa de bits.

Detener/Exportar Video: Presiona el botón 'Stop' (cuadrado) para detener la grabación. Una vez detenida, el botón 'Export Recording' se activa para descargar el video como un archivo .webm. La resolución del video será la misma que la del canvas en el momento de la grabación.

Se recomienda usar el enlace proporcionado bajo el botón de exportación para convertir el archivo .webm a formatos más comunes como .mp4.

Entrada de Texto

Escribe en el área de "Text Input". El texto aparecerá sobre la imagen, video o webcam activa. Si no hay otra fuente, el texto se procesará sobre un fondo negro. Todos los efectos y parámetros (tamaño de píxel, color, dithering, etc.) se aplican al texto como si fuera una imagen.

Opciones de personalización:

  • Auto Black & White: Elige automáticamente texto blanco o negro para un contraste máximo con el fondo.
  • Alternate Text Color: Aplica un tercer color de alto contraste al texto.
  • Add Text Band: Agrega una banda de fondo detrás del texto para mejorar la legibilidad.
  • Constrain to Screen: Ajusta automáticamente el tamaño y márgenes del texto para que nunca se salga de la pantalla.
  • Add Text Stroke: Añade un contorno al texto, con un grosor que puedes controlar con el slider.

Usa los sliders y selectores para personalizar la fuente, tamaño, alineación, espaciado y márgenes.

Paneles de Control

Pixel Size:
- Pixel Size: Controla el tamaño del bloque básico del efecto.
- Threshold: Define el umbral de luminosidad para dibujar un píxel.
- Deformation: Estira o comprime los píxeles.

Dithering:
Técnica para simular más tonos. Elige entre varios algoritmos para diferentes texturas.

Light & Levels:
Ajusta Brillo, Contraste, Gamma y puntos de Negro y Blanco de la imagen original.

Pixel Style:
Cambia la forma de los píxeles: Squares (cuadrados), Circles (círculos), Lines (líneas), Crosshatch (tramado) o ASCII ART.

Color Mode:
- Black & White, Color (con selectores), Random Color y Mixed Random.
- Invert Colors: Invierte los colores de frente y fondo.
- Invert Random: Invierte los colores de forma aleatoria.

Color Pixel (4-Tone):
- Activate 4-Tone Mode: Cuantiza la imagen a cuatro tonos de color definidos por el usuario, basándose en la luminosidad.
- 4-Tone Palette: Cuatro selectores de color que definen el tono para los niveles de luminosidad: Más claro, Medio-Claro, Medio-Oscuro y Más Oscuro.
- Choose for Automation Mode: Define cómo se eligen los colores durante el modo "Play" o Randomize:
- Contrasted Colors: Genera paletas de 4 colores que son opuestos en el círculo cromático para asegurar un alto contraste (por ejemplo, tetrádico).
- Free Mode: Genera paletas totalmente aleatorias, sin restricciones de contraste.

Automation:
- Random Speed: Velocidad para el modo "Play".
- Reset Parameters: Vuelve todos los controles a su estado inicial.
- Soft/Medium/Hard Randomize: Genera parámetros aleatorios con distintos niveles de intensidad.
- Play: Inicia/detiene la aleatorización continua de parámetros e imágenes.

Bloqueo (Icono de Pin):
Haz click en el icono al lado de cada título. Cuando está "bloqueado", los parámetros de esa sección no cambiarán al usar Randomize o Play.

Historial de Versiones

Bitmap Processor Historial de Versiones

V 1.1.2

  • Ajustes generales en UI y UX: Ajustes y mejoras menores en la interfaz y experiencia de usuario (resumen de cambios relacionados con vista, grabación, controles y demás ajustes de UI).
  • Guía: Apartado de Exportación actualizado con instrucciones claras para exportar imágenes.

V 1.1.1

  • Usabilidad: Los sliders ahora permiten ajuste incremental usando las flechas izquierda (resta) y derecha (suma) del teclado después de hacer click en el control.
  • Controles: Implementada la lógica de incremento/decremento acumulativo para el 'Pixel Size' usando los botones +/-.
  • Exportación: Añadido un mensaje de ayuda para la conversión de formatos de video (.webm a .mp4).

V 1.1.0

  • Color de Píxel: Implementada la nueva funcionalidad para seleccionar hasta 4 colores de píxel distintos.
  • Historial de Acciones: Introducido Deshacer/Rehacer (límite de 10 acciones) usando los atajos: Ctrl/Cmd+Z y Ctrl/Cmd+Shift+Z.
  • Tipografía: Tipografías actualizadas utilizadas en el menú de texto.
  • Optimización: Ajustes generales realizados para optimizar el rendimiento de la aplicación.

V 1.0.3

  • Ajuste de UI: Reubicación de los botones (+) y (-) para el control del tamaño de píxel junto al slider correspondiente.
  • Donaciones: Añadido un pop-up informativo al iniciar la aplicación para invitar a donaciones.

V 1.0.2

  • Estabilidad: Ajustes internos menores realizados para mejorar la estabilidad.

V 1.0.1

  • Parche: Corrección menor tras el lanzamiento inicial.

V 1.0.0

  • Lanzamiento Inicial de la aplicación Bitmap Processor.
English

This is an image and video processing tool designed to create "bitmap" style visual effects. It can be used on desktop and **mobile devices**, allowing the use of both the front and rear phone cameras. Its primary function is to transform static images into artistic compositions that can be exported in formats like PNG or SVG for use in other design or editing software. Additionally, the application allows for real-time video processing from your webcam or video files, providing a dynamic canvas for visual experimentation.

Recommendations

For optimal performance, it is recommended to use low-resolution and low-weight images (small files). While larger images can be loaded, the rendering process will be noticeably slower. For mobile camera and videos, prioritize small resolutions and light video files. If processing is slow, increase the Pixel Size value to improve fluidity. Adjust Brightness and Contrast for a sharper input image.

Media Loading

Images: Drag and drop images or click the dashed area to upload. You can have up to 10 images in the library. You can also paste an image URL and press "Load".

Webcam: Press "Start Webcam" to use your camera in real-time. If you have multiple cameras, a selector will appear.

Video: Drag and drop a video file (MP4, MOV) to process it. Playback controls will appear.

Capture Frame: While using the webcam or a video (it must be paused), you can press "Capture Frame" to save the current frame to your image library.

Display

Fill Screen / Keep Aspect Ratio: Toggle between stretching the image to fill the entire screen or maintaining its original proportions.

Fit to View: Adjusts the image (maintaining aspect ratio) so it's always fully visible within the view area. This is useful to prevent edges from being cropped.

Open Output Window: Opens a new window to display the result, ideal for a second screen.

Image Library

Click on a thumbnail to select and process it. Hover over a thumbnail and click the 'X' to delete it. You can add and delete images even during automation ("Play").

Download All: In the Download section, the "Download All" button allows you to download all images from your library in a single ZIP file.

Media Export

Download Image: In the 'Download' section of the side menu, you can select the format (PNG, Transparent PNG, or SVG) and use the 'Download Preview' button to save the current processed frame.

Record Video: The 'Record' button (circle icon) starts real-time recording of the processed canvas. It captures all frames generated by the bitmap processor.

Stop/Export Video: Press the 'Stop' button (square icon) to halt the recording. Once stopped, the 'Export Recording' button activates to download the video as a .webm file. The video resolution will match the canvas resolution at the time of recording.

It is recommended to use the provided link below the export button to convert the .webm file to more common formats like .mp4.

Text Input

Type in the "Text Input" area. The text will appear as an overlay on the active image, video, or webcam. If no other source is active, the text will be processed on a black background. All effects and parameters (pixel size, color, dithering, etc.) are applied to the text as if it were an image.

Customization options:

  • Auto Black & White: Automatically chooses black or white text for maximum contrast against the background.
  • Alternate Text Color: Applies a third, high-contrast color to the text.
  • Add Text Band: Adds a background band behind the text to improve readability.
  • Constrain to Screen: Automatically adjusts text size and margins to prevent it from going off-screen.
  • Add Text Stroke: Adds an outline to the text, with its width controlled by the slider.

Usa los sliders y selectores para personalizar la fuente, tamaño, alineación, espaciado y márgenes.

Control Panels

Pixel Size:
- Pixel Size: Controls the size of the basic effect block.
- Threshold: Defines the brightness threshold for drawing a pixel.
- Deformation: Stretches or compresses the pixels.

Dithering:
A technique to simulate more tones. Choose from various algorithms for different textures.

Light & Levels:
Adjust the Brightness, Contraste, Gamma, and Black and White points of the original image.

Pixel Style:
Change the shape of the pixels: Squares, Circles, Lines, Crosshatch, or ASCII ART.

Color Mode:
- Black & White, Color (with pickers), Random Color, and Mixed Random.
- Invert Colors: Inverts the foreground and background colors.
- Invert Random: Inverts colors randomly.

Color Pixel (4-Tone):
- Activate 4-Tone Mode: Quantizes the image to four user-defined color tones, based on luminosity.
- 4-Tone Palette: Four color pickers that define the tone for the lightness levels: Lightest, Mid-Light, Mid-Dark, and Darkest.
- Choose for Automation Mode: Defines how colors are chosen during "Play" or Randomize mode:
- Contrasted Colors: Generates 4-color palettes that are diametrically opposed in the color wheel to ensure high contrast (e.g., tetradic).
- Free Mode: Generates fully random palettes without contrast restrictions.

Automation:
- Random Speed: Speed for "Play" mode.
- Reset Parameters: Returns all controls to their initial state.
- Soft/Medium/Hard Randomize: Generates random parameters with different levels of intensity.
- Play: Starts/stops the continuous randomization of parameters and images.

Lock (Pin Icon):
Click the icon next to each section title. When "locked", the parameters in that section will not change when using Randomize or Play.

Version History

Bitmap Processor Version History

V 1.1.2

  • Display: General UI/UX tweaks consolidated (summary of view, recording, controls and related UI adjustments).
  • Recording: Record circle icon is now green.
  • Controls: Sliders accept Arrow Up/Down after clicking to adjust incrementally.
  • UI: Donation pop‑up disabled but retained for future re‑enable.
  • Guide: Export section updated with clear image export instructions.

V 1.1.1

  • Usability: Sliders now accept incremental adjustments using the left (decrease) and right (increase) arrow keys after focusing/clicking the slider.
  • Controls: Implemented cumulative increment/decrement logic for 'Pixel Size' using the +/- buttons.
  • Export: Added a help hint for converting video formats (.webm to .mp4).

V 1.1.0

  • Pixel Color: Implemented the new functionality to select up to 4 distinct pixel colors.
  • Action History: Introduced Undo/Redo (10-action limit) using the shortcuts: Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z.
  • Typography: Updated the fonts used in the text menu.
  • Optimization: General adjustments made to optimize application performance.

V 1.0.3

  • UI Adjustment: Relocation of the (+) and (-) buttons for pixel size control next to the corresponding slider.
  • Donations: Added an informative popup at application startup to invite donations.

V 1.0.2

  • Stability: Minor internal adjustments made to improve stability.

V 1.0.1

  • Patch: Minor fix following the initial launch.

V 1.0.0

  • Initial Release of the Bitmap Processor application.
Invitame un cafecito Mercado Pago
▦

Apoyá Bitmap Processor

Si disfrutás usar la app y querés que siga siendo gratuita, considerá hacer una donación.
Tu ayuda permite seguir creando nuevas herramientas para proyectos creativos y artísticos.
¡Cada aporte cuenta! 🙏