Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital. Es desarrollado por artistas y diseñadores como una herramienta alternativa al software propietario.
URL para descargar el programa: https://processing.org/
Puedes descargar aquí processing-4.3.3. para windows x64 (así no necesitas instalar el programa solo ejecutar el archivo exe)
Actividad 1: Hola Mundo - Dibujar un punto y una línea.
Actividad 2: Dibujar formas geométricas simples
Actividad 3: Dibujar los aros olímpicos - contornos de 5, figuras transparentes y fondo blanco
VARIABLES
Una variable es una dirección de memoria donde se puede guardar un dato. El uso de variables implica tres acciones:
1. Definir la variable (int, float, boolean, char, string)
2. Asignarle un valor
3. Utilizar la variable
FUNCIONES
Una función es un conjunto de instrucciones agrupadas bajo un mismo nombre. Existen funciones definidas en el entorno de desarrollo como draw() y setup(), y otras que puede definir el usuario. Para que se ejecute una función hay que usar la sintaxis:
void setup (){
código que se va a ejecutar
}
Actividad 4: Elaborar un programa para controlar el ratón - Hola Mouse!
BUCLES Y CONDICIONALES
Cuando el programa tenga que tomar una decisión utilizaremos la sentencia condicional if / else que indicarán las instrucciones que se ejecutarán si se cumple o no una condición. Se utilizarán los signos =>< para establecer esas condiciones.if (nombre ==5){
//instrucciones que se ejecutarán si se cumple la función
}
else{
//insrucciones que se ejecutarán si no se cumple la función
}
Para repetir una o más instrucciones un número determinado de veces utilizaremos la sentencia for o while ...
for (byte i=0; i<10 ; i=i+1){
//instrucciones a repetir
}
*********************
while (boton==0);{
//instrucciones a repetir
}
Actividad 5: Hola Mouse Avanzado - el color del trazo va cambiando de color
Actividad 6: SEMÁFORO
Para dibujar este semáforo copiamos el siguiente código:
void setup() {
size (400,400); // Creamos una ventana de 400x400 pixeles
rect(120,20,120,360); // Dibujamos un rectángulo
triangle(20,20,120,20,120,120); // Triángulo en la parte superior izquierda
triangle(240,20,340,20,240,120); // Triángulo en la parte superior derecha
triangle(20,140,120,140,120,240); // Triángulo en la parte central izquierda
triangle(240,140,340,140,240,240); // Triángulo en la parte central derecha
triangle(20,260,120,260,120,350); // Triángulo en la parte inferior izquierda
triangle(240,260,340,260,240,350); // Triángulo en la parte inferior derecha
fill(0,0,0); // Ponemos el relleno del fondo en negro
ellipse (180,80,100,100); // Dibujamos el círculo superior
ellipse (180,200,100,100); // Dibujamos el círculo central
ellipse (180,320,100,100); // Dibujamos el círculo inferior
}
A continuación programamos el siguiente código para que vaya encendiéndose de cada color:
* No olvidar definir la variable time al principio para poner el tiempo a cero:
Y finalmente definimos el dibujo para cada color:
En la imagen se muestra una captura del código parcial para obtener la bandera de Europa:
Solución:
void setup() {
size(640, 400);
}
void draw() {
background(0,0,250);
fill (255,255,255);
ellipse(320,200,300,300);
fill (0,255,255);
ellipse (320,200,2,2);
line (320,200,320,30);
line (320,200,470,200);
line (320,200,320,350);
line (320,200,170,200);
fill (255,255,0);
star(320, 50, 15, 35, 5); //Superior
star(470, 200, 15, 35, 5);//Derecha
star(320, 350, 15, 35, 5);//Inferior
star(170, 200, 15, 35, 5);//Izquierda
star(450, 125, 15, 35, 5);//1C X=[150*cos(30º)]=130+320=450 Y=150*sen(30)=75-200=125
star(450, 275, 15, 35, 5);//1C X=[150*cos(30º)]=130+320=450 Y=150*sen(30)=75+200=275
star(395, 70, 15, 35, 5);//2C X=[150*sin(30º)]=75+320=395 Y=150*cos(30)=130-200=70
star(395, 330, 15, 35, 5);//2C X=[150*sin(30º)]=75+320=395 Y=150*cos(30)=130+200=330
star(395, 70, 15, 35, 5);//3C X=[150*sin(30º)]=75+320=395 Y=150*cos(30)=130-200=70
//star(395, 50, 15, 35, 5);
//star(450, 255, 15, 35, 5);
//star(395, 310, 15, 35, 5);
}
// La función estrella permite crear una estrella de diferentes formas
void star(float x, float y, float radius1, float radius2, int npoints) {
float angle = TWO_PI / npoints;
float halfAngle = angle/2.0;
beginShape();
for (float a = 0; a < TWO_PI; a += angle) {
float sx = x + cos(a) * radius2;
float sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a+halfAngle) * radius1;
sy = y + sin(a+halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
Actividad 8: DEPÓSITO
El depósito debe simular que se llena con la letra "a" y se vacía con la tecla "z"
Actividad 9: Dibuja una casa.
Puedes seguir este modelo o crear el tuyo propio.
