Retrofy

Premium Pixel, ASCII & Vector Art Engine

Transform any image or webcam feed into perfect, scalable retro graphics entirely in your browser.

---

✨ Overview

Retrofy is a zero-dependency, client-side rendering engine that mathematically converts standard images into highly customizable pixel art, vintage computer graphics, and ASCII text art.

Built with pure Vanilla HTML, CSS, and JavaScript, it utilizes the HTML5 Canvas API for raw pixel manipulation and generates infinitely scalable SVG code on the fly. Because it runs 100% locally in your browser, your images are never uploaded to a server, ensuring complete privacy.

🚀 Key Features

🎨 Advanced Color Engine

• Vintage Quantization: Restrict your image to iconic hardware palettes including Nintendo Gameboy, PICO-8, DOS CGA, and Commodore 64.
• Custom HEX Mapping: Input your own custom HEX codes (e.g., brand colors), and the engine will mathematically pull the image's pixels into your exact color space.
• True Grayscale: Luminance-based desaturation with adjustable quantization bands.

🧮 Professional Dithering Algorithms

Smooth out low-color images using true retro error-diffusion algorithms:

• Floyd-Steinberg: The industry standard for organic, smooth error diffusion.
• Atkinson (Mac Classic): The high-contrast, stylized dithering algorithm developed by Bill Atkinson for the original 1984 Apple Macintosh.
• Bayer 8x8: A rigid, ordered grid matrix that creates authentic 90s arcade textures.

📐 Geometry & Text Rendering

Don't just render square pixels. Retrofy can draw your image using:

• Classic Squares
• LED Circles
• Diamonds
• Binary (0 & 1): Maps pixel luminance to binary characters.
• ASCII Density: Uses a classic gradient string (@%#*+=-:. ) to draw the image using text.
• Custom Characters: Type any letters or emojis (e.g., X O or ♥♦♣♠) to generate unique typographic art.

💾 Dual Export Pipeline

• PNG Export: Save a standard rasterized image of your creation.
• SVG Vector Export: Generates true, infinitely scalable vector markup (<rect>, <circle>, <text>). Perfect for laser cutters, pen plotters, and professional graphic design in Illustrator/Figma.

📱 Premium Native UI/UX

• Bulletproof Mobile Layout: Adapts flawlessly to iOS and Android with strict flexbox alignment, native touch-target sizing, and floating inset scrollbars.
• Asynchronous Processing: Heavy image calculations are pushed to the event loop, preventing the UI from "freezing" during rendering.

---

🛠️ Installation & Usage

Retrofy requires zero build tools, dependencies, or servers.

1. Clone or download the repository.
2. Ensure all three core files are in the same folder:
   • index.html (The UI structure)
   • style.css (The Premium Dark-Mode styling)
   • script.js (The Math & Rendering engine)
3. Double-click index.html to open it in any modern web browser (Chrome, Firefox, Safari, Edge).

---

🧠 Under the Hood (Architecture)

The JavaScript engine is cleanly separated into object-oriented classes:

• ColorMath: Handles Perceptual Luminance calculations. It weighs RGB values (R * 0.3 + G * 0.59 + B * 0.11) to match human eye sensitivity, ensuring the color quantization looks natural.
• UIController: Intercepts native, clunky <select> dropdowns and rebuilds them into fully accessible, custom HTML/CSS option cards.
• RenderEngine: Handles the HTML5 Canvas pixel extraction, applies the dithering logic, mutates the array, and loops through the custom geometry/text drawing methods.

---

📜 License

This project is open-source and available under the MIT License. Feel free to fork, modify, and integrate the engine into your own projects.