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
Course template / hosted architecture draft
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.
Requirements
- • A free CodePen account
- • Basic understanding of text-based programming
Course content
Interactive sound and visuals with Tone.js and p5.js
Introduction · Using CodePen for rapid development · Step 1: Create and display circles on a blank canvas
+
Interactive sound and visuals with Tone.js and p5.js
Introduction · Using CodePen for rapid development · Step 1: Create and display circles on a blank canvas
Session materials
Introduction
Open resourceUsing CodePen for rapid development
Open resourceStep 1: Create and display circles on a blank canvas
Open resourceStep 2: Adding sound with Tone.js
Open resourceStep 3: Adding Effects with Tone.js
Open resourceStep 4: Adding Motion and Collision Detection
Open resourceStep 5: Add controls, a pause button and more
Open resourceStep 6: Add control for redrawing
Open resourceStep 7: Adding Image Uploader and Color Picker
Open resourceQuiz! validate your learning in 10 questions
Open resourceInstructors
Jean-Baptiste Thiebaut
Instructor bio will be shown here once available.