↑ 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

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

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.

Reference

Getting Started

Hello, World

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

Exercise

  • 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

Exercise

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

Drawing a Rectangle Using Variables

Exercise

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

Using a Random Number for the x coordinate

Exercises

  • 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

Loops

Exercise

  • 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

Exercises

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

Array of Color Strings

Exercises

  • 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

Animation

Exercises

  • 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.

Exercises

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

Keyboard Input

Exercises

  • 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

Exercise

  • Have more, smaller squares

Polygons

Exercise

  • 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%.

Images

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

Exercises

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

Image Moving with Keys

Exercises

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