Step With Me
Interactive public art exhibition for Pride 2021
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M117.778 90.2286C118.698 91.1484 118.698 92.6396 117.778 93.5594L93.4907 117.847C92.5709 118.767 91.0797 118.767 90.1599 117.847L10.2218 37.9087C9.30207 36.989 9.30207 35.4977 10.2218 34.578L34.5093 10.2905C35.429 9.37077 36.9203 9.37077 37.84 10.2905L117.778 90.2286ZM90.2297 10.3602C91.1494 9.44046 92.6407 9.44046 93.5604 10.3602L117.708 34.5082C118.628 35.428 118.628 36.9192 117.708 37.839L91.7217 63.8256C91.7025 63.8449 91.7025 63.8761 91.7217 63.8954C91.741 63.9146 91.741 63.9459 91.7217 63.9651L63.8964 91.7904C63.8771 91.8097 63.8459 91.8097 63.8267 91.7904C63.8074 91.7712 63.7762 91.7712 63.7569 91.7904L37.7703 117.777C36.8505 118.697 35.3593 118.697 34.4395 117.777L10.2915 93.6291C9.37177 92.7093 9.37177 91.2181 10.2915 90.2984L36.2782 64.3117C36.2974 64.2925 36.2974 64.2612 36.2782 64.242C36.2589 64.2227 36.2589 64.1915 36.2782 64.1722L64.1035 36.3469C64.1228 36.3276 64.154 36.3276 64.1733 36.3469C64.1925 36.3662 64.2237 36.3662 64.243 36.3469L90.2297 10.3602Z" fill="currentColor"/> </svg>
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M64.0002 113.657C91.4248 113.657 113.657 91.4248 113.657 64.0002C113.657 36.5755 91.4248 14.3434 64.0002 14.3434C36.5755 14.3434 14.3434 36.5755 14.3434 64.0002C14.3434 91.4248 36.5755 113.657 64.0002 113.657ZM64.0002 122.88C96.5187 122.88 122.88 96.5187 122.88 64.0002C122.88 31.4816 96.5187 5.12012 64.0002 5.12012C31.4816 5.12012 5.12012 31.4816 5.12012 64.0002C5.12012 96.5187 31.4816 122.88 64.0002 122.88ZM63.5376 96.4165C81.696 96.4165 96.4163 81.6962 96.4163 63.5378C96.4163 45.3794 81.696 30.6591 63.5376 30.6591C45.3792 30.6591 30.6589 45.3794 30.6589 63.5378C30.6589 81.6962 45.3792 96.4165 63.5376 96.4165ZM63.5376 105.64C86.7899 105.64 105.64 86.7901 105.64 63.5378C105.64 40.2855 86.7899 21.4358 63.5376 21.4358C40.2853 21.4358 21.4356 40.2855 21.4356 63.5378C21.4356 86.7901 40.2853 105.64 63.5376 105.64ZM78.6159 63.7414C78.6159 71.9563 71.9564 78.6158 63.7415 78.6158C55.5266 78.6158 48.8671 71.9563 48.8671 63.7414C48.8671 55.5264 55.5266 48.8669 63.7415 48.8669C71.9564 48.8669 78.6159 55.5264 78.6159 63.7414ZM87.8392 63.7414C87.8392 77.0502 77.0503 87.8391 63.7415 87.8391C50.4327 87.8391 39.6438 77.0502 39.6438 63.7414C39.6438 50.4326 50.4327 39.6436 63.7415 39.6436C77.0503 39.6436 87.8392 50.4326 87.8392 63.7414Z" fill="currentColor"/> </svg>
Project Overview
Step With Me is an interactive public art exhibition created for Pride 2021, featuring a musical staircase installation that allows participants to create and perform music through movement. The installation transforms a public staircase into an interactive musical instrument, encouraging community engagement and creative expression during Pride celebrations.
The project combines physical interaction design with real-time audio processing, creating an accessible and engaging experience that brings people together through music and movement in a public space.
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8001 5.12012C8.55857 5.12012 5.12012 8.55857 5.12012 12.8001V115.2C5.12012 119.442 8.55857 122.88 12.8001 122.88H115.2C119.442 122.88 122.88 119.442 122.88 115.2V12.8001C122.88 8.55857 119.442 5.12012 115.2 5.12012H12.8001ZM64.0001 113.6C91.3934 113.6 113.6 91.3934 113.6 64.0001C113.6 36.6068 91.3934 14.4001 64.0001 14.4001C36.6068 14.4001 14.4001 36.6068 14.4001 64.0001C14.4001 91.3934 36.6068 113.6 64.0001 113.6Z" fill="currentColor"/> </svg>
UX&UI
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M117.778 90.2286C118.698 91.1484 118.698 92.6396 117.778 93.5594L93.4907 117.847C92.5709 118.767 91.0797 118.767 90.1599 117.847L10.2218 37.9087C9.30207 36.989 9.30207 35.4977 10.2218 34.578L34.5093 10.2905C35.429 9.37077 36.9203 9.37077 37.84 10.2905L117.778 90.2286ZM90.2297 10.3602C91.1494 9.44046 92.6407 9.44046 93.5604 10.3602L117.708 34.5082C118.628 35.428 118.628 36.9192 117.708 37.839L91.7217 63.8256C91.7025 63.8449 91.7025 63.8761 91.7217 63.8954C91.741 63.9146 91.741 63.9459 91.7217 63.9651L63.8964 91.7904C63.8771 91.8097 63.8459 91.8097 63.8267 91.7904C63.8074 91.7712 63.7762 91.7712 63.7569 91.7904L37.7703 117.777C36.8505 118.697 35.3593 118.697 34.4395 117.777L10.2915 93.6291C9.37177 92.7093 9.37177 91.2181 10.2915 90.2984L36.2782 64.3117C36.2974 64.2925 36.2974 64.2612 36.2782 64.242C36.2589 64.2227 36.2589 64.1915 36.2782 64.1722L64.1035 36.3469C64.1228 36.3276 64.154 36.3276 64.1733 36.3469C64.1925 36.3662 64.2237 36.3662 64.243 36.3469L90.2297 10.3602Z" fill="currentColor"/> </svg>
Systems
Interactive Staircase System Architecture
The installation features a sophisticated system that detects movement on individual steps and triggers corresponding musical responses. Each step is equipped with sensors that detect pressure and movement, allowing for precise control over musical output and creating an intuitive interface for users.
Dual Mode Operation
The system operates in two distinct modes: Looper Mode and Note Mode. Looper Mode features different instruments with 6 short musical phrases looping, where multiple steps triggered simultaneously combine into different musical combinations. Note Mode allows for melody composition by traversing steps in different patterns, with all notes from within the same key for musical coherence.
Real-Time Audio Processing
The technical implementation includes individual channel volume controls, global volume management, sensitivity adjustments, and multiple sound kits that can be changed using number keys. The system includes proximity-based volume adjustments to prevent discomfort at loud volumes and prevent repeat triggering of sounds in unintended ways.
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M62.0919 6.23565C62.3946 4.74827 65.6056 4.74827 65.9084 6.23566C68.3076 18.0226 73.3083 35.8078 82.7504 45.2499C92.1924 54.6919 109.978 59.6926 121.765 62.0919C123.252 62.3946 123.252 65.6056 121.765 65.9084C109.978 68.3076 92.1924 73.3083 82.7504 82.7504C73.3083 92.1924 68.3076 109.978 65.9084 121.765C65.6056 123.252 62.3946 123.252 62.0919 121.765C59.6926 109.978 54.6919 92.1924 45.2499 82.7504C35.8078 73.3083 18.0226 68.3076 6.23565 65.9084C4.74827 65.6056 4.74827 62.3946 6.23566 62.0919C18.0226 59.6926 35.8078 54.6919 45.2499 45.2499C54.6919 35.8078 59.6926 18.0226 62.0919 6.23565Z" fill="currentColor"/> </svg>
Visual
<svg width="100%" height="100%" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M64.0002 113.657C91.4248 113.657 113.657 91.4248 113.657 64.0002C113.657 36.5755 91.4248 14.3434 64.0002 14.3434C36.5755 14.3434 14.3434 36.5755 14.3434 64.0002C14.3434 91.4248 36.5755 113.657 64.0002 113.657ZM64.0002 122.88C96.5187 122.88 122.88 96.5187 122.88 64.0002C122.88 31.4816 96.5187 5.12012 64.0002 5.12012C31.4816 5.12012 5.12012 31.4816 5.12012 64.0002C5.12012 96.5187 31.4816 122.88 64.0002 122.88ZM63.5376 96.4165C81.696 96.4165 96.4163 81.6962 96.4163 63.5378C96.4163 45.3794 81.696 30.6591 63.5376 30.6591C45.3792 30.6591 30.6589 45.3794 30.6589 63.5378C30.6589 81.6962 45.3792 96.4165 63.5376 96.4165ZM63.5376 105.64C86.7899 105.64 105.64 86.7901 105.64 63.5378C105.64 40.2855 86.7899 21.4358 63.5376 21.4358C40.2853 21.4358 21.4356 40.2855 21.4356 63.5378C21.4356 86.7901 40.2853 105.64 63.5376 105.64ZM78.6159 63.7414C78.6159 71.9563 71.9564 78.6158 63.7415 78.6158C55.5266 78.6158 48.8671 71.9563 48.8671 63.7414C48.8671 55.5264 55.5266 48.8669 63.7415 48.8669C71.9564 48.8669 78.6159 55.5264 78.6159 63.7414ZM87.8392 63.7414C87.8392 77.0502 77.0503 87.8391 63.7415 87.8391C50.4327 87.8391 39.6438 77.0502 39.6438 63.7414C39.6438 50.4326 50.4327 39.6436 63.7415 39.6436C77.0503 39.6436 87.8392 50.4326 87.8392 63.7414Z" fill="currentColor"/> </svg>
Sound
Musical Composition System
The installation features four distinct sound channels: Percussion (bongo, conga), Rhythm (hi hat, kick, rim), Melody (synth), and Bass drum. Each channel operates independently while contributing to a cohesive musical experience, allowing for complex musical combinations when multiple steps are triggered simultaneously.
Sound Kit Integration
The system includes multiple sound kits that can be switched in real-time: Marimba, Horn, Organ, and Rhodes Piano. Each change triggers a sweeping sound to indicate the transition, providing immediate feedback to users about their musical choices.
Interactive Performance Design
The sound design supports both individual expression and collaborative performance, with sensitivity controls that can be adjusted for different user preferences. The system creates an accessible musical experience that encourages experimentation and creative expression in a public setting.
Musical Composition System
The installation features four distinct sound channels: Percussion (bongo, conga), Rhythm (hi hat, kick, rim), Melody (synth), and Bass drum. Each channel operates independently while contributing to a cohesive musical experience, allowing for complex musical combinations when multiple steps are triggered simultaneously.
Sound Kit Integration
The system includes multiple sound kits that can be switched in real-time: Marimba, Horn, Organ, and Rhodes Piano. Each change triggers a sweeping sound to indicate the transition, providing immediate feedback to users about their musical choices.
Interactive Performance Design
The sound design supports both individual expression and collaborative performance, with sensitivity controls that can be adjusted for different user preferences. The system creates an accessible musical experience that encourages experimentation and creative expression in a public setting.