📝 Codi explicat línia a línia
/*
====================================================
PRÀCTICA 3
EL PODER DE LA REPETICIÓ
====================================================
REFERENTS
- Bridget Riley
- Victor Vasarely
- Art islàmic geomètric
OBJECTIU
Aprendre a utilitzar:
- for
- repetició
- patrons
- quadrícules
- variacions geomètriques
Per primera vegada deixarem de dibuixar
cada forma una per una.
Deixarem que el programa les dibuixi
automàticament.
Això és una de les idees fonamentals de
l'art generatiu.
Crear una regla.
Permetre que el sistema produeixi
moltes formes.
*/
function setup() {
createCanvas(800, 800);
background(255);
noStroke();
/*
====================================================
PAS 1
DIBUIXAR UNA QUADRÍCULA AMB BUCLES
====================================================
Un bucle for permet repetir una tasca.
Sintaxi:
for(inici; condició; increment){
// instruccions
}
Exemple:
for(let i=0; i<10; i++){
// es repeteix 10 vegades
}
*/
/*
Dibuixarem moltes formes.
x avançarà horitzontalment.
y avançarà verticalment.
*/
for(let y = 50; y < height; y += 50) {
for(let x = 50; x < width; x += 50) {
fill(0);
circle(x, y, 20);
}
}
noLoop();
}
/*
====================================================
COM FUNCIONEN ELS BUCLES?
====================================================
Imaginem:
for(let i=0; i<5; i++)
1a vegada → i = 0
2a vegada → i = 1
3a vegada → i = 2
4a vegada → i = 3
5a vegada → i = 4
Després s'atura.
*/
/*
====================================================
SISTEMA DE QUADRÍCULA
====================================================
50 100 150 200 250 ...
● ● ● ● ●
● ● ● ● ●
● ● ● ● ●
● ● ● ● ●
Cada cercle es genera automàticament.
No cal escriure 100 cercles.
*/
/*
====================================================
EXERCICI 1
====================================================
Canvia:
circle(x,y,20);
per
rect(x,y,20,20);
Quina diferència hi ha?
*/
/*
====================================================
EXERCICI 2
====================================================
Canvia l'espaiat.
Ara tenim:
y += 50
x += 50
Prova:
y += 25
x += 25
Què passa?
*/
/*
====================================================
EXERCICI 3
====================================================
Canvia la mida.
Prova:
circle(x,y,40);
circle(x,y,10);
Com afecta la composició?
*/
/*
====================================================
EXERCICI 4
====================================================
Afegeix color.
Exemple:
fill(255,0,0);
circle(x,y,20);
*/
/*
====================================================
SEGONA VERSIÓ
PATRÓ ALTERNAT
====================================================
Substitueix el codi interior per:
if((x + y) % 100 === 0){
fill(0);
}else{
fill(255);
}
circle(x,y,40);
Obtindràs un efecte semblant
a un tauler d'escacs.
*/
/*
====================================================
TERCERA VERSIÓ
GRADIENT GEOMÈTRIC
====================================================
Substitueix fill(0) per:
fill(x/3, y/3, 200);
Els colors canviaran segons
la posició.
*/
/*
====================================================
QUARTA VERSIÓ
IL·LUSIÓ ÒPTICA
====================================================
Dins del segon bucle prova:
let mida = map(x,0,width,5,45);
circle(x,y,mida);
Les formes canvien gradualment.
Apareix una sensació de moviment.
*/
/*
====================================================
QUÈ ÉS MAP()?
====================================================
Transforma un valor.
Exemple:
map(x,0,width,5,50)
Quan x és petit → mida petita
Quan x és gran → mida gran
*/
/*
====================================================
REPTE ARTÍSTIC
====================================================
Crea un mosaic generatiu.
CONDICIONS
- Mínim 100 formes.
- Utilitzar dos bucles for.
- Mínim dos colors.
- Variació de mida o color.
- Inspiració Op Art.
OBJECTIU
Crear una il·lusió visual.
Semblar moviment encara que
la imatge sigui estàtica.
*/
/*
====================================================
REPTE AVANÇAT
====================================================
Prova aquest exemple:
for(let y = 40; y < height; y += 40){
for(let x = 40; x < width; x += 40){
let mida = map(y,0,height,5,35);
fill(0);
circle(x,y,mida);
}
}
Observa com canvia la textura.
*/
/*
====================================================
PREGUNTES DE REFLEXIÓ
====================================================
1. Quantes formes genera el programa?
2. Quina és la diferència entre
dibuixar una forma i generar-ne cent?
3. Has observat alguna il·lusió òptica?
4. Quina versió s'assembla més
a una obra de Bridget Riley?
5. Quines regles has utilitzat
per construir la teva obra?
*/
/*
====================================================
DESAFIAMENT FINAL
====================================================
Crea tres versions:
VERSIÓ 1 - Patró regular
VERSIÓ 2 - Patró amb colors
VERSIÓ 3 - Il·lusió òptica
Guarda captures:
practica3_v1.png
practica3_v2.png
practica3_v3.png
====================================================
IDEA CLAU
A la pràctica 1 dibuixàvem formes.
A la pràctica 2 construíem composicions.
A la pràctica 3 comencem a crear
SISTEMES.
Ja no pensem en una forma.
Pensem en una regla que genera
moltes formes automàticament.
Això és l'essència de l'art generatiu.
====================================================
*/