Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
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
IT & Software Other IT & Software JavaScript

Generative Music Box Project

Build a generative app in the browser with JavaScript
Rating: 4.2 out of 54.2 (23 ratings)
600 students
Created by Elisabeth Robson, Eric Freeman
Last updated 1/2020
English
English [Auto]
30-Day Money-Back Guarantee

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

6 sections • 55 lectures • 1h 47m total length

  • Preview01:38
  • Preview01:42
  • Prerequisites and tools
    01:38
  • Preview01:38
  • The Game Plan: Overview
    01:58
  • Preview02:34
  • Audience Question
    00:54
  • Code the markup with HTML
    00:42
  • Code the style with CSS
    00:16

  • Preview01:59
  • Code design
    01:18
  • Get set up
    00:22
  • Preview05:22
  • Create the View
    02:56
  • Crash test the canvas
    00:52
  • 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

  • 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
  • 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
  • Fix the bug
    01:50

  • 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
  • Crash test the circles
    01:15
  • Audience Question
    01:22
  • Take a break
    00:15
  • How to animate the circles
    05:04
  • Code to animate the circles
    01:11
  • Crash test the animation
    00:59
  • Repeat the animation
    02:50
  • Crash test the repeating circles
    01:02
  • Audience Question
    01:05

  • 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
  • The Final Test
    02:05
  • All the code
    00:11

  • Going further
    01:04
  • BONUS: Update your Music Box app with the latest ES6 JavaScript features
    12:51
  • Bonuses
    00:14

Instructors

Elisabeth Robson
Co-founder and Principal at WickedlySmart
Elisabeth Robson
  • 4.5 Instructor Rating
  • 173 Reviews
  • 1,812 Students
  • 6 Courses

Elisabeth Robson is a co-founder and principal at WickedlySmart, an author, and software developer, and teaches online courses for for O'Reilly Media and LinkedIn Learning. She's the co-author of four best-selling titles--Head First JavaScript Programming, Head First Design Patterns, Head First HTML & CSS, and Head First HTML5 Programming--and previously the Director of Special Projects and co-director of the Head First series at O'Reilly Media. Prior to her work at O'Reilly Media, Elisabeth was Director of Engineering at The Walt Disney Company. Elisabeth holds a Master's Degree in Computer Science from Yale University. 

Eric Freeman
Computer Scientist
Eric Freeman
  • 4.2 Instructor Rating
  • 121 Reviews
  • 1,587 Students
  • 2 Courses

Eric is described by Head First series co-creator Kathy Sierra as "one of those rare individuals fluent in the language, practice, and culture of multiple domains from hipster hacker, corporate VP, engineer, think tank." Professionally, Eric recently ended nearly a decade as a media company executive-having held the position of CTO of Disney Online at The Walt Disney Company. Eric now devotes his time to writing and teaching software technology. His book Head First Design Patterns is considered an indispensable guide for object-oriented programmers and won the Jolt award for technical excellence.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.