Una vez completados los anteriores capítulos, ahora tenemos una buena base en processing por lo que podemos proponernos algunos retos. En este caso os vamos a proponer hacer un ping pong para dos personas con los conocimientos adoptados. El ping pong deberá tener dos barras a cada lateral que se manejen con el teclado, además una pelota será lanzada desde el centro para un lado y con las barras hay que darle a la bola. Las barras solo se mueven por el eje ‘y’ y si la pelota llega hasta uno de los lados sin que la barra le de se sumará un punto al jugador contrario. La pelota tendrá que tener un rebote y se tendrá que ir acelerando cuando choque contra la barra de uno de los jugadores. También la pelota tiene que rebotar en la parte de arriba o de abajo de la pantalla.
Para ello hay que crear variables de los dos jugadores, de sus goles, del rebote y de la pelota. También hemos puesto un marcador y cuando uno de los jugadores llegue a 5 puntos se reseteará el juego enviando un mensaje de ‘ganador player 1’ por ejemplo.
Bienvenidos de nuevo a un nuevo capítulo para llegar a tener una buena base en processing. En este caso nos encontramos en la última sesión. Si no lo habéis hecho, comenzad por el primer capítulo e id completando todos en orden.
El último escalón para llegar a este nivel medio sería controlar el tiempo y poder mandar ordenes al ordenador que te recuerde a una determinada hora. En este caso haremos un reloj digital que nos hará llegar un mensaje cuando llegue a una hora terminada. Por si alguno tiene la duda, el reloj digital se sincronizará con el del ordenador.
Empezaremos esta actividad creando tres variables de tiempo, los segundos los minutos y las horas. Para ello usaremos la función ‘int s=0;’ para los segundos, ‘int m=0;’ para los minutos y ‘int h=0;’ para las horas.
El siguiente paso es establecer ‘void setup(){‘ poniendo a continuación lo que queremos que se repita siempre. Como siempre tenemos que establecer el tamaño del fondo en este caso con forma de reloj digital, para ello utilizaremos la función de ‘size(300,150);’ que está explicada anteriormente en los otros capítulos. A diferencia de las demás actividades, aquí nos llegará un mensaje por lo que tendremos que establecer el tamaño de la letra con la función ‘textSize(50);’. Y cerraremos con ‘}’.
Después estableceremos las condiciones que queremos en nuestro reloj que se van a ir cumpliendo de una en una en bucle. La función es ‘void draw(){‘ y primero pondremos abajo el color que queremos de fondo con ‘background(0);’. Como quería el color negro que es (0,0,0) puedo poner únicamente un ‘0’ para el mismo propósito.
Ahora es el momento de sincronizar el tiempo con el del ordenador. Con las variables ‘int s=second();’ para los segundos, ‘int m=minute();’ para los minutos y ‘int h=hour(); para terminar de sincronizar la hora. El programa es muy estricto con los paréntesis lo que significa que si te falta alguno no va a funcionar.
Habiendo realizado los pasos anteriores es hora de introducir los números. Primero con ‘fill(255,0,0);’ para indicar el color rojo y a continuación ‘text(h+»:»+m+»:»+s,10,90);’ para indicar la distribución de los números y los dos puntos entre segundos, minutos y horas. Lo que hemos puesto dentro de la variable ‘text’ hace referencia en primer lugar a las horas, después pone los dos puntos(:) entre comillas (sino no vale) para separar las horas de los minutos, otra vez se ponen los dos puntos y por último los segundos. Todos ellos deben ir sumados con el signo ‘+’. Los dos números del final indican la posición donde se empezará a escribir.
Para acabar creamos la condición para que a una hora determinada se pare el reloj y aparezca un mensaje. Esto lo haremos con la función ‘if(m==30){‘ con la que diremos que si m (minutos) es igual a 30 se cumpla todo lo que pondremos ahora abajo. Podemos poner cualquiera de las tres variables e igualarla a cualquier tiempo. Lo primero que debemos poner es ‘clear();’ para ordenar que se vacíe la pantalla y que los números desaparezcan. Para concluir ordenaremos que se escriba un texto del color que queramos, primero con la función ‘fill(255,0,0);’ para poner el color y segundo con ‘text(«get up»,10,90);’ con la que se establecerá el texto que aparecerá. Los dos números del final indican la posición en la que empezará a escribir el mensaje. Este deberá ir en comillas.
Nos faltaría cerrar los dos corchetes que hemos dejado abiertos arriba, por lo que pondremos dos corchetes de este tipo al final de todo ‘}’.
Con este ultimo paso ya habríamos terminado el reloj despertador. Recordaros que si no os ha salido seguramente será porque os falta algún punto y coma, corchete o paréntesis así que revisarlos con cautela. Aquí tenéis una imagen de como sería.
Si todavía no os ha quedado claro de cómo se ha realizado, aquí os dejo un enlace para visitar un vídeo explicación de como hacerlo paso a paso. Introducción a processing
Ahora es vuestro turno de demostrar lo aprendido. Desde aquí os proponemos una actividad que consistiría en dibujar un bloque de hielo que se derrita cuando llegue a una determinada hora. Es decir, tendréis que crear un bloque de hielo y cuando la hora del ordenador sea una determinada, el bloque pasará a ser agua.
También os dejamos una foto para que podáis corregir vuestro programa si tiene algún fallo.
A continuación os dejamos un test de autoevaluación para que pongáis a prueba lo aprendido durante este capítulo. Cada pregunta tiene una única respuesta y el solucionado se encuentra al finalizar las preguntas.
1– ¿Cómo se establece la variable de minutos?
a) Int h b) Size c) Int m d) Int s
2– ¿Cómo establecemos el tamaño de la letra o de los números que aparecen en pantalla?
a) Size b) Void draw c) Fill d) TextSize
3– ¿Cómo igualamos los minutos a la hora del ordenador?
a)Hora() b) Int m=minute c) Minutes d) Float minute
4– ¿Con que función se realiza una limpieza de todo lo que haya previamente?
Bienvenidos de nuevo al blog. En este capítulo daremos el tercer paso en processing para lograr un nivel más avanzado. Hoy aprenderemos a crear una interacción entre el ratón y el teclado, por lo que crearemos un coche que se moverá arriba, abajo, derecha e izquierda según la tecla que pulsemos en el ordenador.
Comenzaremos creando las variables de ‘x’ y de ‘y’ con la función ‘int x=0;’ y ‘int y=0;’, con esto ya las tendremos establecidas. A continuación pondremos lo que queremos que se repita durante todo el programa, primero con la función ‘void setup(){‘ y después escribiremos ‘size(600,600);’ para establecer el tamaño que queréis de fondo, el primer número indica la distancia en ‘x’ y el segundo de la ‘y’.
Lo siguiente es crear la función ‘void draw(){‘ y dentro pondremos lo que queramos que se repita en ciclo, en este caso el coche y los controles. Primero creamos las condiciones ‘if(mousePressed==true)’ y ‘x=x+20;’, con esto habremos creado una condición en la que si apretamos el ratón se aumenta la velocidad por 20. A continuación tendremos que crear las condiciones para el movimiento con la función ‘if(key pressed){‘ y después ‘if(key==’d’)’ con ‘x=x+5;}’. Con esto habremos establecido que si apretamos la letra ‘d’ el coche se moverá por 5 hacia la derecha. Esto tendremos que repetirlo 4 veces con distintas letras y con distintas ecuaciones de ‘x’ y de ‘y’ según a donde queramos que se desplace.
Por último tendremos que crear el coche y el fondo. Primero con la función ‘background(a,b,c);’ siendo estas letras números hasta el 255 que combinaremos para crear el color que queramos. Ahora con la función fill(a,b,c);’ antes de cada función de cuadrado o círculo estableceremos su color. Y ya solo nos quedaría crear los rectángulos y círculos que formen el coche. Para ello usaremos la función ‘rect(200+x,100+y,40,20);’ para el primer rectángulo, con esto estaremos sumando la ‘x’ y la ‘y’ a la posición inicial del cuadrado, que ya explicamos en los capítulos anteriores su uso. Otra función ‘rect(180+x,120+y,80,40);’ para crear el segundo rectángulo que forme el coche. Al igual que el anterior, le estaremos sumando la ‘x’ y la ‘y’ a la posición inicial del coche. Finalmente realizaremos las ruedas con ‘ellipse(200+x,160+y,20,20);’ y ‘ellipse(240+x,160+y,20,20);’ para transmitir el movimiento de ‘x’ y de ‘y’ a las ruedas. El significado de los otros números está explicado en los previos capítulos.
Aquí os dejamos la solución por si no habéis logrado completarlo o si queréis comprobar algo. Lo más seguro es que os falte un ‘;’ o un ‘}’.
A continuación os proponemos un reto sobre el mismo tema que acabamos de tratar. En él tendréis que dibujar una nave que se mueva en una dirección u otra según la tecla pulsada. Así sería la nave.
Aquí os dejamos también la solución por si habéis tenido algún problema.
Por aquí os dejamos un video tutorial:
También os dejamos un test para que valoréis lo aprendido.
1- ¿Qué función se utiliza para crear la condición?
a)fill b)void setup
c)background d)if
2- ¿Qué hay que poner dentro de la condición para establecer que se haga algo cuando se presione el ratón?
a)mousePressed==true b)ratón
c)ellipse d)mouse
3- ¿Qué se pone para establecer que se haga algo cuando se presione la letra ‘s’?
a)key==s b)leter==s
c)key==’s’ d)size
4- ¿Qué es lo primero que habría que crear?
a)void draw b)void setup
c)el tamaño del fondo d)Las variables de x e y
5- ¿Qué último paso hay que hacer para que la pelota se mueva cuando pulsamos un botón?
a)con la función size b)crear un círculo con la posición inicial mas x e y
Bienvenidos de nuevo al blog. En este capítulo daremos el segundo paso en processing para lograr un nivel medio.
El dibujo dinámico que queremos conseguir será por ejemplo una pelota (podría ser cualquier objeto) que se mueva sin que nosotros tengamos que interaccionar con el teclado o el ratón.
Antes de todo debes saber que después de una función debes poner ‘;’ para que sea válida.
En primer lugar utilizaremos la función ‘float’ seguido de x= al número donde queramos que empiece el movimiento ‘float x=300;’. Esta función se utiliza para establecer el origen del movimiento. A continuación creamos otra variable ‘float’ de direcciónx= a la dirección que queremos que vaya ‘float direccionx=5’, para que se mueva hacia la derecha al ser positivo.
La función que tenemos que colocar ahora se repetirá en todos los ejercicios que hagamos. Se llama ‘void setup’ y todo lo que pongamos abajo suya se repitirá durante todo el programa. Para usarla tendremos que poner ‘void setup(){‘ para indicar que empieza la función. Después pondremos abajo lo que queremos que se repita durante todo el programa y cerraremos con ‘}’. Siempre habrá que poner aquí la función ‘size(a,b);’ siendo estos números del tamaño que queremos de fondo, por ejemplo ‘600,600’.
La función que tenemos que colocar ahora hará que se vayan cumpliendo todos los comandos que pongamos abajo y cuando terminen empezará de nuevo (en ciclo). Esta función es ‘void draw(){‘ y cuando terminemos de poner todos las funciones cerramos con ‘}’.
A continuación iremos creando un cuadrado que ocupe todo el fondo con la orden ‘rect(0,0,600,600);’ los dos primeros números indican la posición de ‘x’ y de ‘y’ en la que se empieza a pintar el cuadrado, y los dos siguientes números deben tener el tamaño del fondo, ya que esos números indican el tamaño de ‘x’ y de ‘y’ respectivamente del cuadrado. También pondremos el comando ‘ellipse(x,300,20,20);’ para crear la pelota. La x nos indica el lugar donde va a empezar el movimiento y el 300 la posición de la ‘y’ durante todo el movimiento. Los dos números siguientes indican el tamaño de ‘x’ y de ‘y’ respectivamente. Antes de crear el cuadrado y el círculo debemos poner ‘fill(a,b,c);’ para establecer el color. Estas letras representan números del 0 al 255 que irán cambiando el color dependiendo de la combinación que hagáis. Para lograr que la pelota deje una estela en su paso habra que añadir un cuarto número dentro de ‘fill’ que cuanto más bajo sea el número más tardará la estela en irse.
Ya casi para finalizar crearemos unas condiciones que de cumplirse cambiarán el movimiento. Empezaremos poniendo ‘if(x>560){‘ y en al siguiente línea pondremos ‘direccionx=-5;’ y cerraremos con ‘}’. Con esto le habremos indicado al programa que cuando la ‘x’ sea mayor que 560 que cambie la dirección del movimiento haciendo así que rebote contra la pared. El siguiente paso es volver a crear otra condición pero esta vez para que el movimiento rebote contra la otra pared. Pondremos ‘if(x<40){‘ y en la siguiente línea ‘direccionx=5;’ cerrando con el ‘}’.
Por último crearemos un comando para sumar la dirección de ‘x’ y que la pelota se mueva. Escribiremos ‘x=x+direccionx;’ ya que la dirección de x va cambiando en todo el movimiento.
Con esto ya estaría la pelota terminada y si todo está correctamente debería moverse sin nuestra ayuda. Si no funciona lo más probable es que se os haya olvidado poner algún ‘;’ o cerrar con ‘}’. Recuerda que todos los corchetes abiertos deben tener su correspondiente corchete cerrado.
Si todavía os ha quedado alguna duda que queráis solucionar os aconsejo ver el vídeo explicativo de ‘introducción a processing‘.
Ahora es el momento de que pongáis en práctica lo aprendido. Os vamos a proponer un reto que consistirá en hacer un bloque de hielo que se desliza sobre un suelo de piedra. Por ello tendréis que hacer una base de color de piedra (gris) y posteriormente crear un bloque cuadrado de hielo que se mueva de un lado a otro y rebote.
Os dejamos aquí la solución para que podáis comprobar resultados.
¡Espero que les hay servido y nos vemos en el siguiente capítulo!
A continuación os dejo un test de autoevaluación para que valoréis lo aprendido, también os dejaré las respuestas al final del test. Cada pregunta solo tiene una respuesta válida.
1– ¿Qué función utilizamos para marcar el origen del movimiento?
a) Float x b) Float direccionx c) Void setup d) Void draw
2– ¿Dentro de qué función colocamos lo que queremos que se repita durante todo el programa?
a) Float x b) Float direccionx c) Void setup d) Void draw
3– ¿Qué función se utiliza para crear un cuadrado o rectángulo?
a) Fill b) Rect c) Ellipse d) Float x
4– ¿Qué signo de puntuación es imprescindible en processing?
Hola, bienvenidos al blog, hoy aprenderemos a hacer dibujos estáticos, que forman el nivel más básico de processing. Para ello dibujaremos un campo de baloncesto como muestra la imagen.
Antes de todo debes saber que después de una función debes poner ‘;’ para que sea válida.
Empezaremos escribiendo el comando «void setup(){» y dentro del corchete determinaremos las medidas del campo «size(x,y);, poniendo en x la medida de x y en y la medida del eje y » y el color del fondo «fill(R,G,B)» R:rojo, G:verde B: azul, con números del 0 al 255 que se van combinando para formar colores.
Para dibujar círculos, escribiremos la función ‘ellipse(x,y,a,b)’; siendo x la cordenada del eje x, y la de su respectivo eje y a y b el tamaño.
Para dibujar rectángulos, escribiremos la función ‘rect(x,y,a,b)’; siendo x la cordenada del eje x, y la de su respectivo eje y a y b el tamaño.
Si aún nos queda algúna línea que queramos hacer, escribiremos la función ‘line(x,y,a,b)’; siendo x la cordenada del eje x, y la de su respectivo eje y a y b el tamaño.
Para dibujar los semicírculos de la imagen haremos un círculo y encima un rectángulo cortándolo por la mitad.
Aquí os dejamos el solucionario por si habeis tenido algún problema.
Por aquí os dejamos el link para el video tutorial de YouTube:
A continuación os proponemos un reto sobre el mismo tema que acabamos de tratar. En él tendréis que realizar un oso a través de círculos que se superponen. Habrá que crear un círculo para el cuerpo, cabeza,orejas, ojos, ozico y nariz.
También os dejo la solución, en la que he incorporado la realización de una elipse que forma el cuerpo. Esta se haría con la misma función que el círculo.
Por último he aquí un test para que valoréis lo aprendido.
1- Para determinar el tamaño de la pantalla usamos la función:
a)fill b)void setup
c)background d)size
2- Para determinar el color de una figura usamos la función:
a)fill b)color
c)ellipse d)paint
3- Para dibujar un circulo usamos la función:
a)fill b)circle
c)ellipse d)size
4- Cual es el limite de funciones que podemos usar?
Bienvenidos a infoprocessing, en este blog nos encargaremos de subir toda la información necesaria para dar los primeros pasos en processing.
Para los que no sepan que es, se trata de una aplicación que nos sirve para programar, tanto para realizar dibujos estáticos como para crear cuerpos que se muevan por si solos. Es muy útil y nos servirá para meternos en el mundo de la programación.
Aquí os iremos explicando desde el comienzo hasta tener un nivel medio. También incluiremos videos explicativos tanto visual como auditivamente adheridos a cada parte. Además propondremos actividades en cada parte y también un test para que valoréis vuestros conocimientos.
Al final del proyecto os invitamos a hacer un pequeño reto que os dejaremos. Si conseguís completarlo estaréis listos para programar a un nivel medio.
Sin más dilación os dejamos con el blog, esperamos que aprendan y sobre todo que os divirtiáis creando vuestras propias actividades.
infoprocessing 