Processing es un lenguaje de programación específico como medio de expresión en las artes visuales. Refuerza el vínculo que existe entre diseño y tecnología y estimular el desarrollo de la creatividad mediante la programación. Processing, crea un interés por la programación aplicada a las artes visuales y la participación en una comunidad donde los alumnos puedan compartir este interés. Hay que bajarse el programa de desarrollo en: http://processing.org/download/
Para poder ver el trabajo en el canvas de una página HTML5, necesitaremos descargar processing.js para el desarrollo y processing.min.js para producción en: http://processingjs.org/download/
background(#accccc);
noFill();
strokeWeight(15);
line(10,10,100,100);
triangle(100,100,50,300,150,300);
rect(100,10,50,90);
bezier(15,10,100,10,100,150,100,100);
Los siguientes resumen las funciones principales, nuevo, abrir, salvar y exportar.
Sintaxis
size(50, 50);
background(162, 216, 0);
background(162, 216, 0);
El origen de coordenadas.
Primitivas
Puntos
El punto es el elemento visual más simple que se dibuja con la function punto: point()
El punto es el elemento visual más simple que se dibuja con la function punto: point()
point(x, y);
Ejemplo:
size(50, 50);
background(162, 216, 0);
smooth();
stroke(0, 84, 216);
strokeWeight(10) ;
point(25, 25);
strokeWeight(2);
stroke(255);
point(25, 25);
background(162, 216, 0);
smooth();
stroke(0, 84, 216);
strokeWeight(10) ;
point(25, 25);
strokeWeight(2);
stroke(255);
point(25, 25);
La línea es una consecución de puntos, es la forma más simple de dibujo y se hace con la función línea: line(). Esta function tiene 4 parámetros, dos para indicar las coordenadas de los dos puntos finales:
line(x1, y1, x2, y2);
La function triangulo dibuja triangulos triangle(). Tiene 6 parámetros, dos coordenadas para cada punto.
triangle(x1, y1, x2, y2, x3, y3);
La función Quad dibuja un polígono de 4 lados.
quad(x1, y1, x2, y2, x3, y3, x4, y4);
Rectángulo, dibuja con 4 valores, las coordenadas del margen superior izquierdo el ancho y el alto. Un cuadrado es cuando son iguales ancho y alto.
rect(x, y, width, height);
Elipse, se dibuja con 4 valores, las coordenadas del centro el ancho y el alto. Un círculo es cuando son iguales ancho y alto.
ellipse(x, y, width, height);
Las curvas de bezier() pueden dibujar líneas curvas.
Un curva de Bezier está dibujada por 4 puntos, dos de inicio y fin (primero y cuarto) de la curva y dos puntos de control (segundo y tercero).
Un curva de Bezier está dibujada por 4 puntos, dos de inicio y fin (primero y cuarto) de la curva y dos puntos de control (segundo y tercero).
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
Orden de dibujo
El orden en que se dibujan las superficies,es de arriba abajo en las líneas del programa.
Color
El color se define con valores RGB de 0 a 255, el gris se representa con tres valores iguales que se puede reducir a un solo valor.
El relleno de los objetos con fill () y la línea con stroke (), el valor por defecto en el relleno es 255 (white) y en la línea el valor por defecto es 0 (negro).
Para dibujar superficies sin relleno ponemos: noFill() y para no dibujar superficies sin líneas noStroke().
El suavizado se define con: smooth() y noSmooth() para activar o desactivar el suavizado a antialiasing.
Los atributos de la línea se controlan con las funciones: strokeWeight(), grosor de la línea, strokeCap(), que puede ser ROUND, redondeados SQUARE, cuadrados o PROJECT que es una mezcla de ambos y strokeJoin(), en las lineas cerradas que puede ser BEVEL, esquinas biseladas, MITER, esquinas cuadradas o ROUND curvadas.
Para la elipse los parámetros de dibujo, por defecto los valores para dibujar una elipse son ls coordenadas del centro el ancho y el alto. La función de ellipseMode(). Cambia la manera de dibujar elipses, requiere los parámetros de: CENTER, RADIUS, CORNER, o CORNERS.
El modo por defecto es CENTER. El RADIUS usa el primer y Segundo valor para el centro el tercer valor es la mitad del ancho y el cuarto la mitad del alto. El CORNER dibuja la elipse como los rectángulos, el primer y segundo punto es el punto de la esquina superior izquierda y el tercero y cuarto el ancho y alto de un rectángulo donde se circunscribe la elipse. CORNERS es similar al anterior pero los segundos valores son la esquina inferior derecha del rectángulo.
La función rectMode() afecta a la forma en que se dibujan los rectángulos. Requiere parámetros que pueden ser: CORNER, CORNERS o ENTER. El valor por defecto es CORNER, CORMERS es para definir el rectángulo por las coordenadas de la esquina superior izquierda y la esquina inferior derecha. El CENTER usa el valor central del rectángulo y su ancho y alto.
Ejemplo:
noStroke();
size(150,150);
rectMode(CORNER);
fill(126);
rect(40, 40, 60, 60); // Gray rect
rectMode(CENTER);
fill(255);
rect(40, 40, 60, 60); // White rect
rectMode(CORNERS);
fill(0);
rect(40, 40, 60, 60); // Black rect
size(150,150);
rectMode(CORNER);
fill(126);
rect(40, 40, 60, 60); // Gray rect
rectMode(CENTER);
fill(255);
rect(40, 40, 60, 60); // White rect
rectMode(CORNERS);
fill(0);
rect(40, 40, 60, 60); // Black rect
EJEMPLOS DE TRABAJO EN EL AULA
Ejemplo 0. Dibuja una línea que vaya desde el primer cuarto de una esquina superior hasta el último cuarto de la esquina inferior. Página 9 del libro
size(800, 600);
line(
size(800, 600);
line(
Ejemplo 2. Dibuja una línea que vaya desde la mitad de la esquina inferior hasta la mitad de la esquina superior. Es decir, dibuja una línea vertical en el centro. Página 9 del libro
size(800, 600);
line(
Ejemplo 3. Programa en Processing para que te salga la siguiente figura. Página 9 del libro
Ejemplo 4. Haz la programación para que te salga la siguiente figura. Página 9 del libro
Ejemplo 5. Copia el programa completo de abajo para que te salga el siguiente triangulo. Página 10 del libro.
size(800,600);
triangle(400,50,50,550,750,550);
Ejemplo 6. Haz la siguiente figura. Página 10 del libro
Ejemplo 7. Haz la siguiente figura. Copia el programa. Página 10 del libro
size(800,600);
quad(0,0,800,600,0,600,800,0);
Ejemplo 8. Haz la siguiente figura. Página 10 del libro
Ejemplo 9. Dibuja esta figura. Página 10 del libro
size(800,600);
triangle(
Ejercicio 10. Dibuja un rombo con quad. Página 10 del libro
Ejercicio 11. Dibuja un rectángulo ajustado a 50 mm de las esquinas. Página 11 del libro.
//rect(x,y,ancho,alto,radio);
size(800,600);
rect(50,50, );
Ejercicio 12. Dibuja un rectángulo ajustado a 50 mm de las esquinas. Pero redondeado en las esquinas con un radio de 100. Página 11 del libro.
//rect(x,y,ancho,alto,radio);
size(800,600);
rect(50,50, );
Ejercicio 13. Dibuja dos rectángulos ajustado a 10 mm de las esquinas. Pero redondeado en las esquinas con un radio de 20. Página 11 del libro.
//rect(x,y,ancho,alto,radio);
size(800,600);
rect(50,50,
Ejercicio 14. Dibuja cuatro rectángulos ajustado a 10 mm de las esquinas. Pero redondeado en las esquinas con un radio de 40. Página 11 del libro.
//rect(x,y,ancho,alto,radio);
size(800,600);
rect(50,50,
size(800,600); rect(10,10,380,285,0); rect(410,10,380,285,0); rect(10,310,380,285,0); rect(410,310,380,285,0);
Ejercicio 15. Dibuja una elipse situado en el centro de la pantalla de 800x600. El ancho será de 700 y el alto será de 500. Página 11 del libro.
//ellipse(x,y,ancho,alto);
size(800,600);
ellipse(400
Ejercicio 16. Dibuja cuatro elipses. Página 11.
//ellipse(x,y,ancho,alto);
size(800,600);
ellipse(200,150,175,125);
ellipse(600,150,175,125);
ellipse(200,450,175,125);
ellipse(600,450,175,125);
Ejercicio 17. Dibuja una ventana negra. Dibuja 5 elipses. La del centro será un círculo. [(background(0)]. Página 12.
background(0); size(800,600); ellipse(400,300,150,150); ellipse(200,150,125,175); ellipse(600,150,125,175); ellipse(200,450,125,175); ellipse(600,450,125,175);
Ejercicio 18. Dibuja una ventana gris. [background(128)]. En el centro dibuja un rombo con quad. Pag 12.
background(128);
size(800,600);
quad(400,0,800,300,400,600,0,300);
background(128);
size(800,600);
quad(400,0,800,300,400,600,0,300);
Ejercicio 19. Dibuja una ventana de un gris diferente. [background(248)]. En el centro dibuja un rombo con quad con relleno gris. [fill(248)]. Pag 12.
background(128);size(800,600);
fill( );
quad(400,0,800,300,400,600,0,300);
Ejercicio 20. Dibuja una ventana de un gris diferente. [background(248)]. En el centro dibuja un rombo con quad con relleno gris. [fill(248)]. La función stroke() hace que resalte la figura. Pag 12.
background(128);
size(800,600);
fill(99);
stroke(244);
quad(400,0,800,300,400,600,0,300);
Ejercicio 21. Dibuja círculos dentro de la ventana. Haz la última fila. Página 13.
background(128);
size(800,600);
stroke(244);
fill(11);
ellipse(100,100,50,50);
fill(22);
ellipse(200,100,50,50);
fill(33);
ellipse(300,100,50,50);
fill(44);
ellipse(400,100,50,50);
fill(55);
ellipse(500,100,50,50);
fill(66);
ellipse(600,100,50,50);
fill(77);
ellipse(600,100,50,50);
fill(88);
ellipse(700,100,50,50);
|
stroke(199);
fill(99);
ellipse(100,200,50,50);
fill(108);
ellipse(200,200,50,50);
fill(117);
ellipse(300,200,50,50);
fill(126);
ellipse(400,200,50,50);
fill(135);
ellipse(500,200,50,50);
fill(144);
ellipse(600,200,50,50);
fill(153);
ellipse(600,200,50,50);
fill(162);
ellipse(700,200,50,50);
|
stroke(144);
fill(171);
ellipse(100,300,50,50);
fill(180);
ellipse(200,300,50,50);
fill(189);
ellipse(300,300,50,50);
fill(198);
ellipse(400,300,50,50);
fill(207);
ellipse(500,300,50,50);
fill(216);
ellipse(600,300,50,50);
fill(225);
ellipse(600,300,50,50);
fill(234);
ellipse(700,300,50,50);
|
stroke(99);
fill(243);
ellipse(100,400,50,50);
fill(252);
ellipse(200,400,50,50);
fill(6);
ellipse(300,400,50,50);
fill(15);
ellipse(400,400,50,50);
fill(24);
ellipse(500,400,50,50);
fill(33);
ellipse(600,400,50,50);
fill(42);
ellipse(600,400,50,50);
fill(51);
ellipse(700,400,50,50);
FALTA LA ÚLTIMA FILA DE CÍRCULOS
|
Ejercicio 22. Página 13. Ahora dibuja cuadrados. Sólo debes sustituir el comando ellipse() por el comando rect().
3 VARIABLES Y FUNCIONES
Una variable es un 'lugar' de un programa donde se almacenan datos. Los datos pueden ser:
·Posiciones del puntero del ratón.
·Listas.
·Frases.
Las variables deben declararse antes de usarse en un programa.
TIPO
|
DECLARACIÓN
|
DESCRIPCIÓN
|
boolean
|
boolean
|
Son variables que sólo pueden tomar dos valores, true o false, verdadero o falso.
|
integer
|
int
|
Son números enteros, es decir, sin decimales.
|
float
|
float
|
Son números que pueden tener decimales.
|
string
|
String
|
Es una cadena de caracteres. Por ejemplo, una frase
como “Mi gato es negro”.
|
color
|
color
|
Es el color que puede adoptar un píxel.
|
Ejercicio 23. Página 14. Ejecuta el siguiente programa y observa lo que ocurre.
int a = 3500;
int b = 600;
float c = 31500.968;
float d = 645.45;
int resta=0;
float division=0.0;
boolean valor=true;
boolean salida=false;
String frase="EJEMPLOS DE TRABAJO CON VARIABLES";
println(frase);
print ("RESTA: ");
print (a);
print (" menos ");
print (b);
print (" = ");
resta=a-b;
print (resta);
println();
print ("DIVISION: ");
print (c);
print (" dividido entre ");
print (d);
print (" = ");
division=c/d;
print (division);
Después cambia el valor de las siguientes variables:
a=27 b=5 c=478.72 d=36.49
El tamaño de la ventana será de 600x400. Dentro de ella dibuja un círculo, un cuadrado, un rombo y una elipse.
Ejercicio 24. Página 15. Ejecuta este programa y luego haz otros basándote en la tabla de la página 15.
println("TRABAJO CON FUNCIONES ARITMÉTICAS");
int a=44; a++;
int b=10; b--;
int c=0;
c=a/b;
println(c);
4 REPETICIONES Y BUCLES
Ejercicio 25. Si necesitamos que se repita una instrucción un número determinado de veces, usaremos el bucle for(). PÁG 16
size(800,600);
int i,a; //crea los enteros i,a
a=0;//asigna el valor 0 a la variable a
for(i=1; i<50; i++){
ellipse(400,300,590-a,590-a);
//cada vez que se ejecuta el bucle se dibuja un circulo mas pequeño
a=a+18;
//al hacer mayor a con cada repetición, los radios son más pequeños
}
size(800,600);
int i,a; //crea los enteros i,a
a=0;//asigna el valor 0 a la variable a
for(i=1; i<50; i++){
ellipse(400,300,590-a,590-a);
//cada vez que se ejecuta el bucle se dibuja un circulo mas pequeño
a=a+12;
//al hacer mayor a con cada repetición, los radios son más pequeños
}
solución
size(800,600);
int i; //crea los enteros i,a
float a;
a=0;//asigna el valor 0 a la variable a
for(i=1; i<50; i++){
fill((-50+a)/2);
stroke(166-a);
ellipse(400,300,590-a,590-a);
//cada vez que se ejecuta el buble se dibuja un circulo mas pequeño
a=a+12;
//al hacer mayor a con cada repeticion, los radios son más pequeños
}
5 EL COLOR EN UNA PANTALLA DE ORDENADOR
Ejercicio 26. Hacer el ejercicio de la página 18. Luego haz un programa cambiando las elipses por rectángulos.
size(800,600);
fill(99,145,66);
stroke(77,166,93);
ellipse(75,75,80,60);
fill(255,0,0);
stroke(0,0,255);
ellipse(150,75,60,80);
fill(#F5C039);
stroke(255,0,0);
ellipse(75,150,60,80);
fill(0,0,255);
stroke(0,255,0);
ellipse(150,150,80,60);
Ejercicio 27. Prueba el programa de abajo. Después realiza el ejercicio 13 de la página 19.
int a=0;
background(255,0,0);
size(296,296);
for(a=0;a<296;a++){
a++;
stroke(66,255,0);
line(0,4*a,296,4*a);
stroke(a,255,255);
line(2*a,0,2*a,296);
}
size(255, 255);
background(0, 0, 55);
int x = 0;
for (int i=0;i<=255;i++) {
fill(0, 0, 255, i/8);
rect(0,x,255,20);
x=x+2;}
VOID DRAW() y VOID SETUP()
Ejercicio 28. Página 20. La función draw() es como un bucle for() que repite continuamente lo que hay dentro de ella. No hay elemento de control como en for(), sino que se repite siempre. Ejecuta el siguiente programa.
int i=0;
void draw(){//funcion draw
println(i);//escribe el valor i en la consola y salta de linea
i=i+1;
delay(1000);}//espera 1 segundo entre linea y linea.
Ejercicio 29. Modifica el programa anterior sustituyendo println. Modifica el valor de delay. Pag. 20.
Ejercicio 30. Página 21. La función setup(), al contrario de draw(), se ejecuta una sola vez.
int i=0;
void setup(){
size(400,400);
background(255,0,0);
stroke(0,255,0);}
void draw(){
line(20, 20+i, 380, 20+i);
delay(300);
i=i+1;}
Ejercicio 31. Pág. 21. Modifica el programa anterior para que el fondo cambie de abajo hacia arriba.
int i=0;
void setup(){ size(400,400); background(255,0,0); stroke(0,255,0);}
void draw(){line(20, 380-i, 380, 380-i); delay(200); i=i+1;}
Ejercicio 32. Pág. 22. Apliquemos sentencias de control, como if, then y else. Copia el siguiente programa. Luego mejóralo. Haz que las líneas estén a la misma distancia de los bordes.
int i=0;
void setup(){
size(444,444);
background(255,0,0);
stroke(0,255,0);}
void draw(){
if(i<200){
line(20, 20+i,380,20+i);
i++;}
else {i=0;}
}
int i=0;
void setup(){
size(400,400);
background(255,255,0);}
void draw(){
if(i>-1){
stroke(0,255-i,i);
line(20, 20+i, 380, 20+i);
stroke(211-i,i,99);
delay(50);
i=i+1;
stroke(i,255-i,128);
line(20, 380-i, 380, 380-i);
delay(50);
stroke(255-i,i,i);
line(20+i, 20, 20+i, 380);
delay(50);
stroke(i,i,255-i);
line(380-i, 380,380-i,20 );
delay(50);}
if(i>360){i=i-1;}}
Ejercicio 33. Página 23. Haz una ventana con rectas moviéndose de izquierda a derecha.
Ejercicio 34. Página 23. Haz una recta verde diagonal moviéndose hacia arriba, una roja horizontal moviéndose hacia abajo y una azul vertical moviéndose hacia la derecha. Saca ideas de este ejemplo.
int i=0;
void setup(){
size(400,400);
background(255,255,0);}
void draw(){
if(i>-1){
stroke(233,0,100);
line(200-i, 400+i, 200+i, 0-i);
stroke(240,225,210);
line(20+i, 200, 20+i, 380);
stroke(0,255,0);
line(380, 20-i, 20, 380-i);
stroke(128,0,128);
line(20, 20-i, 380, 380-i);
stroke(28,0,228);
line(20, 200-i, 380, 200-i);
stroke(228,80,28);
line(200-i, 400-i, 0-i, 400-i);
stroke(22,180,248);
line(300-i, 400, 100+i, 400);
stroke(133,225,0);
line(380-i, 380, 20-i, 20);
stroke(23,240,100);
line(200+i, 400-i, 200-i, 0+i);
stroke(28,0,228);
line(100, 200-i, 180, 200-i);
delay(50);
i=i+1;
}}
.
6 EVENTOS DE RATÓN Y TECLADO
Ejercicio 35. Página 24. Crea el movimiento de un círculo grande con el ratón de manera que se haga cada vez más pequeño. Mira el ejemplo.
int i=0;
void setup(){
size(400,400);
stroke(0,0,255);
background(240,240,10);}
void draw(){
i++;
delay(99);
rect(mouseX, mouseY, i,i);}
Ejercicio 36. Página 25. Haz que el rectángulo no deje rastro cuando se mueva. Mira el Ejercicio 23 de la pág 25.
int i=0;
void setup(){
size(400,400);
stroke(0,0,255);
background(240,240,10);}
void draw(){
i++;
delay(99);
fill(255-i, i-100, -111+i);
ellipse(50+i+mouseX,mouseY,i-100,50-i);
rect(mouseX, i-mouseY, i-50,i-100);}
Ejercicio 37. Página 25. Haz el ejercicio 24 de esta página.
int PULSACION=0;
void setup(){
size(400,400);
stroke(0,0,255);
background(240,240,10);}
void draw(){
if((mouseButton==CENTER)&&(mouseButton==RIGHT)) {PULSACION=1;}
if((PULSACION==0)&&(mouseButton==LEFT)){
stroke(0,0,255);
fill(255,0,0);
ellipse(mouseX,mouseY,20,20);}
if((PULSACION==1)&&(mouseButton==LEFT)){
stroke(0,255,0);
fill(255,0,255);
ellipse(mouseX,mouseY,20,20);}}
int PULSACION=0;
void setup(){
size(400,400);
stroke(0,0,255);
background(240,240,10);}
void draw(){
if((mouseButton==CENTER)||(mouseButton==LEFT)) {PULSACION=1;}
else{PULSACION=0;}
if((PULSACION==1)&&(mouseButton==LEFT)){
stroke(0,255,0);
fill(255,0,255);
rect(mouseX,mouseY,20,20);}
else{
stroke(0,0,255);
fill(255,0,0);
ellipse(mouseX,mouseY,20,20); }
if((PULSACION==0)&&(mouseButton==RIGHT)){
stroke(0,255,0);
fill(255,0,255);
line(mouseX,mouseY,88+mouseX,-200+mouseY);}
if((PULSACION==0)&&(mouseButton==CENTER)){
clear(); }}
No hay comentarios:
Publicar un comentario