Neulekuvion koodaaminen Racket:illä (hih)

#Dime2015 - kurssin FB-ryhmässä keskusteltiin neulekuvioiden tekemisestä Excelillä ja menin sanomaan, että voisikan niitä myös koodata. Päätin todistaa väitteeni ja etsin netistä kivan neulekuvion (kuvassa kuvio B).

Tutkin kuviota tovin ja totesin, että sehän on kivan symmetrinen, tarvitsi vain tehdä yksi elementti ja kiertää sitä eri asentoihin. Tässä on kuvion peruselementti:

Tämän sain aikaan laittamalla erikokoisia ja värisiä neliöitä ja kolmioita vierekkäin ja allekkain. Lopullinen kuvio on tässä:

Ja tässä Racket-koodi, jolla kuvio syntyi:

(require 2htdp/image)
(define COLOR1 "black")
(define COLOR2 "white")
(define COLOR3 "blue")
(define SIVU 10)

(define (perus-pala väri)
  (rectangle SIVU SIVU "solid" väri))

(define (leveä-pala väri)
  (rectangle SIVU (/ SIVU 2) "solid" väri))

(define (korkea-pala väri)
  (rectangle (/ SIVU 2) SIVU "solid" väri))

(define (kolmio-pala väri)
  (flip-vertical (right-triangle SIVU SIVU "solid" väri)))

(define (kulma-kolmio-pala väri)
  (flip-vertical (right-triangle (/ SIVU 2) (/ SIVU 2) "solid" väri)))

(define (kulma-pala väri)
  (rectangle (/ SIVU 2) (/ SIVU 2) "solid" COLOR1))
 
(define V (perus-pala COLOR2))
(define M (perus-pala COLOR1))
(define S (perus-pala COLOR3))
(define PV (korkea-pala COLOR2))
(define PM (korkea-pala COLOR1))
(define PPV (korkea-pala COLOR2))
(define PPM (korkea-pala COLOR1))
(define PVV (leveä-pala COLOR2))
(define PVM (leveä-pala COLOR1))
(define NV (kulma-pala COLOR2))
(define NM (kulma-pala COLOR2))
(define MK (kolmio-pala COLOR1))
(define NMK (kulma-kolmio-pala COLOR1))

(define R1 (beside NM PVM PVV PVV PVV PVV PVV PVV PVM PVM PVM PVV PVV PVM NMK))
(define R2 (beside PM V S S S S S V V M V V M MK))
(define R3 (beside PV S V S S S S S V V V M MK))
(define R4 (beside PV S S V S S S S V V M MK))
(define R5 (beside PV S S S V S S V V M MK))
(define R6 (beside PV S S S S V V V M MK))
(define R7 (beside PV S S S S V V M MK))
(define R8 (beside PV V S S V V M MK))
(define R9 (beside PM V V V V M MK))
(define R10 (beside PM M V V M MK))
(define R11 (beside PM V V M MK))
(define R12 (beside PV V M MK))
(define R13 (beside PV M MK))
(define R14 (beside PM MK))
(define R15 NMK)

(define osa1 (above/align "left" R1 R2 R3 R4 R5 R6 R7 R8 R9 R10 R11 R12 R13 R14 R15))
(define osa2 (overlay (rotate 180 osa1) osa1))
(define osa3 (beside osa2 (rotate 90 osa2)))
(define osa4 (above osa3 (flip-vertical osa3)))
(define kuvio (beside osa4 osa4 osa4 osa4))

Scribble ja Github - ohjeita

Mikä ihmeen Scribble ja mikä ihmeen Github?

Aloitin tekemään Koodausta kouluun - käsikirjasivustoa. Etsin työkalua, jolla tehdä nettisivut, joihin upottaa koodiesimerkkejä Racket-kielellä. Pitkään ei tarvinnut etsiä, sillä sellainen oli jo asennettuna koneelleni: DrRacket. Olin koodannut Racket-ohjelmia jo hyvän tovin, kunnes ymmärsin että DrRacket:iin on sisäänrakennettu oma HTML-dokumenttien kuvauskieli: Scribble. Eikä mikä tahansa kieli, se on yhteensopiva Racket-koodin kanssa, voin kirjoittaa Racket-koodia Scribble-koodin sekaan ja käännettäessä, se ajaa myös Racket-koodin eli voin samalla koodata kuvituksen tekstiini! Koodiesimerkit myös väritetään (varatut sanat jne omilla väreillään) ja Racket-kielen varatut sanat linkitetään varsinaiseen Racket-dokumentaatioon. Scribble-kääntäjälle annetaan komentorivillä parametrit, joiden kautta sille voi antaa mm. css-määrittelyt, eli sivustosta tulee juuri sellainen kuin itse haluat. Huimaa!

Tätä näyttää Scribblellä, Racketillä ja css:llä koodattu web-sivu

No, miten Github tähän liittyy? Github:in kautta voi hallita ja jakaa koodia, ja luonnollisesti siis myös Scribble, css- ja html-tiedostoja. Mutta en tiennyt ennen tätä harjoitusta, että se voi toimia myös webbiserverinä sivustolleni. Tein uuden repositoryn githubini juureen nimellä: tyynetyyne.github.io ja tallensin sinne Scribbellä tekemäni html-tiedostot sekä projektiin liittyvät css-tiedostot. Tarmo Toikkanen loi minulle ystävällisesti "racket.koodiaapinen.fi" alidomainin ja ohjasi sen osoittamaan em. Github-repoon. Minun piti vain lisätä tyynetyyne.github.io:n masterhaaraan yksi CNAME-niminen tiedosto, jonka sisällä lukee "racket.koodiaapinen.fi" ja varmistua, että siellä oli yksi index.html niminen tiedosto. 

Löysin Githubista jopa Latex-tuen Scribblelle (pr-math), joten voin kirjoittaa matemaattisia merkintöjä Scribble-koodin sekaan ja sivu näyttää sen oikein!

No, ei tämä nyt aivan noin yksinkertaista ollut. Ensinnäkin Scribblen käyttö vaatii hieman harjoittelua  ja konffaamista. Scribble.exe tulee kyllä koneellesi DrRacket:in mukana mutta, koska se toimii komentoriviltä, joudut asettamaan sen sijainnin PATH-ympäristömuuttujaan. Windows 7:ssa se tehdään näin. Path - muutujan pitkän listaan perään lisätään siis: "; c:\Program Files\Racket" (ilman hipsuja).

Komentorivin käynnistyksen jälkeen siirrytään siihen hakemistoon, jossa Scribble - koodi sijaitsee, ja sitten komentoriville kirjoitetaan sopiva komento. Scribblen komennot (flagit) on kuvattu täällä ja melkoisen testaamisen ja kokeilun jälkeen itselleni toimivin rimpsu oli lopulta tämä:

> scribble --html ++main-xref-in --style manual-style-koko.css --dest generoitu --redirect-main http://docs.racket-lang.org koodausta_kouluun_aloita_tasta.scrbl

Nämä punaisella merkityt ovat projektini css-tiedosto, sekä aloitussivun Scribble-tiedosto. Lopuksi tallensin rimpsun "koko.cmd" tiedostoon ja ajelin sitä sieltä. Ajon jälkeen hakemistoon ilmestyi  kansio, jonka nimi on "generoitu" ja sen sisällä on "koodausta_kouluun_aloita_tasta.html" sekä erinäinen määrä muita html-tiedostoja, jpg-tiedostoja, pari JavaScript-tiedostoa ja css-tiedostoja, jotka muodostavat sivustoni. Jos kaikki toimii ok, voin päivittää sekä source-tiedostot, että target-tiedostot Githubiin käyttämällä tätä Github - Windows clientia.

Hankalinta kaikessa oli saada linkit ohjautumaan oikeaan dokumentaatioon. Se vaati .scrbl tiedostoon merkinnät mihin linkataan:
@(require (for-label lang/htdp-beginner))
@(require (for-label (except-in 2htdp/image image?)))

Lisäksi linkkien ohjaaminen käyttämään Racket-serveriä vaati --redirect-main -flagin. Ja jotta linkitys ylipäätään tehtäisiin piti käyttää ++main-xref-in -flagiä.

Source-tiedostot

Target-tiedostot (generoitu)

Voisi sanoa, että on pieni ihme, että olen saanut Githubiin tehtyä nettisivut, koodaamalla ne Scribblellä, Racketilla, css:lla ja Latexilla. Kukapa olisi uskonut! Tästä on hyvä jatkaa.

Voit testata sivujani osoitteessa: http://racket.koodiaapinen.fi

Vinkkejä opetusvideoiden tekemiseen

Olen tässä viikon aikana testaillut erilaisia ohjelmia opetusvideoiden tekemiseen.

Ensimmäinen kokeiluni oli nauhoittaa webbikameralla kuvaa ja ulkoisen mikrofonin avulla ääntä.  Käytössäni oli MSLifeCam Studio - webbikamera ja iRig PRO:n kautta USB:iin kiinnitetty Beyerdynamic TG V50d - mikrofoni. Ensimmäinen testattu ohjelma, Adobe Presenter 10:n Video Express, ei suostunut edes ottamaan yhteyttä ko. kameraan. Ääni olisi toiminut ja läppärin sisäänrakennetun webbikamerakin näytti toimivan.  

Adoben ohjelma ei tykännyt MS:n webbikamerasta...

Seuraavaksi kokeilin äänittämistä MS LifeCam 3.6 ilmaisohjelmalla. Tämän kautta kuva tuli kyllä ok, mutta ohjelma ei tukenut ulkoisen mikrofonin valintaa, joten äänitykseen tuli mukaan  webbikameran oman mikrofoni mukana ikävä määrä ylimääräistä suhinaa ja kohinaa. Kohinan poistamiseksi seurasin tämän youtube - videon ohjeita. Jouduin lataamaan Audacity - ohjelman kohinan poistamiseksi sekä DVDVideoSoft Free Studio - ohjelman ääniraidan konvertoimiseksi Audacityn ymmärtämään muotoon.

Työlään kohinanpoistoharjoituksen jälkeen ymmärsin, että kunnon mikki on saatava käytöön ja seuraavaksi latasin Camtasia - ohjelman. Se osasi käyttää sekä ulkoista mikrofoniani, että MSLifeCam:ia. MUTTA audio ja video eivät pysyneetkään enää synkassa! Tätä mysteeriä kun lähdin selvittämään löysin tämän youtube - videon, jossa kerrottiin, miten webbikameran ja tietokoneen asetukset voisi konffataan niin, että homman saa toimimaan. Asetukset auttoivatkin jonkin verran mutta viivettä jäi silti jäljelle. Ilmeisesti ulkoinen äänikortti (iRig) lisää ääniraitaan viivettä joka tapauksessa, ja asialle ei yksinkertaisesti voi mitään. Onneksi Camtasiassa on toiminto, jolla voi erottaa ääniraidan videoraidasta, joten periaatteessa manuaalisesti synkronoinninkin voi tehdä (esim. taputusten avulla, katso video). Hankalaksi menee, jos haluaa laadukkaan kuvan ja äänen tietokoneen avulla, helpompaa olisi vain pystyttää videokamera jalustalle...

Camtasia Record 8 - äänitysasetukset

Helppokäyttöisessä Camtasiassa on webbikameralla äänityksen ja kuvaruudun videoksi kaappauksen lisäksi täysimittainen videoeditori, jonka avulla voi editoida usempaa video- ja ääniraitaa. Videon päälle voi liittäää kuvia ja "call-out" kuvioita (mm. tekstiä, alleviivauksia, nuolia, rinkuloita jne). Ohjelmassa on myös "quiz" toiminto, eli videoon saa mukaan ymmärtämistä tarkistavia kysymyksiä (vaatii tosin webbi-serverin).

Camtasia Studio 8 - videoeditori

Kuvaruudun kaappaamisessa kannattaa ottaa huomioon myös oman ruudun resoluutio. Jos käytössä on full HD näyttö, ei ehkä kannata äänittää koko ruutua, koska esim. valikkotekstit näkyvät jo niin pieninä, ettei niistä saa selvää. Ruudunkaappausohjelmissa voi rajata kaapattavan alueen järkevän kokoiseksi, jolloin videokuvan laatu on parempi. 

Kannattaa siis ehdottomasti käyttää hyväksi 30 päivän trial ennen opetusvideon äänitysohjelmiston ostamista. Koskaan ei voi tietää minkä niistä saa lopulta toimimaan oman laitteiston kanssa. Miksi ohjelmia vielä edes myydään ilman, että niitä voi testata ensin? Harmikseni jouduin ostamaan Pinnacle 18:n vain saadakseni selville, että myös se toimii epäluotettavasti webbikamerani kanssa, videon tallennus tiedostoon epäonnistui useammin kuin onnistui.