Pensiero computazionale

Pensiero computazionale
Informazioni pratiche

Alberto Montresor
Lezione 2: Introduzione a Scratch
Università di Trento

2017/03/14

This work is licensed under a Creative Commons

Attribution-ShareAlike 4.0 International License.
 La finestra di Scratch
Scelta della lingua

Palcoscenico / stage
Copione / script

Attori / sprite
Stage
The Sprite List displays names and thumbnails for all the sprit
project. New projects begin with a white
Lista degli sprite / stageStage and a single cat-
sprite, as illustrated in Figure 1-5.

Thumbnail for
Choose a sprite from library.
the Stage
Paint new sprite.

Get new sprite from camera.

Upload sprite from file.

Thumbnail for Sprite1

Click the button to display
sprite information.
Use these buttons to create a
new backdrop.

Figure 1-5: The Sprite List for a new project

The buttons above the Sprite List let you add new sprites to
from one of four places: Scratch’s sprite library , the built-in
the sprite’s name, its current (x,y) position and direction, its rotation
and visibility state, and whether it can be dragged in Presentation mo
Informazione sullo sprite
Let’s briefly talk about each of these options.

Click this icon to

see the sprite’s
information.

Figure
1. Nome1-12:dello
Sprite sprite
info area(modificato)
2. Coordinate correnti
The edit box at the top of this area allows you to change the sp
3. Direzione
name.
4. StileYou’ll use this box many times in this book.
di rotazione
The x and y values show the sprite’s current
5. Può essere spostato nella versione a tutto schermo position on the Sta
Drag the sprite onto the Stage and watch what happens to these numb
6. Nascosto / mostrato
The sprite’s direction indicates which direction the sprite will m
in response to a movement block. Drag the blue line emanating from
 Gestione dei costumi
Undo / Redo

Lista di costumi Rotazione, centratura

Area di disegno
Strumenti di
disegno

Zoom

Dimensione tratto
Bitmap
Vettoriale
 Now that you’ve seen the essentials of the Scratch toolbar, we’ll ta
Dettagli
briefly about Scratch’s sull’editor
built-in dello sprite
Paint Editor.

Use this color to This part of the image has a

white color.
ditor
make any part of an
image transparent.

You can use the Paint Editor (Figure 1-15) to create or edit
This is what we see costumes
when a
backdrops. (Of course, you’re free to use your favorite we paint theimage-editing
white part with p
the transparent color.
gram, too.) If you want to learn more about Scratch’s Paint Editor, che
area, as shown in Figure 1-16. The center point is determined This by the
grid inter-
is the backdrop of
out ScratchPaintEditor.pdf
section (located
of these two axes, so to shift in the
a costume’s online
center, resources,
just drag them to a which can b
the Stage.
downloaded
new position. Tofrom http://nostarch.com/learnscratch/).
hide the axes, click the same button again.
Figure 1-17: You can make any part of an image transparent by filling it with the “trans-
parent” color.
The center of rotation is
determined by the intersection
Now that you know your way around the Scratch interface, we’ll put
of these two axes. You can
change the center of rotation
that knowledge to good use and make something fun. Roll up your sleeves
by dragging these axes or by
clicking the mouse on the
and get ready: We’re making a game!
desired center point. Set costume
center

rst Scratch Game

In this section, you’ll create a single-player game in which players will move
 Gestione dei suoni

Suoni Nuova Caricamento

predefiniti registrazione esterno

Editor di suoni

Lista
suoni

Play Stop Registrazione

 Sfondi, sprite, costumi, suoni

1. Libreria sfondi 1. Libreria costumi

2. Disegna sfondo 2. Disegna costume
3. Carica sfondo
3. Carica costume
4. Webcam
4. Webcam

1. Libreria sprite
2. Disegna sprite 1. Libreria suoni
3. Carica sprite 2. Registra suono
4. Webcam 3. Carica suono
List displays names and thumbnails
Try itfor
outall the sprites in your
w projects begin with a white Stage and a single cat-costumed
ustrated in Figure 1-5.
• Provate:
• Aggiungete nuovi sprite
Choose a sprite from library.
• Dalla libreria
Paint new sprite.
• Disegnatene uno
• Caricando un file scaricato dalla rete
• Con la webcam Get new sprite from camera.

• Upload
Cambiate l’ordine degli sprite from file.
sprite
• Potete trascinarli a Thumbnail
vostro piacimento
for Sprite1
• Provate a premere Click
il tasto
the button to display
sprite information.
• Cambiate il nome allo sprite
Use these buttons to create a
• Modificate lo stile dinew
rotazione
backdrop.
• Mostrate/nascondete lo sprite

e Sprite List for auno

• Scegliete newsfondo
projectper la vostra storia
• Dalla libreria
ttons above the Sprite List let you add new sprites to your project
 I differenti tipi di blocchi

Eventi - scatenano l’esecuzione di uno script quando

l’evento associato è verificato

Istruzione - esegue uno specifico comando

Blocco di controllo - può contenere altri blocchi, esercita

il controllo sulla loro esecuzione

Valore - corrisponde ad un valore che può essere utilizzato

all’interno di un’istruzione

Valore booleano - corrisponde ad un valore che può

assumere solo i valori vero o falso, da utilizzare in una
istruzioni condizionale
 Incastri

I valori booleani entrano solo nei blocchi di controllo

condizionali, con un foro esagonale

I valori entrano nei blocchi con fori quadrati o tondi

• fori tondi: valori numerici

• fori quadrati: valori numerici o stringhe di testo
 Movimento

Istruzioni che è possibile impartire ad uno

sprite per muoverlo sullo stage

• Movimento assoluto:
• vai a x [],y []
• vai dove x è []
• vai dove y è []
• scivola in [] secondi a x [], y []
• raggiungi puntatore del mouse
• Movimento relativo:
• fai [] passi
• cambia x di []
• cambia y di []
Coordinate dello sfondo
the second “move” command sent it right. The motion depends on (or is
relative to) the sprite’s current direction. The direction convention used in
Scratch is illustrated in Figure 2-5.Movimento

0 (360)

315 (–45) 45 (–315)

270 (–90) 90 (–270)

225 (–135) 135 (–225)

180 (–180)

Figure 2-5: In Scratch, 0 is up, 90 is right, 180 is down, and –90 is left.
• Assoluto
You
• can turn
punta a sprite toward
in direzione [] a particular direction (or heading) with the
point• inpunta versocommand.
direction 
 To choose up, right, down, or left, just click
the down arrow and
puntatore delselect
mouseone of these options from the drop-down menu.
For other directions, type the value you want in the white edit box. You can
• Relativo
even use negative values! (For example, typing 45 or –315 will both point
the sprite
• northeast.)
routa di [] gradi

You’ll find the sprite’s current direction in the sprite info area. You can also click the
checkbox next to the direction block (in the Motion palette) to see the direction on
Stage, you can use the x position and y position reporter blocks. Click the
Dettagli
checkboxes next to these blocks tosul
see movimento
their values on the Stage.

Motion commands work with reference to a sprite’s center, which you can set in the Paint
Editor. For example, sending a sprite to point (100,100) moves the sprite so that its center
is at (100,100), as illustrated in Figure 2-3. Therefore, when you draw or import a cos-
tume for a sprite you plan to move around, pay special attention to its center!

Sprite’s
center 100

Mouse2 sprite

100 200

Mouse1 sprite

Figure 2-3: Motion commands reference a sprite’s center.

TRY IT OU T 2-1
 Aspetto, suoni

Istruzioni che è possibile 


impartire ad uno sprite 

per cambiare il suo
aspetto

Istruzioni che è possibile 


impartire ad uno sprite 

per emettere suoni

• Assoluto vs relativo
• “porta”: assoluto
• “cambia”: relativo
 Alcuni dettagli sull’aspetto

clear
color effect
fisheye effect
whirl effect
pixelate effect
mosaic effect
ghost effect
brightness effect

Figure 3-4: This figure shows what happens to the cat when you apply Scratch’s graphic
 Penna

Istruzioni per disegnare sullo stage,

abbassando/alzando la penna o
“timbrando” lo sprite

• Possibilità di modificare
• Colore [0-200]
• Luminosità [0-100]
• Dimensione [0-255]
 Sensori

Valori e valori booleani

che possono essere
utilizzati per leggere
alcune proprietà

• Tastiera
• Mouse
• Rapporti fra sprite (distanza/tocco)
perform these operations, called operators, are shown in Figure 1-27. Sin
these blocks produce a number, you
Operatorican use them as inputs to any bloc
that accepts numbers, as demonstrated in this figure.

Example

Operator

Addition Subtraction Multiplication Division

• Gli1-27:
Figure operatori possono
Arithmetic essere
operators annidati:
in Scratch

Scratch also supports the modulus (mod) operator, which returns

the remainder of the division of two numbers. For example, 10 mod 3
returns 1 because the remainder of dividing 10 by 3 is 1. A common use
the modulus operator is to test the divisibility of one integer (whole num
by another (smaller) integer. A modulus of 0 indicates that the larger n
some examples of using this block.
Numeri casuali
Table 1-1: Examples of Using the Pick Random Block

Example Possible Outcome

{0, 1}

{0, 1, 2, 3, ... , 10}

{–2, –1, 0, 1, 2}

{0, 10, 20, 30, ... , 100}

{0, 0.1, 0.15, 0.267, 0.3894, ... , 1.0}

{0, 0.01, 0.12, 0.34, 0.58, ... , 1.0}

The outputs of pick random 0 to 1 and pick random 0 to 1.0 are different. The
first case will give you either a 1 or a 0, but the second gives a decimal value between
0 and 1. If any input to the pick random block contains a decimal point, the output
will also be a decimal value.
Sequenza
Cicli (+eventi, +parallelismo)
 Try it out!

• Schede introduttive che utilizziamo nel Coderdojo

• https://drive.google.com/drive/folders/
0BzlYujM7klXnT1VBeXh6WDBrQ0k
• Schede 01.01, 01.02, 01.03, 01.04
• Queste schede hanno solo scopo dimostrativo Tutorial
• Schede 02.01, 02.02, 02.03
• Interazione con tastiera e mouse
• Uso della penna
• Tutorial contenuti nel software
 Esercizi

• Create una storia animata con diversi personaggi e

diversi sfondi
• Alcuni personaggi devono entrare in scena solo in certi stage
• Alcuni personaggi devono uscire di scena dopo certi stage
• I personaggi devono inscenare un dialogo
• I personaggi devono essere animati (movimento, costumi)
 Esercizi 7. Create the script shown below, add the nece
run it. Explain how the script works.

nsider the following script and its output. Re-create the script, add
Create
•script
eng7. and its
necessary pen
lecommands,
seguenti
output. thefigure
Re-create run script,
it, andaddgeometriche
explain how it
utilizzando la penna
works.
Create the script shown below, add the necessary pen commands,
tup commands, run it, and explain how it works.
run it. Explain how the script works. 8. Write a program that produces the output s

ng script
eate theand its output.
script shown Re-create
below, the
addscript, add
the necessary pen commands, and
n8. Write a the
program that produces the output shown below.
mmands, run it, and explain how it works.
it. Explain how script works.

rite a program that produces the output shown below.

wn below, add the necessary pen commands, and
 Esercizi

• Disegna una griglia di quadrati contenente 7 righe per 6

colonne (Forza 4)
• Comprensione delle coordinate
• Comprensione dei cicli e dei cicli annidati
• Come sopra, ma utilizzando il blocco “timbra” e
realizzando una scacchiera 8x8 per dama/scacchi
• Alternanza caselle bianche/nere
• Disegnate uno sprite con due costumi, dati da un quadrato
chiaro e da un quadrato scuro
 Discussione

• Quali sono le difficoltà principali che avete incontrato?

• Quali sono le età adatte per gli esercizi suggeriti?
• Per chi conosce già la programmazione:
• qual è la vostra impressione?
• cosa vi manca di un ambiente tradizionale?
• Per chi ha“accesso” al figlio/a di un parente/amico in età
primaria / secondaria di primo grado:
• provate a introdurlo/a a Scratch