blüm

let dots;

let t;

let root;

let scale;

let palettes;

let rev;

let si;

let ci;

​

class Dot {

  constructor(x, y, t) {

    this.x = x;

    this.y = y;

    this.f = midiToFreq(root + scale[si][floor(constrain(map(x, 0, width, 0, scale[si].length), 0, scale[si].length))]);

    this.a = constrain(map(y, height, 0, 0, 1), 0, 1);;

    this.t = t;

    this.r = 0;

    this.env = new p5.Envelope(0.2, this.a, 0.3, 0.1);

    this.osc = new p5.Oscillator('sine');

    this.osc.disconnect();

    this.osc.connect(rev);

    this.c = palettes[ci][1 + (floor(random(palettes[ci].length - 1)))];

    this.v = 0;

  }

  ping() {

    this.osc.start();

    this.osc.freq(this.f);

    this.env.play(this.osc);

    this.a = this.a - 0.05;

    this.env.set(0.2, this.a, 0.3, 0.1);

    this.v = 20;

  }

  draw() {

    fill(this.c);

    stroke(this.c);

    ellipse(this.x, this.y, this.a * 30, this.a * 30);

  }

}

​

function setup() {

  let cnv = createCanvas(600, 600);

  scale = [

    [0, 2, 3, 5, 7, 9, 10, 12, 14, 15, 17, 19, 21, 22, 24], /*dorian*/

    [0, 1, 3, 5, 7, 8, 10, 12, 13, 15, 17, 19, 20, 22, 24], /*phrygian*/

    [0, 2, 4, 6, 7, 9, 11, 12, 14, 16, 18, 19, 21, 23, 24], /*lydian*/

    [0, 2, 4, 5, 7, 9, 10, 12, 14, 16, 17, 19, 21, 22, 24], /*mixolydian*/

    [0, 2, 3, 5, 7, 8, 10, 12, 14, 15, 17, 19, 20, 22, 24], /*aeolian*/

    [0, 1, 3, 5, 6, 8, 10, 12, 13, 15, 17, 18, 20, 22, 24], /*locrian*/

  ];

  palettes = [

    [color('#303a5166'), color('#827e8c'), color('#c2aea1'), color('#efdea7'), color('#ea7857')],

    [color('#f1592a66'), color('#fcb040'), color('#fdfdfd'), color('#b7b5b4'), color('#32322e')],

    [color('#33304666'), color('#3a615e'), color('#88ab88'), color('#a1d6ad'), color('#d3eedd')],

    [color('#1f202266'), color('#2e693e'), color('#50b81a'), color('#b6db1b'), color('#eae9e9')],

    [color('#2e2a4166'), color('#6f2d5f'), color('#b8596c'), color('#cd9899'), color('#f7edca')],

    [color('#4b3e4166'), color('#4e988a'), color('#eef2c2'), color('#d0d281'), color('#d94043')]

  ];

  rev = new p5.Reverb();

  rev.set(5, 20);

  root = 48 + floor(random(12));

  si = floor(random(scale.length));

  ci = floor(random(palettes.length));

  dots = [];

  t = 0;

  cnv.mousePressed(makeDot);

}

​

function draw() {

  background(palettes[ci][0]);

  t = (t + 1) % 240;

  for (let i = 0; i < dots.length; i++) {

    if (dots[i].t == t) {

      dots[i].ping();

    }

    if (dots[i].v > 0) {

      dots[i].draw();

      dots[i].v--;

    }

    if (dots[i].a < 0) {

      dots.splice(i, 1);

      i--;

    }

  }

  fill(255);

  stroke(255);

  tx = map(t, 0, 240, 0, width, true)

  rect(tx, height - 20, 20, 20)

}

​

function makeDot() {

  let dot = new Dot(mouseX, mouseY, t);

  append(dots, dot);

  dot.ping();

}