// C3, G3, C4, C2, G2, E3, C2, D3

let noteOptions = [48, 55, 60, 36, 43, 52, 24, 50];

​

// C3, G3, C4, D4, E4

// let noteOptions = [48, 55, 60, 62, 64];

​

​

class Gesture {

  constructor(positions) {

    this.positions = positions;

    this.index = 0;

    this.color = color(colorOptions[int(random(0, colorOptions.length))]);

    this.note = noteOptions[int(random(0, noteOptions.length))];

    this.duration = positions.length / 30; // if the frame count is 60

    this.env = new Tone.AmplitudeEnvelope({

        attack: map(this.duration, 0, 2, 0.05, 2, true),

        decay: 0.7,

        sustain: 0.5,

        release: 2

    }).toDestination();

    let freq = Tone.Frequency(this.note, "midi").toFrequency();

    this.osc = new Tone.Oscillator(freq, "triangle").connect(this.env).start();

  }

  draw() {

    noStroke();

    strokeCap(SQUARE);

    let radius = map(this.index, 0, this.positions.length, 5, 50);

    for (let i = 0; i < this.index - 1; i += 1) {

      let x = this.positions[i].x;

      let y = this.positions[i].y;

      let xn = this.positions[i+1].x;

      let yn = this.positions[i+1].y;

      // fill(this.color);

      // ellipse(x, y, radius);

      stroke(this.color);

      strokeWeight(radius + random(-5, 5));

      line(x, y, xn, yn);

    }

    this.update();

  }

  update() {

    if (this.index === 0) {

      let end = constrain(this.duration-0.5, 0.05, 1000);

      this.env.triggerAttackRelease(end);

    }

    if (frameCount % 2 === 0) {

      this.index = (this.index + 1) % this.positions.length;

      let newAlpha = map(this.index, 0, this.positions.length, 255, 10);

      this.color.setAlpha(newAlpha);

    }

  }

}