Eines de l'usuari

Eines del lloc


tutorials:processing:05_basics

Instruccions Bàsiques

Aprendrem el sistema de coordenades, elements bàsics com punts, línies, rectangles, el·lipses i colors.

Sistema de coordenades

El primer que cal tenir es el sistema de coordenades emprat generalment als ordinadors, de forma que a diferencia del sistema matemàtic no tindrem nombres negatius.

recodem l'instrucció size

size(200,300);

aixó vol dir que el tindrem 200 en horitzontal i 300 en vertical. I el origen el extrem esquerre. Per aconseguir pantalla completa al mòbils sobretot que cadascun te una pantalla diferent utilitzem constants(en majusqules que calcula automaticament processing)

size(WITH,HEIGHT);

Elements bàsics

Comencem a dibuixar elements simples a la pantalla.

Aquí farem un resum si volem més detalls podem anar a la web del processing, referencia https://processing.org/reference/ al apartat 2Dprimitives

line(x1,y1,x2,y2);
rect(x,y,with,height);
ellipse(x,y,with,height);

que afegirem en dintre del la funció draw() {… } dibuixarà una i altra vegada, a la màxima velocitat de refresc de la pantalla(fps) els elements que posem.

void setup(){
 size(200, 200);
}

void draw(){
line(100,100,150,150);
}

Colors

Els colors es defineixen amb bytes(0-255), si es escala de grisos només cal un byte, que indica la quantitat de blanc, 255 es el blanc i 0 de blanc es negre). Si es en color necessita 3 bytes, RGB(Red,Green,Blue), la quantitat de cada color des de 0 fins 255, per exemple(0,0,255) es blau pur, i a més a més podem afegir un byte si volem que tinguin transparència.

https://processing.org/tutorials/color/

Com apliquem els colors? Per aplicar els color utilitzarem les funcions:

stroke(), fill(), background() i si no volem colors nostroke() o nofill()

Caldrà aplicar-les abans de dibuixar l'element:

background(150);
stroke(0);
line(0,0,100,100);
stroke(255);
rect(25,25,50,50);

Recordem que el programa s'executa línia a línia, instrucció a instrucció, i després comença de nou.

tutorials/processing/05_basics.txt · Darrera modificació: 2018/10/01 23:46 per crevert