it's a hoot

let theTime = 0;
let dt = 0.8;
let things;
function setup() {
  createCanvas(600, 100);
  background(250);
  describe(
    "a factory making owls in 9 steps. The first is color, then eye spots, then black in the eyes, then belly, then beak, then legs, then feet, then sparkle in the eyes. the factory is plain white, but the owls are random colors. "
  );
  d = width / 10;
  strokeWeight(1);
  things = [];
  for (let i = -20; i < 0; i++) {
    things.push(new Thing(d / 2 + d * i));
  }
}

function draw() {
  theTime += dt;
  background(255);
  noFill();
  for (let i = 0; i < 9; i++) {
    rect(d / 2 + d * i, 10, 10, 10);
    line(
      d / 2 + 5 + d * i,
      20,
      d / 2 + 5 + d * i,
      20 + 20 * abs(cos(5 * theTime * ((2 * PI) / width)))
    );
  }
  for (let i = -10; i < 10; i++) {
    line(
      d / 2 + d * i + theTime,
      height / 2,
      d / 2 + d * (i - 1) + theTime,
      height
    );
  }
  line(0, height / 2, width, height / 2);
  if (theTime >= width) {
    theTime = 0;
  }
  for (let i = 0; i < things.length; i++) {
    things[i].display();
  }
}

class Thing {
  constructor(x) {
    this.x = x;
    this.cx = x;
    this.red = random(100, 200);
    this.green = random(130, 230);
    this.blue = random(180, 250);
  }
  display() {
    this.cx += dt;
    if (this.cx > d / 2) {
      fill(this.red, this.green, this.blue);
    } else {
      fill(255);
    }
    ellipse(this.cx, 60, d / 2, 40);
    if (this.cx > d + d / 2) {
      fill(255);
      circle(this.cx - 6, 50, 10);
      circle(this.cx + 6, 50, 10);
    }
    if (this.cx > 2 * d + d / 2) {
      fill(0);
      circle(this.cx - 6, 50, 5);
      circle(this.cx + 6, 50, 5);
    }

    if (this.cx > 3 * d + d / 2) {
      fill(this.red * 1.5, this.green * 1.5, this.blue * 1.5);
      ellipse(this.cx, 68, d / 2.5, 20);
    }
    if (this.cx > 4 * d + d / 2) {
      fill(this.blue, this.red, this.green);
      ellipse(this.cx, 55, 5, 10);
    }
    if (this.cx > 5 * d + d / 2) {
      fill(this.red, this.blue, this.green);
      ellipse(this.cx - d / 4 + 2, 63, 5, 20);
      ellipse(this.cx + d / 4 - 2, 63, 5, 20);
    }
    if (this.cx > 6 * d + d / 2) {
      fill(this.red, this.blue, this.green);
      line(this.cx + 4, 80, this.cx + 4, 85);
      line(this.cx - 4, 80, this.cx - 4, 85);
    }
    if (this.cx > 7 * d + d / 2) {
      fill(this.red, this.blue, this.green);
      line(this.cx + 4, 85, this.cx + 4, 88);
      line(this.cx - 4, 85, this.cx - 4, 88);
      line(this.cx + 4, 85, this.cx + 6, 88);
      line(this.cx - 4, 85, this.cx - 6, 88);
      line(this.cx + 4, 85, this.cx + 2, 88);
      line(this.cx - 4, 85, this.cx - 2, 88);
    }
    if (this.cx > 8 * d + d / 2) {
      fill(255);
      circle(this.cx - 7, 49, 3.5);
      circle(this.cx + 5, 49, 3.5);
    }
    if (this.cx > width + dt) {
      this.cx = this.x + theTime - 2 * d;
      this.red = random(100, 200);
      this.green = random(130, 230);
      this.blue = random(180, 250);
    }
  }
}