DMSC Devlog: Week 3 - Class Work

This week has been a little all over the place, with a lot of different concepts thrown at us to experiment with. I can tell we're really getting into the meat of the course, on the cusp of really monkeying with p5, about to blow this whole case WIDE open. I can tell I'm getting into it because I'm spending way too much time out of class drawing different versions of a goofy sprite.

But we'll put this guy to any use later. First, we're spending way too much time in class adding sound to our random walks. Remember last week's random walk? Now it's loud.

let started = false;
let osc, freq; 
let currentX, currentY, nextX, nextY; 
function setup() {
  let cnv = createCanvas(400, 400);
  frameRate(20);
  currentX = 100;
  currentY = 350;
  strokeWeight(1);
  cnv.mousePressed(startOscillator);
  // alternative syntax: cnv.mousePressed(function() {osc.start()});
  osc = new p5.Oscillator();
 }  function draw() {
   if (started) {
     if (frameCount % 2 > 0) {
       osc.amp(0.75);
       circle(currentX, currentY, 5);
       //change freq based on currentX
       freq = map(currentX, 0, width, 300, 340);
       nextX = random(-8, 10);
       //triangle if right, sine if left
       if (abs(nextX) == nextX) {
         osc.setType("triangle");
       } else {
         osc.setType("sine");
       }       nextY = random(-5, 3);
       //low note if up, high note if down
       if (-abs(nextY) == nextY) {
         osc.freq(freq);
       } else {
         osc.freq(freq * 1.5);
       }
       currentX = currentX + nextX;
       currentY = currentY + nextY;
       if (currentY <= 0 || currentX >= 400) {
         currentX = random(50, 200);
         currentY = 350;
         fill(random(0, 255));
       }     } else {
       //quieter + different low tone every other frame
       osc.freq(freq * 1.12);
       osc.amp(0.68);
     }
   }
 }
   function startOscillator() {
   started = true;
   osc.start();
 }

Whenever a circle is drawn, the oscillator code built into p5 plays a note. The oscillator's waveform changes depending on whether the next circle is drawn to the left (sine wave) or the right (triangle wave) of the last one, and it plays a high note if the circle is drawn lower. It doesn't sound awful by itself, but to make it a little less harsh, the low tone is a little quieter and a little higher every other frame. To top it all off, all the notes slowly rise in pitch, about a semitone or two, as the circles jitter their way to the right of the screen. It's beautiful! I feel so capable!

This was supposed to be our warm-up. Admittedly, I got a little carried away puzzling out dynamic sound design for my wiggler in my free time. Our more pressing lessons involved classes - templates used to create instances of objects with their own functions. An object is a thing in your code, and the basic rules that it follows are determined by the class template used to create it. Take this Bubble:

let oneBubble, secondBubble;
function setup() {
  createCanvas(400, 400);
  oneBubble = new Bubble();
  secondBubble = new Bubble();
}
function draw() {
  background(220); 
  oneBubble.display();
  secondBubble.display();
  oneBubble.move();
  secondBubble.move();
}
class Bubble {
  constructor() {
    this.r = 15
    this.x = random(width);
    this.y = height/2;
    this.xchange = random(-1,1)
    this.ychange = random(-1,1)
  }
  display () {
    circle(this.x, this.y, this.r*2);
    let msg = this.xchange + " " + this.ychange;
    text(msg, this.x, this.y)
  }
  move () {
    this.x = this.x + this.xchange
    this.y = this.y + this.ychange
    if (this.x - this.r < 0 || this.x + this.r > width) {
      this.xchange = -this.xchange
    }
    if (this.y - this.r < 0 || this.y + this.r > height) {
      this.ychange = -this.ychange
    }
  }
}

Each instance of a Bubble has a name, its own visible bubble at its own coordinates, and its own speed (assigned at birth). It is in the Bubbles' nature to move and bounce off the walls, since it's written into their class.

If we wanted, let's say, 100 Bubbles, we could put them all into an array:

let someBubbles = [];
let bubQty = 100
function setup() {
   createCanvas(400, 400);
   for (let i = 0; i < bubQty; i++){
     someBubbles[i] = new Bubble(random(width), height/2);
   }
}
function draw() {
  background(220);
  for (let i = 0; i < bubQty; i++){
    someBubbles[i].display();
    someBubbles[i].move();
  }
}

And if we wanted those Bubbles to have obnoxiously large noses and mustaches...

...We could save them as separate images from the head and eyes, so that every half a second they twitch!

Now to make 'em move real weird. I'll get there when I get there.

-Rafi