Thirty-Six Studio

A React-based digital production studio website showcasing design, animation, and technology work.

Image Usage Permission Fix

This project previously had CORS (Cross-Origin Resource Sharing) issues when trying to load images from external domains. The following fixes have been implemented:

Issues Fixed:

1. CORS Errors: Images were being loaded from https://thirtysixstudio.com/peppers/ which caused CORS errors when drawing on canvas
2. Unreliable Proxy: The code was using an unreliable CORS proxy (https://cors-anywhere.herokuapp.com/)
3. External Domain Dependencies: Loading images from external domains without proper permissions

Solution Implemented:

1. Local Image Storage: All pepper animation images have been downloaded and stored locally in public/images/peppers/
2. Removed CORS Proxy: Eliminated the unreliable proxy dependency
3. Error Handling: Added proper error handling with fallback placeholders for failed image loads
4. Updated Paths: Modified src/canvasimages.js to use local image paths

File Structure:

public/
  images/
    peppers/
      pepperA/ (149 images)
      pepperB/ (150 images)
      pepperC/ (150 images)
      pepperD/ (150 images)
      pepperE/ (150 images)
      pepperF/ (150 images)
      pepperG/ (150 images)

How to Re-download Images:

If you need to re-download the images, run:

node download-images.js

This script will:

• Download all pepper animation images from the original source
• Save them to the local public/images/peppers/ directory
• Update src/canvasimages.js with local paths

Development

npm install
npm run dev

Technologies Used

• React
• Vite
• GSAP (GreenSock Animation Platform)
• Locomotive Scroll
• Canvas API for image rendering