Creative Coding
Interactive Sound and Visuals: A Tone.js and p5.js Beginner's Guide
Explore the world of interactive audiovisual projects with this beginner-friendly course. Master p5.js and Tone.js to create stunning visuals and immersive audio experiences for art, design, and music enthusiasts.
Course overview
Learn how to design and build dynamic, interactive audiovisual experiences by combining the power of the p5.js library for graphics and animation with the Tone.js library for music and sound synthesis.
Note: this course course contains step-by-step interactive programs that will help you understand the steps to build your own interactive audiovisual program with p5.js and Tone.js.
Learning outcomes
Implement collision-based soundscapes with user interactions
Use audio effects and synthesis in Tone.js
Develop user interfaces for visual and audio customisation
Who is this course for?
- • Beginners with some programming experience
- • Artists interested in creative coding and sound design
- • Designers exploring interactive media for the Web
- • Educators seeking to incorporate interactive audio elements
Requirements
- • A free CodePen account
- • Basic understanding of text-based programming
Course content
Interactive sound and visuals with Tone.js and p5.js
11 lessons
+
Interactive sound and visuals with Tone.js and p5.js
11 lessons
- Introduction
- Using CodePen for rapid development
- Step 1: Create and display circles on a blank canvas
- Step 2: Adding sound with Tone.js
- Step 3: Adding Effects with Tone.js
- Step 4: Adding Motion and Collision Detection
- Step 5: Add controls, a pause button and more
- Step 6: Add control for redrawing
- Step 7: Adding Image Uploader and Color Picker
- Step 8: Fixing Performance Issues
- Quiz! validate your learning in 10 questions
Instructors
