by Studio Poetics - Quick Prototype & Learning
This directory contains three comprehensive templates for using Google's Teachable Machine with p5.js. Each template is fully documented and ready for students to customize for their own projects.
Classify objects, faces, or scenes from your webcam in real-time.
Perfect for:
- Object recognition projects
- Interactive art installations
- Educational tools
- Computer vision experiments
Key Features:
- Real-time webcam classification
- Customizable confidence thresholds
- Clean, responsive UI
- Extensive documentation
Classify sounds, voices, or music from your microphone with stunning visualizations.
Perfect for:
- Sound-reactive installations
- Music visualization
- Voice-controlled interfaces
- Audio-based games
Key Features:
- Real-time audio classification
- Waveform and spectrum visualization
- Particle effects
- Volume monitoring
Detect and classify body poses using advanced pose estimation.
Perfect for:
- Fitness applications
- Interactive games
- Gesture control systems
- Performance art
Key Features:
- 17-point pose detection
- Skeleton visualization
- Real-time pose classification
- Customizable keypoint display
- Choose a template from the folders above
- Train your model at Teachable Machine
- Update the model URL in the template's
script.jsfile - Customize the response functions for your specific use case
- Style the interface to match your project
- Visit teachablemachine.withgoogle.com
- Choose Image, Audio, or Pose project
- Create classes and add training data
- Train your model
- Export and copy the model URL
- Copy the appropriate template folder
- Open
script.jsin your editor - Replace
YOUR_MODEL_URL_HEREwith your actual model URL - Open
index.htmlin a web browser
Each template includes:
- Detailed code comments explaining every function
- Customization examples you can uncomment and modify
- Responsive design that works on desktop and mobile
- Accessibility features for inclusive design
- Chrome/Edge: Full support
- Firefox: Full support
- Safari: Full support (may require user interaction for audio/camera)
- p5.js: Creative coding framework
- TensorFlow.js: Machine learning runtime
- Teachable Machine: Pre-trained model loader
- Camera: Required for Image and Pose classification
- Microphone: Required for Audio classification
- Modern CPU: For real-time inference
- Magic Mirror: Change your appearance based on gestures
- Sound Garden: Grow plants with different sounds
- Pose Simon: Memory game using body poses
- Object Counter: Count and track specific objects
- Fitness Trainer: AI-powered form correction
- Music Visualizer: Respond to different music genres
- Sign Language Translator: Basic gesture recognition
- Interactive Storytelling: Story changes based on audience
- Multi-modal Installation: Combine all three classification types
- Real-time Performance: Live performance with AI feedback
- Accessibility Interface: Computer control through gestures/sounds
- Educational Assessment: Automated skill evaluation
Each template includes a respondToClassification() function where you can add your custom logic:
function respondToClassification(prediction) {
const className = prediction.className;
const confidence = prediction.probability;
// Add your custom responses here!
switch(className.toLowerCase()) {
case 'your_class_name':
// Your custom code here
break;
}
}All templates use CSS custom properties for easy theming:
:root {
--primary-color: #your-color;
--secondary-color: #your-color;
/* Customize colors, fonts, spacing, etc. */
}- Sound Effects: Use p5.sound library
- Particle Systems: Create visual effects
- Data Logging: Track usage and accuracy
- Multiple Models: Combine different classifications
Model not loading:
- Check that the model URL is correct
- Ensure you've exported your model from Teachable Machine
- Verify internet connection
Camera/Microphone not working:
- Check browser permissions
- Try HTTPS instead of HTTP
- Ensure hardware is connected and working
Poor classification accuracy:
- Retrain with more diverse data
- Check lighting conditions (for image/pose)
- Reduce background noise (for audio)
Performance issues:
- Reduce canvas size
- Increase classification interval
- Close other browser tabs
- Check the individual template README files
- Review browser console for error messages
- Test with the original Teachable Machine interface
- Search the p5.js forum for similar issues
These templates are designed to be starting points for learning and creativity. Feel free to:
- Extend the templates with new features
- Share your projects and modifications
- Improve the documentation and examples
- Report bugs or suggest enhancements
These templates are provided for educational use. Please respect the licenses of the underlying libraries:
- p5.js: LGPL 2.1
- TensorFlow.js: Apache 2.0
- Teachable Machine: Apache 2.0
Created something amazing with these templates? We'd love to see it! These templates have been used to create:
- Interactive museum installations
- Accessible computer interfaces
- AI-powered fitness apps
- Creative coding workshops
- Student research projects
Studio Poetics is dedicated to making AI and creative technology accessible through rapid prototyping and hands-on learning. These templates are designed to get you from idea to working prototype as quickly as possible.
- Quick Prototype: Get ideas working fast, iterate rapidly
- Learning First: Every template is educational and well-documented
- Creative Focus: Technology serves creativity, not the other way around
- Open Access: Knowledge should be freely shared and accessible
- Explore more creative coding templates and tutorials
- Join our community of creative technologists
- Share your projects and get feedback
- Learn about emerging AI tools and techniques
Happy coding! 🎉
Studio Poetics - Where Poetry Meets Technology
Remember: The best way to learn is by experimenting. Don't be afraid to break things, try new ideas, and push the boundaries of what's possible with AI and creative coding.