let adjectives = ["bright", "vivid", "dazzling", "radiant"];

let nouns = ["planets", "bubbles", "atoms", "droplets", "balloons"];

let index = 0;

​

let circles = [];

let textBuffer;

​

function setup() {

  createCanvas(400, 600);

  textAlign(CENTER);

  textSize(12);

  textStyle(BOLD);

  noStroke();

​

  // Create buffer for text

  textBuffer = createGraphics(width, height);

  textBuffer.textAlign(CENTER);

  textBuffer.textSize(28);

  textBuffer.textStyle(BOLD);

​

  displaySentence();

}

​

function displaySentence() {

  // Reset circles

  circles = [];

​

  background(220);

  let color1 = colors[floor(random(colors.length))];

  let color2 = colors[floor(random(colors.length))];

  while (color2 === color1) {

    color2 = colors[floor(random(colors.length))];

  }

  let adjective = adjectives[floor(random(adjectives.length))];

  let noun = nouns[floor(random(nouns.length))];

​

  let sentence = color1 + " and " + color2 + " " + adjective + " " + noun + ".";

​

  // Draw gradient background

  let gradient = drawingContext.createLinearGradient(0, 0, width, height);

  gradient.addColorStop(0, color1);

  gradient.addColorStop(1, color2);

  drawingContext.fillStyle = gradient;

  drawingContext.fillRect(0, 0, width, height);

​

  // Create circles

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

    let c = lerpColor(color(color1), color(color2), i / 50);

    circles.push(new Circle(random(width), random(height), random(10, 80), c));

  }

​

  // Draw lines

  strokeWeight(3);

  stroke(255);

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

    let c = lerpColor(color(color1), color(color2), i / 20);

    stroke(c);

    line(0, (i * height) / 20, width, (i * height) / 20);

  }

​

  // Draw text to buffer

  textBuffer.clear();

  textBuffer.fill(255);

  textBuffer.text(sentence, width / 2, height / 2 + 100);

​

  index++;

  if (index < 6) {

    setTimeout(displaySentence, 3000);

  }

}

​

function draw() {

  // Move and display circles

  for (let circle of circles) {

    circle.move();

    circle.display();

  }

​

  // Draw text buffer on top of everything

  image(textBuffer, 0, 0);

}

​

class Circle {

  constructor(x, y, r, c) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.c = c;

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

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

  }

​

  move() {

    // Update position based on velocity

    this.x += this.vx;

    this.y += this.vy;

​

    // Bounce off walls

​

    if (this.x - this.r / 2 < 0 || this.x + this.r / 2 > width) {

      this.vx *= -1;

    }

    if (this.y - this.r / 2 < 0 || this.y + this.r / 2 > height) {

      this.vy *= -1;

    }

  }

​

  display() {

    fill(this.c);

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

  }

}

​