npm - p5-phone - Versions diffs - 1.4.4 - Mend

p5-phone 1.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/examples/homepage/index.html ADDED Viewed

@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>P5.js Mobile Interaction Examples</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: #ffffff;
+            color: #000000;
+            line-height: 1.6;
+            padding: 40px 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            letter-spacing: -0.02em;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: #666;
+            margin-bottom: 3rem;
+            font-weight: 400;
+        }
+        .section {
+            margin-bottom: 4rem;
+        }
+        .section-title {
+            font-size: 1.8rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid #000;
+        }
+        .examples-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+        .example-card {
+            border: 2px solid #000;
+            padding: 1.5rem;
+            transition: transform 0.2s, box-shadow 0.2s;
+            background: #fff;
+        }
+        .example-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 8px 8px 0 #000;
+        }
+        .example-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+        .example-description {
+            color: #666;
+            font-size: 0.9rem;
+            margin-bottom: 1rem;
+        }
+        .example-link {
+            display: inline-block;
+            color: #000;
+            text-decoration: none;
+            font-weight: 600;
+            padding: 0.5rem 1rem;
+            border: 2px solid #000;
+            transition: background 0.2s, color 0.2s;
+            margin-bottom: 1rem;
+            margin-right: 0.5rem;
+        }
+        .example-link:hover {
+            background: #000;
+            color: #fff;
+        }
+        .github-link {
+            display: inline-block;
+            color: #666;
+            text-decoration: none;
+            font-size: 0.9rem;
+            padding: 0.5rem 1rem;
+            border: 1px solid #666;
+            transition: background 0.2s, color 0.2s;
+            margin-bottom: 1rem;
+            margin-right: 0.5rem;
+        }
+        .github-link:hover {
+            background: #666;
+            color: #fff;
+        }
+        .links-group {
+            margin-bottom: 1rem;
+        }
+        .link-label {
+            font-size: 0.75rem;
+            color: #999;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-top: 0.5rem;
+            margin-bottom: 0.25rem;
+        }
+        .qr-code {
+            margin-top: 1rem;
+            text-align: center;
+        }
+        .qr-code canvas {
+            border: 2px solid #000;
+            padding: 10px;
+            background: white;
+        }
+        footer {
+            margin-top: 4rem;
+            padding-top: 2rem;
+            border-top: 2px solid #000;
+            text-align: center;
+            color: #666;
+        }
+        footer a {
+            color: #000;
+            text-decoration: none;
+            font-weight: 600;
+        }
+        footer a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>P5.js Mobile Interaction Examples</h1>
+        <p class="subtitle">Interactive examples demonstrating mobile device capabilities with p5.js</p>
+        <!-- Blank Template -->
+        <div class="section">
+            <h2 class="section-title">Getting Started</h2>
+            <div class="examples-grid">
+                <div class="example-card">
+                    <div class="example-title">Blank Template</div>
+                    <p class="example-description">Basic setup from the README - a starting point for your own projects</p>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/R-c_HpeUg" target="_blank" class="example-link">Web Editor →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/blankTemplate" target="_blank" class="github-link">View Code</a>
+                </div>
+            </div>
+        </div>
+        <!-- Touch Examples -->
+        <div class="section">
+            <h2 class="section-title">Touch Interactions</h2>
+            <div class="examples-grid">
+                <div class="example-card">
+                    <div class="example-title">01. Basic Touch</div>
+                    <p class="example-description">Detect touch events and track duration</p>
+                    <a href="Phone Sensor Examples/touch/01_touch_basic/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/zIRMsYKRN" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/touch/01_touch_basic" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/touch/01_touch_basic" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-touch-01"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">02. Touch Zones</div>
+                    <p class="example-description">Screen divided into 4 interactive zones</p>
+                    <a href="Phone Sensor Examples/touch/02_touch_zones/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/PkhKKZWMC" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/touch/02_touch_zones" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/touch/02_touch_zones" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-touch-02"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">03. Touch Count</div>
+                    <p class="example-description">Count simultaneous touch points</p>
+                    <a href="Phone Sensor Examples/touch/03_touch_count/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/g-9HeBb8B" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/touch/03_touch_count" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/touch/03_touch_count" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-touch-03"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">04. Touch Distance</div>
+                    <p class="example-description">Measure distance between two touches</p>
+                    <a href="Phone Sensor Examples/touch/04_touch_distance/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/s6icb8y_o" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/touch/04_touch_distance" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/touch/04_touch_distance" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-touch-04"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">05. Touch Angle</div>
+                    <p class="example-description">Calculate angle between two touch points</p>
+                    <a href="Phone Sensor Examples/touch/05_touch_angle/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/IPYIo8_FV" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/touch/05_touch_angle" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/touch/05_touch_angle" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-touch-05"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Movement Examples -->
+        <div class="section">
+            <h2 class="section-title">Device Motion</h2>
+            <div class="examples-grid">
+                <div class="example-card">
+                    <div class="example-title">01. Orientation</div>
+                    <p class="example-description">Basic device orientation detection</p>
+                    <a href="Phone Sensor Examples/movement/01_orientation_basic/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/Sf_um9wYw" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/movement/01_orientation_basic" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/movement/01_orientation_basic" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-movement-01"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">02. Rotational Velocity</div>
+                    <p class="example-description">Calculate rotation speed using sensors</p>
+                    <a href="Phone Sensor Examples/movement/02_rotational_velocity/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/IDSid9rOX" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/movement/02_rotational_velocity" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/movement/02_rotational_velocity" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-movement-02"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">03. Acceleration</div>
+                    <p class="example-description">Display device acceleration data</p>
+                    <a href="Phone Sensor Examples/movement/03_acceleration/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/xaxOYgK9q" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/movement/03_acceleration" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/movement/03_acceleration" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-movement-03"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Microphone Examples -->
+        <div class="section">
+            <h2 class="section-title">Audio Input</h2>
+            <div class="examples-grid">
+                <div class="example-card">
+                    <div class="example-title">01. Microphone Level</div>
+                    <p class="example-description">Visualize audio input with threshold</p>
+                    <a href="Phone Sensor Examples/microphone/01_mic_level/" class="example-link">Launch Example →</a>
+                    <a href="https://editor.p5js.org/creationcomputation/sketches/ySuEk7s6-" target="_blank" class="example-link">Web Editor →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/microphone/01_mic_level" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/microphone/01_mic_level" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-mic-01"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Sound Playback Examples -->
+        <div class="section">
+            <h2 class="section-title">Audio Playback</h2>
+            <div class="examples-grid">
+                <div class="example-card">
+                    <div class="example-title">01. Sound Basic</div>
+                    <p class="example-description">Play/pause audio with touch control</p>
+                    <a href="Phone Sensor Examples/sound/01_dual_audio/" class="example-link">Launch Example →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/sound/01_dual_audio" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/sound/01_sound_basic" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-sound-01"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">02. Volume by Touches</div>
+                    <p class="example-description">Control audio volume with multiple touches</p>
+                    <a href="Phone Sensor Examples/sound/02_volume_touches/" class="example-link">Launch Example →</a>
+                    <div class="links-group">
+                        <div class="link-label">View on GitHub:</div>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples/sound/02_volume_touches" target="_blank" class="github-link">Full Version</a>
+                        <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20Sensor%20Examples%20-%20Minimal/sound/02_sound_amplitude" target="_blank" class="github-link">Minimal</a>
+                    </div>
+                    <div class="qr-code" id="qr-sound-02"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Phone and GIF Examples -->
+        <div class="section">
+            <h2 class="section-title">Interactive GIF Examples</h2>
+            <div class="examples-grid">
+                <div class="example-card">
+                    <div class="example-title">Fetch</div>
+                    <p class="example-description">Touch-controlled corgi fetching animation</p>
+                    <a href="Phone and Gif/fetch/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20and%20Gif/fetch" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-gif-fetch"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Roll</div>
+                    <p class="example-description">Tilt-controlled pencil rolling animation</p>
+                    <a href="Phone and Gif/roll/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20and%20Gif/roll" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-gif-roll"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Fly</div>
+                    <p class="example-description">Acceleration-controlled airplane window</p>
+                    <a href="Phone and Gif/fly/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/Phone%20and%20Gif/fly" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-gif-fly"></div>
+                </div>
+            </div>
+        </div>
+        <!-- UX Comparison Examples -->
+        <div class="section">
+            <h2 class="section-title">UX Comparison Examples</h2>
+            <div class="examples-grid">
+                <div class="example-card">
+                    <div class="example-title">Button vs Shake Detection</div>
+                    <p class="example-description">Compare clicking a button vs shaking your device to trigger actions</p>
+                    <a href="UXcompare/button-vs-shake/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/button-vs-shake" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-button-shake"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Button vs Movement Detection</div>
+                    <p class="example-description">Compare button clicks vs device movement for interaction control</p>
+                    <a href="UXcompare/button-vs-movement/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/button-vs-movement" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-button-movement"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Button vs Orientation</div>
+                    <p class="example-description">Compare button interface vs device orientation for control</p>
+                    <a href="UXcompare/button-vs-orientation/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/button-vs-orientation" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-button-orientation"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Sliders vs Device Rotation</div>
+                    <p class="example-description">RGB color control: traditional sliders vs device rotation</p>
+                    <a href="UXcompare/sliders-vs-rotation/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/sliders-vs-rotation" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-sliders-rotation"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Sliders vs Device Acceleration</div>
+                    <p class="example-description">RGB color control: traditional sliders vs device acceleration</p>
+                    <a href="UXcompare/sliders-vs-acceleration/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/sliders-vs-acceleration" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-sliders-acceleration"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Slider vs Microphone</div>
+                    <p class="example-description">Volume control: traditional slider vs microphone input level</p>
+                    <a href="UXcompare/slider-vs-microphone/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/slider-vs-microphone" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-slider-microphone"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Slider vs Multi-Touch</div>
+                    <p class="example-description">Value control: single slider vs multiple finger touches</p>
+                    <a href="UXcompare/slider-vs-touches/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/slider-vs-touches" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-slider-touches"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Slider vs Distance</div>
+                    <p class="example-description">Value control: traditional slider vs finger distance measurement</p>
+                    <a href="UXcompare/slider-vs-distance/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/slider-vs-distance" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-slider-distance"></div>
+                </div>
+                <div class="example-card">
+                    <div class="example-title">Slider vs Angle Control</div>
+                    <p class="example-description">Value control: linear slider vs multi-touch angle detection</p>
+                    <a href="UXcompare/slider-vs-angle/" class="example-link">Launch Example →</a>
+                    <a href="https://github.com/DigitalFuturesOCADU/P5-Phone-Interactions/tree/main/examples/UXcompare/slider-vs-angle" target="_blank" class="github-link">View Code</a>
+                    <div class="qr-code" id="qr-ux-slider-angle"></div>
+                </div>
+            </div>
+        </div>
+        <footer>
+            <p>Built with <a href="https://p5js.org/" target="_blank">p5.js</a> and <a href="https://github.com/DigitalFuturesOCADU/mobile-p5-permissions" target="_blank">mobile-p5-permissions</a></p>
+            <p>2025 Digital Futures OCADU</p>
+        </footer>
+    </div>
+    <script>
+        // Wait for QRCode library to load
+        window.addEventListener('load', function() {
+            // Generate QR codes for all examples
+            const baseURL = 'https://digitalfuturesocadu.github.io/P5-Phone-Interactions/examples/';
+            const examples = [
+                { id: 'qr-touch-01', url: 'Phone%20Sensor%20Examples/touch/01_touch_basic/' },
+                { id: 'qr-touch-02', url: 'Phone%20Sensor%20Examples/touch/02_touch_zones/' },
+                { id: 'qr-touch-03', url: 'Phone%20Sensor%20Examples/touch/03_touch_count/' },
+                { id: 'qr-touch-04', url: 'Phone%20Sensor%20Examples/touch/04_touch_distance/' },
+                { id: 'qr-touch-05', url: 'Phone%20Sensor%20Examples/touch/05_touch_angle/' },
+                { id: 'qr-movement-01', url: 'Phone%20Sensor%20Examples/movement/01_orientation_basic/' },
+                { id: 'qr-movement-02', url: 'Phone%20Sensor%20Examples/movement/02_rotational_velocity/' },
+                { id: 'qr-movement-03', url: 'Phone%20Sensor%20Examples/movement/03_acceleration/' },
+                { id: 'qr-mic-01', url: 'Phone%20Sensor%20Examples/microphone/01_mic_level/' },
+                { id: 'qr-sound-01', url: 'Phone%20Sensor%20Examples/sound/01_dual_audio/' },
+                { id: 'qr-sound-02', url: 'Phone%20Sensor%20Examples/sound/02_volume_touches/' },
+                { id: 'qr-gif-fetch', url: 'Phone%20and%20Gif/fetch/' },
+                { id: 'qr-gif-roll', url: 'Phone%20and%20Gif/roll/' },
+                { id: 'qr-gif-fly', url: 'Phone%20and%20Gif/fly/' },
+                { id: 'qr-ux-button-shake', url: 'UXcompare/button-vs-shake/' },
+                { id: 'qr-ux-button-movement', url: 'UXcompare/button-vs-movement/' },
+                { id: 'qr-ux-button-orientation', url: 'UXcompare/button-vs-orientation/' },
+                { id: 'qr-ux-sliders-rotation', url: 'UXcompare/sliders-vs-rotation/' },
+                { id: 'qr-ux-sliders-acceleration', url: 'UXcompare/sliders-vs-acceleration/' },
+                { id: 'qr-ux-slider-microphone', url: 'UXcompare/slider-vs-microphone/' },
+                { id: 'qr-ux-slider-touches', url: 'UXcompare/slider-vs-touches/' },
+                { id: 'qr-ux-slider-distance', url: 'UXcompare/slider-vs-distance/' },
+                { id: 'qr-ux-slider-angle', url: 'UXcompare/slider-vs-angle/' }
+            ];
+            examples.forEach(example => {
+                const fullURL = baseURL + example.url;
+                const container = document.getElementById(example.id);
+                container.innerHTML = ''; // Clear any existing content
+                new QRCode(container, {
+                    text: fullURL,
+                    width: 150,
+                    height: 150,
+                    colorDark: '#000000',
+                    colorLight: '#ffffff',
+                    correctLevel: QRCode.CorrectLevel.M
+                });
+            });
+        });
+    </script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,73 @@
+{
+  "name": "p5-phone",
+  "version": "1.4.4",
+  "description": "Simplified mobile hardware access for p5.js - handle sensors, microphone, touch, and browser gestures with ease",
+  "main": "src/p5-phone.js",
+  "files": [
+    "src/",
+    "dist/",
+    "examples/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "npx terser src/p5-phone.js --compress --mangle --output dist/p5-phone.min.js && cp src/p5-phone.js dist/p5-phone.js",
+    "test": "echo \"No tests specified\" && exit 0",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build",
+    "version": "echo \"Version bumped to $npm_package_version\"",
+    "postversion": "git push && git push --tags",
+    "release:patch": "npm version patch",
+    "release:minor": "npm version minor",
+    "release:major": "npm version major",
+    "release:dry": "npm version --dry-run"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DigitalFuturesOCADU/p5-phone.git"
+  },
+  "keywords": [
+    "p5js",
+    "mobile",
+    "permissions",
+    "touch",
+    "gyroscope",
+    "accelerometer",
+    "microphone",
+    "gesture-blocking",
+    "mobile-web",
+    "creative-coding",
+    "javascript",
+    "ios",
+    "android",
+    "deviceorientation",
+    "devicemotion",
+    "web-audio"
+  ],
+  "author": "Digital Futures OCADU",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DigitalFuturesOCADU/p5-phone/issues"
+  },
+  "homepage": "https://github.com/DigitalFuturesOCADU/p5-phone#readme",
+  "peerDependencies": {
+    "p5": "^1.0.0"
+  },
+  "devDependencies": {
+    "terser": "^5.44.0"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "browserslist": [
+    "iOS >= 13",
+    "Android >= 7",
+    "Chrome >= 80",
+    "Safari >= 13",
+    "Firefox >= 75"
+  ]
+}