Primi passi con Kojo

Angelo Biolcati Rinaldi
CDJr
Published in
6 min readNov 21, 2019

Kojo ha un gran bel sistema di aiuto! Ok, è ancora in Inglese, ma presto sarà tradott… anzi: è ora di impararlo, l’inglese. Così lo traduciamo noi, l’help :-)

Proviamo a cliccare su Aiuto e poi su Panoramica su Kojo; succede una cosa stranissima: si carica un programma e viene eseguito automaticamente; il programma, in Kojo, è proprio la Panoramica stessa. Kojo si presenta e lo fa nella sua lingua!

Il programma appare al suo posto, nell’editor del sorgente; possiamo addirittura modificarlo al volo e vedere cosa salta fuori! Il risultato dell’esecuzione del programma questa volta appare non (ancora) nell’area di disegno, ma in un’apposita finestra chiamata Scenario. Alla base di questa finestra tre bottoni permettono rispettivamente di andare a pagina indietro, chiudere tutto e andare a pagina avanti. Se il contenuto della pagina… non sta nella pagina, compaiono le barre di scorrimento e si può anche usare la rotella del mouse per scorrere. Molte pagine hanno bottoni o oltri pezzi interattivi che ci permettono di avere parte attiva e sperimentare. Ci sono 21 pagine in tutto, create con ben 1185 linee di Kojo!

Non si capisce niente, eh? Adesso! Ma tra un po’… :-D

Leggere la Panoramica è entusiasmante! Vien proprio voglia di tuffarsi a studiare e provare tutte le possibilità. Immaginare un esperimento, provare a imbastirlo, trovare gli errori, migliorarlo… condividerlo con i compagni ❤

Oltre alla Panoramica, nel menù Aiuto ci sono anche le Lezioni su Scala e la Composizione della musica. Ma noi adesso prendiamo un bell’esempio e ci giochiamo insieme; allora: menu Esempi | Per iniziare | Quadrati ripetuti.

Poi facciamo un’altra cosa: mettiamo le rotelle alla bicicletta ;-) menù Strumenti | Riferimento e nello Scenario che salta fuori, in basso clicchiamo su Live Help ON ed ecco che abbiamo una tavolozza delle parole di Kojo, raggruppate per argomento (Turtle|Picture…|Abstraction) e appena ci posiamo il mouse sopra, ad una parola di Kojo, salta fuori là sulla destra tutta la spiegazione. Se poi ci clicchiamo sopra, ad una parola di Kojo, ci risparmiamo anche la fatica di scriverla nell’Editor del sorgente! Dai, non vi sembra facile come coi mattonicini di Scratch? Eh eh eh… ma presto son sicuro che smonteremo le rotelle dalla bicicletta e via che andremo a tutta velocità :-D

ecco il risultato del programma

Proviamo ad andare dietro al programma, riga per riga: la prima è facile; clear() pulisce l’Area di disegno e mette la tartaruga al centro. Sì, perchè c’è la tartaruga, in Kojo, come nel nonno di tutti i linguaggi per bambini, il mitico Logo di Seymour Papert

setAnimationDelay(10) rallenta la tartaruga, forse di 10 millisecondi, boh! Se ci mettete un numero più grosso, tipo 300, provate! Si vede la tartaruga che avanza passettin passettino e si capisce meglio la logica di riempimento, vero?

setPenColor(gray) è il colore del bordo dei quadrati. Prenderà altri colori, tipo red, black, yellow? Sì, funziona :-) Ah per fermare il programma si preme il tondino rosso, là sopra e per farlo ripartire si preme il primo triangolino verde.

var clr = Color(255, 0, 0, 150) questo è un po’ difficile… prima di tutto var: a cosa serve var? Serve a dire che ci serve una variabile cioè una “scatolina” che si chiama crl che conterrà… un colore che cambia, volta per volta. Se invece abbiamo una cosa che vogliamo chiamare in un certo modo e quello che ci mettiamo dentro non cambierà mai più, una costante cioè, beh avremmo dovuto dire val clr; val, cioè valore, non var, variabile. Il bello è che se più avanti nel programma ci scappa di cambiare il valore di una val beh oh! Kojo si arrabbia e ci segnala l’errore. Per aiutarci, perchè i programmatori sono volubili e hanno la memoria di un pesce rosso e il loro linguaggio di programmazione li aiuta e li protegge da se stessi; un buon linguaggio, cioè.

Quindi riepilogando: val questa = unaCosa dichiara una scatolina che si chiama questa e che più avanti conterrà unAltraCosa. Invece val quella = sempreLaStessaCosa dichiara una scatolina che si chiama quella e che più avanti conterrà sempreLaStessaCosa

Adesso arriva Color(255, 0, 0, 150) e tirando a indovinare io dico che questa funzione mi dà un colore fatto dalle 3 componenti RGB cioè da proporzioni (da 0 a 255) dei colori primari Rosso Verde e Blu. Infatti, fateci caso: il primo quadrato che la tartaruga disegna è… tutto rosso! Proviamo a partire con un bel quadrato verde… Color(0, 255, 0, 150) esatto! Giocate con quei 3 numeri, dai, e notate se si parte dal nero (0,0,0) non ci si schioda da lì… che sia un caso? Stessa storia con il bianco (255,255,255) mi arrendo! Ma il 150? Il quarto numero? Trasparenza! O meglio saturazione… insomma uno zero lì fa disegnare dei quadrati trasparenti, invisibili e un 255 li fa invece solidi! Con tutte le sfumature intermedie. Bello!

colori solidi (…255) e molto trasparenti (…64)

repeat(15) { è facile: ciclo! tutto quello che sta in mezzo alle parentesi graffe deve essere ripetuto 15 volte. Cliccate su |flow| nello Scenario e vedrete la collezione completa di tutte le strutture di controllo: cicli e scelte. Avete visto il repeatFor…? Forte! C’è più roba che in Scratch, mi sa.

setFillColor(clr) allora clr è la scatolina che contiene il nostro colore di partenza; qui noi diciamo a Kojo che appena la Tartarughina traccia almeno 2 lati lui deve aggiungere il terzo lato, così da formare un triangolo e riempirlo con questo colore. Se mettete un animationDelay bello grosso, tipo 1000, vedrete proprio bene questa sorta di “triangolazione”.

Adesso c’è un repeat(4) per una coppia di istruzioni:
{ forward(200); right(90) }
notate che ho separato 2 istruzioni sulla stessa linea con un punto e virgola, se no Kojo dà errore. Ciò detto, forward(elle) e right(90) sono proprio un classicone della tarta: facciamo un quadrato con il lato lungo “elle” pixel.

clr = hueMod(clr, 0.05) questo è la gemma del programma: cambiamo la hue che significa appunto “a color or shade”, un colore o una tonalità; in particolare prendiamo il contenuto della nostra scatolina clr, (clr, la cambiamo del 5% 0.05 e il risultato lo rimettiamo nella stessa scatolina clr =
Cosa voglia dire cambiare è presto detto, guardando ai nostri esperimenti di sopra: si parte da un rosso, si passa da un verde e si arriva a un azzurro.

right(360/15) } e il cerchio si chiude con una rotazione che alla fine farà il giro: repeat 15 e right 360/15; repeat enne e right 360 / enne. Anzi! Quasi quasi…

enne = 20
enne = 60 e quadrati col bordo trasparente
enne = 255 e il cerchio NON si chiude

Terminiamo con una sorpresa! Un errore :-( o una scoperta: la precisione non è infinita, quando rappresentiamo qualcosa con un sistema digitale… Beh, vorrà dire che la prossima volta ne terremo conto e cercheremo di calcolare quanto perdiamo e come rimediare; anzi: lo faremo calcolare a lui, il computer, che è il suo forte ;-)

Allora ci vediamo sabato. Ciao!

23 Novembre 2019, 15:00 ÷ 18:00, sala Holden
della Biblioteca Classense di Ravenna.

--

--

Angelo Biolcati Rinaldi
CDJr
Editor for

I’m a software developer using Embarcadero Delphi (since nov.1994 field test) for Win/Mac/iOS/Android/Linux native apps. Proud mentor of CodeDojoRavenna :-D