Image programming in the Racket MOOC

Racket MOOC spring 2017 has now completed. This was the fourth time Koodiaapinen MOOC was arranged for primary school teachers in Finland. As the instructor of Racket track, I must say that the most interesting part has been to follow the outcome of the image programming lessons. Right after the first lesson this plethora of images was returned as the first coding assignment:

The task was to code one simple image or a flag but many took the assignment further and created something original.

The last assigment was to release your inner creativity and play around with Racket Turtle. This is what was created as a result:

And you didn't have to stay with pictures only, you could animate them too. Here are some animation examples from the third lesson:

Test this animation by moving the ice cream with your mouse

Test this animation

Test this animation by moving your mouse over it

Image programming is a good way to ignate interest in programming. Programming images makes the end result concrete and you can create something of your own. It is a good starting point for 7. graders next fall, when school start to implement the requirements of the new curriculum of math. More information about Racket programming can be found from here: racket.koodiaapinen.fi (in Finnish).

Kuvakoodausta kevään Racket MOOC:ssa

Kevään Racket MOOC on jälleen ohi. Tämä oli sarjassansa 4. Koodiaapinen MOOC. Kurssin vetäjän näkökulmasta hauskinta on ollut seurata kuvakoodausjaksojen satoa. Heti ensimmäisen viikon jälkeen palautusseinällä kuhisi tällaisia kuvia:

Tässä tehtävänä oli koodata jokin yksinkertainen lippu tai logo, mutta mukaan mahtuu myös monta aivan omaa luomusta.

Kurssin viimeisessä ohjelmointitehtävässä sai päästää oman luovuutensa täysin valloilleen Racket Turtlen kanssa ja tällaisia kuvia sieltä sitten syntyi:

Eikä kurssilla toki tarvinnut pitäytyä still-kuvissa, sai niitä myös animoida. Tässä muutama makupala:

Testaa animaatiota liikuttamalla jäätelöä hiirellä

Testaa animaatiota

Testaa animaatiota liikuttamalla hiirtä

Moni kurssilainen innostuikin ohjelmoinnista juuri kuvakoodaamisen kautta. Siitä on hyvä aloittaa ensi syksynä 7. luokkalaisten kanssa kun uusi OPS tulee ohjelmointeinen voimaan. Täältä saat lisätietoja mm. kuvakoodaamisesta: racket.koodiaapinen.fi.

Racket packages

Viikko sitten ryhdyin tutkimaan miten saisin julkaistua Racket Turtle - kirjastoni oikeana package:na. Nythän koodini on ollut koko ajan Github:ssa mutta se on pitänyt ladata sieltä hankalasti .zip - paketissa, avata paketti ja vasta sitten ryhtyä koodaamaan. Huomasin koulutuksissa, että tämä on yllättävän vaikeaa opettajille ja oppilaille.

Ensin opiskelin Racket package creation:ia teoriassa täästä linkistä. Tavallinen .rkt tiedosto muuttuu package:ksi niin, että sijoittaa sen hakemistoon, jonka nimestä tulee package:n collection ja rkt-tiedoston nimestä kirjaston nimi. Nyt olin siis tekemässä  teachpacks nimistä collection:ia ja sen sisälle kirjastoa racket-turtle. Tavoitteeni oli siis, että kirjastoani voisi käyttää DrRacket:ssa näin:

(require teachpacks/racket-turtle)

Ensimmäinen vaihe tässä oli tehdä Racket - Turtlesta paikallinen kirjasto. Se tehtiin menemällä komentotulkin kautta hakemistoon teachpacks ja ajamalla siellä Racket Package Manager kutsu:

> raco pkg install

Nyt pystyin jo omalla koneellani käyttämään Racket Turtle:a kuin se olisi oikea package. Tämän jälkeen pakettini piti rekisteröidä Racket - package serverille. Ilmoitin, että pakettini nimi on "teachpacks" ja että se sijaitsee Githubissa osoitteessa: git://github.com/tyynetyyne/teachpacks.git

Nyt paketin pystyy kuka tahansa lataamaan ja asentamaan käyttöönsä esim. DrRacket:iin integroidun Package Managerin avulla. Package Managerin saa auki valitsemalla File->Package Manager. Package Source:ksi kirjoitetaan paketin nimi eli tässä tapauksessa teachpacks ja painetaan <enter>. Nyt paketti latautuu ja asenttuu koneelle (tämä ei vaadi admin oikeuksia). Nyt kirjaston voi ottaa käyttöön koodissa kirjoittamalla em. require - lause. Huimaa!

DrRacketin Package Manager - ikkuna

Lopuksi tein vielä dokumentaation pakettini palveluista käyttämällä Scribbleä ja tallensin .scrbl tiedostot myös Githubiin.  Scribble-tiedostojen olemassaolo sekä muutama muu asia piti vielä konffata info.rkt tiedoston avulla ja sitten olikin valmista. Tältä näyttää Scribble:stä HTML:ksi käännetty Racket Turtle - dokumentaatio.

Aivan ongelmitta tämä prosessi ei onnistunut, palvelimella oli hieman erilainen ympäristö kuin omalla koneellani, joten Scribble-dokumentaatio ei suostunut toimimaan heti. Pienen säädön jälkeen pakettini sai tänään "vihreää" (jouduin mm. poistamaan kaikki viittaukset Racket GUI komponentteihin kuten universe - kirjastoon).

Hienoa tässä on myös se, että voin päivittää pakettini päivittämällä tiedostot Githubiin ja seuraavana päivänä ne löytyvät uudesta paketista automaattisesti.

Mondrian Art - Racket Turtle

Kuulin tästä ohjelmointioppitunnista, jossa tarkoituksena on ohjelmoida Mondrian Art - kuvia (katso myös Artsy.net). Pitihän sitä kokeilla myös omalla Racket Turtlella. Tein ensin pohjan johon generoin satunnaisesti eri kokoisia ja eri värisiä laatikoita eri paikkoihin. Sitten väritin reunat Racket Turtlella.

Tässä oma näkemykseni Mondrian Art:ista:

 

Mondrian Art ohjelmoituna DrRacket:llä 

Täsäs koodi jolla generoin pohjakuvan:

(require teachpacks/racket-turtle)
(require 2htdp/image)

(define BG (empty-scene 500 500))
(define colors (list "red" "yellow" "blue" "black"))
 
(define (get-color i)
  (list-ref colors i))

(define (place-rectangle x y bg)
  (place-image (rectangle (* 40 (random 5)) 
                          (* 40 (random 5)) 
                          "solid" 
                          (get-color (random 4)))
                           x y bg))

(define (create-bg x y times bg)
  (if (< times 0)
      bg
      (create-bg (+ x (* 20 (random 5))) 
                 (+ y (* 20 (random 5))) 
                 (sub1 times) 
                 (place-rectangle x y bg))))

(define IMG (create-bg 0 250 10 
                   (create-bg  300 0 10 
                          (create-bg 0 0 100 BG))))

Tämä koodi aikaansai siis seuraavan kuvan:

Pohjakuva (BG-IMG1)

 Tämän päälle piti enää lisätä mustia viivoja Racket Turtlen avulla. 

(define TURTLE-BG-IMG1
(list (set-bg-image BG-IMG1)
      (change-color "black")
      (pen-up) (go-to 20 300)
      ;horizontal rows
      (pen-down)(change-pen-size 5)(go-to 20 500)
      (pen-up)(go-to 40 0)
      (pen-down)(change-pen-size 3)(go-to 40 300)
      (pen-up)(go-to 120 0)
      (pen-down)(change-pen-size 4)(go-to 120 300)
      (pen-up)(go-to 140 180)
      (pen-down)(change-pen-size 3)(go-to 140 500)
      (pen-up)(go-to 160 420)
      (pen-down)(change-pen-size 2)(go-to 160 500)
      (pen-up)(go-to 180 340)
      (pen-down)(change-pen-size 2)(go-to 180 500)
      (pen-up)(go-to 220 0)
      (pen-down)(change-pen-size 3)(go-to 220 340)
      (pen-up)(go-to 260 0)
      (pen-down)(change-pen-size 4)(go-to 260 500)
      (pen-up)(go-to 280 30)
      (pen-down)(change-pen-size 2)(go-to 280 150)
      (pen-up)(go-to 300 360)
      (pen-down)(change-pen-size 3)(go-to 300 500)
      (pen-up)(go-to 320 20)
      (pen-down)(change-pen-size 3)(go-to 320 120)
      (pen-up)(go-to 360 0)
      (pen-down)(change-pen-size 4)(go-to 360 360)
      (pen-up)(go-to 380 280)
      (pen-down)(change-pen-size 3)(go-to 380 500)
      (pen-up)(go-to 420 280)
      (pen-down)(change-pen-size 3)(go-to 420 360)
      (pen-up)(go-to 460 280)
      (pen-down)(change-pen-size 3)(go-to 460 500)
      (pen-up)(go-to 320 20)
      ; vertical rows
      (pen-down)(change-pen-size 4)(go-to 500 20)
      (pen-up)(go-to 400 20)
      (pen-down)(change-pen-size 2)(go-to 500 20)
      (pen-up)(go-to 120 30)
      (pen-down)(change-pen-size 4)(go-to 280 30)
      (pen-up)(go-to 280 80)
      (pen-down)(change-pen-size 4)(go-to 500 80)
      (pen-up)(go-to 280 120)
      (pen-down)(change-pen-size 4)(go-to 320 120)
      (pen-up)(go-to 40 110)
      (pen-down)(change-pen-size 3)(go-to 120 110)
      (pen-up)(go-to 120 150)
      (pen-down)(change-pen-size 4)(go-to 280 150)
      (pen-up)(go-to 120 180)
      (pen-down)(change-pen-size 5)(go-to 220 180)
      (pen-up)(go-to 40 230)
      (pen-down)(change-pen-size 4)(go-to 120 230)
      (pen-up)(go-to 20 300)
      (pen-down)(change-pen-size 2)(go-to 140 300)
      (pen-up)(go-to 260 280)
      (pen-down)(change-pen-size 4)(go-to 500 280)
      (pen-up)(go-to 140 340)
      (pen-down)(change-pen-size 3)(go-to 220 340)
      (pen-up)(go-to 300 360)
      (pen-down)(change-pen-size 4)(go-to 380 360)
      (pen-up)(go-to 380 440)
      (pen-down)(change-pen-size 5)(go-to 500 440)
      (pen-up)(go-to 400 450)))
(define image1 (draw TURTLE-BG-IMG1))
(crop 0 0 500 500 image1) 

Racket Turtle (versio 0.5)

Racket Turtle on kehittänyt itselleen kesän aikana uusia taitoja. Nyt kynän paksuutta ja viivan tyyliä voi muutella, taustan värin voi vaihtaa ja Turtlelle voi aktivoida myös "leimasintoiminnon". Lisäksi piirtoalueen kokoa ja piirtonopeutta voi säätää. Turtlea voi ohjata myös kävelemään suoraan tiettyyn koordinaattipisteeseen, Turtlelle voi aktivoida peilaustoiminnon ja origon paikan voi säätää haluamakseen. Ohjeet Racket Turtlen käyttöön löytyy täältä.

Lisäys 16.9.2015:
Racket Turtlen voi nyt asentaa koneelle suoraan Racket Package managerin kautta. Mene DrRacket:in valikkoon File -> Package Manager. Kirjoita Package Source - kenttään: teachpacks ja paina <enter>. Paketti asenttuu automaattisesti profiiliisi (HUOM! ei vaadi asennusoikeuksia). Tämän jälkeen voit käyttää Racket Turtlea seuraavien ohjeiden mukaisesti:

Jokaisen koodiesimerkin (alla) alussa pitää olla nämä määritykset:

(require 2htdp/image)
(require teachpacks/racket-turtle)

1. Taustavärin ja kynän paksuuden muuttaminen sekä kynän värin määrittely vaihtuvaksi.

Näiden kuvien piirtämisessä on käytetty rekursiota, jossa kuljettu matka kasvaa kierros kierrokselta, ensimmäisessä kasvaa myös kynän paksuus. Kynän väriksi on annettu yhden värin asemasta lista värejä, joita Turtle toistaa.

(define VÄRIT (list "red" "blue" "green" "yellow" "purple"))
 
(define (levenevä-spiraali2 p l k kerrat)
  (if (<= kerrat 0)
      empty
      (cons (sivu p l k)
           (levenevä-spiraali2 (+ p 5)
                               (+ l 1) 
                               k 
                               (sub1 kerrat))))))

(define levenevä-spiraali (list (change-bg-color "black")
                                (change-color VÄRIT) 
                                (levenevä-spiraali2 1 1 45 45)))
(draw levenevä-spiraali)

Levenevä kynän paksuus ja toistuvat värit

(define VÄRIT2 (list "red" "green" "yellow" "purple")) 

(define (spiraali k p kerrat)
  (if (< kerrat 0)
      empty
      (append (list (forward p)(turn-left k)) 
              (spiraali k (+ p 2)(sub1 kerrat)))))

(define spiraalikuvio
  (list (change-pen-size 2)
        (change-bg-color "black")
        (change-color VÄRIT2)
        (spiraali 91 1 152)))

(draw spiraalikuvio)

Toistuvilla väreillä saa aikaan näyttäviä kuvioita

Spiraalikuvio WeSchemessä

2. Kynän tilalla on leimasin toiminto, joka piirtää leiman Turtlen sijainnin kohdalle. Leimasimelle voi antaa listan kuvia, jotka se piirtää yksi toisensa jälkeen.

Kuvan kukkalista on tehty rekursiivisesti samoin kuin alemman kuvan tähdet. Värit on saatu random-toiminnolla.

(define (lehti koko väri)  (ellipse (* 8 koko) koko "solid" väri))

(define (lehdet koko väri)
  (overlay (lehti koko väri)
           (rotate 90 (lehti koko väri))))

(define (tee-kukka2 koko väri)
  (overlay (circle (/ koko 2) "solid" "white")
           (lehdet koko väri)
           (rotate 45 (lehdet koko väri))))

(define (kukka-spiraali k p kerrat)
  (if (< kerrat 0)
      empty
      (append (list (forward p)(turn-left k)) 
              (kukka-spiraali k (+ p 6)(sub1 kerrat)))))

(define (tee-kukat määrä koko)
  (if (<= määrä 0)
      empty
      (cons (rotate koko (tee-kukka2 koko 
                                     (make-color (random 255)
                                                 (random 255)
                                                 (random 255))))    
            (tee-kukat (sub1 määrä)(add1 koko)))))
                  
(define kukkaspiraali (list (stamper-on (tee-kukat 20 1))
                            (pen-up)
                            (kukka-spiraali 25 1 20)))

(draw kukkaspiraali)

Kukkaspiraali, jossa random-värisiä kukkia

Kukkaspiraali WeSchemessä

(define (tee-tähdet määrä koko)
  (if (<= määrä 0)
      empty
      (cons (rotate koko 
                   (star koko 
                         "solid" 
                         (make-color (random 255)
                                     (random 255)
                                     (random  255)))) 
            (tee-tähdet (sub1 määrä)(add1 koko)))))       
      
(define tähtispiraali (list (stamper-on (tee-tähdet 100 1))
                            (pen-up)
                            (spiraali 91 1 100)))
(draw tähtispiraali)

Rekursiiviset random-tähdet spiraalissa

Tähtispiraali WeSchemessä.

3. Taustaruudukon piirtäminen, origon sijoittaminen kuvan keskelle, piirtoalueen koon muuttaminen isommaksi, kynän tyylin muuttaminen sekä kuvan piirtämisen koordinaattipisteiden avulla.

Tässä kuvassa punaiset pampulat on tehty leimasimella ja katkoviiva Turtlen kynällä. Taustaruudukon pikkuruutujen kokoa ja väriä voi muuttaa. Kuvan koko on 600x600.

(define koordinaatistokuva
  (list (set-origin)
        (set-bg-grid 30 30 "blue")
        (mirror-x-on)
        (mirror-y-on)
        (stamper-on (circle 5 "solid" "red"))
        (change-pen-style "dot")
        (change-pen-size 3)
        (change-color "red")  
        (pen-up)
        (go-to 60 0)
        (pen-down)
        (go-to 120 60)
        (go-to 60 60)
        (go-to 60 120)
        (go-to 0 60)
        (go-to -60 120)
        (go-to -60 60)
        (go-to -120 60)
        (go-to -60 0)))

(draw-custom koordinaatistokuva 600 600 0)

Koordinaatistoharjoitus

Koordinaatistokuva WeSchemessä

4. Peilaustoiminnolla piirtäminen

Tässä on aktivoitu peilaus sekä x-akselin, että y-akselin suunnassa (animaation taustan värin vaihtelu johtuu  GIMP2:sta). Myös kynän paksuutta on muutettu.

(define (tee-kaari väri koko kynä)
  (list (change-color väri)
        (change-pen-size kynä)
        (repeat (round (* (/ 90 koko))) 
                       (list (forward koko) (turn-left koko)))))

(define (tee-lehti väri koko kynä)
  (list (tee-kaari väri koko kynä)
        (turn-left 90)
        (tee-kaari väri koko kynä)))

(define (tee-kukka väri koko kynä)
  (list (mirror-x-on)
        (mirror-y-on)
        (repeat 2 (tee-lehti väri koko kynä))))
 
(define peilauskukka (list (tee-kukka "red" 3 5)
                           (turn-left 45)
                           (tee-kukka "pink" 3 2)))

(draw-and-store peilauskukka)

Turtle peilaustoiminnolla

 Peilauskukka WeSchemessä.

5. Kuvion tallentaminen gif-animaationa

Turtlen piirtämän kuvion voi tallentaa myös animoituna gif:inä. Toiminto on tuskallisen hidas eikä aina edes toimi kunnolla pitkien animaatioiden kanssa. Tässä kuitenkin onnistunut spiraalikukka-animaatio.

(define (tee-kukat2 määrä koko väri)
  (if (<= määrä 0)
      empty
      (cons (rotate koko (tee-kukka2 koko väri))
            (tee-kukat2 (sub1 määrä)(add1 koko) väri))))

(define multi-kukka-spiraali
  (list
   (change-bg-color "black")
   (set-origin)
   (pen-up)
        (stamper-on (tee-kukat2 50 1 "yellow"))
        (kukka-spiraali 25 1 15)
        (turn-left 90)
        (stamper-on (tee-kukat2 50 1 "blue"))
        (go-to 0 0)
        (kukka-spiraali 25 1 15)
        (turn-left 120)
        (stamper-on (tee-kukat2 50 1 "red"))
        (go-to 0 0)
        (kukka-spiraali 25 1 15)))

(draw-and-store multi-kukka-spiraali)

Spiraalikukka-animaatio

6. Taustakuvan asettaminen

Voit myös asettaa animaation taustaksi minkä tahansa kuvan. Taustakuvaksi voi asettaa myös aikaisemmin Turtlella piirretyn kuvan.

(define taustakuva (draw koordinaatisto-kuva))

(define kukkaspiraali-koordinaatistossa
  (list
   (set-bg-image taustakuva)
   (set-origin)
   (pen-up)
        (stamper-on (tee-kukat2 50 1 "red"))
        (go-to 0 0)
        (kukka-spiraali 25 1 15)))

(draw kukkaspiraali-koordinaatistossa)

Taustakuvan asettaminen Racket Turtlelle

Kukkaspiraali-koordinaatistossa WeSchemessä

Racket Turtle toimii myös WeScheme-palvelussa. WeSchemen rajoitusten takia kynän paksuutta tai sen tyyliä ei voi muuttaa eikä animaatioita tallentaa animoituina gif:einä. Muut toiminnot toimivat vastaavalla tavalla.

Meet Racket Turtle!

If you have played with Turtle graphics, you know how fun it can be. It also offers nice opportunities to teach kids how to think and solve geometric problems. I also happen to like Racket programming language, so I wrote an animation library for drawing Racket Turtle images (Racket Turtle in GitHub). With the help of Bootstrap team, it now works also in the browser environment at WeScheme.org (Racket Turtle Runs in WeScheme!).

You can make the turtle (black triangle) move with some simple commands like forward and turn-left. For Racket Turtle to understand what you want to draw, you need to write the commands, and their parameters, as a list. First you give a name for your command list with define, then you write the commands and finally you call draw function with the newly created list as a parameter.

For example the following code will draw a square:

(define square1
  (list (forward 100)
        (turn-left 90)
        (forward 100)
        (turn-left 90)
        (forward 100)
        (turn-left 90)
        (forward 100)))

(draw square1)

See how it works in WeScheme, select Play:  Racket Turtle draws a square

Racket Turtle can also repeat previously defined command lists with repeat command.The following code will draw a square using repeat:

(define side
  (list (forward 100)
        (turn-left 90)))

(define r-square
  (repeat 4 side))
 
(draw r-square)

Racket Turtle's pen color can also be changed, the pen can be lifted up and put down. The following code can be used to change pen color and to move in a different location without drawing a line.

(define move
  (list (change-color "red")
        (pen-up)
        (forward 100)
        (pen-down)))

Further, you can combine as many command lists as you like to draw more complex images. This is done via defining a list of command lists. This example code will draw two squares with different colors in the same picture:

(define two-squares
  (list r-square
        move
        r-square))

(draw two-squares)

See how it works in WeScheme, select Play: Racket Turtle draws two squares.

Racket Turtle can also be used to teach about functions and variables. The following code can be used to draw squares with varying size.

(define (v-side x)
  (list (forward x)
        (turn-left 90)))

(define (v-square x)
  (repeat 4 (v-side x)))
 
;; for x = 50 you write:
(draw (v-square 50))  

See how it works in WeScheme, now select Edit - mode since you need to change the variable: Racket Turtle Examples: Variables and functions.

Racket Turtle can be used to draw circles, flowers and what ever you can image. Have fun with it!

NOTE: To use Racket Turtle Teachpack in WeScheme you need to write this line in the beginning of your file:

(require wescheme/hSuH9JklYb) 

If you have problems with Racket Turtle, please let me know: tyynetyyne at gmail.com.