sticky.mov
Stringy is a JavaScript sketch that creates an interactive simulation using webcam input for hand tracking. Developed by Marlon Barrios Solano, this project combines the power of p5.js, Toxiclibs, and MediaPipe to create a unique interactive experience.
- Marlon Barrios Solano: For more about Marlon, his projects, and how you can support his work, visit his Linktree.
It leverages the following technologies:
-
p5.js: A JavaScript library for creative coding and visualization. It provides a simple yet powerful framework for creating interactive graphics and media-rich experiences in the browser.
-
Toxiclibs: A collection of computational design tools for processing and Java. Toxiclibs is used for its Verlet physics engine, which allows for realistic particle simulations and spring-based interactions.
-
MediaPipe: An open-source framework from Google Research that provides cross-platform tools for building multimodal applied ML pipelines. MediaPipe is utilized for hand tracking, enabling interaction with the particle simulation based on hand movements detected by the webcam.
It offers the following features:
- Particle Simulation: The sketch simulates particles connected by springs, creating dynamic and visually engaging patterns.
- Hand Tracking: Utilizing MediaPipe, Stringy tracks hand movements from the webcam feed. Users can interact with the particle simulation by moving their hands.
- Interactive Controls: Users can toggle the visibility of springs by pressing the spacebar, adding an extra layer of interactivity to the experience.
This app is adapted from the Coding Train by Daniel Shiffman and @nahuelgerth. It extends their concepts of creative coding and interactive simulations to incorporate hand tracking technology and create an immersive experience.
The code consists of several functions:
-
keyPressed(): Toggles the visibility of springs with the spacebar. -
setup(): Initializes the canvas, physics engine, particles, eyes, and springs. -
draw(): Handles webcam feed, hand tracking, physics simulation, and drawing particles, eyes, and springs. -
captureWebcam(): Initializes webcam capture with specific settings. -
setCameraDimensions(): Adjusts the dimensions of the camera feed to fit the canvas. -
centerOurStuff(): Centers the webcam feed within the canvas. -
windowResized(): Handles window resizing and adjusts camera dimensions accordingly. -
Inspired and hacked from the amazing Coding Train
Copyright (c) 2024 Marlon Barrios Solano
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
