processing
//DECLARACIONES DE ARRAYS
//DE COORDENADAS, VELOCIDADES
//Y COLORES DE 100 BOLAS
float[] x= new float[100];
float[] y = new float[100];
float[] vx = new float[100];
float[] vy = new float[100];
float[] r = new float[100];
float[] g = new float[100];
float[] b = new float[100];
float gr = 0.1;//GRAVEDAD
//LA FUNCIÓN QUE ESTÁ AL FINAL MOUSEPRESSED SE EJECUTA CUANDO PULSO EL RATÓN. ANALIZAR ESA PRIMERO
void setup(){
size(700,700);
}
void draw(){
background(255);//BORRO LA VENTANA PINTÁNDOLA DE BLANCO
for(int i=0;i<100;i++){
fill(r[i],g[i],b[i]);
ellipse(x[i],y[i],10,10); //DIBUJA CADA BOLA CON SU COLOR Y COORDENADAS
x[i]= x[i]+vx[i]; // ACTUALIZA LA COORDENADA DE CADA BOLA SEGÚN SU VELOCIDAD
y[i]= y[i]+vy[i];
vy[i]= vy[i]+gr; // ACTUALIZA LA VELOCIDAD SEGÚN LA GRAVEDAD
if (y[i]>height){ // SI LLEGA ABAJO, REBOTA
vy[i]=-vy[i];
}
}
}
void mousePressed(){
for(int i=0;i<100;i++){
x[i]=mouseX; //LAS COORDENADAS DE CADA BOLA SERÁN LAS DEL RATÓN
y[i]=mouseY;
vx[i]=random(-5,5);//LAS VELOCIDADES DE CADA BOLA SERÁN ALEATORIAS DE -5 A 5
vy[i]=random(-7,7);
r[i]=random(255);//LOS COLORES DE CADA BOLA SERÁN ALEATORIOS. RGB
g[i]=random(255);
b[i]=random(255);
}
}
1. Descarga processing desde esta página
Abre processing y escribe el siguiente código:
line(0,0,100,100);
line(0,50,100,0);
line(10,30,50,80);
La instrucción line(x1,y1,x2,y2); dibuja una recta desde las coordenadas (x1,y1) a las coordenadas (x2,y2). Hay que tener en cuenta que en processing, la y crece hacia abajo, y la x hacia la derecha. De manera que en un rectángulo, el punto (0,0) estaría arriba a la izquierda, y el (100,100) abajo a la derecha. Ejecuta el código anterior y observa que las líneas están dibujadas según tú esperabas. Es mejor que las dibujes una a una, así no confundes una con otra.
Ejercicio 1.Líneas: Haz un programa que dibuje dos diagonales en forma de cruz. Dibuja también una horizontal que divida el cuadro en dos y una vertical. Ten en cuenta que si dibujas una diagonal que va de arriba a abajo, el punto inicial estará a la izquierda y arriba (x pequeña, y pequeña) y el final a la derecha y abajo (x grande, y grande)
Escribe ahora el siguiente código
size(500,500);
int i;
for(i=0;i<500;i=i+50){
line(i,i,i+50,i);
line(i+50,i,i+50,i+50);
}
Size define el tamaño de la ventana gráfica que surgirá cuando se ejecuta el programa
int i declara la variable i, le dice al programa que existirá esa variable
for(i=0;i<500;i=i+50) hace que la variable i tome valores desde 0 hasta 500 aumentando de 50 en 50. Al principio dice i=0, es decir que el valor inicial es cero. Luego dice i< 500, es decir, que irá aumentando mientras valga menos de 500. Luego dice i=i+50, es decir que cada vez i valdrá 50 más.
En conjunto, la función hará que i valga 0 la primera vez, luego 50, luego 100, luego 150.....y el último valor que tomará será 450, porque al sumarle 50 llegará a 500 y no se cumplirá la condición.
El for tiene dos llaves. Para cada valor de i se ejecutarán las instrucciones entre llaves, que son las siguientes.
line(i,i,i+50,i);
line(i+50,i,i+50,i+50)
La primera vez, i vale 0,es decir que estas instrucciones serán las siguientes
line(0,0,50,0);
line(50,0,50,50)
Dibujará una línea horizontal de longitud 50 empezando arriba a la izquierda, y luego una vertical empezando por el final de esa línea. Es decir, dibujará el primer escalón
Comprueba los valores para i =1, i=2, y verás como se dibuja la escalera que resulta al ejecutar el programa.
Ejercicio 2. Escalera:
a) Modifica el programa para hacer una escalera con la mitad de escalones pero el doble de grandes,
Si son igual de grandes, i aumentará de 100 en 100
b) Modifica el programa para hacer una escalera que en lugar de bajar suba
1. Coge un papel y un bolígrafo y dibuja un cuadrado grande. Si ese cuadrado es una ventana de processing de 500 x 500, escribe en cada esquina sus coordenadas.Ten en cuenta que en processing la y crece hacia abajo y la x hacia la derecha.
2. Dibuja en ese cuadrado los primeros escalones de la escalera que quieres que dibuje tu programa. Ten en cuenta que la escalera sube, de manera que el escalón más alto quedará más a la derecha.
3.Escribe junto a cada punto de la escalera sus coordenadas.
4.Observa las líneas horizontales. La primera va de tal punto a tal punto, la segunda de tal punto a tal punto.....observa la secuencia y deduce las siguientes. Busca una fórmula para cada punto, que dependerá de un parámetro que llamaremos i que crece de 100 en 100
5. Haz lo mismo con las verticales.
Observa el programa de ejemplo, y entenderás cómo se hace el programa
ARRAYS
Antes de empezar con los arrays vamos a e explicar algunas cosas sobre processing
Normalmente un programa en processing tiene esta estructura
void setup(){
size(500,500);
}
void draw(){
line(10,10, 100,100);
}
La parte del setup se ejecuta una vez al principio. Y el draw se ejecuta muchas veces, una detrás de otra. Este programa dibujaría muchas líneas una encima de otra, pero no te darías cuenta, porque se dibujan encima.
Pero por ejemplo, este programa hará algo distinto. Ejecútalo, observa qué pasa e intenta pensar por qué:
int i=0;
void setup(){
size(500,500);
}
void draw(){
i++;
line(i,10, 100,100);
}
El siguiente programa
int x =0;
int y=0;
void setup(){
size(500,500);
}
void draw(){
ellipse(x,y,10,10);
}
void mouseClicked(){
x=mouseX;
y = mouseY;
}