Practica 1 Integració Digital de continguts En l'assignatura "Integració digital de continguts" es tracten els processos fonamentals sobre la digitalització i el processament de continguts d'àudio i vídeo. El llenguatge en què es desenvolupa l'assignatura és Processing. Es tracta d'una assignatura amb quatre entregues 2 PAC's i 2 pràctiques amb algunes preguntes teòriques molt senzilles i una part de programació amb Processing

1. Marcos Baldoví Martínez
PAC1
Integració Digital de Continguts

2. 1. (1 punt) Instal·lació del Processing en el nostre PC. Cal descarregar el programa de la web oficial
i instal·lar-lo. Per comprovar que tot està correcte executeu algun dels exemples que porta per
defecte el programa. Podeu fer una captura d'algun d'aquests exemples i adjuntar-la a la memòria de
la pràctica.

5. 2. (7 punts) Escriure el nostre primer programa que ens mostri un missatge per pantalla sobre
un requadre que vagi canviant de color. Com a mínim hi ha d'haver dos colors.
L'algoritme que es fa servir permet mostrar quatre colors diferents seleccionats prèviament.
Fem servir els valors de la paleta rgb per a la composició dels mateixos i els guardarem en un array.
Després inicialitzàrem la variable i=0 que serà equivalent en l'array al color vermell (roig en valència).
Cada increment de la variable auxiliar (i) ens permetrà canviar de color fins que aplegui a 3 que mostrara
l'ultim color de l'array i tornarà a repetir la mateixa seqüència de colors.
Aquesta seqüència de colors la controlarem per mitjançant un condicional que mentre el valor sigui inferior a
3 permetrà el incrementar el valor de l'array i una vegada arribi a 3 el ficarà a 0 de nou.

6. // declaracio variables de color
color c_negre;
color c_blanc;
color c_roig;
color c_taronga;
color c_verdClar;
color c_turquesa;
// array colors
int [] colorsArray;
// variable auxiliar
int i;
// text
String message;
void setup() {
// tamany de la finestra
size (400,400);
// frames per segon
frameRate (1);
// text que contindra la variable message
message = "Hello world";
// valors dels colors
c_negre = color (0, 0, 0);
c_roig = color (255,0,0);
c_taronga = color (237,118,14);
c_verdClar = color (189,236,182);
c_turquesa = color (127,181,181);
c_blanc= color (255,255,255);
// array colors
colorsArray = new int [4];
colorsArray[0] = c_roig;
colorsArray[1] = c_taronga;
colorsArray[2] = c_verdClar;
colorsArray[3] = c_turquesa;
// initcialitzar la variable contador
i=0;
}
void draw() {
// fondo de la finestra
background (c_negre);
// relleno del rectangle
fill (colorsArray[i]);
// El condicional es per a que el rectangle sempre estiga canviant de color
if (i < 3){
i = i + 1;
}
else{
i=0;
}
// rectangle
rect (10, 10, 380, 380, 15);
//tamany text
textSize (30);
// color text
fill (c_blanc);
//text
text (message, 120, 200);
}

7. // declaracio variables de color
color c_negre;
color c_blanc;
color c_roig;
color c_taronga;
color c_verdClar;
color c_turquesa;
// array colors
int [] colorsArray;
// variable auxiliar
int i;
// text
String message;
void setup() {
// tamany de la finestra
size (400,400);
// frames per segon
frameRate (1);
// text que contindra la
variable message
message = "Hello world";
// valors dels colors
c_negre = color (0, 0, 0);
c_roig = color (255,0,0);
c_taronga = color (237,118,14);
c_verdClar = color
(189,236,182);
c_turquesa = color
(127,181,181);
c_blanc= color (255,255,255);
// array colors
colorsArray = new int [4];
colorsArray[0] = c_roig;
colorsArray[1] = c_taronga;
colorsArray[2] = c_verdClar;
colorsArray[3] = c_turquesa;
// initcialitzar la variable
contador
i=0;
Definició de les variables que es faran servir:
Aquestes sis variables del tipus color són les que
pertanyen als 4 colors que es mostren més el
negre del fons i el blanc del text.
Array per guardar els colors seleccionats per
mostrar.
Variable auxiliar que permet l'increment a l'array
Missatge que es mostrarà
Array de quatre posicions amb els colors que
volem mostrar

8. }
void draw() {
// fondo de la finestra
background (c_negre);
// relleno del rectangle
fill (colorsArray[i]);
// El condicional és per a que el
rectangle sempre estigui canviant
de color
if (i < 3){
i = i + 1;
}
else{
i=0;
}
// rectangle
rect (10, 10, 380, 380, 15);
//tamany text
textSize (30);
// color text
fill (c_blanc);
//text
text (message, 120, 200);
}
El valor del color rectangle dependrà del valor
de la variable (i) segons el valor que tinga
mostrarà un color o altre
El condicional s'encarrega de mirar que la i
tingui un valor inferior a 3. Mentre que el valor
sigui inferior el comptador incrementarà el valor
de i.
En el cas que el valor sigui major tornara a posar
aquesta variable a zero (i=0)
3. (2 punts) Es demana que el color del text també canvii i que el color de fons sigui un
degradat continu (que vagi fent una transició suau entre els diferents colors en comptes de
canviar bruscament d'un a l'altre).
L'algoritme que es fa servir permet fer la transició entre tres colors seleccionats prèviament. Fem
servir els valors de la paleta rgb, utilitzant ternes de variables per cada color. Els color escollits
prèviament es guarden a uns arrays, això ens permet saber en cada cas els valors d'rgb de cada color
segons la transició que volem fer.
Després de cada transició, modifiquem el següent color al qual volem arribar obtenint-lo de la
posició corresponent de l'array i montent un procés de transició des del darrer color que es mostra
fins al color de destí. Aquestes transicions les controlem mitjançat la variable sentit, que ens indica
l'ordre del color que volem veure. Fem servir una altra variable, "c", per indicar si volem avançar en
l'ordre dels colors o si volem retrocedir.

9. // declaracio variables de color
color c_negre;
color c_blanc;
int vermell;
int verd;
int blau;
// variables per a repetir el cicle
int vermellD;
int verdD;
int blauD;
// sentit cap on anira el color
int sentit;
// direcció
int c;
// array colors
int [] r;
int [] g;
int [] b;
// variable text
String message;
void setup() {
// tamany de la finestra
size (400,400);
// frames per segon
frameRate (50);
// text que contindra la variable message
message = "Hello world";
// numero de posicions dels 3 arrays de composicio de color
r= new int[3];
g= new int[3];
b= new int[3];
// valors inicial de la composicio de 3 colors primaris
r[0]=255;
g[0]=0;
b[0]=0;
r[1]=0;
g[1]=255;
b[1]=0;
r[2]=0;
g[2]=0;
b[2]=255;
// sentit d
sentit=0;
// initcialitzem la varialble color a 1
c=1;
// initcialitzacio de les variables vermell, verd, blau
vermell=r[0];
verd=g[0];
blau=b[0];

10. // color del background
c_negre = color (0, 0, 0);
// color del text
c_blanc= color (255,255,255);
}
void draw() {
if(vermell==vermellD & blau==blauD & verd==verdD)
{
if(sentit==0)
{
c=1;
}
else if(sentit==2)
{
c=-1;
}
sentit=sentit+c;
println (sentit);
}
vermellD=r[sentit];
verdD=g[sentit];
blauD=b[sentit];
if(vermell<vermellD)
{
vermell=vermell+1;
println (vermell);
}
if(vermell>vermellD)
{
vermell=vermell-1;
println (vermell);
}
// increment de color verd
if(verd<verdD)
{
verd=verd+1;
}
// decrement de color verd
if(verd>verdD)
{
verd=verd-1;
}
// increment de color blau
if(blau<blauD)
{
blau=blau+1;
}
// increment de color blau
if(blau>blauD)
{
blau=blau-1;
}

11. // fondo de la finestra
background (c_negre);
// relleno del rectanvgle
fill (color (vermell,verd,blau));
// rectangle
rect (10, 10, 380, 380, 15);
//tamany text
textSize (30);
// color text
fill (c_blanc);
//text
text (message, 120, 200);
}
// declaracio variables de color
color c_negre;
color c_blanc;
int vermell;
int verd;
int blau;
// variables per a repetir el cicle
int vermellD;
int verdD;
int blauD;
// sentit cap on anira el color
int sentit;
// direcció
int c;
// array colors
int [] r;
int [] g;
int [] b;
// variable text
String message;
Definició de les variables que es faran servir:
Aquestes tres son les que aniran variant el seu
valor en el procés de transició.
Aquesta terna es fa servir per indicar el proper
color principal que volem mostrar. Color de
destí de la transició.
Variable que controla l’ordre de posició del
proper color a l’array
Aquesta ens indica si incrementent l’ordre o si el
decrementent
Array per guardar els colors seleccionats per
mostrar.
Missatge que es mostrarà

12. void setup() {
// tamany de la finestra
size (400,400);
// frames per segon
frameRate (50);
// text que contindra la
variable message
message = "Hello world";
// numero de posicions dels 3
arrays de composicio de color
r= new int[3];
g= new int[3];
b= new int[3];
// valors inicial de la composicio
de 3 colors primaris
r[0]=255;
g[0]=0;
b[0]=0;
r[1]=0;
g[1]=255;
b[1]=0;
r[2]=0;
g[2]=0;
b[2]=255;
// sentit d
sentit=0;
// initcialitzem la varialble color
a 1
c=1;
// initcialitzacio de les
variables vermell, verd, blau
vermell=r[0];
verd=g[0];
blau=b[0];
// color del background
c_negre = color (0, 0, 0);
// color del text
c_blanc= color (255,255,255);
}
void draw() {
Primer color seleccionat (pos. 0)
Segon color seleccionat (pos. 1)
Tercer color seleccionat (pos. 2)
Proper color a mostrar (començant amb el color
0)
Direcció que seguiran els colors (s’incrementarà
l’ordre)
Color original (comencem amb el primer color)

13. if(vermell==vermellD &
blau==blauD & verd==verdD)
{
if(sentit==0)
{
c=1;
}
else if(sentit==2)
{
c=-1;
}
sentit=sentit+c;
println (sentit);
}
vermellD=r[sentit];
verdD=g[sentit];
blauD=b[sentit];
if(vermell<vermellD)
{
vermell=vermell+1;
println (vermell);
}
if(vermell>vermellD)
{
vermell=vermell-1;
println (vermell);
}
// increment de color verd
if(verd<verdD)
{
verd=verd+1;
}
// decrement de color verd
if(verd>verdD)
{
verd=verd-1;
}
// increment de color blau
Aquest primer condicional verifica si estem en
el color de destí (el proper color que volem
veure)
Mirem si estem al primer color (sentit=0), si és
el cas indiquem que hem de fer servir ordre
creixent.
Si estem al tercer color (sentit=2) indiquem que
l’ordre és decreixent, c=-1
Modifiquem la variable sentit, incrementant-la o
decrementat-la segons el valor de c.
Seleccionem el color de destí, per tal de poder
fer la transició cap a aquest color.
Aquests condicionals apropen els valors rgb del
color que es mostra cap al color de destí que
volem veure al final de la transició. Hi ha tres
condicionals iguals, un per cada color principal.

14. if(blau<blauD)
{
blau=blau+1;
}
// increment de color blau
if(blau>blauD)
{
blau=blau-1;
}
// fondo de la finestra
background (c_negre);
// relleno del rectanvgle
fill (color
(vermell,verd,blau));
// rectangle
rect (10, 10, 380, 380, 15);
//tamany text
textSize (30);
// color text
fill (c_blanc);
//text
text (message, 120, 200);
}
A part d'entregar el codi escrit a cada exercici, caldrà adjuntar un document de text on s'explicarà el
codi realitzat. Això es pot fer a nivell de blocs de codi que realitzen una tasca específica dins del
programa o de línies individuals del codi si es tracta d'una instrucció molt determinada que té una
importància destacada pel bon funcionament del programa.