Code Sketch

cleari()
originBottomLeft()

// ============================================================
// AMIGO TV - BIXUU NEWS REPORT
// CAR -> OLD AGE HOME -> INTERVIEW -> NOTES -> AMIGO TV
// ============================================================

var screen = 0
var carX = 30.0
var question = 0
var tvPage = 0

// ============================================================
// COLORS
// ============================================================

val BLACK = Color(0, 0, 0)
val WHITE = Color(255, 255, 255)
val RED = Color(220, 40, 40)
val GREEN = Color(0, 170, 70)
val BLUE = Color(40, 100, 210)
val LIGHTBLUE = Color(155, 220, 255)
val DARKBLUE = Color(25, 45, 80)
val GREY = Color(150, 150, 150)
val DARKGREY = Color(65, 65, 65)
val BROWN = Color(125, 80, 45)
val SKIN = Color(245, 190, 145)
val YELLOW = Color(255, 215, 50)
val CREAM = Color(250, 242, 220)
val GREEN2 = Color(70, 170, 80)

// ============================================================
// BUTTON
// ============================================================

def button(
  c: CanvasDraw,
  x: Double,
  y: Double,
  w: Double,
  h: Double,
  label: String,
  color: Color
) {

  c.fill(color)
  c.stroke(BLACK)
  c.strokeWeight(2)
  c.rect(x, y, w, h)

  c.fill(WHITE)
  c.text(label, x + 20, y + 15)
}

// ============================================================
// HEADER
// ============================================================

def header(c: CanvasDraw, title: String) {

  c.fill(DARKBLUE)
  c.rect(0, cheight - 75, cwidth, 75)

  c.fill(WHITE)
  c.text(title, 35, cheight - 48)
}

// ============================================================
// REPORTER - BIXUU
// Similar simple cartoon character
// ============================================================

def drawReporter(
  c: CanvasDraw,
  x: Double,
  y: Double,
  s: Double
) {

  // legs
  c.fill(DARKGREY)
  c.rect(x - 20*s, y, 14*s, 55*s)
  c.rect(x + 6*s, y, 14*s, 55*s)

  // shoes
  c.fill(BLACK)
  c.rect(x - 25*s, y - 8*s, 22*s, 9*s)
  c.rect(x + 3*s, y - 8*s, 22*s, 9*s)

  // body
  c.fill(BLUE)
  c.rect(x - 38*s, y + 50*s, 76*s, 88*s)

  // white shirt
  c.fill(WHITE)
  c.rect(x - 12*s, y + 65*s, 24*s, 60*s)

  // head
  c.fill(SKIN)
  c.ellipse(x - 28*s, y + 135*s, 56*s, 60*s)

  // hair
  c.fill(BLACK)
  c.ellipse(x - 29*s, y + 168*s, 58*s, 30*s)

  // eyes
  c.fill(BLACK)
  c.ellipse(x - 13*s, y + 157*s, 5*s, 5*s)
  c.ellipse(x + 8*s, y + 157*s, 5*s, 5*s)

  // mouth
  c.stroke(BLACK)
  c.strokeWeight(2)
  c.line(
    x - 7*s,
    y + 145*s,
    x + 7*s,
    y + 145*s
  )

  // microphone
  c.fill(BLACK)
  c.rect(x + 40*s, y + 78*s, 8*s, 60*s)

  c.ellipse(x + 33*s, y + 125*s, 23*s, 23*s)

  c.fill(WHITE)
  c.rect(x + 30*s, y + 104*s, 31*s, 19*s)

  c.fill(BLACK)
  c.text("BIXUU", x + 32*s, y + 110*s)
}

// ============================================================
// ELDERLY PERSON
// ============================================================

def drawElder(
  c: CanvasDraw,
  x: Double,
  y: Double,
  s: Double
) {

  // legs
  c.fill(DARKGREY)
  c.rect(x - 18*s, y, 13*s, 48*s)
  c.rect(x + 5*s, y, 13*s, 48*s)

  // shoes
  c.fill(BLACK)
  c.rect(x - 23*s, y - 8*s, 21*s, 9*s)
  c.rect(x + 2*s, y - 8*s, 21*s, 9*s)

  // clothes
  c.fill(Color(110, 145, 180))
  c.rect(x - 35*s, y + 45*s, 70*s, 88*s)

  // head
  c.fill(SKIN)
  c.ellipse(x - 27*s, y + 125*s, 54*s, 58*s)

  // white hair
  c.fill(WHITE)
  c.ellipse(x - 28*s, y + 160*s, 56*s, 30*s)

  // ears
  c.fill(SKIN)
  c.ellipse(x - 32*s, y + 145*s, 10*s, 18*s)
  c.ellipse(x + 22*s, y + 145*s, 10*s, 18*s)

  // eyes
  c.fill(BLACK)
  c.ellipse(x - 12*s, y + 151*s, 5*s, 5*s)
  c.ellipse(x + 7*s, y + 151*s, 5*s, 5*s)

  // smile
  c.stroke(BLACK)
  c.strokeWeight(2)
  c.line(
    x - 8*s,
    y + 137*s,
    x + 8*s,
    y + 137*s
  )

  // walking stick
  c.stroke(BROWN)
  c.strokeWeight(4)
  c.line(
    x + 30*s,
    y + 10*s,
    x + 30*s,
    y + 115*s
  )

  c.arc(
    x + 20*s,
    y + 100*s,
    20*s,
    20*s,
    0,
    180
  )
}

// ============================================================
// CAR
// ============================================================

def drawCar(
  c: CanvasDraw,
  x: Double,
  y: Double
) {

  // main body
  c.fill(BLUE)
  c.stroke(BLACK)
  c.strokeWeight(3)

  c.rect(x, y, 190, 55)

  // upper body
  c.rect(x + 40, y + 55, 105, 45)

  // windows
  c.fill(LIGHTBLUE)
  c.rect(x + 50, y + 64, 40, 27)
  c.rect(x + 96, y + 64, 40, 27)

  // wheels
  c.fill(BLACK)
  c.ellipse(x + 20, y - 20, 45, 45)
  c.ellipse(x + 125, y - 20, 45, 45)

  // wheels center
  c.fill(GREY)
  c.ellipse(x + 32, y - 8, 20, 20)
  c.ellipse(x + 137, y - 8, 20, 20)

  // lights
  c.fill(YELLOW)
  c.rect(x + 176, y + 20, 10, 18)

  // BIXUU label
  c.fill(WHITE)
  c.text("BIXUU", x + 67, y + 19)
}

// ============================================================
// OLD AGE HOME
// ============================================================

def drawOldAgeHome(c: CanvasDraw) {

  c.fill(LIGHTBLUE)
  c.rect(0, 0, cwidth, cheight)

  // grass
  c.fill(GREEN2)
  c.rect(0, 0, cwidth, 135)

  // building
  c.fill(Color(245, 225, 190))
  c.stroke(BLACK)
  c.strokeWeight(3)

  c.rect(190, 130, 560, 350)

  // roof
  c.fill(RED)
  c.rect(160, 480, 620, 55)

  // sign
  c.fill(WHITE)
  c.rect(300, 415, 340, 65)

  c.fill(BLACK)
  c.text("OLD AGE HOME", 365, 452)

  // door
  c.fill(BROWN)
  c.rect(435, 130, 75, 150)

  // windows
  c.fill(LIGHTBLUE)
  c.rect(250, 310, 90, 75)
  c.rect(600, 310, 90, 75)

  // tree
  c.fill(BROWN)
  c.rect(80, 100, 30, 220)

  c.fill(GREEN2)
  c.ellipse(30, 270, 150, 130)
  c.ellipse(75, 310, 150, 130)

  // bench
  c.fill(BROWN)
  c.rect(720, 105, 150, 18)
  c.rect(735, 55, 15, 50)
  c.rect(840, 55, 15, 50)
}

// ============================================================
// NOTEBOOK - ENGLISH DETAILS
// ============================================================

def drawNotebook(c: CanvasDraw) {

  // notebook cover
  c.fill(BROWN)
  c.rect(90, 65, 820, 485)

  // paper
  c.fill(WHITE)
  c.rect(125, 90, 750, 435)

  c.fill(BLACK)

  c.text("BIXUU - INTERVIEW NOTEBOOK", 300, 485)

  c.text("ELDERLY PERSON'S OPINION", 295, 445)

  c.text(
    "1. Some elderly people stay here because of different",
    160, 395
  )

  c.text(
    "   family, health, personal or living circumstances.",
    160, 365
  )

  c.text(
    "2. Every elderly person's story is different.",
    160, 325
  )

  c.text(
    "3. They want to be heard with respect and kindness.",
    160, 285
  )

  c.text(
    "4. Time, care, dignity and companionship are important.",
    160, 245
  )

  c.text(
    "5. Their experiences should be listened to respectfully.",
    160, 205
  )

  c.text("Interviewed by: Bixuu", 600, 135)
}

// ============================================================
// NEWS PAPER
// BLACK TEXT ON WHITE PAPER
// ============================================================

def newsPaper(
  c: CanvasDraw,
  speaker: String,
  line1: String,
  line2: String,
  line3: String
) {

  c.fill(WHITE)
  c.stroke(BLACK)
  c.strokeWeight(4)

  c.rect(40, 20, cwidth - 80, 185)

  c.fill(BLACK)

  c.text("AMIGO NEWS", 70, 172)

  c.text(
    "Speaker: " + speaker,
    70, 145
  )

  // Important: BLACK text
  c.text(line1, 70, 112)
  c.text(line2, 70, 82)
  c.text(line3, 70, 52)
}

// ============================================================
// TV STUDIO
// ============================================================

def tvStudio(c: CanvasDraw) {

  c.fill(DARKBLUE)
  c.rect(0, 0, cwidth, cheight)

  // large TV background
  c.fill(Color(40, 65, 105))
  c.rect(55, 215, cwidth - 110, 315)

  // AMIGO
  c.fill(WHITE)
  c.text("AMIGO", 415, 465)

  // LIVE
  c.fill(RED)
  c.rect(780, 480, 110, 35)

  c.fill(WHITE)
  c.text("LIVE", 812, 491)

  // desk
  c.fill(BROWN)
  c.rect(90, 200, 820, 30)
}

// ============================================================
// SCREEN 0
// ============================================================

def mission(c: CanvasDraw) {

  c.fill(CREAM)
  c.rect(0, 0, cwidth, cheight)

  header(c, "AMIGO MEDIA - SPECIAL NEWS MISSION")

  c.fill(WHITE)
  c.stroke(BLACK)
  c.strokeWeight(3)

  c.rect(100, 145, 800, 370)

  c.fill(BLACK)

  c.text("MISSION LETTER", 380, 465)

  c.text("Reporter: Bixuu", 160, 415)

  c.text(
    "Your assignment is to visit an old age home.",
    160, 370
  )

  c.text(
    "Talk respectfully with an elderly person.",
    160, 330
  )

  c.text(
    "Listen to their opinion and write your notes.",
    160, 290
  )

  c.text(
    "Then present the information on AMIGO TV.",
    160, 250
  )

  button(
    c,
    350, 65,
    300, 60,
    "CONTINUE",
    RED
  )
}

// ============================================================
// SCREEN 1
// ============================================================

def acceptMission(c: CanvasDraw) {

  c.fill(CREAM)
  c.rect(0, 0, cwidth, cheight)

  header(c, "MISSION CONFIRMATION")

  c.fill(BLACK)

  c.text(
    "Bixuu, are you ready to start the news report?",
    250, 405
  )

  button(
    c,
    220, 210,
    230, 70,
    "ACCEPT",
    GREEN
  )

  button(
    c,
    550, 210,
    230, 70,
    "DECLINE",
    RED
  )
}

// ============================================================
// SCREEN 2
// ============================================================

def carReady(c: CanvasDraw) {

  c.fill(LIGHTBLUE)
  c.rect(0, 0, cwidth, cheight)

  c.fill(GREEN2)
  c.rect(0, 0, cwidth, 125)

  header(c, "BIXUU - CAR READY")

  drawReporter(c, 220, 125, 1.15)
  drawCar(c, 400, 105)

  c.fill(BLACK)

  c.text(
    "Reporter Bixuu is ready.",
    350, 65
  )

  c.text(
    "Destination: OLD AGE HOME",
    345, 40
  )

  // GREEN CAR BUTTON
  button(
    c,
    350, 5,
    300, 45,
    "START CAR",
    GREEN
  )
}

// ============================================================
// SCREEN 3
// ============================================================

def driving(c: CanvasDraw) {

  c.fill(LIGHTBLUE)
  c.rect(0, 0, cwidth, cheight)

  // grass
  c.fill(GREEN2)
  c.rect(0, 0, cwidth, 150)

  // road
  c.fill(DARKGREY)
  c.rect(0, 60, cwidth, 145)

  // road lines
  c.fill(WHITE)

  var lineX = 0.0

  while (lineX < cwidth) {

    c.rect(
      lineX,
      128,
      65,
      8
    )

    lineX = lineX + 120
  }

  // destination building
  c.fill(WHITE)
  c.stroke(BLACK)
  c.rect(720, 285, 190, 90)

  c.fill(BLACK)
  c.text("OLD AGE HOME", 745, 325)

  // moving car
  drawCar(c, carX, 70)

  c.fill(BLACK)

  c.text(
    "Bixuu is travelling by CAR...",
    335, 430
  )

  if (carX < 650) {
    carX = carX + 3
  }

  if (carX >= 650) {

    button(
      c,
      350, 5,
      300, 50,
      "ARRIVED",
      GREEN
    )
  }
}

// ============================================================
// SCREEN 4
// ============================================================

def home(c: CanvasDraw) {

  drawOldAgeHome(c)

  // reporter
  drawReporter(c, 120, 100, 0.9)

  // elderly person already visible
  drawElder(c, 700, 100, 0.9)

  c.fill(BLACK)

  c.text(
    "Bixuu has reached the OLD AGE HOME.",
    300, 575
  )

  c.text(
    "He is going to respectfully collect information.",
    285, 545
  )

  button(
    c,
    350, 10,
    300, 55,
    "ENTER",
    RED
  )
}

// ============================================================
// SCREEN 5 - INTERVIEW
// ============================================================

def interview(c: CanvasDraw) {

  c.fill(CREAM)
  c.rect(0, 0, cwidth, cheight)

  header(c, "BIXUU - INTERVIEW WITH ELDERLY PERSON")

  // floor
  c.fill(Color(215, 200, 175))
  c.rect(0, 110, cwidth, 420)

  // both clearly visible
  drawReporter(c, 260, 155, 1.15)
  drawElder(c, 700, 155, 1.15)

  c.fill(BLACK)

  if (question == 0) {

    c.text(
      "Bixuu: Can you tell us about your experience here?",
      230, 90
    )

  } else if (question == 1) {

    c.text(
      "Elderly Person: Every person's situation is different.",
      260, 90
    )

  } else if (question == 2) {

    c.text(
      "Elderly Person: We want to be heard with respect.",
      275, 90
    )

  } else {

    c.text(
      "Elderly Person: Kindness, care and companionship matter.",
      245, 90
    )
  }

  button(
    c,
    350, 15,
    300, 55,
    "NEXT",
    RED
  )
}

// ============================================================
// SCREEN 6 - NOTEBOOK
// ============================================================

def notes(c: CanvasDraw) {

  c.fill(Color(210, 220, 235))
  c.rect(0, 0, cwidth, cheight)

  header(c, "BIXUU - INFORMATION COLLECTED")

  drawNotebook(c)

  button(
    c,
    335, 10,
    330, 55,
    "SEND TO AMIGO TV",
    RED
  )
}

// ============================================================
// SCREEN 7 - TV INTRO
// ============================================================

def tvIntro(c: CanvasDraw) {

  tvStudio(c)

  // Reporter
  drawReporter(c, 255, 245, 0.9)

  // Elderly person
  drawElder(c, 690, 245, 0.9)

  newsPaper(
    c,
    "Bixuu",
    "Hello! I am Bixuu from AMIGO.",
    "Today we bring you a special report.",
    "We spoke with an elderly person at an old age home."
  )

  button(
    c,
    350, 5,
    300, 50,
    "START REPORT",
    RED
  )
}

// ============================================================
// SCREEN 8 - TV REPORT
// ============================================================

def tvReport(c: CanvasDraw) {

  tvStudio(c)

  // BOTH PEOPLE ALWAYS VISIBLE
  drawReporter(c, 255, 245, 0.95)
  drawElder(c, 690, 245, 0.95)

  if (tvPage == 0) {

    newsPaper(
      c,
      "Bixuu",
      "I am Bixuu, reporting for AMIGO.",
      "We listened to an elderly person's experience.",
      "Every person's story is different."
    )

  } else if (tvPage == 1) {

    newsPaper(
      c,
      "Bixuu",
      "The interview showed us an important message.",
      "Elderly people want respect, kindness and care.",
      "Their experiences deserve to be heard."
    )

  } else {

    newsPaper(
      c,
      "Bixuu",
      "This report is based on the interview notes.",
      "We should listen to elderly people with dignity.",
      "Thank you for watching AMIGO NEWS."
    )
  }

  button(
    c,
    350, 5,
    300, 50,
    "NEXT",
    RED
  )
}

// ============================================================
// SCREEN 9 - FINAL
// ============================================================

def ending(c: CanvasDraw) {

  c.fill(DARKBLUE)
  c.rect(0, 0, cwidth, cheight)

  c.fill(Color(40, 65, 105))
  c.rect(80, 110, 840, 430)

  c.fill(WHITE)
  c.text("AMIGO", 420, 475)

  // PEOPLE CLEARLY VISIBLE
  drawReporter(c, 300, 220, 1.0)
  drawElder(c, 700, 220, 1.0)

  // FINAL WHITE PAPER
  c.fill(WHITE)
  c.stroke(BLACK)
  c.strokeWeight(3)

  c.rect(145, 20, 710, 150)

  // BLACK TEXT
  c.fill(BLACK)

  c.text(
    "THANK YOU FOR JOINING THE MEDIA",
    285, 130
  )

  c.text(
    "Reporter: Bixuu",
    395, 95
  )

  c.text(
    "AMIGO TV - NEWS REPORT COMPLETE",
    300, 65
  )

  c.text(
    "Respect ? Kindness ? Dignity",
    370, 38
  )

  button(
    c,
    360, 555,
    280, 50,
    "RESTART",
    GREEN
  )
}

// ============================================================
// MAIN ANIMATION
// ============================================================

animateWithCanvasDraw { c =>

  if (screen == 0) {

    mission(c)

  } else if (screen == 1) {

    acceptMission(c)

  } else if (screen == 2) {

    carReady(c)

  } else if (screen == 3) {

    driving(c)

  } else if (screen == 4) {

    home(c)

  } else if (screen == 5) {

    interview(c)

  } else if (screen == 6) {

    notes(c)

  } else if (screen == 7) {

    tvIntro(c)

  } else if (screen == 8) {

    tvReport(c)

  } else if (screen == 9) {

    ending(c)
  }
}

// ============================================================
// MOUSE CONTROL
// ============================================================

onMouseClick { (x, y) =>

  // ----------------------------------------------------------
  // MISSION
  // ----------------------------------------------------------

  if (screen == 0) {

    if (
      x > 330 &&
      x < 670 &&
      y > 50 &&
      y < 150
    ) {

      screen = 1
    }

  // ----------------------------------------------------------
  // ACCEPT
  // ----------------------------------------------------------

  } else if (screen == 1) {

    if (
      x > 200 &&
      x < 470 &&
      y > 190 &&
      y < 310
    ) {

      screen = 2

    } else if (
      x > 530 &&
      x < 810 &&
      y > 190 &&
      y < 310
    ) {

      screen = 0
    }

  // ----------------------------------------------------------
  // CAR
  // ----------------------------------------------------------

  } else if (screen == 2) {

    if (
      x > 330 &&
      x < 670 &&
      y > 0 &&
      y < 100
    ) {

      carX = 30
      screen = 3
    }

  // ----------------------------------------------------------
  // DRIVING
  // ----------------------------------------------------------

  } else if (screen == 3) {

    if (
      carX >= 650 &&
      x > 330 &&
      x < 670 &&
      y > 0 &&
      y < 100
    ) {

      screen = 4
    }

  // ----------------------------------------------------------
  // OLD AGE HOME
  // ----------------------------------------------------------

  } else if (screen == 4) {

    if (
      x > 330 &&
      x < 670 &&
      y > 0 &&
      y < 100
    ) {

      question = 0
      screen = 5
    }

  // ----------------------------------------------------------
  // INTERVIEW
  // ----------------------------------------------------------

  } else if (screen == 5) {

    if (
      x > 330 &&
      x < 670 &&
      y > 0 &&
      y < 100
    ) {

      if (question < 3) {

        question = question + 1

      } else {

        screen = 6
      }
    }

  // ----------------------------------------------------------
  // NOTEBOOK
  // ----------------------------------------------------------

  } else if (screen == 6) {

    if (
      x > 315 &&
      x < 685 &&
      y > 0 &&
      y < 100
    ) {

      tvPage = 0
      screen = 7
    }

  // ----------------------------------------------------------
  // TV INTRO
  // ----------------------------------------------------------

  } else if (screen == 7) {

    if (
      x > 330 &&
      x < 670 &&
      y > 0 &&
      y < 100
    ) {

      tvPage = 0
      screen = 8
    }

  // ----------------------------------------------------------
  // TV REPORT
  // ----------------------------------------------------------

  } else if (screen == 8) {

    if (
      x > 330 &&
      x < 670 &&
      y > 0 &&
      y < 100
    ) {

      if (tvPage < 2) {

        tvPage = tvPage + 1

      } else {

        screen = 9
      }
    }

  // ----------------------------------------------------------
  // END / RESTART
  // ----------------------------------------------------------

  } else if (screen == 9) {

    if (
      x > 340 &&
      x < 660 &&
      y > 535 &&
      y < 630
    ) {

      carX = 30
      question = 0
      tvPage = 0
      screen = 0
    }
  }
}