From 09c03ec780db6f8f8d46f42ab7e7b396ff161b0d Mon Sep 17 00:00:00 2001 From: jawhinge Date: Mon, 29 Dec 2025 16:55:37 +0200 Subject: [PATCH] update README --- README.md | 51 +++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 43 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 38926fd..abe91e4 100644 --- a/README.md +++ b/README.md @@ -37,11 +37,13 @@ hear-on-out uses your geolocation to fetch current weather and air quality data, ### Audio Visualization -- Real-time particle system using p5.js (40 particles for optimal performance) +- Real-time particle system using p5.js + - **Desktop**: 40 particles at 30fps with connection lines + - **Mobile**: 15 particles at 20fps, no connections (performance optimized) - FFT analysis for bass, mid, and treble frequency detection - Particles react to audio levels with dynamic size and movement -- Connected particle network with proximity-based relationships -- Performance optimizations: 30fps rendering, reduced connection checks, pauses when tab not focused +- Adaptive sizing: 400x400px (desktop) or 280x280px (mobile) +- Automatic pause during scrolling to prevent audio interference on mobile ## Technologies @@ -55,11 +57,25 @@ hear-on-out uses your geolocation to fetch current weather and air quality data, The application includes several optimizations for smooth performance: -- **Reduced particle count**: 40 particles (down from 60) with 30fps rendering -- **Selective updates**: Audio-reactive displacement updates every 3rd frame -- **Optimized connections**: Particle connections drawn every other frame with limited neighbor checking -- **Tab visibility**: Visualization pauses when tab is not focused to save resources -- **Efficient audio routing**: Arpeggios bypass filter for cleaner CPU usage +**Desktop Optimizations:** +- 40 particles with 30fps rendering +- Audio-reactive displacement updates every 3rd frame +- Particle connections drawn every other frame with limited neighbor checking +- Tab visibility detection: Visualization pauses when tab is not focused +- Efficient audio routing: Arpeggios bypass filter for cleaner CPU usage + +**Mobile-Specific Optimizations:** +- **Reduced particle count**: 15 particles (vs 40 on desktop) +- **Lower framerate**: 20fps (vs 30fps on desktop) +- **Disabled connection lines**: Removes expensive O(n²) calculations +- **Smaller canvas**: 280x280px visualizations (vs 400x400px on desktop) +- **Scroll handling**: Visualization pauses during scrolling to prevent audio stuttering +- **Less frequent updates**: Displacement updates every 5th frame (vs 3rd on desktop) +- **Screen sleep recovery**: Audio context automatically resumes after device wakes up +- **Visibility API**: Properly handles audio context suspension/resumption + +**Mobile Performance Note:** +Running both generators simultaneously on mobile devices may cause performance issues. For optimal experience on mobile, consider running one generator at a time. ## Setup @@ -104,6 +120,25 @@ The app supports two methods for location input: - Must be served over HTTPS for geolocation to work - Development server uses `@vitejs/plugin-basic-ssl` for local HTTPS +## Mobile Experience + +The application is optimized for mobile devices with several performance enhancements: + +**Audio Playback:** +- Automatic audio context recovery after screen sleep/wake +- Handles browser audio suspension gracefully +- Transport automatically restarts when app becomes visible + +**Visual Performance:** +- Adaptive particle count and framerate based on device +- Visualization pauses during scrolling to prevent stuttering +- Smaller canvas size for reduced GPU load + +**Known Limitations:** +- Running both generators simultaneously may impact performance on lower-end devices +- Some mobile browsers may require user interaction to start audio playback +- Audio may briefly pause during heavy scrolling or multitasking + ## Project Structure ```