Primers dibuixos
Arriba el moment de fer el “hello world” gràfic:
Escriviu
line(20,20,80,80);
a la interfície de Processing i premeu Run.
I… voilà de nou! Veureu una línia negra a la finestra que abans era només gris.
Una línia que va del punt 20,20, al punt 80,80 en una quadrícula de 100×100 píxels.
Si poseu
rect(20,20,60,60);
veureu, efectivament, que es crea un rectangle (quadrat en aquest cas) a partir del punt 20,20 i de 60 píxels de llarg i ample.
I així successivament amb les formes geomètriques bàsiques següents:
point() ex.: point(30, 20);
line() ex.: line(30, 20, 85, 75);
rect() ex.: rect(30, 20, 55, 55);
ellipse() ex.: ellipse(56, 46, 55, 55);
triangle() ex.: triangle(30, 75, 58, 20, 86, 75);
Recordeu: EN JAVA, CAL ACABAR CADA LÍNIA DE CODI AMB UN PUNT I COMA. Això vol dir que cal “;” al final de cada instrucció, no necessàriament de cada lína tal i com l’escribim a la interfície de Processing. Però cal tenir això en compte sempre ja que és un error molt comú oblidar-se’n algun.
———
ALTRES INSTRUCCIONS FONAMENTALS PER FER DIBUIXOS BÀSICS:
Haureu vist que tots els exemples són sobre una finestra de 100×100. Per canviar això cal fer servir la instrucció size();
size() ha de ser la primera instrucció que es dóna quan programem quan ho estem fent ara (per a iniciats, em refereixo a sense void loop() ni void draw()).
size() pot rebre dos o bé tres paràmetres. Si en rep dos (o els dos primers si en rep tres), es refereixen a la mida de la finestra en píxels. (El tercer, que per ara podeu ignorar, es refereix al mode de “rendering”, de dibuix).
Per exemple:
size(400,300);
size(423,67);
Com el seu nom indica, aquesta instrucció especifica el color amb el que s’omplirà una forma geomètrica tancada. Els paràmetres (valors entre parèntesi) especifiquen el color.
ex.:
fill(153);
fill(255,0,127);
Fill afectarà tots els dibuixos que vinguin DESPRÉS en l’ordre del codi. Els paràmetres (valors entre parèntesi) especifiquen el color.
El mateix que fill() però afecta el contorn, el traç de les formes tancades i les línies.
ex.:
stroke(153);
stroke(255,0,127);
Fill afectarà tots els dibuixos que vinguin DESPRÉS en l’ordre del codi.
Un altre comandament útil pels dibuixos, i sempre, és background(), que li diu a Processing quin ha de ser el color de fons d’una finestra.
background(127);
background(127,192,255);
Aquesta instrucció l’haurem de situar just darrere de size() o, en tot cas, abans de fer cap dibuix ja que de fet el que fa és tapar tot el que hi ha a la finestra amb el color especificat. Per defecte, el gris que hem vist en els primers exemples.
————————-
Vist tot això, ja tenim elements per entendre codi una mica més complex. Com ara:
size(300,300);
background(255);
fill(127,255,0);
stroke(255,0,0);
rect(50,50,200,200);
o bé:
size(400,200);
background(0);
fill(0,0,255);
stroke(255,0,0);
ellipse(200,100,66,99);
i també:
size(200,200);
background(0);
fill(0,0,255);
stroke(255,0,0);
ellipse(100,100,110,50);
fill(0,255,0);
rect(100,100,40,35);