Week 1 Introduction

• Class Overview
• Project Options
  • Options for different types of projects we’ll work on this semester
• Glitch Intro
  • We’re using Glitch this semester, here’s a quick overview of the editor
  • Glitch.com
• Terminal and Git Basics
• JavaScript Syntax Review

Week 2 Project 1

• Our first project will be a three.js scene
  • three.js is a 3d rendering library for JavaScript
  • We’ll go over the basics of setting up a project, using the editor and creating an interactive scene
• three.js Intro
  • This is an overview of the library and some basics for setting up a project
• Getting Started with three.js
  • This video goes through the Getting Started: Creating a Scene tutorial
• three.js Scene
  • This video goes over adding controls and more objects to a three.js scene
  • Also review random and loops

Week 3

• Lighting, Materials and Textures (Part 2)
• Part 2
• three.js Editor
• Submitting on Open Lab
• Assignment 1: three.js Scene
  • Create a scene using three.js with the Glitch editor
  • The scene should have 3d objects, a camera, lighting and materials
  • The scene should have a cohesive design and theme

Week 4

• Shader example (Adding Sky Shader)
• Loading External Models
• Groups

Week 5

• Controls
• Raycasting
• Assignment 2: Three.js Maze Scene
  • Create a “maze” in three.js
  • User can navigate around the scene with basic controls
  • Use scenery and objects to direct the user through the scene

Week 6 Project 2

• New Project! We will do 2 assignments, one on interactive sound, one on generative sound
• Trying a new Online IDE! Replit
  • Replit overview
• JavaScript objects
  • JavaScript Objects Video
• Intro to Tone.js
  • Creating synths
  • Tone Intro 1
  • Tone Intro 2
  • Adding user interaction

Week 7

• Adding visuals
• Effects
• Assignment 3: Interactive sounds
  • Create a site that allows a user to trigger sounds using their keyboard
  • Add visuals to correspond with sounds

Week 8

• Sequencing
• Rhythm and Melody

Week 9

• Harmony
• Generative sound
• Assignment 4: Generative sound
  • Create site using Tone.js that generates sound
  • Use synth or sampler and Tone.Loop or another sequencer
  • Parameters should change the output of the sequence on each play

Week 10 Project 3

• Web app/interactive story
• This project will combine elements of building a web app in JavaScript with creating an interactive story
• JavaScript Events and Input
• JavaScript Objects and Arrays

Week 11

• JavaScript and Document Object Model
• JavaScript and CSS

Week 12

• JavaScript data
• Assignment 5: Web app (interactive story)
  • Using JavaScript, HTML and CSS, create an interactive story
  • Page should record user input
  • User has choices to go to different branches of story

Week 13

• Final project pitch
  • Create an Open Lab post with a pitch for your final project
  • Identify the type of project you want to work on, something based on one of our previous projects, or a new concept
    • A website using three.js and 3d rendering
    • A website using Tone.js and web audio
    • A website application/interactive story using JavaScript
    • A website using interaction and JavaScript
  • Describe the user interaction
    • How does the user interact with the website?
    • What is the expected experience of the site?
  • Describe the visuals and/or media
    • Using screen shots, mock ups, or text, describe what the site will look like
    • Will the site use images, rendered graphics, text, audio or other media?

Week 14 - 15

• Final project workshop
• Final project requirements
  • Must be a website created with HTML, CSS and JavaScript
  • JavaScript libraries (like Three.js, Tone.js, p5.js, etc) can be used but are not required
  • The site must be published online, and the code must be available for review through a web based platform, such as Replit, Glitch or another web IDE
  • Must have user interaction
    • The user should be able to control the interface using a keyboard and mouse or other input
  • Documentation
    • Open Lab post with a link to the project and code
    • Multiple screen shots of the site and descriptions of the project