Audio Reactive Visuals with Code

Name: Audio Reactive Visuals with Code
Author: Yannis Yannakopoulos

By Yannis Yannakopoulos

Language: English
Certificate: of completion
Subtitles: English, Spanish, French, Italian, Portuguese (Machine translation)
Duration: 3 Hours 20 Mins

Now

9.99$

/$100

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

Chapters

Duration
Lesson 1

Intro

1

03:02 Mins

View more
- Course introduction
  
  03:02 Mins
Lesson 2

Drawing on the canvas

5

26:38 Mins

View more
- Introduction to p5.js
  
  03:03 Mins
- Hello canvas
  
  06:31 Mins
- Basic shapes
  
  03:46 Mins
- Color
  
  05:56 Mins
- Interactions
  
  07:22 Mins
Lesson 3

Sound Analysis

5

44:18 Mins

View more
- Introduction to Sound Analysis
  
  01:01 Mins
- Amplitude & Waveform
  
  09:00 Mins
- Fast Fourier Transform
  
  07:28 Mins
- Beat Detection
  
  14:53 Mins
- First Sketch
  
  11:56 Mins
Lesson 4

WebGL & Shaders

7

1 Hour 50 Mins

View more
- Introduction to Shaders
  
  11:18 Mins
- Distorting Shapes with Audio frequencies - Sketch 1
  
  17:14 Mins
- Distorting Shapes with Audio frequencies - Sketch 2
  
  14:17 Mins
- Distorting Shapes with Audio frequencies - Sketch 3
  
  03:27 Mins
- Audio-based image effects
  
  21:03 Mins
- Different inputs (WebCamera, Microphone)
  
  05:57 mins
- Controlling visuals in real time (MIDI controller, keyboard/mouse )
  
  17:15 Mins
Lesson 5

Outro

1

15:49 Mins

View more
- Inspiration
  
  15:49 Mins

Meet the teacher

Yannis Yannakopoulos

Freelance Developer

Yannis Yannakopoulos

Sofia Papadopoulou

The Blimp!

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.

Now