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.


How is this different?

There’s no better way to master JavaScript programming than with a rich, interesting and challenging project. WickedlySmart projects are design to just that, challenge you and integrate all your skills. Here’s what you can expect.

Project-based Learning

Deep understanding requires the integration of all your knowledge; projects that take you through design and implementation are your path to exercising and stretching all those areas of knowledge.

Real World

Tired of building code snippets and toy programs? We are too. With Projects, you’ll build real applications that deliver real functionality.


Real world development isn’t limited to writing some code. Real projects require design, styling, user interaction, and network services (to name just a few).

Engaging Work

Your brain hates boring work, and mind-numbing exercises about foo and bar don’t help. We’ve spent a lot of time creating interesting, challenging projects that engage your mind.

Expert Paths

Experts don’t do the expected; they take short cuts. They don’t go by the book; they use the resources at hand. We’ll show you how.



Developers don’t code in a vacuum; they share ideas, they ask questions, and, most important, they learn by watching.


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.


Where did this come from?

After a decade of writing brain-friendly books for O’Reilly and the Head First series, Eric and Elisabeth created WickedlySmart Projects to give readers a way to integrate their book-knowledge in a project-based setting.

Eric Freeman, Ph.D.

Eric Freeman, Ph.D.

Founder, WickedlySmart

Eric Freeman, a computer scientist by training, and currently technology educator and former media company CTO (Disney), says “I had a blast building this course; where else do you get to play with music and build cool interfaces while learning to code?” Eric lives in Austin, Texas and holds a Ph.D. from Yale University.

Elisabeth Robson

Elisabeth Robson

Founder, WickedlySmart

Elisabeth Robson is the co-author of several Head First books, including Head First Design Patterns, and is a principal at WickedlySmart, an online learning company for software developers. Elisabeth says “I love the application we built for this project and use it to create and play music while I’m working during the day.”

Thanks to WickedlySmart, I now have my own version of the popular Game of Life.

Josh Campbell ‏

Eric sits at the intersection of creativity and technology.

Aaron LaBerge


Freeman and Robson continue to use innovative teaching methods for communicating complex concepts to basic principles.

Mark Arana

Walt Disney Studios

Freeman’s powerful story telling and technical savvy have driven his books to a dominant position in their market.

Tim O'Reilly

CEO, O'Reilly Media

Eric Freeman’s one of those rare individuals fluent in the language, practice, and culture of multiple domains from hipster hacker, corporate VP, engineer, think tank.

Kathy Sierra

Creator, Head First series, and EFF 2015 Pioneer Award Winner

Gets my brain going without having to slog through a bunch of tired stale professor-speak.

Travis Kalanick

CEO, Uber


Got questions?

We’ve collected common questions below. Feel free to reach out to us with additional questions.

What is your Guarantee?

At WickedlySmart we pride ourselves on your satisfaction. That’s why we back all of our programs with a 100% 60 day Money-Back guarantee. If you enroll in one of our courses and we have not met your expectations, kindly send us an email. We will ask that you show us you gave it your best and how we can be better. Then, we will immediately process your refund.

Is this a downloadable course?

No this is an online course; you will need internet connectivity to access it. After you pay for the program, all content and course material will be available online to you for as long as we support this course.

I can't afford this, what do I do?

WickedlySmart Projects are comparable in price to other educational products (if not significantly cheaper). That said, if cost is truly an issue for you, we do offer need-based assistance, so please send us a note.

Is this better than learning from a book?

WickedlySmart Projects aren’t meant to replace books; they’re meant to help you solidify your learning (from books or other resources). They’re designed to help you integrate all your skills in building a real (or as close as we can get to it in an online learning environment) application. To do that we cover things most straight technology books don’t—the thought process behind our design decisions, how to use a variety of technologies together, how to use APIs, how to find and overcome bugs, and all with engaging applications that go beyond the standard “todo list” type of examples.

Do you require any kind of special development environment?

No, any modern browser and text editor (or your favorite IDE) will do.

Pin It on Pinterest

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.