sábado, 30 de abril de 2016
Actividad-M 3 (Círculo que siguen al ratón + cuadrado con movimiento automático)
Actividad 5 (patrón con 2 dimensiones)
Actividad 5B (patrón con 2 dimensiones)
Crea el mismo programa, cambiando el comando línea() por el comando punto();
Utiliza exactamente esta expresión: point(i, j);
(C) Dpto Tecnología
IES Antonio Machado
Alcalá de Henares
Abril 2016
Actividad 4 (Líneas con bucle for 2
(C) Dpto Tecnología
IES Antonio Machado
Alcalá de Henares
Abril 2016
Actividad 3 (Líneas con bucle for)
(C) Dpto Tecnología
IES Antonio Machado
Alcalá de Henares
Abril 2016
Ejemplos 5 (3D)
Processing actualmente tiene tres modos de rendering . Si no especificamos ningún modo en la función size() – como hecho en todos los ejemplos hasta ahora - usamos el el rendering de Java 2D.
Para usar funciones de 3D hace falta especificar el rendering de la siguiente manera:
size(100,100,P3D); //P3D define el modo de rendering para 3D
Este modo también da soporte a todas las funciones de 2D y además supone ser más rápida que el rendering 2D.
1)
2)
3)
4)
5)
Para usar funciones de 3D hace falta especificar el rendering de la siguiente manera:
size(100,100,P3D); //P3D define el modo de rendering para 3D
Este modo también da soporte a todas las funciones de 2D y además supone ser más rápida que el rendering 2D.
1)
aa0a02) Ejemplos 3
Crea un programa que incluya todos estos ejemplos: Comprueba unoi a uno que funcionan, según los vas creando. Cambia las cooredenadas para que entren en el lienzo o ventana.
Ejemplos 1
A)
void setup() {
size(480, 120);
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
B)
void setup() {
size(400, 400);
stroke(255);
}
void draw() {
line(150, 25, mouseX, mouseY);
}
void mousePressed() {
background(192, 64, 0);
}
C) Alpha transparencia
size(200,200); background(0); noStroke(); // No fourth argument means 100% opacity. fill(0,0,255); rect(0,0,100,200); // 255 means 100% opacity. fill(255,0,0,255); rect(0,0,200,40); // 75% opacity. fill(255,0,0,191); rect(0,50,200,40); // 55% opacity. fill(255,0,0,127); rect(0,100,200,40); // 25% opacity. fill(255,0,0,63); rect(0,150,200,40);
D)
color c = color(0);
float x = 0;
float y = 100;
float speed = 1;
void setup() {
size(200,200);
}
void draw() {
background(255);
move();
display();
}
void move() {
x = x + speed;
if (x > width) {
x = 0;
}
}
void display() {
fill(c);
rect(x,y,30,10);
}
Iteracción
La instrucción while:
while (expresión booleana){
// Este es el conjunto de instrucciones que se ejecutan
// si la condición es verdadera
}
Ejemplo:
int variable1=20;
while(variable1<=140){
rect(variable1,20,20,20);
variable1 = variable1 + 30;
}
La instrucción for:
for (inicialización, condición, actualización)
{
// Este es el conjunto de instrucciones que se ejecutan
// n número de veces
}
Ejemplo:
for(int variable1=20; variable1<=140;
variable1=variable1+30)
{
rect(variable1,20,20,20);
}
Abreviaciones:
x++; es equivalente a: x=x+1
x--; es equivalente a: x=x-1
x+=2; es equivalente a: x=x+2
x*=3; es equivalente a: x=x*3
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
while (expresión booleana){
// Este es el conjunto de instrucciones que se ejecutan
// si la condición es verdadera
}
Ejemplo:
int variable1=20;
while(variable1<=140){
rect(variable1,20,20,20);
variable1 = variable1 + 30;
}
La instrucción for:
for (inicialización, condición, actualización)
{
// Este es el conjunto de instrucciones que se ejecutan
// n número de veces
}
Ejemplo:
for(int variable1=20; variable1<=140;
variable1=variable1+30)
{
rect(variable1,20,20,20);
}
Abreviaciones:
x++; es equivalente a: x=x+1
x--; es equivalente a: x=x-1
x+=2; es equivalente a: x=x+2
x*=3; es equivalente a: x=x*3
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
Condicionales
Significado de los símbolos:
> Mayor que
< Menor que
>= Mayor o igual
<= Menor o igual
== Igualdad
! Diferente
Condicional simple:
if (expresión booleana){
// Este conjunto de instrucciones se ejecutan
//si la condición es verdadera
}
Condicional doble:
if (expresión booleana){
/* El código que se ejecuta si la condición es verdadera*/
} else {
// El código que se ejecuta si la condición es falsa
}
Anidamiento de condicionales:
if (expresión booleana # 1){
// El código que se ejecuta si la condición # 1 es verdadera
} else if (expresión booleana # 2){
// El código que se ejecuta si la condición # 2 es verdadera
} else if (expresión booleana # n){
// El código que se ejecuta si la condición # n es verdadera
} else {
// Ejecución si ninguna de las condiciones anteriores fueron
// verdaderas
}
Operadores lógicos:
||
&&
(O lógico)
(Y lógico)
! (NOT lógico)
Para el | | (O lógico):
if (variable1==1 || variable1 ==2 || variable1==3){
variable2=100;
}
Para el && (Y lógico):
if (variable1==1 && variable2==5){
ellipse(10,10,10,10);
}
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
> Mayor que
< Menor que
>= Mayor o igual
<= Menor o igual
== Igualdad
! Diferente
Condicional simple:
if (expresión booleana){
// Este conjunto de instrucciones se ejecutan
//si la condición es verdadera
}
Condicional doble:
if (expresión booleana){
/* El código que se ejecuta si la condición es verdadera*/
} else {
// El código que se ejecuta si la condición es falsa
}
Anidamiento de condicionales:
if (expresión booleana # 1){
// El código que se ejecuta si la condición # 1 es verdadera
} else if (expresión booleana # 2){
// El código que se ejecuta si la condición # 2 es verdadera
} else if (expresión booleana # n){
// El código que se ejecuta si la condición # n es verdadera
} else {
// Ejecución si ninguna de las condiciones anteriores fueron
// verdaderas
}
Operadores lógicos:
||
&&
(O lógico)
(Y lógico)
! (NOT lógico)
Para el | | (O lógico):
if (variable1==1 || variable1 ==2 || variable1==3){
variable2=100;
}
Para el && (Y lógico):
if (variable1==1 && variable2==5){
ellipse(10,10,10,10);
}
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
Las variables predefinidas (del sistema)
• width
Esta variable almacena el ancho de la ventana de trabajo y se inicializa utilizando el primer parámetro de la función size().
• height
Esta variable almacena el alto de la ventana de trabajo y se inicializa por el segundo parámetro definido en la función size().
• frameRate
En la variable frameRate se guarda la velocidad con la que se está ejecutando el programa o sketch. Se puede definir la velocidad de eje-
cución mediante la función frameRate();
• frameCount
La variable frameCount contiene el número de frames que el progra ma ha ejecutado desde su inicio. Esta variable se inicializa con el valor
52
Hola mundo con Procesing
de cero y al entrar a la función draw() obtiene el valor de 1, y así sigue aumentando constantemente.
• displayHeight
Esta variable almacena el alto de la pantalla completa a ser desplegada. Es utilizada para crear una ventana, independientemente del dispositivo
de ejecución.
• displayWidth
Esta variable almacena el ancho de la pantalla completa a ser desplega da. Funciona de igual forma que displayHeight pero para el ancho.
• key
La variable del sistema key contiene el valor reciente de la tecla oprimida desde el teclado.
• keyCode
Esta variable es utilizada para detectar teclas especiales como las flechas UP, DOWN, LEFT o RIGHT, o teclas como ALT, CONTROL, o SHIFT.
• keyPressed
Esta variable del sistema es de tipo booleano, por lo que tendrá el valor de TRUE si alguna tecla es oprimida y FALSE para el caso contrario.
• mouseX
Esta variable siempre conserva la coordenada horizontal del mouse. Esta información es únicamente utilizada cuando el mouse está dentro de la
ventana de trabajo. Inicialmente el valor está definido como 0.
• mouseY
La variable mouseY funciona exactamente de la misma forma que mouseX,
solo que almacena la coordenada y la posición actual del mouse.
• pmouseX
La variable pmouseX contiene la posición horizontal del mouse en el frame
anterior al actual. En otras palabras, almacena la posición anterior del mouse.
• pmouseY
Al igual que la variable pmouseX, esta variable almacena la posición vertical del mouse en el frame anterior al actual.
• mousePressed
Esta variable booleana se encarga de almacenar si el botón del mouse está actualmente oprimido o no. El valor de TRUE es cuando el botón está siendo oprimido y el valor de FALSE cuando se libera el botón.
• mouseButton
La variable mouseButton detecta qué botón del mouse fue seleccionado. Adquiere entonces los valores de LEFT, RIGHT o CENTER, dependiendo del botón seleccionado. Inicialmente tiene el valor de 0
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
Esta variable almacena el ancho de la ventana de trabajo y se inicializa utilizando el primer parámetro de la función size().
• height
Esta variable almacena el alto de la ventana de trabajo y se inicializa por el segundo parámetro definido en la función size().
• frameRate
En la variable frameRate se guarda la velocidad con la que se está ejecutando el programa o sketch. Se puede definir la velocidad de eje-
cución mediante la función frameRate();
• frameCount
La variable frameCount contiene el número de frames que el progra ma ha ejecutado desde su inicio. Esta variable se inicializa con el valor
52
Hola mundo con Procesing
de cero y al entrar a la función draw() obtiene el valor de 1, y así sigue aumentando constantemente.
• displayHeight
Esta variable almacena el alto de la pantalla completa a ser desplegada. Es utilizada para crear una ventana, independientemente del dispositivo
de ejecución.
• displayWidth
Esta variable almacena el ancho de la pantalla completa a ser desplega da. Funciona de igual forma que displayHeight pero para el ancho.
• key
La variable del sistema key contiene el valor reciente de la tecla oprimida desde el teclado.
• keyCode
Esta variable es utilizada para detectar teclas especiales como las flechas UP, DOWN, LEFT o RIGHT, o teclas como ALT, CONTROL, o SHIFT.
• keyPressed
Esta variable del sistema es de tipo booleano, por lo que tendrá el valor de TRUE si alguna tecla es oprimida y FALSE para el caso contrario.
• mouseX
Esta variable siempre conserva la coordenada horizontal del mouse. Esta información es únicamente utilizada cuando el mouse está dentro de la
ventana de trabajo. Inicialmente el valor está definido como 0.
• mouseY
La variable mouseY funciona exactamente de la misma forma que mouseX,
solo que almacena la coordenada y la posición actual del mouse.
• pmouseX
La variable pmouseX contiene la posición horizontal del mouse en el frame
anterior al actual. En otras palabras, almacena la posición anterior del mouse.
• pmouseY
Al igual que la variable pmouseX, esta variable almacena la posición vertical del mouse en el frame anterior al actual.
• mousePressed
Esta variable booleana se encarga de almacenar si el botón del mouse está actualmente oprimido o no. El valor de TRUE es cuando el botón está siendo oprimido y el valor de FALSE cuando se libera el botón.
• mouseButton
La variable mouseButton detecta qué botón del mouse fue seleccionado. Adquiere entonces los valores de LEFT, RIGHT o CENTER, dependiendo del botón seleccionado. Inicialmente tiene el valor de 0
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
Variables
Tipos de datos
• int
El tipo de dato int representa un conjunto de enteros de 32 bits. Su rango va del -2.147.483.648 al 2.147.483.647.
• float
El tipo de dato float se refiere a la utilización de números con punto decimal. El rango de valores va del -3.40282347E+38 al 3.40282347E+38 y
está almacenado en 32 bits.
• char
El tipo de dato char permite almacenar cualquier tipo de carácter (letras o símbolos) en el formato Unicode.
• boolean
TRUE y FALSE.
• color
El tipo de dato color permite el almacenamiento de cualquier color codificado en números hexadecimales.
Las variables que se van a utilizar deben de ser declaradas
int variable1;// para una variable entera
float diametro;// para un variable flotante
char letra;// para una variable carácter
boolean valor;// para una variable booleana
color arcoiris;// para una variable color
Si las variables van a ser utilizadas en todo el programa, se deberán declarar al inicio del programa, antes de la función setup(), y se les nombrará
variables globales.
Si las variables se utilizan únicamente en alguna función, entonces deberán declararse al inicio de la función deseada y se llamarán variables locales. Estas variables únicamente existirán cuando la función esté siendo utilizada.
Declaración y asignación de variables:
int count =0;//Asignamos el valor 0 a la variable count
char letter = ‘a’;//Asignamos el valor ‘a’ a la variable letter
float d= 132.32;//Asignamos el valor 132.32 a la variable d
float x = 4.0;//Asignamos el valor 4.0 a la variable x
float y = x + 5.2;//Asignamos el valor 9.2 a la variable y
float z = x*y + 15.0;//Asignamos el valor 51.8 a la variable z
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
• int
El tipo de dato int representa un conjunto de enteros de 32 bits. Su rango va del -2.147.483.648 al 2.147.483.647.
• float
El tipo de dato float se refiere a la utilización de números con punto decimal. El rango de valores va del -3.40282347E+38 al 3.40282347E+38 y
está almacenado en 32 bits.
• char
El tipo de dato char permite almacenar cualquier tipo de carácter (letras o símbolos) en el formato Unicode.
• boolean
TRUE y FALSE.
• color
El tipo de dato color permite el almacenamiento de cualquier color codificado en números hexadecimales.
Las variables que se van a utilizar deben de ser declaradas
int variable1;// para una variable entera
float diametro;// para un variable flotante
char letra;// para una variable carácter
boolean valor;// para una variable booleana
color arcoiris;// para una variable color
Si las variables van a ser utilizadas en todo el programa, se deberán declarar al inicio del programa, antes de la función setup(), y se les nombrará
variables globales.
Si las variables se utilizan únicamente en alguna función, entonces deberán declararse al inicio de la función deseada y se llamarán variables locales. Estas variables únicamente existirán cuando la función esté siendo utilizada.
Declaración y asignación de variables:
int count =0;//Asignamos el valor 0 a la variable count
char letter = ‘a’;//Asignamos el valor ‘a’ a la variable letter
float d= 132.32;//Asignamos el valor 132.32 a la variable d
float x = 4.0;//Asignamos el valor 4.0 a la variable x
float y = x + 5.2;//Asignamos el valor 9.2 a la variable y
float z = x*y + 15.0;//Asignamos el valor 51.8 a la variable z
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
Variables del sistema mouseX y mouseY, pmouseX y pmouseY
Processing permite trabajar en dos modos de programación:
uno estático: setup()
y otro dinámico: draw()
Una variable es un espacio de almacenamiento para un dato o resultado. Existen dos tipos de variables:
• las variables definidas por el usuario: el usuario las crea para ir guardan-
do resultados y
• las variables del sistema: estas son predefinidas por el lenguaje de pro-
gramación y están ya asociadas a una determinada funcionalidad.
Para detectar la posición del mouse, existen dos variables del sistema
mouseX (posición horizontal) y mouseY (posición vertical).
ejemplo1:
int x,y =100;
void setup()
{
background(255);
size(200,200);
}
void draw()
{
fill(255,0,0);
x=mouseX-25;
y=mouseY-25;
ellipse(x,y,50,50);
}
Ejemplo2:
int x,y =100;
void setup()
{
size(200,200);
}
void draw()
{
background(255);
fill(255,0,0);
x=mouseX-25;
y=mouseY-25;
ellipse(x,y,50,50);
}
Ejemplo3:
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
stroke(0);
line(pmouseX, pmouseY, mouseX, mouseY);
}
El bloque void mousePressed().
Cada vez que el usuario dé un clic, entonces, se ejecutarán las instrucciones contenidas dentro del bloque.
ejemplo4:
void setup()
{
size(200,200); background(255);
}
void draw()
{
}
void mousePressed()
{
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,16,16);
}
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
La línea
Si quisiéramos pintar la línea que fuera de la coordenada (3, 6) a la (10, 50), la sintaxis sería la siguiente:
line(3,6,10,50);
El rectángulo
Si quisiéramos pintar un rectángulo en la coorde nada (30, 30) con un ancho de 50 y una altura de 20, la sintaxis sería la siguiente:
rect(30,30,50,20);
Cuando dibujamos el rectángulo utilizando las coordenadas (x, y) como el punto superior izquierdo y damos el ancho y el alto (como lo hemos visto), estamos utilizando el mode CORNER.
rectMode(CORNER);
Cuando dibujamos el rectángulo utilizando las coordenadas (x, y) como punto central y definimos el ancho y el alto, estamos utilizando el modo CENTER.
rectMode(CENTER);
Cuando dibujamos el rectángulo utilizando dos puntos; las coordenadas (x, y) del primer punto y las coordenadas (x, y) del segundo punto, estamos utilizando el modo CORNERS.
rectMode(CORNERS);
La elipseLos dos primeros parámetros corresponden a las coordenadas (x, y) del punto central de la elipse y los dos parámetros restantes corresponden al ancho y al alto.
ellipse(30,80,40,40);
Existen los siguientes modos de representación:
ellipseMode(CENTER);
ellipseMode(CORNER);
ellipseMode(CORNERS);
El triángulo
3 puntos: 0,90 ; 45,45; 70,70
triangle(0,90,45,45,70,70);
El cuadrilátero
Cuatro puntos:
quad(90,60,130,45,180,90,150,85);
Los arcos
La función arc() utilizará seis parámetros. Los cuatro primeros son los mismos que para poder dibujar cualquier elipse, es decir, coordenadas del punto central x, y, el ancho y el alto. Para los dos últimos parámetros, debemos de escribir el segmento inicial y final que queremos dibujar. Estos segmentos están definidos en radianes (0, PI,TWO_PI, etc.).
arc(250,250,100,100,0,PI);
Existen tres formas diferentes de dibujar el arco, que están definidas por un séptimo parámetro. Estas tres formas son OPEN, la cual dejará completamente abierto el arco y el modo por default, el modo PIE, que completará el arco tomando en cuenta el centro del arco y tomará la forma de pie, mientras que el tercer modo es CHORD, el cual genera un línea que cierra el semicírculo desde el punto de origen hasta el punto final. A continuación, se muestra la manera como se ven estas nuevas formas geométricas directamente en Processing.
El size
size(), que permite definir el tamaño de la ventana
La escala de grises
el color negro corresponde al valor 0 y el color blanco al valor 255.
El background
background() permite definir la escala de grises deseada que utilizaremos para el fondo.
background(10);
El stroke
Contornos de las formas geométricas (escalade grises).
stroke(255);
El fill
Relleno:
fill(130);
Color
Processing cuenta con una herramienta llamada color selector, la cual puede ser desplegada a partir del menú Herramientas.
tres diferentes formas de escoger el color deseado, utilizando el modo HSB (Hue, Saturation y Brightness), el RGB o, finalmente, utilizando la codificación Hexadecimal correspondiente al color deseado. Por defecto, las funciones se encuentran definidas con el RGB. Definido en las funciones background(), fill() y stroke()
La transparencia
Llamado nivel alpha, se define como un cuarto parámetro dentro de las funciones background(), fill(), y stroke().
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
Si quisiéramos pintar la línea que fuera de la coordenada (3, 6) a la (10, 50), la sintaxis sería la siguiente:
line(3,6,10,50);
El rectángulo
Si quisiéramos pintar un rectángulo en la coorde nada (30, 30) con un ancho de 50 y una altura de 20, la sintaxis sería la siguiente:
rect(30,30,50,20);
Cuando dibujamos el rectángulo utilizando las coordenadas (x, y) como el punto superior izquierdo y damos el ancho y el alto (como lo hemos visto), estamos utilizando el mode CORNER.
rectMode(CORNER);
Cuando dibujamos el rectángulo utilizando las coordenadas (x, y) como punto central y definimos el ancho y el alto, estamos utilizando el modo CENTER.
rectMode(CENTER);
Cuando dibujamos el rectángulo utilizando dos puntos; las coordenadas (x, y) del primer punto y las coordenadas (x, y) del segundo punto, estamos utilizando el modo CORNERS.
rectMode(CORNERS);
La elipseLos dos primeros parámetros corresponden a las coordenadas (x, y) del punto central de la elipse y los dos parámetros restantes corresponden al ancho y al alto.
ellipse(30,80,40,40);
Existen los siguientes modos de representación:
ellipseMode(CENTER);
ellipseMode(CORNER);
ellipseMode(CORNERS);
El triángulo
3 puntos: 0,90 ; 45,45; 70,70
triangle(0,90,45,45,70,70);
El cuadrilátero
Cuatro puntos:
quad(90,60,130,45,180,90,150,85);
Los arcos
La función arc() utilizará seis parámetros. Los cuatro primeros son los mismos que para poder dibujar cualquier elipse, es decir, coordenadas del punto central x, y, el ancho y el alto. Para los dos últimos parámetros, debemos de escribir el segmento inicial y final que queremos dibujar. Estos segmentos están definidos en radianes (0, PI,TWO_PI, etc.).
arc(250,250,100,100,0,PI);
Existen tres formas diferentes de dibujar el arco, que están definidas por un séptimo parámetro. Estas tres formas son OPEN, la cual dejará completamente abierto el arco y el modo por default, el modo PIE, que completará el arco tomando en cuenta el centro del arco y tomará la forma de pie, mientras que el tercer modo es CHORD, el cual genera un línea que cierra el semicírculo desde el punto de origen hasta el punto final. A continuación, se muestra la manera como se ven estas nuevas formas geométricas directamente en Processing.
El size
size(), que permite definir el tamaño de la ventana
La escala de grises
el color negro corresponde al valor 0 y el color blanco al valor 255.
El background
background() permite definir la escala de grises deseada que utilizaremos para el fondo.
background(10);
El stroke
Contornos de las formas geométricas (escalade grises).
stroke(255);
El fill
Relleno:
fill(130);
Color
Processing cuenta con una herramienta llamada color selector, la cual puede ser desplegada a partir del menú Herramientas.
La transparencia
Llamado nivel alpha, se define como un cuarto parámetro dentro de las funciones background(), fill(), y stroke().
Contenido extractado del libro:
Hola Mundo Con Processing.
Obra ganadora del concurso 2014 para publicación de libros de texto y materiales de apoyo a la docencia.
Suscribirse a:
Entradas (Atom)