256a-fall-2024/hw3

Homework #3: Interactive AudioVisual Music Sequencer

NOTE: this image is here mostly for its colors, PLEASE DON'T (NECESSARILY) MAKE IT LOOK LIKE THIS!

timeline:

• HW3 milestone A (research + sketches), create hw3 webpage with 3 design sketches. (Due: 10/25 Friday 11:59PM)
• HW3 milestone B (demo/something working), be prepared to present in-class. (Due: 10/30 Wednesday 11:59PM)
• HW3 final presentation (demo/polished playable prototype), be prepared to present in-class (Due: 11/11 Monday 11:59PM)

Almost inevitably at some point in one's music software design journey, you'll be asked/tempted to make a step sequencer. In this assignment, we are going to get that off our chest/out of our system, and make a real-time, audio-visual software, driven by some kind of music sequencer!

Milestone A: Research + Preliminary Design (Due: 10/25 Friday)

• deliverables: create webpage + comment on your sequencer research + sketch 3 different designs
• do research on music sequencers!
• compile a list of useful references on various types of music sequencers / designs (articles, papers, images, etc.)
• sketch your own preliminary designs of a real-time audio-visual sequencer! make 3 different designs, maximally different from each other.
• what features to include?
  • what does it look like? linear? circular? spherical? mobius?!? a game? a galaxy?? a ???
  • sequencing of pitch? dynamics (loundness)? envelopes (attack/decay/sustain/release)?
  • how many parallel tracks / layers / or different types of sound? (e.g., track 1 synth, track 2 drum etc)
  • how do we input the sequence (in real-time)?
  • how does it sound? will it use synthesis? load audio samples?
  • can you save/load sequences? what file format?
  • how to control/depict tempo?
• sketch as much as detail as possible, even if you don't end implementing most of them!
• hand in scans/images of your paper designs (scans/images of these design sketches can go onto your website for this project)
• ChuGL examples: https://chuck.stanford.edu/chugl/examples/sequencers/
  • This project is more open-ended than the visualizers (Examples above are less like boilerplates. Please start from a blank file).

Milestone B: Something Working (Due 10/30 Wednesday)

• deliverable: update webpage, including a 1 minute video demo
• have something working in software, towards your core idea/aesthetics!
• decide on a design + set of features for a real-time audio-visual sequencer; the design decisions should account for the questions raised in part 1 above!
• using ChuGL, implement a working prototype of your music sequencer (NOTE real-time audio + graphics in the same language is where ChuGL offers its greatest advantage)
• potential things to sequence:
  • pitch
  • dynamics
  • different timbres / instruments
  • envelopes
• requirements / high-level functional aesthetic goals
  • must be graphical
  • must be interactive
  • must be musical
  • should be flexible in usability
  • should support some narrative complexity
  • should feel satisfying to use
• "hints"
  • think of user/interaction design **and** software/system design
  • create an audio engine, as well as a graphics engine; how do they interact?
  • having a "grid" can be very useful (but not strictly necessary)!

Final Presentation "Playable Prototype" (Due: 11/11 Monday)

deliverables: a polished HW3 website containing:

• aim for a (semi-)polished playable prototype
• 1) a name and description of your sequencer
• 2) a few screenshots that capture your sequencer in action
• 3) a polished resolution video demo (1-3 minutes, with audio) of your sequencer, including a "mini-performance" of your musical statement
  • upload to YouTube or Vimeo (or CCRMA) and embed the video from your webpage
• 4) instructions on using you sequencer
• 5) you code and all necessary assets
• 7) a final short text section that conveys:
  • your ideas/inspirations in designing your sequencer
  • any comments you want to share (difficulties and what you enjoyed) on this project (How did you feel as a designer?)
  • system design: how is your software architected? we recommend a class diagram.
  • acknowledgements for collaboration/help received(and any assets/libraries you've used)
• 8) upload the website URL to Canvas

Note

• As always, have fun with it, make the user feel something, make it satisfying.
• you are welcome to work together, but you must do your own work
• comment your code!