↑ All Courses

Student Qualifications

  • Grades 6–12 (Accelerated learners in earlier grades are welcome with instructor approval)
  • Logical thinking and math skills
  • Facility with computers

Class Description

We’ll learn a little Scala, while making graphics and animation in the browser with HTML5 Canvas.


Scala is a popular programming language that many top programmers see as a natural evolution from the Java language.

Graphics and Animation

Creating graphics and animation is a fun way to learn a programming language.

Programming in the Web Browser

We’ll do our Scala programming in the Web browser, using Scala.js. This way we won’t have to install the language and a development environment, and we can use the graphics features of the HTML canvas.


ScalaFiddle is a web site where we’ll write and run Scala code. ScalaFiddle will translate the code to JavaScript using Scala.js, and that JavaScript code will run in the browser.


Getting Started

Hello, World

It’s customary when learning a new programming language to write a “Hello, world” program.


  • Change this program so it says “Hello, world” instead of “Hi”. Do it right here on this web page, or in ScalaFiddle.

Drawing a Rectangle


  • Add a second rectangle with
    • a different position
    • a different size
    • a different color

Drawing a Rectangle Using Variables


  • Change the rectangle’s position, size and shape by changing the values of the four vars

Using a Random Number for the x coordinate


  • Change the argument to nextInt (the number in parentheses) and see what happens. You’ll need to run the program several times.
  • Make the y coordinate random, too



  • Make the loop run a different number of times. Keep it less than 1,000 to be kind to your computer.

Loops and Random Coordinates


  • Make the y coordinate random, too
  • Change the quantity of rectangles

Array of Color Strings


  • Add a line of code to print one of the color names chosen randomly
  • Add a loop to print three color names chosen randomly
  • Add a loop to print all the color names in order



  • Change the animation speed
  • Change the background and the text colors
  • Change the text of the message
  • Change the typeface (“font”)
  • Make the text also move vertically
  • Animate a rectangle instead of text

Color with Hue, Saturation and Lightness

Hues go from 0–360.


  • Find the hues for green and blue
  • Make the hue change over time

Keyboard Input


  • Handle at least two more keys for movement in other directions
  • Move a rectangle using arrow or wasd keys
  • Change the hue of the rectangle with key presses

Nested Loop Making a Grid of Squares


  • Have more, smaller squares



  • Make the mouse’s y position vary the saturation or lightness instead of the hue. They both range from 0 to 100%, and the normal lightness value is 50%.


The Phaser Sandbox (Phaser is a different subject, entirely) has lots of sprite images online.


  • Change to a different image
  • Add a second image (a player character), and move it around with the keyboard

Image Moving with Keys


  • Change the number of pixels the character moves each keypress
  • Add a second image and move it around with different keyboard keys (solution)