Scarica Javascript abilità informatiche informatica programmazione e più Appunti in PDF di Programmazione Java solo su Docsity!
JAVASCRIPT
In questo corso, ti insegneremo i concetti del linguaggio di programmazione JavaScript e le interessanti funzioni che puoi usare al suo interno con la libreria ProcessingJS. Normalmente su Khan Academy insegniamo utilizzando i video, ma qui nella terra della programmazione, insegniamo con quelle che chiamiamo "spiegazioni interattive". Una spiegazione interattiva è simile a un video, ma è ovviamente interattiva - puoi mettere in pausa in ogni momento se vuoi giocare da solo con il codice, e puoi creare spin-off se vuoi avere una versione tua di ciò che abbiamo creato noi.
Disegnare con la programmazione
Cerchio
Ellipse (200, 200, 200, 200) Spiegazione: numero:
- Distanza da sx
- Distanza dall’alto
- Larghezza dell’ellisse
- Altezza dell’elisse Sono i parametri del comando dell’ellisse, chiamati FUNZIONI NOMI DI OGNI PARAMETRO
- X come direzione orizzontale dello sfondo (inizia a 0 e finisce a 400)
- Y controlla la direzione dall’alto al basso dello sfondo (da 0 a 400)
- LARGHEZZA
- ALTEZZA Voglio fare una faccia : faccio altri cerchi! (duh) ellipse(212, 206, 283, 318); ellipse(212, 250, 100, 73); ellipse(150, 150, 30, 30); ellipse(278, 150, 30, 30); Suggerimento rapido : CAMBIARE I NUMERI, vedendo direttamente come si modifica la forma premi sto simbolo che si trova su un numero dell’immagine, lo clicchi e poi lo trascini per vedere in simultanea come si modifica l’immagine/forma RICORDA IL ; ALLA FINE!!
Rettangolo
Qui i comandi sono differenti: I parametri X e Y controllano l’angolo in alto a sinistra del rettangolo e non il centro. rect(76, 45, 250, 300); rect(126, 250, 152, 60); rect(140, 150, 30, 30); rect(240, 150, 30, 30); rect(175, 345, 50, 50); Troppi rettangoli, non so a cosa si riferisce, come risolvere? COMMENTO // parola: rect(76, 45, 250, 300); // face rect(240, 150, 30, 30); // right eye
rect(126, 250, 152, 60); // mouth rect(175, 345, 50, 50); // neck rect(140, 150, 30, 30); // left eye Linea // unibrow Line (140, 150, 270, 150) Voglio che il monociglio finisca dove si trova l’occhio destro, perciò 240+30= 270 Voglio che il monociglio sia una linea dritta, perciò userò la medesima coordinata usata per la Y all’inizio, perciò 150 La linea non avrebbe altri parametri, perché non servirebbe altezza e larghezza, perché è piatta, ma questi altri due parametri servono per indicare il punto iniziale e il punto finale rect(76, 45, 250, 300); // face rect(126, 250, 152, 60); // mouth rect(140, 150, 30, 30); // left eye rect(240, 150, 30, 30); // right eye rect(175, 345, 50, 50); // neck Ordine è fondamentale! Non scrivere prima per esempio la bocca e dopo la faccia, perché si creerebbe sopra!! COLORARE CON LA PROGRAMMAZIONE background(148, 251, 255); // RGB // face ellipse(202, 208, 300, 300); // eyes ellipse(157, 151, 40, 40); ellipse(304, 142, 40, 40); // mouth ellipse(257, 240, 120, 136); Dobbiamo introdurre un altro commando : FILL (metterli prima della forma) background(148, 251, 255); // RGB // face fill(255, 255, 0); ellipse(202, 208, 300, 300); // eyes fill(0, 0, 0); ellipse(157, 151, 40, 40); ellipse(304, 142, 40, 40); // mouth fill(255, 0, 0); ellipse(257, 240, 120, 136); IMPORTANTE: > COLORI PRIMA DEI COMANDI!! > dove c’è background sopra scrivi noStroke();
rect(10, 10, rectWidth, rectWidth); Risposta: 20 Altri variabili Voglio cambiare la posizione del cerchio giallo, che è una x, senza però dare il medesimo valore a tutte le x. Come? // Winston's handsome features don't need outlines noStroke(); var eyeSize = 40; var x = 200; // face fill(255, 255, 0); ellipse( x , 208, 300, 300); // eyes fill(46, 46, 41); ellipse(150 x - 50 , 151, eyeSize, eyeSize); ellipse(300 x + 100 , 142, eyeSize, eyeSize); // mouth fill(252, 65, 65); ellipse(250 x + 50 , 240, 120, 136);
