Skip to content
August 16, 2011 / cdsmith

Haskell For Kids: Week 1!

And We’re Off!

Thanks again to everyone that’s supported this project and stepped up to be a part of it.  Today, I taught my first in-person class on Haskell, and it was a blast!  This is my first weekly summary post, containing what we’re doing this week.

First: Introductions

Since there are a number of kids following along with this, let’s all get started with some introductions!

  • Me: My name is Chris Smith, and I’m teaching the in-person programming class at Little School on Vermijo that got all of this started.  I’m a huge fan of Haskell, and am really excited to be able to share that with new people!

  • Sue: Sue Spengler is the “founder, lead teacher, principal, superindendent, custodian, secretary, and lunch lady” for the Little School on Vermijo.  The school is her project, and she’s doing some pretty amazing things.  I had to poke around a bit for a photo, so I hope she likes this one!
  • My local students: The kids in my class today were Grant, Sophia, Marcello, and Evie (I hope I spelled that right!)  I’ll ask them to introduce themselves in comments on this post, so look for them there!
  • Everyone else: Any other kids who are taking the class, please use the comments to introduce yourselves as well!  You can say hello, and if you like, you can even link to a video or  picture.

I hope everyone takes the time to leave comments and say hello to each other.  Learning things is a lot more fun when you talk to other people.

The Plan

We talked about where we’re going, including:

  1. Write computer programs to draw pictures.
  2. Change our computer programs so the pictures move!
  3. Build a game of your own choosing.

This will take the school year!  That’s because this class isn’t just about memorizing some thing about a particular computer program: it’s about being creative, trying things, and doing something you’re proud of.  So there will be a lot of free time to play around and try out different ideas in your programs.  We are learning the Haskell programming language, but in the end, the class is more about being in control of your computer and designing and building something really cool from scratch, not just remembering some stuff about Haskell.

Organization of Computers and Programming

The first thing we talked about was what a computer program is, and how some of the ideas fit together.  Here’s the whiteboard when we were done!

Some of the ideas we talked about:

  • How a computer works.  The main part of a computer is built from a device for following instructions (the “CPU”), and a device for remembering information (“memory”).
  • Machine language.  The computer doesn’t speak English, of course!  It follows instructions in a language called “machine language”.  This language is easy for the computer to understand, but it’s very, very difficult to write programs in.
  • Compilers.  Instead of writing our programs in machine language, we write them in other languages, and then get the computer to translate them for us!  The program that does that is called a compiler.
  •  Some programming languages.  We have a choice what programming language to use when writing computer programs!  We brainstormed some languages kids in the class had heard about: Java, C, C++, Objective C, JavaScript, Java, and Smalltalk.  (Yes, Marcello had heard of Smalltalk!  I’m very impressed.)  The language we’re learning in this class is called Haskell.
  • Libraries.  Libraries are pieces of programs that other people have written for us, so we don’t have to start from scratch.  We spent some time imagining all of the steps involved what we might consider very easy things to do with a computer.  For example, thing of all the little steps in drawing a window… how many circles, rectangles, lines, letters, and so on can you find in a window on your computer?  Libraries let someone describe things once instead of making you repeat all that each time.

We talked about how we’ll be using:

  1. A programming language called Haskell.
  2. A library called Gloss.

Playing Around

At this point, we all used a web site to write some simple computer programs using Haskell and Gloss.  The web site is:

http://dac4.designacourse.com:8000/

We started out with some really simple programs, like these:

Draw a circle!

import Graphics.Gloss
picture = circle 80

Draw a rectangle!

import Graphics.Gloss
picture = rectangleSolid 200 300

Draw some words!

import Graphics.Gloss
picture = text "Hello"

All of these programs have some things in common:

  • The first line of each one is “import Graphics.Gloss”.  This tells the compiler that you want to use the Gloss library to make pictures.  You only need to say it once, and it has to be at the very beginning of your program.
  • They all then go on to say “picture = …”.  That’s because the way our programs work is to make a picture, and call it “picture”.  The web site we’re using then takes that picture, whatever we define it to be, and draws it for us.  We talked about how in the future, we might define other things with other names, but for now, we’re okay with just telling the compiler what “picture” is.
  • After the “=”, they describe the picture that we want to draw.  There are several types of pictures, and we’ve just seen three of them!  All of the kinds of pictures you can create are part of the Gloss library.
  • Except for the last one, they all use some distances.  For example, the 80 in the first example is the radius of the circle (the distance from the middle to the outside).  You can make that number larger to draw a bigger circle, and smaller to draw a smaller circle.  You can do the same with the width and height of the rectangle.

We did have problems with some people using the web site.  If you’re having trouble, you might need to make sure you have a new version of your web browser.  Also, the web site doesn’t work with Internet Explorer… so try with Chrome, Firefox, Opera, or Safari.  Don’t worry too much about the web browser problems: soon enough, you’ll install the Haskell compiler on your own computer, and you won’t need the web site to run your programs any more!  We’re just using the web site to get started quickly.

Drawing more than one thing!

By this time, several kids were asking if they can draw more than one shape at a time.  Yes, you can!  To draw more than one thing, you can use “pictures” (notice the s at the end).  For example,

import Graphics.Gloss
picture = pictures [
    circle 80,
    rectangleWire 200 100 ]

Notice we do this:

  • The word “pictures”
  • An opening square bracket.
  • A list of the pictures we want to draw, separated by commas.
  • A closing square bracket.

We talked about how it helps to make new lines in your program sometimes.  The only think you need to be careful of is that when you make a new line, you have to put a few spaces at the beginning to indent it.  See how the second and third lines of the part where we define “picture” are indented a little?

Changing your pictures

The Gloss library gives you some ways you can change your pictures, too!

You can change the colors with “color”.

import Graphics.Gloss
picture = color red (circleSolid 80)

Notice how you say “color”, then the name of the color you want, and then the picture to draw, in parentheses.  The parentheses are important!  They mean the same thing they do in math: treat that whole part as a single “thing” (in this case, a picture).

We talked about what colors Gloss knows about.  Here’s the list: black, white, red, green, blue, yellow, magenta, cyan, rose, orange, chartreuse, aquamarine, azure, and violet.  We all laughed because Sue picked a weird color name off the top of her head, and asked “Does it know chartreuse?”  Yes, it does.  Lucky guess!

You can also move things around on the screen.

import Graphics.Gloss
picture = translate 100 50 (rectangleSolid 50 50)

When you want to move things around, Gloss calls that “translate”.  Yes, it’s a weird name, but “translate” just means move something left, right, up, or down.  The first number after translate is how far to move it to the side.  Positive numbers mean right, negative numbers mean left, just like a number line!  The second number is how far to move it up or down.  Positive numbers mean up, and negative numbers mean down.

Keep in mind that in Haskell, you have to write negative numbers in parentheses!  If you say “translate -100 …”, then Haskell thinks you want to subtract one hundred from “translate”.  It doesn’t know how to subtract a number from a verb (I don’t either) so it gives up!  You have to write “translate (-100) …” instead, with the parentheses.

You can also turn things.  The verb for that is “rotate”.  Let’s draw a diamond.

import Graphics.Gloss
picture = rotate 45 (rectangleWire 100 100)

You rotate things in degrees.  Remember that 360 degrees means turn it all the way around to where it started, so it won’t do anything!  45 degrees is half of a right angle.  Do you see why that gives you a diamond?

The last thing you can do is stretch the picture.  The verb for that is “scale”.

import Graphics.Gloss
picture = scale 2 1 (circle 100)

That will draw an ellipse, which is like a circle but it’s wider than it is tall!

Don’t worry if this all doesn’t make sense yet!  We’ll be spending a lot of time playing around with how to put these things together!  Here’s the whiteboard after we finished all of this…

Time for Experimentation

We spent a lot of time with everyone making their own shapes and pictures of whatever they want.  The best way to get more comfortable with all of this is to play around.  Make lots of little changes and see what happens!  Try to guess what’s going to happen, then try it and see if you’re right or wrong.

Here are some pictures of the kids with their projects:

Sophia and Evie showing off two circles side by side.  These eventually became the eyes in a face!

That’s Grant with his diamond.  It looked even better after he stretched it a little bit up and down.

This was Marcello’s graphics… centering the word in the circle was a long task!  If you try it, you’ll notice text doesn’t get normally drawn right in the middle like other pictures do, so Marcello put in a lot of trial and error time with “translate” to put the word in the circle.

That’s Sophia being very excited at getting her two eyes in the right places!

Your Assignment

Your mission, if you choose to accept it… is to plan and create a drawing of something you’re interested in!  Maybe it’s a fish, a garden, a space station, or a dragon… just make sure you can draw it by using rectangles and circles of different colors, and moving, turning, or stretching them.  Here at the Little School, we’ll be spending our remaining class this week and our classes next week working on this.  Spend some time and come up with something you’re proud of!

About these ads

41 Comments

Leave a Comment
  1. suesun / Aug 16 2011 10:38 pm

    Holy cow! I can’t believe we did all of that in an hour! Awesome first day.
    Oh, and I’m Ms. Sue, the LSV teacher. Aren’t I lucky to have Chris living right next door to me?
    I do really like that photo, Chris; it’s one of my favorites, but I must say that it’s about 3 years old! :)
    Can’t wait to meet the rest of you, and see the drawings that you create.

  2. Chris Done / Aug 16 2011 11:43 pm

    I just woke up and read this on my iPod, a very encouraging read; looks like a lot of fun! Look forward to more posts.

  3. Ashley Yakeley / Aug 17 2011 12:28 pm

    I assume there’s an empty picture? And that your pictures form a monoid?

  4. Grant / Aug 17 2011 3:42 pm

    Thank you for teaching us, Chris! I really like my dart board, so I think i’ll stick with it.

  5. John Spengler / Aug 17 2011 9:40 pm

    What fun! It brings back (very old…) fond memories of my programming days. Nothing was better than finally having it work and run. And all the hours I spent fixing glitches… I’m glad the kids are getting this experience as well!

    Chris, who uses Haskell? What is principally used for?

    John

    • cdsmith / Aug 17 2011 10:27 pm

      John, good question about who uses it. It doesn’t really have a niche, so to speak. A lot of people are interested in Haskell right now because of parallelism, multicore CPUs, and such… it’s apparently used more than average in finance, and in other places where being sure your code is correct is really important…

      That said, we aren’t using Haskell because of potential job skills. We aren’t even learning the whole language, and it’s fine with me if no one in this class goes into computer programming as a career. It’s just great practice at logical thinking.

  6. Steve Bachechi / Aug 17 2011 11:08 pm

    Wow this is a god reason for my son not to do his homework!

  7. marcello / Aug 17 2011 11:17 pm

    Chris my hat is off to you you did a fantastic job but i have one problem (as always)
    problem:(i want my suns line to look like it has rays witch i added already and worked fine than i added
    sun=pictures [(color orange (circleSolid 99)),
    translate (-96) (-32) (beam),
    rotate (-90) (translate (134) (-200) beam),
    rotate (-90) (translate (134) (50) beam),
    rotate (-45) (translate (70) (-36) beam),
    rotate (45) (translate (-165) (80) beam)]

    and now it has the beams placed on the bottom with this code how do i do that)

    code:
    import Graphics.Gloss

    cloud=pictures [translate (-5) (32)(color (light(light rose)) (circleSolid 85)),
    translate (-160) (32)(color (light(light rose)) (circleSolid 85)) ,
    translate (156) (32)(color (light(light rose)) (circleSolid 85)),
    color (light (light (light yellow))) (rectangleSolid 480 100)]

    beam=pictures[color orange (rectangleSolid 3 100)]

    sun=pictures [(color orange (circleSolid 99)),
    translate (-96) (-32) (beam),
    rotate (-90) (translate (134) (-200) beam),
    rotate (-90) (translate (134) (50) beam),
    rotate (-45) (translate (70) (-36) beam),
    rotate (45) (translate (-165) (80) beam)]

    picture = pictures [color ( dark rose) (rectangleSolid 500 500),
    translate (-98)(-150) (sun),

    rotate 50 (translate (-163)(-275) (color(dark(dark green)) (circleSolid 99))),

    (translate (-180)(-280) (color(dark(dark green)) (circleSolid 99))),

    (translate (-65)(-300) (color(dark(dark green)) (circleSolid 99))),

    (translate (190)(-290) (color(dark(dark green)) (circleSolid 99))),

    translate 100 100(scale (0.5) (0.5) (cloud))]

    • cdsmith / Aug 17 2011 11:40 pm

      Marcello, it looks like you’ve used translate on the entire sun, and then again on the rays. That will mean that the rays will accidentally get moved twice: once when you move the whole sun, and then a second time inside your description of the sun itself.

      If I can make a suggestion, save off a copy of your program (in a file on your computer), and then work on drawing ONLY the sun by itself in the middle of the screen. Get it looking the way you want. Then, when you’re done with that, change “picture = ” to “sun = “, put it back in your entire program, and then don’t make any more changes to it. Just use it from the rest of the program as is.

  8. Samantha / Aug 17 2011 11:29 pm

    This is so cool! I love how quickly Marcello and the gang are learning this. I especially love the photos. They really show how much fun everyone is having, including Chris.

    • marcello / Aug 18 2011 4:31 pm

      Chris cool Chris i did that now i am getting a error and i have tried to copy and paste pictures and get the same thing PLEASE HELP!!

      error code :Sorry, there were problems with your program:
      Not in scope: `picture’
      Perhaps you meant `pictures’ (imported from Graphics.Gloss)

      code:

      import Graphics.Gloss

      cloud=pictures [translate (-5) (32)(color (light(light rose)) (circleSolid 85)),
      translate (-160) (32)(color (light(light rose)) (circleSolid 85)) ,
      translate (156) (32)(color (light(light rose)) (circleSolid 85)),
      color (light (light (light yellow))) (rectangleSolid 480 100)]

      beam=pictures[color orange (rectangleSolid 3 100)]

      sun=pictures [(color orange (circleSolid 99)),
      translate (-96) (-32) (beam),
      rotate (-90) (translate (134) (-200) beam),
      rotate (-90) (translate (134) (50) beam),
      rotate (-45) (translate (70) (-36) beam),
      rotate (45) (translate (-165) (80) beam)]
      {-
      picture = pictures [color ( dark rose) (rectangleSolid 500 500),
      translate (-98)(-150) (color orange (circleSolid 99)),
      translate (-96) (-32) (beam),
      rotate (-90) (translate (134) (-200) beam),

      rotate (-90) (translate (134) (50) beam),

      rotate (-45) (translate (70) (-36) beam),

      rotate (45) (translate (-165) (80) beam),

      rotate 50 (translate (-163)(-275) (color(dark(dark green)) (circleSolid 99))),

      (translate (-180)(-280) (color(dark(dark green)) (circleSolid 99))),

      (translate (-65)(-300) (color(dark(dark green)) (circleSolid 99))),

      (translate (190)(-290) (color(dark(dark green)) (circleSolid 99))),

      translate 100 100(scale (0.5) (0.5) (cloud))]
      -}

      • cdsmith / Aug 18 2011 4:53 pm

        It looks like you’ve commented out your definition of picture! That’s fine, but you need to have something in your program somewhere called ‘picture’, so that the program knows what to draw. Try adding a line like this:

        picture = sun

        Then you’ll be able to work with just the sun. When you’re done with that, you can change ‘picture’ to be something else, and so on!

  9. marcello / Aug 18 2011 8:13 pm

    need help again code(only sun):
    error :Sorry, there were problems with your program:
    tmp/59iwx00mypd8b35q.hs:10:22:
    The function `translate’ is applied to five arguments,
    but its type `Float -> Float -> Picture -> Picture’ has only three
    In the expression:
    (translate (- 99) (- 30) (beam) (color orange) (circleSolid 99))
    In the first argument of `pictures’, namely
    `[(translate (- 99) (- 30) (beam) (color orange) (circleSolid 99)),
    translate (- 96) (- 32) (beam),
    rotate (- 90) (translate (134) (- 200) beam),
    rotate (- 90) (translate (134) (50) beam), ....]‘
    In the expression:
    pictures
    [(translate (- 99) (- 30) (beam) (color orange) (circleSolid 99)),
    translate (- 96) (- 32) (beam),
    rotate (- 90) (translate (134) (- 200) beam),
    rotate (- 90) (translate (134) (50) beam), ....]

    picture = pictures [(translate (-99) (-30)(beam) (color orange) (circleSolid 99)),
    translate (-96) (-32) (beam),
    rotate (-90) (translate (134) (-200) beam),
    rotate (-90) (translate (134) (50) beam),
    rotate (-45) (translate (70) (-36) beam),
    rotate (45) (translate (-165) (80) beam)]

    (please help)

    • cdsmith / Aug 18 2011 11:25 pm

      The message is a pretty good clue. Can you find a “translate” that has five things after it? What did you mean instead?

  10. Cyril / Aug 21 2011 2:49 pm

    Just went through lesson 1 with my son Misha. He is clearly outside of the target age group (turning 9 on September 1), but our first session went fairly smoothly. Chris, thank you very much for making this course!

    Cyril

    • cdsmith / Aug 21 2011 5:25 pm

      Awesome! I hope you’re successful, and that he has fun with it. The class I’m teaching is older, but if it works, it works.

  11. Ivan / Aug 23 2011 4:47 am

    Dear Chris and Sue, I think your school sounds fantastic!

    My son (11) and I (44) have both tasted Haskell, and we’re keen to learn it properly. Your course is an exciting prospect. We’ll follow along as best we can.

    Thank you for writing it up online. Thank you for providing the server — very handy!

    Best wishes

    Ivan

  12. marcello / Aug 23 2011 10:03 pm

    hey chris marcello i have one quick question if i wanted to take a rectangle and make it go over one of my hills and be rounded would that be possible???

    • cdsmith / Aug 23 2011 10:15 pm

      Hmm, that’s a tough one. If you filled in four circles and two rectangles, they could make a rectangle with rounded corners. Put a circle at each corner, and then two overlapping rectangles in the middle. It’s hard to explain without a picture, so ask me again during our work time in class tomorrow, and I can draw what I mean on the whiteboard.

      We’re also going to talk about polygons tomorrow. Those will always have straight edges, but if you draw enough straight edges, you can make it look curved. In fact, did you know that even most 3D computer games don’t really have curves in them at all? They just use lots and lots of little flat surfaces, small enough so that it looks curved.

  13. arthur clemens / Aug 26 2011 10:17 am

    Your course is just in time for my curious daughter of 10. Thanks for starting this.

    • cdsmith / Aug 26 2011 11:33 am

      Great to hear! Feel free to follow along, and ask (or have her ask) questions on the weekly posts. The more, the merrier!

  14. EdvardM / Nov 19 2011 2:28 pm

    I’ve read few similar blog posts (Haskell for kids, so crazy idea I have to try it :) that I finally took the initiative after reading your post, and am going to teach.. Haskell.. for 14 to 17 years old schoolers.

    Can’t wait. I’m so thrilled!

  15. Yogesh Sajanikar / Jan 9 2012 6:51 am

    Great work! I can’t wait to get it going with my son.

  16. a-j lakanen / Oct 17 2012 2:46 pm

    Sounds cool!

  17. Przemek / Feb 22 2013 11:23 am

    I have started to teach my 7 year old son haskell. We are using your lessons.
    http://dac4.designacourse.com:8000/displayInBrowser?digest=6trDxMPs2htLeMBCL9aSWg%3d%3d

  18. Arthur Clemens / Apr 4 2013 9:13 am

    This is a Minecraft Creeper face, made by my son:

    import Graphics.Gloss

    picture = pictures [
    rectangleSolid 500 500,
    color (dark aquamarine) (translate 0 17 (rectangleSolid 300 270)),
    translate (-60) 75 (rectangleSolid 60 60),
    translate 60 75 (rectangleSolid 60 60),
    translate 0 0 (rectangleSolid 60 90),
    translate (-45) (-30) (rectangleSolid 30 90),
    translate 45 (-30) (rectangleSolid 30 90)]

    http://dac4.designacourse.com:8000/displayInBrowser?digest=UVxmjKI5TeLXOa7EjyPJ2A%3d%3d

Trackbacks

  1. Haskell para niños « M-x aprende-y-comparte
  2. Haskell For Kids: My Project! « Sententia cdsmithus
  3. Haskell for Kids: Week 2! « Sententia cdsmithus
  4. Haskell For Kids: Week 3 « Sententia cdsmithus
  5. Haskell For Kids: Week 4 « Sententia cdsmithus
  6. Haskell for Kids: Week 5 « Sententia cdsmithus
  7. Haskell For Kids: Week 6 « Sententia cdsmithus
  8. Haskell for Kids: Week 7 « Sententia cdsmithus
  9. Haskell For Kids: Week 8 « Sententia cdsmithus
  10. Voltando a ser criança, e brincando de desenhar… com Haskell! | Experimento imaginário
  11. What programming languages are easy for beginners
  12. spyked bricks in the wall — o propunere privind predarea programării în școli
  13. Playing with drawings and animations in Haskell | Experimento imaginário
  14. 14year old trying to code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 62 other followers

%d bloggers like this: