Graphics and Animation Using Scala
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
- Dave’s Scala Videos
- Canvas tutorial from Mozilla (This is for JavaScript, not Scala.js, so the syntax will be somewhat different.)
- Canvas API
- MDN Events reference
- Keyboard codes
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)