Taller Hangar

Quan el que programem va destinat a la web, i amb Processing és una possibilitat, el ratolí serà molt sovint l’element d’interfície a través del qual interactuarem amb el visitant a la nostra web.

Aquí hi ha quatre exemples molt senzills que van evolucionant del primer a l’últim a nivell d’interacció i gràfica.

En el primer exemple la interacció és amb l’eix vertical del ratolí

En el segon exemple, amb el vertical i l’horitzontal

(more…)

A petició del Luca, un parell d’exemples del treball amb classes. No el recomano, de moment, pels que tot just us inicieu en la programació, tot i que és extremadament útil un cop els programes es tornen complexos i, en definitiva, per el que s’anomena programació orientada a objectes (OOP: Object Oriented Programming).

Són dos exemples molt bàsics perquè es vegi l’estructura de les classes:

(more…)

A més de setup i draw, hi ha algunes variables predeterminades en p5 que són molt útils a l’hora de programar en auqesta plataforma:

Variables:

width : amplada de la finestra

height : alçadade la finestra

mouseX : posició del ratolí a l’eix X

mouseY : posició del ratolí a l’eix Y

(more…)

Un applet també pot tenir llei de la gravetat:

Bouncing ball 2

I vist aquest exemple, se us proposa intentar emular alguns dels 4 primers d’aquesta pàgina. En podeu veure el codi però són fets amb “pur” java, i per tant no us servirà copiar-lo…

(El darrer post abans de començar el taller. Si heu notat que els posts es van tornant més curts i caòtics, a partir d’ara pot ser pitjor…)

No hi ha res com recórrer als mestres. En un curs a ITP, l’Amit Pitaru proposava el següent exercici per entendre a fer anar loops amb processing, que crec que pot ser molt útil.

Es tracta de reproduir amb codi les següents captures de pantalla.

(more…)

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…)