New season, New skills! All Courses at $9.99

Audio Reactive Visuals with Code

  • 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
  • Lesson 1
    Intro
    • Course introduction
  • Lesson 2
    Drawing on the canvas
    • Introduction to p5.js
    • Hello canvas
    • Basic shapes
    • Color
    • Interactions
  • Lesson 3
    Sound Analysis
    • Introduction to Sound Analysis
    • Amplitude & Waveform
    • Fast Fourier Transform
    • Beat Detection
    • First Sketch
  • Lesson 4
    WebGL & 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 5
    Outro
    • Inspiration

Meet the teacher

Yannis Yannakopoulos

Freelance Developer

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
9.99$
/$100

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

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses