Sound In Space Week 3

For the stereo assignment, I was inspired by these lights near my apartment. At a nearby restaurant (Junior’s Restaurant and Bakery in Brooklyn), there is a grid of lights, where the center lights are always on and then the lights on the boarder click on and off. I wanted to do something that would simulate the clicking of the lights as they turn on and off, but mainly I wanted to work with clicking sounds. I thought that if a sound is played for a really short period of time (around a fraction of a second) then the clicking would be simulated. I also experimented with different waveforms, but I think the the shortness of the sounds make the waveform irrelevant. I chose to route three tones that are offset by a couple of milliseconds to each channel (left and right, so a total of 6 tones). The tones vary in frequency to provide some distinction but also for variety. The score, although I am not sure if it counts as a score though, for this assignment was based on the lights that I tried to mimic.

Since I am still new to tone.js, I am still having difficulties, but I’m starting to understand how to produce what I’d like. The major thing I’m having difficulty with is timing. I initially wanted to do a series of tones that had the same offset but increased in frequency, but I had difficulty understanding how the timing worked in JavaScript, especially setTimeout() and setInterval(), in the way that I wanted. I am going to try to work on making intentionally times events for the quad assignment because I think the code that I have right now never enters the clearInterval() statement.

These sounds (not piece because I don’t want to think of this as a piece) are meant to be listened to with headphones or earphones, while watching the animation or score in the link below for an unspecified period of time (suggested time is around 90 seconds). Click here for a link to my sketch.

// const left = new Tone.Meter()
// const right = new Tone.Meter()

// const split = new Tone.Split(2)
// console.log(split.numberOfOutputs)
// split.connect(left, 0, 0)
// split.connect(right, 1, 0)

var merge = new Tone.Merge().toMaster();

var osc1 = new Tone.Synth({
  oscillator: {
    type: 'sine',
    modulationFrequency: 0.2
  },
  envelope: {
    attack: 0,
    decay: 0.01,
    sustain: 0,
    release: 0.01,
  }
}).connect(merge.left);

var osc2 = new Tone.Synth({
  oscillator: {
    type: 'sine',
    modulationFrequency: 0.2
  },
  envelope: {
    attack: 0,
    decay: 0.01,
    sustain: 0,
    release: 0.01,
  }
}).connect(merge.right);

let i = 1;
function loop11() {
  i += 2;
  // console.log(i);
  setTimeout(function() {
    osc1.triggerAttackRelease(27.5, '8n');
    if (i <= 100) {
      loop11();
      // console.log(i);
    }
  }, 100)
  //   if (i >= 100 && i < 200) {
  //   function loop12() {
  //     setTimeout(function() {
  //       osc1.triggerAttackRelease(55, '8n');
  //       if (i >= 100 && i < 200) {
  //         loop12();
  //       }
  //     }, 100)
  //   }
  //   }
  //   if (i >= 100 && i < 200) {
  //     loop12();
  // i+=2;
  // console.log(i);
  // setInterval(loop11, 200);
  //   }
  // console.log(i);
}
setInterval(loop11, 100);
function stoploop11() {
  clearInterval(loop11);
}

let j = 0;
function loop12() {
  j += 2;
  // console.log(i);
  setTimeout(function() {
    osc1.triggerAttackRelease(440, '8n');
    if (j <= 100) {
      loop12();
      // console.log(i);
    }
  }, 101)
}
setInterval(loop12, 100);

let k = 0;
function loop13() {
  k += 2;
  // console.log(i);
  setTimeout(function() {
    osc1.triggerAttackRelease(1760, '8n');
    if (k <= 100) {
      loop13();
      // console.log(i);
    }
  }, 102)
}
setInterval(loop13, 100);

let a = 1;
function loop21() {
  setTimeout(function() {
    osc2.triggerAttackRelease(27.5, '8n');
    a += 3;
    if (a <= 100) {
      loop21();
    }
  }, 103)
}
// loop21();
setInterval(loop21, 100);

let b = 1;
function loop22() {
  setTimeout(function() {
    osc2.triggerAttackRelease(440, '8n');
    b += 3;
    if (b <= 100) {
      loop22();
    }
  }, 104)
}
setInterval(loop22, 100);

let c = 1;
function loop22() {
  setTimeout(function() {
    osc2.triggerAttackRelease(1760, '8n');
    c += 3;
    if (c <= 100) {
      loop22();
    }
  }, 105)
}
setInterval(loop22, 100);
// clearInterval(loop21);

function setup() {
  createCanvas(500, 500);
  frameRate(300);
}

function draw() {
  background(0);
  stroke(255, 255, 0, 150);
  fill((255, 255, 204, 60));
  ellipse(floor(random(11)) * 50, floor(random(11)) * 50, 10, 10);
  ellipse(floor(random(11)) * 50, floor(random(11)) * 50, 10, 10);
  for (let x = 0; x <= width; x += 25) {
    for (let y = 0; y <= height; y += 25) {
      let strobe = noise(.02 * (frameCount + x), .02 * (frameCount + y)) * 100;
      noFill();
      stroke(255, 255, 0, strobe);
      ellipse(x, y, 10, 10);
    }
  }
}