Taller Hangar

Un exemple molt típic és el de la pilota que rebota per tot arreu. Es tracta de fer que una pilota reboti amb els marges de la finestra.

La meva proposta és: mireu el codi que copio a sota. Fa el que diu la frase anterior però de manera molt millorable. Intenteu entendre el codi, i després canviar-lo per fer el que fa aquest altre exemple (del que també teniu el codi com a solució).

Finalment podeu experimentar afegint-hi d’altres elements, o simplement canviant-ne els colors per fer-lo més agradable.

(more…)

Un altre element bàsic en qualsevol programa són les estructures de repetició.

Per ara en tindrem prou amb el for loop, que permet repetir la mateixa acció vàries vegades:

El codi

for(int i=0;i<10;i++){
println(i);
}

incrementa un a un el valor d’”i” i l’escriu a la consola.

(more…)

Molt en el fons, programar es redueix a gestionar una sèrie de valors a través de condicionals. Amb variables en totes les seves formes, i algoritmes tant complicats com volgueu, probablement tot es pot reduïr a condicionals.

Com deia a la Què és programar, cal tenir en compte que, al cap i a la fi, tot el que la màquina pot fer és guardar valors, comparar valors, i fer operacions aritmètiques.

Doncs bé, aquest comparar valors és el que ens permet treballar amb condicionals. Només cal tenir en compte com codificar els condicionals.

Així, per dirli que si la variable a és major que 14 ha d’escriure “catorze” a la consola, farem això:

if( a > 14 ) {
println(”catorze”);
}

(more…)

Si hi ha una cosa molt específica de Processing (i que posa especialment nerviosos els programadors de veritat) són el void setup() i el void draw().

Podeu ignorar de moment el void i els parèntesi en blanc (és un tema de funcions).

L’important és que setup i draw són les dues funcions principals de Processing. Les que s’executen sempre. Primer setup, una vegada, i després draw repetidament.

Fins ara les hem ignorat perquè el codi que fèiem servir s’executava una sola vegada de dalt a baix. Ara, tot allò que posem dins draw es repetirà, també de dalt a baix, fins que tanquem el programa (també es pot aturar amb codi però ara no ve al cas).

Amb aquests dos exemples ho veureu molt clar. Mireu el codi i després executeu-lo per veure si es compleixen les vostres previsions:

(more…)

Una variable és un espai en la memòria on guardem un valor. Cada variable té un nom únic que ens serveix per referir-nos-hi, i un valor que pot variar.

Si la distància d’un llàpis respecte la meva mà l’anomeno “dis”, mentre el tinc agafat “dis” té per valor 0. Si el deixo caure, la distància augmentarà fins que el llapis sigui a terra, i llavors el valor de “dis” pot ser, per exemple 110 (centrímetres).

El valor d’una variable ha de correspondre a un dels tipus de dades amb què el programa pot treballar. Les més comunes en Processing són int (números enters), float (número amb decimals), boolean (cert o fals), color i string (cadena de caràcters).

(more…)

Toca fer codi. Amb tot el que hem vist podeu començar a fer dibuixos més complexos.
Mireu les següents pàgines de la referència de Processing abans de reproduir, via codi, les imatges proposades:

ellipseMode()

rectMode()

(more…)

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. (more…)

Arribats a aquest punt, és hora de passar a l’acció i començar a fer codi!

Processing, com qualsevol entorn de programació amb cara i ulls, té una consola. Un lloc on, via text, podem rebre missatges del programa, i, quan n’hi hagi, veure els errors. És la consola, i es troba al capdavall de la interfície de Processing, amb un fons negre:

(more…)

Una molt bona comparació de Processing amb d’altres llenguatges és aquí.

A part d’això, i a grans trets, segueix una comparació de processing amb ActionScript (el llenguatge de Flash), C, i Java.

(more…)