Noetica Studio - Web-based Image Editor

A powerful, lightweight web-based image editor built with vanilla JavaScript and HTML5 Canvas. Noetica Studio provides professional-grade image editing capabilities directly in your browser without requiring any plugins or external dependencies.

Features

🎨 Image Adjustments

• Exposure Control - Adjust image brightness with exposure scaling
• Brightness & Contrast - Fine-tune image luminance and contrast
• Saturation - Control color intensity from desaturated to vivid
• Temperature - Adjust color temperature (warm/cool tones)
• Sharpness - Apply Laplacian sharpening for crisp details
• Grayscale - Convert images to black and white
• Histogram Stretch - Automatically enhance contrast using histogram equalization

🎭 Creative Filters

• Sepia - Classic vintage brown tone effect
• Vintage - Aged photo appearance with subtle sepia
• Invert - Create negative image effect
• High Contrast B/W - Pure black and white conversion
• Blur - Variable strength blur effect with real-time preview

🔄 Transform Tools

• Rotation - Rotate images by 90° increments or custom angles (-180° to +180°)
• Crop - Interactive selection-based cropping with visual preview
• Non-destructive editing - All transforms preserve original image quality

📊 Visual Feedback

• Real-time Histogram - RGB channel histogram with live updates
• Zoom Controls - Zoom in/out with fit-to-view option
• Interactive Preview - All changes render in real-time

💾 Export Options

• Multiple Formats - Export as PNG, JPEG, or WebP
• Quality Control - Adjustable compression for lossy formats
• High Resolution - Maintains original image resolution

Getting Started

Prerequisites

• Modern web browser with HTML5 Canvas support
• No additional dependencies or installation required

Installation

1. Clone or download this repository
2. Open index.html in your web browser
3. Start editing images immediately!

git clone https://github.com/yasaswiraj/noetica-studio.git
cd noetica-studio
# Open index.html in your browser

Usage

1. Upload an Image

   • Click the "Upload" button in the top bar
   • Select any image file (PNG, JPEG, WebP, etc.)

2. Apply Adjustments

   • Use the sliders in the "Adjustments" panel to modify:
     • Exposure, brightness, contrast
     • Saturation and color temperature
     • Sharpness and other enhancements

3. Add Filters

   • Choose from preset filters in the "Filters" panel
   • Adjust blur strength when using the blur filter
   • Reset filters anytime with the "Reset Filter" button

4. Transform Your Image

   • Rotate using quick 90° buttons or precise angle control
   • Enter crop mode to select and crop specific areas
   • Use zoom controls for detailed editing

5. Export Your Work

   • Choose your preferred format (PNG/JPEG/WebP)
   • Adjust quality settings for lossy formats
   • Click "Download" to save your edited image

Technical Architecture

Core Technologies

• HTML5 Canvas - High-performance image rendering and manipulation
• Vanilla JavaScript - No frameworks, pure performance
• CSS Grid/Flexbox - Responsive, modern UI layout
• ImageData API - Pixel-level image processing

Key Components

Image Processing Pipeline

Original Image → Rotation → Named Filters → Adjustments → Post-processing → Canvas

Filter System

• Named Filters: Sepia, Vintage, Invert, High Contrast, Blur
• Adjustments: Exposure, Brightness, Contrast, Saturation, Temperature
• Post-processing: Histogram Stretch, Laplacian Sharpening

Memory Management

• Efficient ImageData cloning and manipulation
• Non-destructive editing preserves original image
• Canvas optimization for large images

File Structure

noetica-studio/
├── index.html          # Main application interface
├── script.js           # Core image processing logic
├── style.css           # Modern dark theme styling
├── images/             # Sample images and assets
│   └── images.jpeg
└── README.md           # This documentation

Browser Compatibility

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+

Performance Considerations

• Real-time Processing: All filters render instantly
• Memory Efficient: Optimized ImageData handling
• Responsive Design: Works on desktop and tablet devices
• Canvas Optimization: Hardware-accelerated rendering when available

Development

Key Functions

• renderComposite() - Main rendering pipeline
• applyNamedFilter() - Filter application system
• getRotatedImageData() - Non-destructive rotation
• histogramStretchRGB() - Histogram equalization
• applyLaplacianSharpen() - Sharpening algorithm

Adding New Filters

// Add to applyNamedFilterToRGB function
case 'myfilter':
  return [r * 0.8, g * 1.2, b * 0.9]; // Example filter

Extending Adjustments

// Add slider event listener
newSlider?.addEventListener('input', renderComposite);

// Add processing in renderComposite function
const newValue = parseFloat(newSlider?.value ?? 1);
// Apply newValue to image processing pipeline

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-filter)
3. Commit your changes (git commit -m 'Add amazing filter')
4. Push to the branch (git push origin feature/amazing-filter)
5. Open a Pull Request

Acknowledgments

• HTML5 Canvas API for powerful image manipulation
• Modern web standards for responsive design
• Community feedback for feature improvements

Support

For support, feature requests, or bug reports, please open an issue on the GitHub repository.

---

Noetica Studio - Professional image editing, reimagined for the web.