Ejemplos Processing PDF

Ejercicios Processing
void setup ()
{
size(500,500);
background(200,20,20);
}
//Cara
/*fill(155);
noStroke();
rect(100,100,80,60,20);
strokeWeight(5);
rect(320,100,80,60,20);
ellipse(255,255,200,120);
fill(200,20,20);
ellipse(255,225,200,80);
fill(155);
rect(235,170,20,40,10); */
//Rectángulos
/*fill(150);
stroke(0,255,0);
strokeWeight(5);
rectMode(CENTER);
rect(255,255,200,150,10);*/
/*Triángulos
stroke(0);
strokeWeight(5);
triangle(20,300,150,100,300,300);*/
/*Cuadriláteros
stroke(0);
strokeWeight(5);
quad(20,300,150,100,250,150,300,300);*/
--------------------------------------------------------------------------------------------------------
/*strokeJoin(BEVEL);//BEVEL ó ROUND
stroke(0,0,255);
strokeWeight(20);
rect(40,100,80,60);*/
--------------------------------------------------------------------------------------------------------
/*fill(150);
stroke(0,255,0);
strokeWeight(5);
rectMode(CENTER);
rect(255,255,200,150,10);
//rect(width/2, height/2, 200,150,10 );// No es muy util preferible usar rectMode(x,x,x,x)*/
//Elipses
/*stroke(0);
strokeWeight(5);
//ellipseMode(RADIUS); //CENTER,RADIUS;CORNER,CORNERS (no es muy util y por defecto usa CENTER)
ellipse(255,255,200,200);*/
//Puntos
/*stroke(0,255,0);
strokeWeight(60);
//noStroke();
point(255,255);*/
//Rectas
//strokeCap(SQUARE);//extremos línea ROUND, SQUARE
//stroke(255);//color línea
//strokeWeight(20);//grosor línea
//line(20,300,400,250);
/*//Arcos
stroke(0);
strokeWeight(20);
noFill();
arc(255, 255, 400, 200, 0,3.1416,OPEN); //C x1, Y1 ,ancho, alto, angulo del 1er extremo en rad, ángulo del 2do extremo en rad,OPEN),
rad=0,PI,TWO_PI,(OPEN,CHORD;PIE)*/
/* //Curvas
stroke(0);
strokeWeight(20);
noFill();
//curveTightness(0); //Ajuste de la curva
curve(490, 100, 50, 50, 350,350,20,350); // dibuja una curva definida entre dos puntos extremos ′′x1,y1′′ y ′′x2,y2′′ y cuya curvatura es definida por los
puntos de control ′′Cx1,Cy1′′y ′′C2,Cy2′′. */
--------------------------------------------------------------------------------------------------------
strokeWeight(5);
line(20,20,70,200);
line(300,400,490,400);
stroke(0);
noFill();
curveTightness(0); //Ajuste de la curva
curve(70,-500,70,200,300,400,700,200);
/* //Curvas de bezier
stroke(0);
strokeWeight(20);
noFill();
strokeWeight(2);
bezier(20,20,480,20,20,480,480,480); dibuja una curva definida entre dos puntos extremos ′′x1,y1′′ y ′′x2,y2′′ cuya curvatura es definida por los puntos
de control o tensores ′′Cx1,Cy1′′y ′′Cx2,Cy2′′ asociados respectivamente a los puntos de control ′′x1,y1′′ y ′′x2,y2′′ */
/*// Geometrías con vértices
//Estrella
noFill( ); //
beginShape( ); //
vertex(250,30); // Punto 1
vertex(205,220); // Punto 10
endShape(CLOSE); //
/*// Geometrías curvas

noFill( ); //
strokeWeight(5);
//curveTightness(0); //Ajuste de la curva
beginShape( ); //
curveVertex(200,50); // Punto de control del extremo 1
curveVertex(50,50); // Extremo 1
curveVertex(350,350); // Extremo 2
curveVertex(450,350); // Punto de control del extremo 2
endShape(); //
// Geometrías mixtas curvas, rectas, curvas de bezier
noFill( ); //
strokeWeight(5);//
beginShape( ); //
vertex(50,50); // 1er extremo curva
bezierVertex(350,10,350,50,150,150); // (350,10)1er punto de control, (350,10)2do punto de control, (150,150)2do extremo de la curva.
BezierVertex(-50,250,250,450,350,350); // (-50,250)1erpunto de control, (350,10)2dopunto de control, (350,350)2do extremo de la curva.
endShape(); //
--------------------------------------------------------------------------------------------------------
noFill( ); //
strokeWeight(5);//
beginShape( ); //
vertex(50,50); //
bezierVertex(50,200,250,20,150,200); //
//vertex(150,200); //
//vertex(250,200); //
//bezierVertex(150,390,350,200,350,350); //
endShape(); //
*/
//Textos
/*textSize(20);
--------------------------------------------------------------------------------------------------------
text("HOLA MUNDO",20,20); // sin restricción
--------------------------------------------------------------------------------------------------------
text("HOLA MUNDO",80,80,200,100);// con restricción a rectángulo 200*100.
--------------------------------------------------------------------------------------------------------
//textAlign(RIGHT,BOTTOM); //LEFT, TOP, RIGHT, CENTER o BOTTOM alinea texto dentro del rectángulo definido.
//text("HOLA MUNDO",0,0,400,100);
--------------------------------------------------------------------------------------------------------
//textAlign(LEFT,TOP); //hace que el punto (20,20) referencia para el recuadro de escritura sea su esquina superior izquierda.
//text("HOLA MUNDO",20,20); // sin restricción.
Programación determinada por eventos del ratón
1º) Ellipse que se desplaza por la pantalla siguiendo el movimiento del ratón
void setup( )
{
size(500,500);
}
void draw( )
{
background(255); //al estar dentro del void daraw() la pantalla se inicializa en blanco en cada ciclo de ejecución por lo que no conserva las
posiciones de la elipse.
noFill(); //color de relleno de la ellipse, se puede probar con color blanco, negro o en código RGB.
ellipseMode(CENTER); // puede ser interesante probar con corner y corners.
ellipse(mouseX,mouseY,30,30); //dibuja la elipse de 30 de ancho por 30 de alto con centro en la posición x e y que ocupa el ratón en la
pantalla de presentación.
}
Para programar eventos del ratón es necesario hacer uso de la función void draw( ), además de las funciones de detección de eventos necesarias pues
sin el uso del void draw ( ) no habría una comprobaciń cíclica de los estados del sistema.
2º) Elipse que se desplaza por la pantalla dejando su huella y siguiendo el movimiento del ratón
void setup( ) //permite que la elipse generada en el void draw se sobreescriba continuamente sobre el background que es fijo y solo se ejecuta una vez
por estar inserto en un método void setup.
{
size(500,500);
background(255); // al estar en el void setup ( ) la elipse dibujada cíclicamente en el void draw se sobreescribe sobre el fondo de pantalla
fijo ejecutado una única vez por el void setup( ).
ellipseMode(CENTER); //dibuja la ellipse con origen en el centro de la ellipse, se puede prescindir de el por ser el modo por defecto.
}
void draw( )
{
noFill( ); //color de relleno de la ellipse, se puede probar con color blanco“fill(255)”, negro “fill(0)” o en código RGB
ellipse(mouseX,mouseY,30,30); //dibuja la elipse de 30 de ancho por 30 de alto con centro en la posición x e y que ocupa el ratón en la pantalla
de presentación
}
3º) Dibujo de una línea contínua.
void setup( )
{
size(500,500);
background(255); // al estar en el void setup ( ) la línea dibujada cíclicamente en el void draw y permanece sobre el fondo de pantalla fijo
ejecutado una única vez por el void setup( ).
}
void draw( )
{
stroke(0,255,0);//color verde.
strokeWeight(5);// grosor de línea
line(pmouseX, pmouseY,mouseX,mouseY); //dibuja una línea entre los puntos de posición inmediatamente anteriores del ratón representados
por las funciones pmouse “X e Y” y los puntos actuales del ratón mouseX y mouseY.
}
4º) Dibujo de una estela.
void setup( )
{
size(500,500);
void draw( )
{
background(255); // al estar en el void draw ( ) la línea dibujada cíclicamente por el comando line se borra cada vez que se ejecuta un ciclo de
instrucción dando la sensación de movimiento.
stroke(0,255,0); //línea de controno color verde
strokeWeight(5);// grosor de línea
line(pmouseX, pmouseY,mouseX,mouseY); //dibuja una línea entre los puntos de posición inmediatamente anteriores del ratón representados
por las funciones pmouse “X e Y” y los puntos actuales del ratón mouseX y mouseY.
}
5º) Cambios de color del pantalla de presentación por eventos de pulsación completa del ratón
boolean bandera = false; // variable booleana inicializada como false
void setup( ) // método que inicializa el tamaño de la pantalla que va a ser fijo durante toda la ejecución del programa.
{
size(500,500);//tamaño de pantalla de presentación de 500 pixels x 500 pixels.
}
void draw() //método de ejecución cíclica en el que se evalúan las condiciones y estados del sistema
{
if(bandera) // si la condición del if (estado de bandera), es verdadera se ejecuta la instrucción incluida entre los corchetes que de el dependen.
{
background(0); //color negro
}
else // si no se cumple la condición del “if” anterior se ejecuta la instrucción incluida entre los corchetes que de el dependen.
{
}
}
void mouseClicked( ) // función que va a detectar cualquier evento de pulsación completa (click) sobre los botones del ratón.
{
bandera = ! bandera; // función que provoca la negación del estado de la variable booleana declarada globalmente
}
6º) Cambios de color del pantalla de presentación por eventos de pulsación del ratón
{
}
{
{
}
{
}
}
void mousePressed( ) // función que va a detectar cualquier evento de pulsación sobre los botones del ratón
{
bandera = ! bandera; // función que provoca la negación del estado de la variable booleana declarada globalmente
}
7º) Cambios de color del pantalla de presentación por eventos de arrastre y pulsación del ratón
{
}
{
{
}
{
}
}
void mouseDragged( ) // función que va a detectar cualquier evento de arrastre del ratón con algún botón presionado.
{
bandera = ! bandera; // función que provoca la negación del estado de la variable booleana declarada globalmente.
}
8º) Cambios de color del pantalla por eventos de alivio de presión en algún botón del ratón
{
}
{
{
}
{
}
}
void mouseReleased( ) // función que va a detectar cualquier evento de retirada de la presión de algún botón el ratón previamente presionado.
{
}
9º) Cambios de color del pantalla por movimiento del ratón sobre la pantalla de presentación
{
}
{
{
}
{
}
}
void mouseMoved( ) // función que va a detectar cualquier movimiento sobre la pantalla del ratón sin necesidad de presionar ningún botón.
{
}
10º) Cambios de color del pantalla por movimiento de la rueda del ratón sobre la pantalla de presentación
{
}
{
{
}
{
}
}
void mouseWheel( ) // función que va a detectar el movimiento de la rueda del ratón cuando este está sobre la sobre la pantalla de presentación.
{
}
11º) Rectángulo que cambia de color con un click de ratón
void setup( )
{
size(500,500);
background (255,0,0);
}
void draw()
{
if (mouseButton == LEFT) //si el botón izquierdo del ratón esta presionado.
{
fill(0,0,255); // el relleno del rectángulo es azul.
}
if (mouseButton == RIGHT) //si el botón izquierdo del ratón esta presionado.

{
fill(0,255,0); // el relleno del rectángulo es verde.
}
rect(width/2,height/2,100,100); // rectángulo de 100x100 píxels centrado con la esquina superior izquierda a 1/3 del ancho y 1/3 del alto
}
12º) Pantalla de presentación que cambia color según el valor de una variable modificada al presionar una tecla.
boolean bandera = false; // inicializa la variable booleana bandera como falsa.
void setup( )
{
size(500,500); // tamaño pantalla de presentación.
}
void draw()
{
if (bandera) // si la variable bandera es verdadera, se ejecuta la instrucción escrita en los paréntesis dependen del if.
{
background(0); // la pantalla de presentación se vuelve de color negro.
}
else // si no es verdadera la expresión del if, se ejecuta la expresión que depende del else y que está entre sus paréntesis.
{
background(255,0,0); // la pantalla de presentación se vuelve roja.
}
}
void keyPressed( ) // llamada a una función definida por el programador que se ejecutará cuando se pulse una tecla.
{
bandera = ! bandera; // función que niega el estado previo de la variable bandera, asignándole a la variable el nuevo valor.
}
13º) Pantalla de presentación que cambia de color al quitar la presión sobre una tecla.
void setup( )
{
}
void draw()
{
{
}
{
}
}
void keyReleased( ) // llamada a una función definida por el programador que se ejecutará cuando se deje de pulsar una tecla.
{
bandera = ! bandera; // función que niega el estado previo de la variable bandera, asignándole a la variable el nuevo valor.
}
14º) Obtención de información sobre si se ha pulsado una determinada letra del teclado u otra.
void setup( )
{
}
void draw()
{
{
}
{
}
}
void keyPressed( ) // llamada a una función definida por el programador que se ejecutará cuando se deje de pulsar una tecla.
{
if (key== 'a') // si la variable bandera es verdadera, se ejecuta la instrucción escrita en los paréntesis dependen del if, recordar que el programa
distingue entre mayúsculas y minúsculas*/
{
bandera = true; // la pantalla de presentación se vuelve de color negro.
}
if (key== 'b') // si la variable bandera es verdadera, se ejecuta la instrucción escrita en los paréntesis dependen del if.
{
bandera = false; // la pantalla de presentación se vuelve de color negro.
}
}
15º) Obtención de información sobre si se ha pulsado una determinada tecla especial u otra.
void setup( )
{
}
void draw()
{
{
}
{
}
}
void keyPressed( ) // llamada a una función definida por el programador que se ejecutará cuando se deje de pulsar una tecla.
{
if (keyCode== LEFT) // si la variable bandera es verdadera, se ejecuta la instrucción escrita en los paréntesis dependen del if.
{
bandera = true; // la pantalla de presentación se vuelve de color negro.
}
if (keyCode== RIGHT) // si la variable bandera es verdadera, se ejecuta la instrucción escrita en los paréntesis dependen del if.
{
bandera = false; // la pantalla de presentación se vuelve de color negro.
}
}
16º) Mover objetos en la pantalla de presentación con la función translate( );
Ejemplo 16.1
void setup( )
{
rectMode(CENTER); // se elige como punto de referencia en el centro del rectángulo para facilitar el dibujo de ciertas geometrías y el uso de la
función translate
}
void draw( )
{
background(0); // relleno de la pantalla de presentación en color negro.
fill (255); // relleno de color blanco.
translate(mouseX,mouseY); // función que permite mover una figura desde su centro geométrico a la posición que se indique en sus paréntesis,
en este caso hemos elegido como punto al que trasladar la figura la posición del ratón definida por mouseX y
mouseY para que la geometría siga el movimiento del ratón.
rect(0,-50,50,50); // rectángulo con centro en …….. y de 50 píxels de ancho por 50 píxels de alto.
rect(0,0,50,50); // rectángulo con centro en …….. y de 50 píxels de ancho por 50 píxels de alto.
rect(-50,0,50,50); // rectángulo con centro en …….. y de 50 píxels de ancho por 50 píxels de alto.
}
Ejemplo 16.2 (movimiento de varias figuras a la vez)
void setup( )
{
función translate
}
void draw( )
{
fill (255); // relleno de color blanco3
ellipse(300,200,200,200); //elipse con centro en el punto (300,200) píxeles de 200 píxels de ancho y 200 píxels de alto, la elipse se traslada con
un desvío de 300 píxels a la derecha y 200 hacia abajo con respecto al centro de de la nave que es donde esta
referenciada la función translate.
}
Ejemplo 16.3 (movimiento de varias figuras a la vez)
void setup( )
{
función translate
}
void draw( )
{
fill (255); // relleno de color blanco.
pushMatrix( ); // la función combinada push y pop Matrix función que permite que la función de traslación solo afecte a lo escrito dentro de la
estructura pushMatrix y popMatrix.
popMatrix( ); // la función
ellipse(300,200,200,200); //elipse con centro en el punto (300,200) píxeles de 200 píxels de ancho y 200 píxels de alto, la elipse se traslada con
un desvío de 300 píxels a la derecha y 200 hacia abajo con respecto al centro de de la nave que es donde esta
referenciada la función translate.

Ejemplos Processing PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ejemplos Processing PDF

Cargado por

Copyright:

Formatos disponibles

Ejercicios Processing

/*// Geometrías curvas

if (mouseButton == RIGHT) //si el botón izquierdo del ratón esta presionado.

También podría gustarte