// Customize
let name = "Joe";
let age = "40";
let text1 = '"Life begins on your 40th birthday. But so do fallen arches, ';
let text2 = 'heumatism, faulty eyesight, and the tendency to tell a story ';
let text3 = 'to the same person, three or four times." - Helen Rowland';

let can;
let msg = "Happy Birthday";
let colorMsg;
let colorName;
let colorAge;
let posMsg = [];
let posName = [];
let posAge = [];
let x = 100;
let y = 400;
let xb = [450, 600, 250];
let yb =[500, 300, 150];
let ballColor = [60, 40, 30];

function setup()  {
  can = createCanvasClass(800, 600);
  colorMsg = 40;
  colorName = 60;
  colorAge = 80;
  posMsg = [100, 170, 0, 80];   // posMst[2] is not used
  posName = [350, 330, 0, 80];
  posAge = [560, 500,  0, 90];
  can.colorMode(HSB, 100);
}

function draw() {
  can.background("#CCCCDD");
  can.strokeWeight(1);
  can.stroke("#000000");
  // Msg
  can.textSize(posMsg[3]);
  can.fill(colorMsg, 100, 100);
  can.text(msg, posMsg[0], posMsg[1]);
  // Name
  can.textSize(posName[3]);
  can.fill(colorName, 100, 100);
  can.text(name, posName[0], posName[1]);

  // Age
  can.textSize(posAge[3]);
  can.fill(colorAge, 100, 100);
  can.text(age, posAge[0], posAge[1]);
  
  can.textSize(18);
  can.noStroke();
  can.text(text1, 10, 500); 
  can.text(text2, 10, 540);
  can.text(text3, 10, 580);
  if (frameCount % 3 == 0 ) {
    colorMsg = (colorMsg + .3) % 100;
    posMsg[0] = constrain(posMsg[0] + random(-1, 1), 80, 120);  //  x
    posMsg[1] = constrain(posMsg[1] + random(-1, 1), 150, 190);  //  y
    posMsg[3] = constrain(posMsg[3] + random(-4, 4), 70, 90);  // textSize
    colorName = (colorName + .3) % 100;
    posName[0] = constrain(posName[0] + random(-1, 1), 330, 370);  //  x
    posName[1] = constrain(posName[1] + random(-1, 1), 310, 330);  //  y
    posName[3] = constrain(posName[3] + random(-4, 4), 70, 90);  // textSize
    colorAge = (colorAge + .3) % 100;
    posAge[0] = constrain(posAge[0] + random(-1, 1), 540, 5805);  //  x
    posAge[1] = constrain(posAge[1] + random(-1, 1),480, 520);  //  y
    posAge[3] = constrain(posAge[3] + random(-4, 4), 60, 80);  // textSize
  }  
    
    
    can.fill("#FFFFFF");
    can.rect(x, y, 35, 18);
    can.fill("#0000FF");
    can.rect(x-5, y+18, 45, 2);
    can.fill("#FF00FF");
    can.textSize(12);
    can.text(age, x+12, y+14);
    can.fill("#FF0000");
    can.rect(x+17, y-6, 3, 6);
    can.fill("#FFFF00");
    can.ellipse(x+18, y-8, 1.5, 2);
    x += 2;
    if (x > 780) {
       x = 20;
    }    
    y = constrain( y + random(-1, 1), 100, 400);
    
    for (let i = 0; i <xb.length; i++) {
      can.fill(ballColor[i], 100, 100);
      can.ellipse(xb[i], yb[i], 40);
      can.stroke("#000000");
      can.line(xb[i], yb[i]+20, xb[i], yb[i]+50);
      yb[i] -= 1;
      if (yb[i] < 20) {
         yb[i] = 500;
         xb[i]= constrain(xb[i] + random(-50, 50), 50, 750)
         ballColor[i] = colorName;
      }
    }
}