Che materia stai cercando?

Anteprima

ESTRATTO DOCUMENTO

Per avere un margine diverso per ogni lato, si possono inserire questi valori in senso orario e quindi

in alto (15px), a destra (0px), in basso (10px) e a sinistra (6px).

Esiste inoltre un valore particolare per i margini e per mostrartelo aggiungiamo un <div> intorno a

un'intera pagina e gli diamo l'id container.

Aggiungiamo poi una regola per questo <div> per dargli la larghezza di 400 px e centrarlo sulla

pagina. Per centrare il div scriverò margin: auto.

Ora che abbiamo centrato questo div, potremmo aggiungere un bordo intorno, usando le proprietà

dei bordi dei CSS. Allora per aggiungere un bordo rosso a questo div scriviamo border: e

specifichiamo lo spessore del bordo, lo stile e il colore e quindi: border: 1px solid rgb(145, 0, 0).

Se vogliamo inserire un bordo sopra viola possiamo scrivere: border-top: 10px solid purple.

Per aggiungere una cornice all'immagine e tornando su #cute cat scriviamo border: 6px ridge red.

Ogni volta che aggiungi ai tuoi elementi un colore di sfondo e un bordo quasi sempre ritieni sia

meglio aggiungere anche un riempimento per creare un po' di spazio e quindi nel #container

scriviamo padding: 15px. POSIZIONE CSS

Ora useremo i CSS per muovere realmente le cose.

Le posizioni dei vari elementi nel browser si definiscono statiche o normali.

Gli elementi come le immagini sono posizionati da sinistra a destra, mentre gli elementi come i

paragrafi sono posizionati dall'alto.

Si può cambiare questa strategia di posizionamento con le proprietà dei CSS.

Proviamo con l'immagine del paesaggio e quindi digitiamo la posizione e poi il valore relativo (

#landscape {width: 250px;

position: relative;

La strategia di posizionamento relativo implica il normale posizionamento dell'elemento e il

successivo contro bilanciamento. Per comunicare al Browser quale valore dobbiamo equilibrare

dobbiamo usare le combinazioni di top, bottom, left e right.

Posso inoltre usare il posizionamento assoluto per prendere un elemento completamente fuori dal

normale ordine e metterlo ovunque sullo schermo. Per fare questo bisogna cambiare il relative in

absolute.

Ora inseriamo una regola per un'altra immagine e diamogli una posizione assoluta, poi scriviamo

top 50 px e left 50 px.

Inoltre la proprietà z-index comunica al browser l'ordine esatto in cui posizionare gli elementi,

attribuendo loro differenti zi-index.

Cominciamo con il paesaggio, cui attribuiremo z-index 1, winston avrà z-index 2 e hopper z-

index 3.

Un'altra opzione è il posizionamento fisso che fa si che le cose sembrino non muoversi per niente.

CSS ELEMENTI FLOAT

La proprietà float permette di far “fluttuare” gli elementi dentro e intorno ad altri elementi ed è

perfetta per posizionare i testi intorno alle immagini.

Quindi nella regola scriviamo float: decidendo e se vuoi che l'immagine sia verso il lato sinistro,

scrivi dopo i 2 punti left,

E' possibile muovere anche elementi che non siano immagini ad esempio una lista di Link.

MODULO 2

DISEGNARE CON LA PROGRAMMAZIONE

Iniziamo a disegnare una faccia con i cerchi.

Per disegnare un cerchio bisogna scrivere nell'editor il comando ellipse.

Dopo aver scritto il nome di un comando in un programma bisogna sempre scrivere (); e quindi

ellipse();

Ora dobbiamo fornire le informazioni riguardo a dove disegnare l'ellipse e le dimensioni che deve

avere. Dato che voglio disegnare una faccia voglio che l'ellipse sia al centro dello sfondo e che sia

abbastanza grande.

E quindi dentro le parentesi tonde scriviamo 4 numeri: il primo (200) controlla la distanza

dell'ellisse dal bordo sinistro dello sfondo, il secondo numero (200) controlla la distanza relativa

all'alto e al basso dello sfondo, il terzo (300) controlla la larghezza dell'ellisse, infine il quarto (350)

controlla l'altezza dell'ellisse. Quindi i primi due controllano la posizione dell'ellisse, mentre gli

ultimi due le due dimensioni.

Questi numeri sono definiti parametri e il comando viene definito funzione.

Il primo parametro si chiama x, il secondo y, il terzo si chiama larghezza e infine il quarto si

chiama altezza.

Per fare la bocca utilizziamo sempre il comando ellipse con i parametri (212, 250, 100, 73), e per

fare gli occhi scriviamo ellipse(150, 150, 30, 30) e ellipse(278, 150, 30, 30).

DISEGNARE ALTRE FIGURE CON LA PROGRAMMAZIONE

Possiamo anche disegnare i rettangoli utilizzando la funzione rect e poi inserire i nostri parametri

come ad esempio rect(175, 345, 50, 50), per fare il collo della nostra faccia.

Ricorda che i parametri x e y della funzione rect controllano l'angolo in alto a sinistra del rettangolo

e non il centro.

Trasformiamo la nostra faccia in una faccia da robot e quindi digitiamo rect(76, 45, 250, 300) e per

la bocca invece rect(126, 250, 152, 60).

E poi facciamo gli occhi digitando rect(140, 150, 30, 30) e rect(240, 150, 30, 30).

Per annottare quale parte della faccia disegna ciascuno di questi rettangoli possiamo aggiungere un

commento.

Un commento inizia sempre con due slash // e in seguito si scrive il testo per far capire che cosa fa

quella parte del codice.

E quindi:

Per disegnare un mono ciglio sugli occhi del robot possiamo disegnare una linea e quindi scrivere

line (140, 129, 270, 129) e i suoi 2 primi parametri sono il punto iniziale della linea e i suoi ultimi 2

il suo punto finale. COLORARE CON LA PROGRAMMAZIONE

Per colorare lo sfondo dietro il nostro disegno scriviamo background e in automatico comparirà

l'editor per il nostro colore.

I 3 parametri del colore sono il rosso, il giallo e il blu e quindi digitiamo background(0, 255, 242);

per avere uno sfondo azzurro.

Per colorare la faccia prima del comando ellipse scriviamo il comando fill che colorerà tutte le

forme che ci sono dopo quel comando e quindi per avere la nostra faccia gialla scriviamo fill(255,

242, 0);.

Per colorare gli occhi di nero scriviamo sopra il comando degli occhi sempre fill(0, 0, 0); e infine

per colorare la bocca di rosso scriviamo fill fill(255, 0, 0);.

Se inoltre vogliamo abbellirlo con una fascia bianca scriviamo prima il comando della linea e

quindi line(80, 115, 270, 75) e poi sopra il comando che la colorerà di viola e quindi stroke(191, 0,

255) e poi per rendere la fascia più spessa utilizziamo il comando strokeWeight (20) con un unico

parametro per dirgli quanto deve essere spessa.

Infine scriviamo un ultima funzione che toglierà tutte le linee di contorno ovvero noStroke() sopra

background.

N.B. Per scoprire altre funzioni bisogna consultare la documentation (Docs).

INTRODUZIONE ALLE VARIABILI

Una variabile è un nome che indica qualcos'altro che sarà il valore della variabile.

Per creare una variabile bisogna scrivere var e in seguito il nome della variabile che dovrebbe

descrivere quello che la variabile contiene ad esempio var eyeSize;.

Ora la variabile dovrà contenere il valore degli occhi quindi sotto scriviamo eyeSize = 20;.

L'uguale siugnifica “assegnare” e quindi stiamo assegnando 20 alla variabile eyeSize.

Quindi quello che sta a sinistra del segno di uguale è la variabile e quello che sta a destra è il

valore che stiamo assegnando alla variabile.

Se ora sostituiamo gli ultimi due valori di entrambi gli occhi della faccia con la variabile eyeSize

avremmo due occhi perfettamente uguali.

Se vogliamo fare tutto questo in un unico passaggio basta scrivere var eyeSize = 33;.

N.B. Assicurati di definire sempre le variabili prima di provare a utilizzarle, quindi scrivile sempre

prima di tutto. ALTRO SULLE VARIABILI

Creiamo una variabile per la posizione x della figura e quindi scriviamo var x e poi segnano la

coordinata x alla faccia della figura e quindi scriviamo var x = 200;.

Ora posso sostituire il numero x della faccia con la mia nuova variabile.

Ora definiamo la posizione degli occhi e della bocca in base alla posizione della faccia in modo tale

che quando spostiamo la faccia della figura si spostino automaticamente anche la bocca e gli occhi.

Dato che la x dell'occhio sinistro è 150, e sapendo che 150 è 200 – 50, l'occhio sinistro sarà dove si

trova la faccia meno 50 e quindi sarà x (cioè la posizione della sua faccia) – 50.

Adesso se cambio il valore della coordinata x il suo occhio si muove insieme alla sua faccia.

Ora procediamo con l'occhio destro: il suo occhio destro è disegnato a 300 e, sapendo che 300 è 200

+ 100, e quindi il suo occhio destro sarà x + 100.

Ora la bocca: la sua bocca è disegnata a 250, la sua bocca è 200 + 50, quindi sarà x + 50.

E ora non appena cambio il valore di x si muoverà l'intera faccia, inclusi occhi e bocca.

Come scegliamo i nomi per le variabili? Per le variabili in JavaScript, segui queste regole:

I nomi delle variabili possono iniziare con lettere, o con i simboli $ e _. Possono contenere solo

• lettere, numeri, $ e _. Non possono iniziare con un numero. "myVariable", "leaf_1", e "$money3"

sono tutti esempi di nomi validi per le variabili.

I nomi delle variabili sono sensibili al maiuscolo, che vuol dire che "xPos" è diverso da "xpos",

• quindi assicurati di essere coerente.

I nomi delle variabili non possono essere uguali ai nomi di variabili già esistenti, e ce ne sono un

• sacco nel nostro ambiente di programmazione ProcessingJS. Se compare un errore del tipo "Sola

lettura!", prova a cambiare il nome della tua variabile.

I nomi delle variabili devono essere chiari e significativi, in inglese o in italiano, come preferisci;

• per esempio, invece di "ts", usa "toothSize".

Utilizza l'alternanza di lettere maiuscole e minuscole per mostrare le diverse parole nei nomi delle

• variabili, come "toothSize" invece di "toothsize" o "tooth_size".

CREARE LE ANIMAZIONI

Per creare un'animazione dobbiamo fare in modo che un ambiente di programmazione crei nuovi

disegni più volte al secondo e qui vedremo come assegnare a questi disegni un valore x diverso in

modo tale da permettere alla macchina di muoversi.

In fondo al programma scriviamo draw = e in automatico comparirà function() {};.

Il codice digitato dentro la funzione draw sarà automaticamente ripetuto più volte al secondo,

invece tutto fuori a questa funzione sarà eseguito una volta sola, quando viene caricato il

programma.

Quindi ora con il procedimento copia-incolla, copiamo e incolliamo la position of the car, draw

the car body e draw the wheels dentro le parentesi graffe della funzione draw.

Ora stiamo quindi facendo in modo che la nostra macchina venga disegnata più volte al secondo.

Dato che vogliamo che la macchina sia in un posto diverso ogni volta, e quindi è come se volessimo

dire al programma “la posizione iniziale della macchina è 10 e poi aggiungi 1 a questa posizione per

ogni volta che la disegni”.

Per farlo spostiamo la variabile x fuori dalla funzione draw e la inizializzo a 10.

Ora dentro draw, alla fine, aggiungo una riga di codice per aggiungere 1 alla variabile e quindi

scrivo x = x + 1.

Ora se vogliamo che il programma cancelli la macchina precedente, spostiamo background dentro

draw.

Infine per aumentare la velocità della macchina basta cambiare il valore di x = x + 1 e al posto di 1

scrivere ad esempio 10.

Per farla andare all'indietro basta trasformare il numero in negativo e quindi al posto di 10 diventerà

-10. INTERAZIONE CON IL MOUSE

Ora impareremo a utilizzare le variabili mouseX (che è sempre la posizione x del tuo mouse) e

mouseY (che è sempre la posizione y del tuo mouse).

Se sostituisco i primi due parametri di ellipse con mouseX e mouseY, allora la pallina blu si

troverà sempre nella posizione in cui si troverà il tuo mouse.

N.B. Queste due variabili dovranno essere sempre utilizzate all'interno della funzione draw.

IL TESTO

Per scrivere un testo bisogna digitare nell'editor text(“Sophia”, 99, 96); dove “Hello” sta per il

testo che vogliamo scrivere (le virgolette comunicano al computer che quello che c'è dentro non è

una variabile ma un testo), e i due numeri sono le coordinate.

Di default il testo verrà scritto in bianco e quindi per cambiare colore del testo in blu scriviamo

sopra il testo fill(0, 13, 255);.

Per modificare la grandezza del testo digitiamo textSize(38); dove 30 sta per la sua grandezza.

Sotto la scritta Sophia possiamo inserire anche un altro testo seguendo le stesse procedure.

LE STRINGHE

Una stringa indica le parti di un testo.

E' possibile inserire le stringhe nelle variabili e quindi possiamo ad esempio scrivere var myName

= "Sophia"; e poi nel testo inseriamo la variabile e quindi scriviamo text(myName, 41, 30);.

E' possibile inoltre sommare le stringhe quindi scriviamo la variabile var message = myName +

"!!!", sostituiamo il testo con message e inoltre sommiamo la variabile aggiungendo + message nel

testo. Ora il tetso apparirà 2 volte.

Naturalmente se inseriamo il tutto nella funzione draw, e trasformiamo le coordinate in mouseX e

mouseY sarà possibile muovere il nome Sophia!!! con il mouse.

Se inoltre dentro la funzione draw inseriamo howBig = howBig + 1, ogni volta che sposteremo il

muose il nome si ingrandirà di 1. FUNZIONI

Una funzione è una porzione di codice raggruppata e a cui abbiamo dato un nome.

Ad esempio la funzione rect(44, 72, 66, 231); ci farà apparire un rettangolo.

Vediamo come creare una funzione: Inseriamo il codice della figura di Wiston (la faccia gialla)

dentro la funzione di var drawWinston = function() { }; e quindi dentro queste parentesi graffe.

In sostanza abbiamo dato un etichetta a questo pezzo di codice così possiamo dire al programma

“trova quella parte di codice con quell'etichetta ed eseguilo” e quindi abbiamo reso questo pezzo di

codice riutilizzabile.

Quindi ora dobbiamo comunicare al programma di eseguire il codice e quindi sotto la funzione

scriviamo drawWinston();.

Il senso della funzione è che possiamo riutilizzarle e ad esempio per far apparire tanti Winston

dobbiamo prima di tutto riscrivere drawWinston() altre due volte e poi impostare la posizione di

Winston in “random” in modo tale che non lo disegni sempre nello stesso posto. E quindi sulla

variabile faceX e faceY scriviamo dopo l'uguale random(50, 350).

PARAMETRI DELLE FUNZIONI

Per specificare la posizione ogni volta che “chiamo” (scrivo) la funzione e quindi assegnargli dei

parametri specifici.

Quindi ad esempio se vogliamo avere 4 Winston in posti specifici scriviamo affianco a ogni

drawWinston le sue coordinate quindi avremmo

drawWinston(99, 117);

drawWinston(288, 142);

drawWinston(122, 322);

drawWinston(266, 321);

Ora dobbiamo comunicare alla funzione che le stiamo passando dei parametri e quindi dentro le

parentesi tonde della funzione diamo i nomi ai parametri e quindi scriviamo (faceX, faceY).

VALORI RESTITUITI DALLE FUNZIONI

Proviamo a modificare il programma mostrando quante ciambelle ha mangiato Winston in tutto in

ogni punto della sua vita. Per esempio quando aveva due anni possiamo calcolare che ne mangiava

3 per 365 giorni per 2 anni e quindi scriviamo text(3*365*2, 10, 40);.

Come vedi nel disegno a destra è apparso il numero di 2190 ciambelle.

A 14 anni ha mangiato text(3*365*14, 200, 40) e quindi 15330 ciambelle. Possiamo notare che in

queste 2 operazioni cambiamo solamente il numero degli anni e quindi dato che vediamo un codice

che si ripete lo possiamo mettere in una funzione. Quindi definiamo la funzione chiamandola var

calcTotalDonuts = function(numYears) inserendo come parametro il numero degli anni, poiché è

l'unica cosa che cambia in questo calcolo e dentro la funzione scriviamo il calcolo quindi var

totalDonuts = 3 * 365 * numYears;.

Ora sostituiamo 3*365 con calcTotalDonuts e ora se vogliamo che la funzione comunichi un valore

a chiunque l'ha chiamata la funzione deve restituire esplicitamente quel valore, quindi perchè una

funzione espliciti un valore dobbiamo digitare return e qualsiasi cosa vogliamo che espliciti quindi

scriviamo return 3 * 365 * numYears.

Infine ricorda che quando dichiariamo una variabile dentro una funzione è considerata una

variabile locale, ovvero vive solo dentro alla funzione. Quindi Quando dichiariamo una nuova

variabil dentro una funzione, diciamo che è locale per quella funzione. Questo perché solo quella

funzione potrà vedere la variabile: il resto del programma fuori dalla funzione non la vedrà. Fuori

dalla funzione, è come se la variabile non esistesse più.

Quando dichiariamo una variabile fuori dalle nostre funzioni, diciamo che è una variabile globale.

Questo perché tutte le funzioni ora possono accedervi e fare ciò che vogliono con la variabile.

LOGICA E CONDIZIONALI

ISTRUZIONI IF

Le dichiarazioni if sono un modo per far decidere al tuo programma se eseguire o meno un blocco

di codice. Facciamone un esempio: nel disegno qui sotto quando la palla raggiunge il bordo dello

schermo invece di andare oltre lo schermo, voglio che si giri indietro quindi rendiamo la velocità

negativa e quindi dentro la funzione draw scriviamo speed = -5;.

Ora cambiamo la velocità solo (if) se la palla raggiunge il bordo destro: le istruzioni if sono un

modo per dire al programma “voglio che tu esegua questo codice ma solo in queste circostanze”.

Quindi digitiamo if () {} e dentro le tonde mettiamo le condizioni e dentro le graffe il codice da

eseguire. Quindi se quella condizione avverrà allora il programma eseguirà quel codice.

Dato che la nostra condizione è che la palla debba raggiungere il bordo destro, e il bordo destro è a

400, allora nelle condizioni scriviamo if (x > 400) e nel codice da eseguire cambiamo la velocità e

quindi scriviamo tra le parentesi graffe speed = -5.

Ora possiamo seguire le stesse procedure per fare la stessa cosa per quanto riguarda il lato sinistro

quindi: if (x < 0) {speed = 5;}.

ANCORA SULL'INTERAZIONE CON IL MOUSE

Ora vediamo come utilizzare mouseIsPressed con le istruzioni if per eseguire il codice solo quando

l'utente sta premendo il mouse.

Sostituiamo quindi il valore y della palla con mouseY in modo tale da cambiare la linea su cui si

sposta la palla semplicemente muovendo il mouse.

Ora per utilizzare anche mouseX disegniamo un'altra palla e facciamola andare in direzione opposta

ovvero su e giù e facciamo controllare all'utente la sua posizione x: quindi scriviamo

ellipse(mouseX, position, 50, 50);.

Ora per far sì che la seconda palla esista solamente con il click del mouse quindi utilizziamo la

variabile mouseIsPressed dentro un'istruzione if: quindi scriviamo if (mouseIsPressed

{ ellipse(mouseX, position, 50, 50); }.

Quando un valore può essere o vero o falso, lo chiamiamo valore booleano (in opposizione ai

numeri e alle stringhe).


ACQUISTATO

4 volte

PAGINE

36

PESO

3.89 MB

PUBBLICATO

10 mesi fa


DETTAGLI
Corso di laurea: Corso di laurea in scienze del testo letterario e della comunicazione
SSD:
Docente: Cosmo Luca
A.A.: 2018-2019

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher nora96_96 di informazioni apprese con la frequenza delle lezioni di Idoneità di Informatica e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Ca' Foscari Venezia - Unive o del prof Cosmo Luca.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!