Code Sketch

// --- Kojo Vector Art: Laptop Opening & Coding Square Animation ---
cleari()
setBackground(Color(15, 18, 28)) // ????? ????/???????? ??? ??????????

// ?. ???????? ??? / ??????? (Laptop Bottom Base)
def drawLaptopBase(): Unit = {
  // ???????? ???? (Bottom Body)
  val base = Picture.fromVertexShape { p =>
    p.beginShape()
    p.vertex(-120, -100)
    p.vertex(120, -100)
    p.vertex(140, -125)
    p.vertex(-140, -125)
    p.endShape()
  }
  base.setFillColor(Color(180, 185, 195)) // ??? ????????
  base.setPenColor(Color(120, 125, 135))
  draw(base)

  // ???????? (Trackpad)
  val trackpad = Picture.rect(30, 15)
  trackpad.setFillColor(Color(150, 155, 165))
  trackpad.setPenColor(noColor)
  trackpad.setPosition(-15, -120)
  draw(trackpad)

  // ????????? ????? ????? (Keyboard Tray)
  val keyboard = Picture.fromVertexShape { p =>
    p.beginShape()
    p.vertex(-100, -103)
    p.vertex(100, -103)
    p.vertex(110, -114)
    p.vertex(-110, -114)
    p.endShape()
  }
  keyboard.setFillColor(Color(40, 45, 55))
  keyboard.setPenColor(noColor)
  draw(keyboard)
}

// ?. ??????? ??????? (Opening Laptop Screen Base)
def drawLaptopScreen(openHeight: Double): Picture = {
  // ????????? ???? ???? ???????? (Screen Display Area)
  val screen = Picture.fromVertexShape { p =>
    p.beginShape()
    p.vertex(-100, -95)
    p.vertex(100, -95)
    p.vertex(100, -95 + openHeight)
    p.vertex(-100, -95 + openHeight)
    p.endShape()
  }
  screen.setFillColor(Color(5, 10, 20)) // ??? ??????? ????? ???????
  screen.setPenColor(Color(100, 110, 125))
  screen.setPenThickness(2)
  screen
}

// ?. ??????????? ?????? ?????? (Coding Animation)
def drawCodingLines(progress: Double): Unit = {
  if (progress > 0) {
    val line1 = Picture.text("1  def drawSquare(): Unit = {", 9)
    line1.setPenColor(Color(0, 220, 130)) // ????? ?????? ???????
    line1.setPosition(-90, 20)
    draw(line1)
  }

  if (progress > 30) {
    val line2 = Picture.text("2    val square = Picture.rect(40, 40)", 9)
    line2.setPenColor(Color(255, 180, 0)) // ????? ???
    line2.setPosition(-90, 5)
    draw(line2)
  }

  if (progress > 60) {
    val line3 = Picture.text("3    square.draw()", 9)
    line3.setPenColor(Color(0, 180, 255)) // ???? ???
    line3.setPosition(-90, -10)
    draw(line3)
  }
}

// ?. ?????????? ?????? ??????? ???? (Animated Glowing Square)
def drawAnimatedSquare(squareSize: Double): Unit = {
  if (squareSize > 0) {
    val square = Picture.rect(squareSize, squareSize)
    square.setFillColor(Color(0, 210, 255, 100)) // ??????? ??????? ???????????
    square.setPenColor(Color(0, 255, 200)) // ?????? ???????
    square.setPenThickness(2)
    square.setPosition(-squareSize / 2.0, -60.0 + (squareSize / 2.0))
    draw(square)
  }
}

// ?. ??????? ????????? ??? (Laptop Opening -> Coding -> Square Drawing)
animateWithState(0.0) { frame =>
  erasePictures()

  // ?. ???????? ??? ?????
  drawLaptopBase()

  // ?. ?????? ????? (Phase 1: Lid Opening 0 to 120 Height)
  val screenHeight = if (frame < 60) frame * 2.0 else 120.0
  draw(drawLaptopScreen(screenHeight))

  // ?. ?????? ????? ????????? ?????? ???? ???? (Phase 2: Screen Fully Open)
  if (frame >= 60) {
    val codingProgress = frame - 60
    drawCodingLines(codingProgress)

    // ?. ?????? ????? ???????? ???????? ???? ???? (Phase 3: Drawing Square)
    if (codingProgress > 80) {
      val squareSize = Math.min((codingProgress - 80) * 1.5, 45.0)
      drawAnimatedSquare(squareSize)
    }
  }

  // ?????
  val title = Picture.text("LAPTOP CODING ANIMATION", 14)
  title.setPenColor(Color(255, 215, 0))
  title.setPosition(-95, 140)
  draw(title)

  frame + 1.0 // ??????????? ?????
}