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
Requirements
- A free CodePen account
- Basic understanding of text-based programming
Course schedule
Create a free account to access this course
{{ error }}
{{ success }}
OR
Buy this course and own it forever
£ 20 Add to cartUseful links
CodePen  |  Tone.js repository on GitHub  |  p5.js
Subscribe
Login
Oldest