🎨 Pixel Art Generator (Vanilla JavaScript)

Overview

An interactive pixel art web application built with Vanilla JavaScript that allows users to dynamically create customizable grids, paint cells, erase, and automatically generate geometric outline shapes.

The project demonstrates DOM manipulation at scale, dynamic UI generation, touch/mouse event handling, and algorithmic shape rendering — all without external libraries.

Key Features

• Dynamic grid creation (1x1 to 35x35)
• Real-time painting with color picker
• Erase mode toggle
• Mouse and touch device support
• Grid clearing functionality
• Procedural outline shape generation:
  • Heart
  • Square
  • Circle
  • Star
• Responsive layout
• Smooth UI interactions and hover effects

Technical Highlights

• Vanilla JavaScript (no frameworks)
• Dynamic DOM generation
• Event abstraction for mouse & touch devices
• Shape rendering using mathematical equations
• Element targeting via elementFromPoint
• State management for drawing and erasing modes
• Modular function structure
• Responsive UI with CSS flexbox
• Custom styled sliders and inputs

Architecture

• index.html → Application structure
• style.css → Responsive UI styling and visual design
• index.js → Grid logic, event handling, and shape algorithms

How to Run

1. Clone or download the repository.
2. Open index.html in any modern browser.
3. Select grid size.
4. Click Create Grid.
5. Paint, erase, or generate shapes.

No build tools or installation required.

---

This project showcases front-end engineering fundamentals, interactive UI logic, mathematical rendering techniques, and device-aware event handling — ideal for demonstrating strong JavaScript core skills without frameworks.

pixelart.mp4