Interactive Sound and Visuals: A Tone.js and p5.js Beginner's Guide

Membership plan: Getting Started | Topics: Creative Coding

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.

What you'll learn

  • Create interactive audiovisual projects using p5.js and Tone.js
  • 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

Course content

  • 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
  • Quiz! validate your learning in 10 questions


  • A free CodePen account
  • Basic understanding of text-based programming

Course schedule


Useful links

CodePen   |   Tone.js repository on GitHub   |   p5.js

Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x