let x, y;

let bubbles = [];

let outlines = [];

​

function preload() {

​

  grotesk = loadFont('Grotesk_Bold.otf');

​

}

​

function setup() {

  createCanvas(400, 400);

​

  textSize(width);

  noStroke();

​

  x = 10;

  y = width - 50;

​

  textFont(grotesk);

  text('W', x, y);

  let moonPoints = grotesk.textToPoints('W', x, y);

​

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

    let _moonPoints = moonPoints[i];

    outlines[i] = new Outline(_moonPoints.x, _moonPoints.y);

  }

​

  for (let j = 0; j < 200; j++) {

    bubbles[j] = new Bubble();

  }

​

}

​

function draw() {

  background(200);

​

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

​

    outlines[i].show();

    outlines[i].checkCollision();

​

  }

​

  for (let j = 0; j < bubbles.length; j++) {

    bubbles[j].show();

​

  }

​

​

}

​

class Outline {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.d;

  }

​

  show() {

    ellipse(this.x, this.y, 10, 10);

  }

​

  checkCollision() {

​

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

      this.d = dist(bubbles[i].x, bubbles[i].y, this.x, this.y);

​

      if (this.d < 5) {

        bubbles[i].direction = -bubbles[i].direction;

        bubbles[i].direction1 = -bubbles[i].direction1;

        bubbles[i].r += 25;

      }

    }

  }

}

​

class Bubble {

​

  constructor() {

    this.posX = [50, 150, 350];

    this.posY = [100, 120, 140];

    this.x = random(this.posX);

    this.y = 100;

    this.direction = random(-1, 1);

    this.direction1 = random(-1, 1);

  }

​

  show() {

    ellipse(this.x, this.y, 50, 50);

    this.x += this.direction;

    this.y += this.direction1;

  }

​

}