Audio Reactive Visuals with Code
- Language: English
- Certificate: of completion
- Subtitles: English, Spanish, French, Italian, Portuguese (Machine translation)
- Duration: 3 Hours 20 Mins
Sound can dictate a new Visual Language. In this case the browser is the canvas and in this course you will learn how to use sound to draw onto that canvas, with code.
| Category | Course format | Language | Duration | Level |
|---|---|---|---|---|
| Animation, Code | Online | English with Subt. | 3 Hours 20 Mins | Beginners & Intermediate This course is addressed to any creative individual who's interested in creative coding and/or audio-reactive visuals. |
Requirements
For beginners & intermediate, this course is addressed to any creative individual who's interested in creative coding and/or audio-reactive visuals. You will just need a code editor, a browser and some basic HTML & Javascript knowledge.
Description
We’ll start from the ground up and set the basis for creating audiovisual art with Javascript & GLSL.
You’ll learn how to analyse sound in realtime and how to use that analysis, to control moving graphics. We'll start simple by learning how to draw basic shapes in the canvas and we'll gradually move on to more complex subjects, like WebGL & Shaders.
By the end of this course, you will be able to create audio-reactive artworks in the browser, but most importantly you will be able to use code, as a tool for personal expression.
You will learn
- p5.js & GLSL fundamentals
- Sound analysis
- How to create Audio based & WebGL powered image effects
- How to control your sketches in real time, with a MIDI controller.
The course includes
- 19 videos, 3hrs and 20mins long
- Course Notes with useful links & inspiration resources
- Source Files: HTML, CSS, JS, GLSL
- Certificate of completion
Modules
What you will learn
in this course.
-
Lessons
-
Lesson 1Intro
-
Course introduction
-
-
Lesson 2Drawing on the canvas
-
Introduction to p5.js
-
Hello canvas
-
Basic shapes
-
Color
-
Interactions
-
-
Lesson 3Sound Analysis
-
Introduction to Sound Analysis
-
Amplitude & Waveform
-
Fast Fourier Transform
-
Beat Detection
-
First Sketch
-
-
Lesson 4WebGL & Shaders
-
Introduction to Shaders
-
Distorting Shapes with Audio frequencies - Sketch 1
-
Distorting Shapes with Audio frequencies - Sketch 2
-
Distorting Shapes with Audio frequencies - Sketch 3
-
Audio-based image effects
-
Different inputs (WebCamera, Microphone)
-
Controlling visuals in real time (MIDI controller, keyboard/mouse )
-
-
Lesson 5Outro
-
Inspiration
-
Meet the teacher
Yannis Yannakopoulos
Yannis is an Independent Developer based in Athens, Greece. Interested in the relation between sound & image, he creates audiovisual projects, in the browser, with code.
Course Content
Sound can dictate a new Visual Language. In this case the browser is the canvas and in this course you will learn how to use sound to draw onto that canvas, with code.
Features
- English
- English, Spanish, French, Italian, Portuguese (Machine translation)
- Beginners & Intermediate This course is addressed to any creative individual who's interested in creative coding and/or audio-reactive visuals.
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Yannis Yannakopoulos
Teacher at awwwards.com
If you have any questions about this course, please contact us
