charlie roberts charlieroberts

Start of class:

Quiz #4

Design Patterns

First, what is a design pattern?
- Original idea came from architect Christopher Alexander, who described a a series of patterns used in architecture and civic planning in his book "A Pattern Language" (https://www.amazon.com/Pattern-Language-Buildings-Construction-Environmental/dp/0195019199/) http://www.iwritewordsgood.com/apl/set.htm

IGM-531/790: browserify and modularizing code

There are a variety of systems for modularizing JS code, and a huge number of libraries have been created over the users for this. The simplest method is to check for the existence of a global object (we’ve used app for this previously) and place our code into this object. If it doesn’t exist, create it first. For example:

if( typeof window.app === 'undefined' ) window.app = {}

window.app.mymodule = {
  foo:1,
  bar() { console.log( this.foo ) }
}

Ray marching, glslify, and signed-distance functions

Show examples

ray marched bug
First basic red sphere
Final repeated, warped sphere

How does ray marching work?

for every pixel, start a ray from an origin, through the camera view plane, until it hits something
draw?

SDF part II

Begin with what we did last class: sdf.glslify.notes.md · GitHub

… but ignore the perlin noise so that we just have a sphere on the screen.

Simple translation

How do we move a primitive around the screen? We can do this by applying an offset to the current point being sampled by our raytracer. Remember that this point is passed to our doModel function in our shader. Our typical doModel for rendering a sphere is as follows:

vec2 doModel( vec3 p ) {

Show SDF stuff

https://www.youtube.com/watch?v=s8nFqwOho-s http://mercury.sexy/hg_sdf/

1902 Thaddeus Cahill - Teleharmonium

first synthetic instrument
- additive synthesis, like the Hammond organ (b3)
- transmitted music over phone lines
  - early Musak
Mark I: 7 Tons

# PLOrk gibberwocky workshop 4/12/2018

Some important not-very-well documented aspects of gibberwocky

This section will mainly focus on writing custom patterns and pattern transformations, which should enable you, with a bit of time and programming knowledge to create any type of generative music system your heart desires in gibberwocky.

A sequence consists of a pattern for output and a pattern for scheduling (“values” and “timings”). Each pattern is just a function that returns a value.

When you pass arrays or special objects to any call to .seq, this objects are wrapped in functions. For example, consider the following sequence:

namespace('test').seq( [0,1,2,3], 1 )

The first array of numbers (0,1,2,3) is converted to a function that outputs each value, one at a time, progressing linearly and looping when it reaches the end of the arrray. The second argument to .seq is converted to a function that always outputs the same value, in this case 1.

A JS audio ecosystem

Interested in both browser-based audio and in per-sample processing techniques

• the web audio api (WAAPI) only provides block-based nodes, with the exception of the ScriptProcessor node and the AudioWorklet. 
• This precludes lots of important synthesis techniques (feedback, hard sync, audio rate modulation of scheduling etc.)
• The ScriptProcessor and the AudioWorklet let you write sample-level processing using JavaScript. How can we write DSP in a dynamic language like JavaScript that is efficient enough to explore such techniques?

Three libraries:

• genish.js: A collection of DSP helpers for dealing with phase, buffers, math operations, and control flow. Optimized for efficiency by avoiding branching, closures, and inheritance, and by only using a single block of memory. Loosely based on Gen for Max_MSP_Jitter. 
• gibberish.js: Synths, effects, and sequencing using functions created with genish.js. 
• gibber.audio.lib: Rapid development and live coding using synths and

	/* **** low-frequency modulation (vibrato) ****
	This example shows how to use a second oscillator to
	modulate the frequency of a oscillator over time. */

	ctx = new AudioContext()

	// create our primary oscillator, called the "carrier"
	// in frequency modulation terminology (from radio)
	carrier = ctx.createOscillator()
	carrier.type = 'square'

	window.onload = function() {
	const gui = new dat.GUI()

	const ctx = new AudioContext()

	const delayLine = ctx.createDelay()
	delayLine.delayTime.value = .25

	const delayGain = ctx.createGain()
	delayGain.gain.value = .65

	// import libraries installed via NPM
	var gulp = require('gulp'),
	rename = require('gulp-rename'),
	uglify = require('gulp-uglify'),
	notify = require('gulp-notify'),
	browserify = require('browserify'),
	transform = require('vinyl-transform'),
	source = require('vinyl-source-stream'),
	gutil = require( 'gulp-util' ),
	babelify = require( 'babelify' ),