Wickedly Smart Project #2 A Generative Music Box in the style of Eno’s Bloom | WickedlySmart

Tired of learning JavaScript with the same boring, todo-list kind of examples?

Master HTML, CSS and JavaScript through WickedlySmart Projects instead.

There’s no better way to master JavaScript programming than with a rich, interesting and challenging project, and boy do we have one for you: creating a beautiful ambient music generator. What’s that? Check out the tour below!

Take a Tour


What do I need to know?

This project is all about integrating those client-side technology skills. We’ll teach you all the extras you need to know, so make sure you’ve got the prerequisites covered:


Otherwise known as HyperText Markup Language. You’ll need basic knowledge of HTML.


JavaScript, the behavior side of the browser. You’ll need to know the JavaScript fundamentals: variables, statements, iteration, functions, and objects.

Events and Timers

A little knowledge of handing events and timers in JavaScript is helpful, but we’ll teach you how to use them.


No knowledge of Cascading Style Sheets is needed for this project.

Canvas Element

Experience programming the canvas in JavaScript is helpful, but we’ll teach you how in case you haven’t used the canvas before.

Generative Algorithms

Absolutely no knowledge of generative algorithms or music is needed. We’ll teach you everything you need to know.


A Generative Music Box

In this project we take inspiration from Brian Eno and Peter Chilvers’ Bloom application and create a single page app, using HTML, CSS and JavaScript, that allows you to create generative, ambient music. With a small amount of code we’re going to handle your mouse clicks, use the canvas for graphics, and leverage the Web Audio API to create sound. We’re also going to spend a lot of time on scheduling events in time and organizing your code.

The Generative Music Box application is a simple interactive music generator that lets you play beautiful ambient music. It’s perfect for a project because it includes user interaction, programming a display, understanding timing and events, and has several modular parts you can use to learn best practices for structuring your code. Here’s what you’ll be doing in this project:

  • The interface is built entirely in the HTML5 canvas element so you’ll learn canvas basics as you go through the project.
  • You’ll use simple pre-defined audio clips (which we’ll give you) to load into the game to generate sound.
  • You’ll learn how to organize your code into modular components to stay organized.
  • The simple algorithm of the application lets you generate beautiful musical compositions you’ll want to listen to all day.

The graphical interface of the application; we’ll explain how to use the canvas element to program the interface in the project course.


Take a look behind the scenes

Don’t take our word for it. Take a tour of WickedlySmart Projects in living color. This short video will give you a taste of what you’ll be building in this WickedlySmart Project.


How do I get it?

Join over 3,000 other developers who have already taken their skills to the next level (and had a lot of fun doing it).

  • 38 individual lessons and exercises.
  • Over an hour of video content.
  • Working code you can take with you.
  • You’ll create a real application that delivers real functionality.
  • You’ll work across design, user interaction, coding, and testing.
  • Expect your mind to be engaged.
  • Experience how an expert approaches coding real projects.


We’ve created some additional activities for you–everything you need to know to take this project further including a fun new shape you can use in the Music Box.

Give your Brain a Treat!

Don't miss out on brain-friendly updates, new WickedlySmart Projects, early access to books and general cool stuff! Just give us your email and we'll send you something about once a week. Don't worry, we'll never sell your name and you can remove yourself at any time.

Check your email to confirm your subscription.

Pin It on Pinterest