let _alphabet1 = [];

let _alphabet2 = [];

let _bubble = [];

let counter = [];

let alphabetArray1;

let alphabetArray2;

​

function preload() {

​

  grotesk = loadFont('Grotesk_Bold.otf');

​

}

​

function setup() {

  createCanvas(400, 400);

  textFont(grotesk);

  rectMode(CENTER);

​

  alphabetArray1 = grotesk.textToPoints('M', width / 2 - 175, height / 2 + 140, 400);

​

  alphabetArray2 = alphabetArray1;

​

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

​

    _alphabet1[i] = new Alphabet1(alphabetArray1[i].x, alphabetArray1[i].y);

​

  }

​

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

​

    _alphabet2[i] = new Alphabet2(alphabetArray2[i].x, alphabetArray2[i].y);

​

  }

​

  for (let i = 0; i < 50; i++) {

​

    _bubble[i] = new Bubble();

​

  }

​

  print(alphabetArray1.length, _bubble.length);

}

​

function draw() {

  background(200);

​

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

​

    _bubble[i].show();

    _bubble[i].move();

    _bubble[i].collisionDetection();

​

  }

​

​

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

    if (_alphabet1[i] == _alphabet2[i]) {

      _alphabet2[i].show();

    }

​

  }

}

​

class Alphabet1 {

​

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

​

  show() {

    fill(255);

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

  }

​

}

​

class Alphabet2 {

​

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

​

  show() {

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

  }

​

}

​

class Bubble {

​

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.s = random(5, 10);

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

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

    this.d;

  }

​

  show() {

    rect(this.x, this.y, this.s, this.s);

  }

​

  move() {

​

    this.x = this.x + this.direction;

    this.y = this.y + this.direction1;

​

    if (this.x > width || this.x < 0) {

      this.direction = -this.direction;

    }

​

    if (this.y > width || this.y < 0) {

      this.direction1 = -this.direction1;

    }

  }

​

  collisionDetection() {

​

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

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

​

      if (this.d < 5) {

        this.direction = -this.direction;

​

        this.direction1 = -this.direction1;

​

        _alphabet1.splice(i, 1, _alphabet2[i]);

​

      }

​

    }

  }

}