// optional : map()

let chrom;

let dna;

​

​

function preload() {

  chrom = loadImage('kisspng-chromosome-drawing-prophase-chromatid-cell-chromosome-vector-5b4c4adac62ed0.1002809715317265548118.png');

  dna = loadImage('dna.png');

​

}

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(153, 0, 204);

  let rate = millis() / 100;

  let rate2 = rate * 0.7;

  let rate3 = rate2 * 0.7;

​

  image(dna, 5, 5, 590, 600);

  image(chrom, 153, 40, 290, 500);

​

  noStroke();

  fill(0, 0, 102)

​

  // COLUMN 1

  // UL 

  ellipse(233 - rate, 40 - rate, 15);

  ellipse(223 - rate2, 50 - rate2, 15);

  ellipse(214 - rate3, 60 - rate3, 15);

​

  // UR 

  ellipse(363 + rate, 40 - rate, 15);

  ellipse(373 + rate2, 50 - rate2, 15);

  ellipse(384 + rate3, 60 - rate3, 15);

​

  // LL

  ellipse(160 - rate, 510 + rate, 15);

  ellipse(170 - rate2, 520 + rate2, 15);

  ellipse(180 - rate3, 530 + rate3, 15);

  // LR

  ellipse(435 + rate, 510 + rate, 15);

  ellipse(425 + rate2, 520 + rate2, 15);

  ellipse(415 + rate3, 530 + rate3, 15);

​

  // COLUMN 2

  if ((50 - rate2) > 0) {

    // UL

    ellipse(248, 40, 15);

    ellipse(238, 50, 15);

    ellipse(229, 60, 15);

​

    // UR

    ellipse(348, 40, 15);

    ellipse(358, 50, 15);

    ellipse(369, 60, 15);

​

    // LL

    ellipse(175, 510, 15);

    ellipse(185, 520, 15);

    ellipse(195, 530, 15);

    // LR

    ellipse(420, 510, 15);

    ellipse(410, 520, 15);

    ellipse(400, 530, 15);

  } else {

    // UL

    ellipse((248 - rate + 70), (40 - rate + 70), 15);

    ellipse((238 - rate2 + 50), (50 - rate2 + 50), 15);

    ellipse((229 - rate3 + 30), (60 - rate3 + 30), 15);

​

​

    // UR

    ellipse((348 + rate - 70), (40 - rate + 70), 15);

    ellipse((358 + rate2 - 50), (50 - rate2 + 30), 15);

    ellipse((369 + rate3 - 30), (60 - rate3 + 30), 15); // add/subtract values to make up for the time passed

​

    // LL

    ellipse((175 - rate + 70), (510 + rate - 70), 15);

    ellipse((185 - rate2 + 50), (520 + rate2 - 50), 15);

    ellipse((195 - rate3 + 30), (530 + rate3 - 30), 15);

    // LR

    ellipse((420 + rate - 70), (510 + rate - 70), 15);

    ellipse((410 + rate2 - 50), (520 + rate2 - 50), 15);

    ellipse((400 + rate3 - 30), (530 + rate3 - 30), 15);

  }

​

  // COLUMN 3

  if ((50 - rate2 + 50) > 0) {

    // UL

    ellipse(253, 50, 15);

    ellipse(244, 60, 15);

    ellipse(259, 60, 15);

​

    // UR

    ellipse(343, 50, 15);

    ellipse(339, 60, 15);

    ellipse(354, 60, 15);

​

    // LL

    ellipse(200, 520, 15);

    ellipse(190, 510, 15);

    ellipse(205, 510, 15);

    // LR

    ellipse(395, 520, 15);

    ellipse(405, 510, 15);

    ellipse(390, 510, 15);

  } else {

    // UL

    ellipse((253 - rate + 150), (50 - rate + 150), 15);

    ellipse((244 - rate2 + 100), (60 - rate2 + 100), 15);

    ellipse((259 - rate3 + 80), (60 - rate3 + 80), 15);

​

    // UR

    ellipse((343 + rate - 150), (50 - rate + 150), 15);

    ellipse((339 + rate2 - 100), (60 - rate2 + 100), 15);

    ellipse((354 + rate3 - 80), (60 - rate3 + 80), 15);

​

    // LL

    ellipse((200 - rate + 150), (520 + rate - 150), 15);

    ellipse((190- rate2 + 100), (510 + rate2 - 100), 15);

    ellipse((205 - rate3 + 80), (510 + rate3 - 80), 15);

    // LR

    ellipse((395 + rate - 150), (520 + rate - 150), 15);

    ellipse((405 + rate2 - 100), (510 + rate2 - 100), 15);

    ellipse((390 + rate3 - 80), (510 + rate3 - 80), 15);

  }

​

}