Kids, Code, and Computer Science Magazine

Create Shapes and Colors with Racket

marcelo on Flickr

Racket is a fun and easy programming language to learn because it's all about creating colors and shapes as you learn.

Colours are fun. Shapes are fun. By that logic, colourful shapes are double-fun. Lucky for us, the Racket programming language has plenty of built-in functions that make it easy to create colourful pictures and patterns.

How to Get Setup

We’ll be using an online Racket interpreter to compile our code and display the pictures onscreen. Open up your favourite web browser, and navigate to which displays this welcome page:

The Website Home Page

Click on Start Coding, on the left side, to go straight to the interpreter.

Start with Basic Shapes (and Colors!)

Time to make some shapes! Enter the following code in the left-hand window:

( circle 50 “solid” “red” )

Click the Run button at the top left — and poof! A red circle should appear in the right-hand console, as shown here.

Racket Code and Output

Experiment with making different shapes, sizes and colours. Try drawing multiple shapes at a time by typing these three commands one line below another in the editor:

( square 20 “solid” “blue”)
( circle 70 “outline” “green”)
( star 100 “solid” “yellow”)

From here, use your imagination to create patterns and sequences. For example:

  • Make a sequence of stars in rainbow colours
  • Make a pattern that alternates shapes, colours, and sizes
  • Draw a shape that gets progressively bigger and then gets smaller again

Behind the Scenes

Drawing shapes with Racket is easy because a lot of the difficult work — messing around with individual pixels and such — has been done for us. The circle, square, and star functions are known as built-in functions.

A function is a block of code with a small, specific… well, function. The circle function draws a circle. The square function draws a square.

Often, as programmers, we’ll write functions from scratch. Other times, we call built-in functions or library functions, which are written by another programmer and embedded into the language.

Think of option A as cooking a meal at home, and option B as ordering takeout from a restaurant. In the first case, you tweak your food to contain exactly the kind of flavours you want. In the second case, your options are limited, but you don’t have to deal with boring details like buying groceries, preparing the ingredients, or doing dishes. And the restaurant probably isn’t going to mess up and burn your food to a crisp.

Same with Racket shape functions. There may not be an option to make a circle into a smiley face, but it least that circle is easy to draw!

The shapes functions’ blueprint looks like this:

( <function_name> <size> <fill_type> <color> )

The first word between the brackets is the function’s name, and the following three words are the function’s parameters — the options you have to modify your shape.

Here’s an example from earlier:

( circle 70 “outline” “green” )

where circle is the function_name, 70 is size, outline is fill_type, and red is color as the values to fill in this Racket function blueprint.

When the Code Isn’t Quite Shipshape

Your code isn’t always going to be perfect. Maybe you’re sleepy and you forget a bracket. Maybe you didn’t realize there were supposed to be quotes around the word “solid”. Luckily, there’s no penalty for code that doesn’t work on the first try. And — bonus! — you can use the console’s error messages to figure out what went wrong.

For example, what if you only pass two parameters to the function? Say:

( circle 50 “red” )

Or what if you put the parameters out of order?

( circle 50 “red” “solid” )

You should see the following error messages in the console, as shown here:

circle: expects a style (“solid” / “outline”) or an opacity value [0-255]) as 2nd argument, but given: “red”; other arguments were: 50 “solid”
at: line 1, column 0, in <definitions>

Racket Error Message

Functions are very particular about the number of parameters they take, and the order of these parameters.

Create Colors by Hand

If you’re up for a little extra challenge, try making your own colour, using the make-colour function:

( make-color 200 50 10 )

Nest it inside one of the shape functions as follows:

( circle 50 “solid” (make-color 200 50 10) )

Essentially, we’ve just replaced a predefined colour — red — with a function that makes a colour from scratch by specifying the new colour’s RGB values.

RGB is shorthand for “Red, Green, Blue”. In computer science, each pixel you see is a mix of these three basic colours in different proportions. 0 means none at all, whereas 255 is a lot.

But wait — aren’t the three primary colours red, blue, and yellow? In painting, yes. In computers, and in science, green is the popular kid in town. Can you guess what the RGB value for yellow is? (Hint: two of the numbers are 255, and one is 0)

Play around with changing the numbers of the make-color function and see what colours you get. What happens if you write a number bigger than 255?

A Bit About Racket…

Racket is an evolution of programming languages like Lisp and Scheme, which are known for being flexible and having very little syntax – just loads of brackets. They’re used for things like artificial intelligence, math, and list processing.

Learn More

Racket Language

RGB Color Calculator

RGB, CMYK, and Color Systems Comparison

RGB Color Model

Also In The February 2017 Issue

This cryptography method is based on the fact some tasks are relatively easy to do, but extremely difficult to undo.

There's a way to find out if your online passwords have been stolen, and how to prevent it.

Racket is a fun and easy programming language to learn because it's all about creating colors and shapes as you learn.

Networks are a mostly hidden but critical part of the internet.

Surveillance cameras, satellites, RFID tags, and social media activities all create unique digital footprints.

Developers deal with common problems in their work. Here’s are a few problems and how to overcome them.

Programmers use libraries but instead of books they create and share code, often for free, to help solve common problems.

These cards are a fun way to learn Scratch, look up how to do things, and make applications.

Another mysterious four-letter acronym that helps secure information online.

Dorothy Vaughn, Mary Jackson, and Katherine Johnson not only helped make history, they are part of a long line of women in computing

It's almost time to think about summer tech camps if your kids are interested. Here are a few questions to ask.

Your web browser knows (and tells) a lot more about you than you might realize.

When you pick a programming language to learn first, it helps to figure out what software you want to create.

This odd acronym offers security protection beyond your password. Here are a few examples of how 2FA works.

Links from the bottom of all the February 2017 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about computer science, software programming, and technology for February 2017.