Generative Music Box Project
4.9 (20 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
584 students enrolled

Generative Music Box Project

Build a generative app in the browser with JavaScript
4.9 (20 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
584 students enrolled
Last updated 1/2020
English
English [Auto]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1 hour on-demand video
  • 30 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • JavaScript
Requirements
  • Basic HTML, CSS, and JavaScript programming skills
Description

Welcome to Build a Generative Music Box. In this project we take inspiration from Brian Eno and Peter Chilvers’ Bloom application. You'll build a web application, using JavaScript, that allows you to create generative, ambient music. With a small amount of code you'll handle your mouse clicks, use the canvas for the user interface and graphics, and leverage the Web Audio API to create sound. You'll also spend a lot of time on scheduling events in time and organizing your code. This project is a great way for you to practice programming in JavaScript by creating an interactive and dynamic application right in your browser.

Who this course is for:
  • Beginner to intermediate web developers
Course content
Expand all 55 lectures 01:47:55
+ Generative Music Box Project
9 lectures 13:02

Welcome to Build a Generative Music Box. In this project we take inspiration from Brian Eno and Peter Chilvers’ Bloom application. You'll build a web application, using JavaScript, that allows you to create generative, ambient music. With a small amount of code you'll handle your mouse clicks, use the canvas for the user interface and graphics, and leverage the Web Audio API to create sound. You'll also spend a lot of time on scheduling events in time and organizing your code. This project is a great way for you to practice programming in JavaScript by creating an interactive and dynamic application right in your browser.

Watch the Guide to the Project video to get an overview about the project and how to navigate through the project and what to expect.

Preview 01:38

The first section is all about getting set up to build the Music Box application: making sure you have everything you need, and getting the HTML and the CSS out of the way (both are minimal; we’ll be doing most of the programming in the <canvas> element and the interface is all created using JavaScript).

After watching the video, go to the next lesson, where we’ll make sure you have all the prerequisites for the project.

Preview 01:42
Prerequisites and tools
01:38

Before we dig in, have a look at the video for this lesson.

Notice some of the interesting things about how this app works:

  • Wherever you click on the canvas, a dot slowly expands into an increasingly large circle and then fades.

  • The animated circle replays, over and over, with a short period of time between each replay.

  • When you click, a sound is generated.

  • Every time the animated circle reappears the sound is replayed.

Given this behavior, how would you implement such an app? How would you write code to generate the circles? How would you write code to replay the circles and sounds over and over?

Think about the technologies you have at hand (the browser with HTML, CSS and JavaScript), make some notes, and then proceed. Don't worry about the details of how to play the sound; we'll deal with that later.

Preview 01:38
The Game Plan: Overview
01:58
Audience Question
00:54
Code the markup with HTML
00:42
Code the style with CSS
00:16
+ The Canvas
9 lectures 19:08
Code design
01:18
Get set up
00:22

If you haven’t worked with the canvas before, we need to cover the basics before you go any further. If you’ve read Chapter 7 of Head First HTML5 Programming, or you’ve had prior experience working with the <canvas> element, feel free to skip over this section and move on to the next one. But if you’re new to canvas, we recommend watching the video in this lesson before the next coding step, so you know what's going on.

Preview 05:22

You've learned the basics about canvas, so now it's time to write some code. Watch the video for this lesson first. Then, create a new file, "View.js" and get the code added to the file.

Create the View
02:56
Crash test the canvas
00:52

Unfortunately, there's no handy built-in drawCircle function in JavaScript that will draw a circle on a canvas. So we're going to write that function ourselves. Watch the video for this lesson to follow along as we write the drawCircle function.

How to draw a circle on the canvas
05:02
Add a circle to the canvas
00:57
Crash test getting a circle on the canvas
00:19
+ Handling Clicks
9 lectures 14:46

You know how to draw a circle on the canvas, so now, we’ll add a click handler function on the canvas, so we can draw a circle every time you click.

Introduction
01:37
Handle clicks on the canvas: Overview
01:14
Handle clicks on the canvas
03:48
Add a click handler to the canvas
00:40

Let's test the click handler. Now we should be able to click on the canvas and see a message in the console that we've added a circle, although remember, we won't actually see the circle just yet.

Watch the video...

Something's wrong! We're not seeing the message to add a circle, and you are probably seeing an error message like this:

Uncaught TypeError: Cannot read property 'push' of undefined

So what went wrong?

Crash test the click handler
00:54
Overheard on the forum
00:59
Uh oh, a bug!: Overview
01:36
Uh oh, a bug!
02:07

It's a quick and easy fix to make sure that this is set to the view object in handleClick. All we have to do is use bind to create a new function with this set to view, like we do in the bugfix code.

Make this change in "View.js", and reload the "musicbox.html" page in your browser. Now you should be able to click on the canvas and see the correct console message.

Fix the bug
01:50
+ The View
14 lectures 25:30

We know how to handle clicks on the View to create circles at a specific location on the canvas; now we need to actually draw the circles on the canvas each time we update the view.

Watch the video to get an introduction to this module, and then dive right in to the design.

Introduction
01:32
A little design: Watch the behavior in the finished design
01:38
A little design
01:30
Draw the circles on the canvas: Overview
01:30
Draw the circles on the canvas
04:15

Let's test the code. If it all works, you should see a new circle added to the canvas each time you click. Follow along in the video and test your own code.

Crash test the circles
01:15
Audience Question
01:22
Take a break
00:15

We have the code in place to draw the circles, and now we're going to work on getting them to animate. Watch the video, and follow along as we add some code to do the animation.

We set up the code to call updateDisplay 33 times per second (specified by the frameRate property in the View), so we can animate the size of the circle by changing the circle's radius each time we draw it so it looks a little bigger each time.

When the circle gets to a certain size, we'll fade it by modifying the opacity of the circle. We can do that by changing the alpha value of the circle when we draw it with drawCircle.

Finally, when the circle reaches its maximum allowed size, we'll stop drawing it when updateDisplay is called---that is, we'll skip over the circle, so it will disappear. Of course, we'll need to make it reappear at some point, so we'll take care of that too.

How to animate the circles
05:04
Code to animate the circles
01:11

Follow along with the video as we test the code.

The circles are animating---that is, they are growing from 0 to their maximum size, and then disappearing, and you can see that towards the end of the growth, they change in opacity. So our code is working great.

But right now, the circles are only animating once. So our next step is to repeat the animation so the circles reappear and grow again, over and over.

Crash test the animation
00:59

To make the circle animations repeat, we need to reset each circle's radius back to 0 at some point after it reaches the maximum radius. There are a few options for how to do this; the way we're going to do it is to set a timer when we first create a circle. This timer will call a function to reset the circle's radius back to 0 after a certain period of time has passed.

Follow along with the video as we write this code.

After watching the video, get the new code added and then we'll test it, and hopefully we'll see our circles repeating the animation, growing to a maximum size, disappearing, and then repeating.

Repeat the animation
02:50

Here's our test; how is yours looking? Is it working like you expected?

Try playing around with the loopRate. If you make it too short, the circles won't animate correctly. Too long and it won't feel right. See what timing works for you. Remember that loopRate is milliseconds so just multiply the number of seconds you want by 1000.

We have our circles animating beautifully, so the next step is to add the sound. Move on to the next lesson!

Crash test the repeating circles
01:02
Audience Question
01:05
+ The Audio
11 lectures 21:18

The circles for our Music Box project are working great and the View is done, so now it's time to add the audio and give the application a final test. Watch the video to get introduced to this module.

Introduction
02:10
Game plan for audio
01:31
Get a Web Server Running
02:59
Prebaked goodness: audio.js
02:08
Prebaked goodness: bufferloader.js
03:02
Prebaked goodness: musicbox.js
01:38
Play audio with each circle: Overview
01:38
Play audio with each circle
03:18
The Final Test: Overview
00:34

Hopefully your music box is working, and you're hearing sounds as you click to add circles. Have fun, play around with the music box. It can be quite addicting!

The Final Test
02:05
All the code
00:11
+ Extras
3 lectures 14:10
Going further
01:04

In this video, you'll see how you can update your Generative Music Box app with ECMAScript features, including classes, modules, let, const and arrow functions. If you need to learn about those features, check out our series on youtube: Learn JavaScript's Newest Features. Then head back here to update your code.

BONUS: Update your Music Box app with the latest ES6 JavaScript features
12:51
Bonuses
00:14