{"id":9188,"date":"2017-09-26T12:06:00","date_gmt":"2017-09-26T10:06:00","guid":{"rendered":"http:\/\/agora.xtec.cat\/ieshugroger\/?p=9188"},"modified":"2017-09-26T12:23:57","modified_gmt":"2017-09-26T10:23:57","slug":"reloj-de-post-it","status":"publish","type":"post","link":"https:\/\/agora.xtec.cat\/ieshugroger\/impulsem-la-robotica\/reloj-de-post-it\/","title":{"rendered":"Reloj de Post-it"},"content":{"rendered":"<h3><a href=\"https:\/\/create.arduino.cc\/ctc\/101\/course\/view.php?id=257#section-1\">Reloj de Post-it<\/a><\/h3>\n<div><\/div>\n<div><\/div>\n<ul>\n<li id=\"module-268\">\n<div><\/div>\n<div>\n<div><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ico-sfw-3\" alt=\"\" width=\"40\" height=\"39\" \/><\/div>\n<p>En este miniproyecto vas a crear un reloj donde los n\u00fameros estar\u00e1n hechos a partir de fotograf\u00edas de notas adhesivas o Post-it. Para ello, aprender\u00e1s a utilizar im\u00e1genes en tus programas y almacenarlas en\u00a0arrays\u00a0(luego entender\u00e1s lo que son). De nuevo, iremos avanzando paso por paso.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-0\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<ol>\n<li value=\"1\">\n<h3>A\u00f1adir im\u00e1genes<\/h3>\n<p>El primer paso es dar al programa acceso a la imagen. Para ello, primero descarga la imagen\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-1\" rel=\"nofollow\">aqu\u00ed<\/a>. A continuaci\u00f3n, debes arrastrar el fichero de la imagen en el IDE de Processing, como muestra la siguiente captura.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-1\" alt=\"\" width=\"580\" height=\"581\" \/><br \/>\nLa imagen se almacena en una subcarpeta del programa llamada\u00a0data. Esta captura de pantalla muestra la estructura de los ficheros donde puedes encontrar el archivo de la imagen. Tambi\u00e9n puedes encontrarlo abriendo la carpeta desde el men\u00fa &#8216;Sketch&gt;Mostrar carpeta del Sketch&#8217;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-2\" alt=\"\" width=\"580\" height=\"581\" \/><\/li>\n<li value=\"2\">\n<h3>Mostrando una imagen<\/h3>\n<p>En este programa vamos a crear una variable\u00a0Pimage\u00a0para mostrar una imagen.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-9191\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog1.jpg\" alt=\"\" width=\"617\" height=\"276\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog1.jpg 853w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog1-300x134.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog1-768x343.jpg 768w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>Al ejecutar el programa ver\u00e1s que muestra la imagen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-3\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>PImage imageName: crea una variable del tipo\u00a0PImage\u00a0llamada\u00a0imageName. Una variable\u00a0PImagepuede almacenar una imagen.<\/li>\n<li>loadImage(imageFile): Carga la imagen\u00a0imageFile\u00a0desde el directorio de datos del programa.\u00a0imageFile\u00a0debe escribirse exactamente como se llama el archivo.<\/li>\n<li>image(imageName, x, y): Muestra la imagen\u00a0PImage imageName. La esquina superior izquierda de la imagen se sit\u00faa en las coordenadas\u00a0x\u00a0e\u00a0y.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se crea una variable del tipo\u00a0PImage\u00a0llamada\u00a0im.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se establece el tama\u00f1o de la ventana a 400 x 400 p\u00edxeles. El mismo tama\u00f1o que tiene la imagen empleada en el programa.<\/li>\n<li>La imagen\u00a0photo.jpg, se carga y almacena en la variable\u00a0im.<\/li>\n<li>En la funci\u00f3n\u00a0draw(), se muestra la imagen (im). La esquina superior izquierda de la imagen se sit\u00faa en las coordenadas 0, 0 &#8211; la esquina superior izquierda de la ventana del programa. Dado que la ventana del programa y la imagen son del mismo tama\u00f1o, la imagen se ajusta perfectamente.<\/li>\n<\/ul>\n<\/li>\n<li value=\"3\">\n<h3>Mostrando dos im\u00e1genes<\/h3>\n<p>En este paso, a\u00f1adir\u00e1s otra imagen para mostrar dos, una al lado de la otra.<\/p>\n<p>Descarga las fotos\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-2\" rel=\"nofollow\">photo.jpg<\/a>\u00a0y\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-3\" rel=\"nofollow\">photo2.jpg<\/a><\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-9193\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog2.jpg\" alt=\"\" width=\"704\" height=\"269\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog2.jpg 791w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog2-300x114.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog2-768x292.jpg 768w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>El programa mostrar\u00e1 dos im\u00e1genes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-4\" alt=\"\" width=\"810\" height=\"732\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara la segunda variable del tipo\u00a0PImage\u00a0llamada\u00a0im2.<\/li>\n<li>En la funci\u00f3n\u00a0setup()\u00a0se establece el tama\u00f1o de la ventana a 800 x 400 p\u00edxeles, el doble de anchura que antes, para que quepan las dos im\u00e1genes.<\/li>\n<li>La imagen\u00a0photo2.jpg\u00a0se carga y se almacena en la variable\u00a0im2.<\/li>\n<li>En la funci\u00f3n\u00a0draw(),\u00a0im2\u00a0se muestra despu\u00e9s de\u00a0im. La esquina superior izquierda se sit\u00faa en las coordenadas (400, 0) &#8211; la mitad superior de la ventana del programa, y a su vez, la esquina superior derecha\u00a0im.<\/li>\n<\/ul>\n<\/li>\n<li value=\"4\">\n<h3>Arrays I<\/h3>\n<p>En este paso vamos a modificar el paso anterior y usaremos un array para mostrar dos im\u00e1genes. Primero, aprender\u00e1s qu\u00e9 es un array.<\/p>\n<p>Un array es como una caja con muchos compartimentos. Cada compartimento puede almacenar varios objetos y todos los objetos de un mismo compartimento tienen que ser del mismo tipo. Cada objeto se puede encontrar referenciando el compartimento d\u00f3nde est\u00e1 almacenado.<\/p>\n<p>Por ejemplo, un array llamado &#8220;FruitContainer&#8221; (caja de fruta) tiene 3 compartimentos y puede contener 3 objetos. El compartimento 1 tiene un pl\u00e1tano, el compartimento 2 tiene una cereza y el compartimento 3 tiene una fresa. Si quieres encontrar la cereza, mirar\u00e1s en el compartimento 2 de la caja. El orden de los arrays siempre empieza en 0, por lo que FruitContainer[0] contiene el pl\u00e1tano, FruitContainer[1] contiene la cereza y FruitContainer[2] la fresa.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-5\" alt=\"\" width=\"580\" height=\"619\" \/>Los arrays pueden ser de muchos tipos, como entero (int) o cadena (String). El m\u00e1ximo n\u00famero de variables que pueden almacenar debe ser declarado con el array \u2013 3 en el ejemplo anterior.<\/li>\n<li value=\"5\">\n<h3>Arrays II<\/h3>\n<p>En este paso, vas a modificar el programa del paso 3 y usar\u00e1s un array del tipo\u00a0PImage\u00a0para mostrar dos im\u00e1genes.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-9194\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog3.jpg\" alt=\"\" width=\"809\" height=\"297\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog3.jpg 779w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog3-300x110.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog3-768x281.jpg 768w\" sizes=\"auto, (max-width: 809px) 100vw, 809px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>Como puedes ver, los cambios en el programa no cambian nada en el resultado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-6\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>datatype arrayName[ ] = new datatype[ numberOfElements ]: Declara un array del tipo\u00a0datatype, con el nombre\u00a0arrayName.\u00a0numberOfElements\u00a0es el n\u00famero de elementos o compartimentos de datos.<\/li>\n<li>arrayName[ index ]: Accede al elemento\u00a0index\u00a0del array\u00a0arrayName. El \u00edndice del primer elemento es 0, del segundo 1, etc.<\/li>\n<li>Puedes encontrar m\u00e1s informaci\u00f3n en ingl\u00e9s\u00a0<a href=\"http:\/\/processing.org\/reference\/Array.html\">aqu\u00ed<\/a>.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara un array del tipo\u00a0PImage\u00a0para almacenar dos im\u00e1genes, en lugar de emplear dos variables del tipo\u00a0PImage.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se carga la foto\u00a0photo.jpg\u00a0y se almacena en\u00a0im[0], tambi\u00e9n se carga\u00a0photo2.jpg\u00a0y se almacena en\u00a0im[1].<\/li>\n<li>En la funci\u00f3n\u00a0draw(), se muestra la imagen\u00a0im[0]\u00a0con la esquina superior izquierda en las coordenadas (0,\u00a00).<\/li>\n<li>Se muestra la imagen\u00a0im[1]\u00a0con la esquina superior izquierda en las coordenadas (400,\u00a00).<\/li>\n<\/ul>\n<\/li>\n<li value=\"6\">\n<h3>Usando dos Arrays<\/h3>\n<p>Para simplificar a\u00fan m\u00e1s la asignaci\u00f3n de las variables imagen, el truco es almacenar los nombres de todas las im\u00e1genes en un array de strings (cadenas de texto). Aqu\u00ed un ejemplo:<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-9195\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog4.jpg\" alt=\"\" width=\"723\" height=\"248\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog4.jpg 781w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog4-300x103.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog4-768x263.jpg 768w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>Como podr\u00e1s observar cuando ejecutes este programa, el resultado es el mismo. Esta forma de programar te facilitar\u00e1 seguir trabajando ya que a\u00f1adir m\u00e1s im\u00e1genes es muy sencillo.<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-7\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se declara otro array de tipo\u00a0String. Se llama\u00a0imFile\u00a0y almacena los nombres de los dos archivos de las im\u00e1genes;\u00a0photo.jpg, y\u00a0photo2.jpg.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se carga la imagen\u00a0imFile[0]\u00a0y se almacena en\u00a0im[0].<\/li>\n<li>Se carga la imagen\u00a0imFile[1]\u00a0y se almacena en\u00a0im[1].<\/li>\n<\/ul>\n<\/li>\n<li value=\"7\">\n<h3>El bucle for()<\/h3>\n<p>En este paso aumentar\u00e1s el n\u00famero de im\u00e1genes que se muestran de dos a cuatro. Todav\u00eda utilizar\u00e1s los dos arrays de los pasos anteriores, pero para hacer el c\u00f3digo a\u00fan m\u00e1s eficiente, emplear\u00e1s el bucle\u00a0for().<\/p>\n<p>Descarga las im\u00e1genes\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-4\" rel=\"nofollow\">one.jpg<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-5\" rel=\"nofollow\">two.jpg<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-6\" rel=\"nofollow\">three.jpg<\/a>\u00a0y\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-7\" rel=\"nofollow\">four.jpg<\/a><\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9196\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog5.jpg\" alt=\"\" width=\"783\" height=\"313\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog5.jpg 783w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog5-300x120.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog5-768x307.jpg 768w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>Al ejecutar el programa, se mostrar\u00e1n cuatro im\u00e1genes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-8\" alt=\"\" width=\"410\" height=\"370\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>for(initializer; test; update){ statements }: Permite repetir una parte del c\u00f3digo tantas veces como necesites. El bucle se ejecuta siguiendo los siguientes pasos:\n<ol>\n<li>Ejecuta la inicializaci\u00f3n: Normalmente, esto se hace con la declaraci\u00f3n de una variable tipo entero llamada\u00a0i.<\/li>\n<li>Comprueba si la condici\u00f3n en\u00a0test\u00a0es verdadera o falsa. Normalmente esto es comprobar si la variable\u00a0i\u00a0es mayor que un valor determinado.<\/li>\n<li>Si la comprobaci\u00f3n es falsa, se sale del bucle. Si la comprobaci\u00f3n es verdadera, se ejecuta el c\u00f3digo entre llaves.<\/li>\n<li>Ejecuta la actualizaci\u00f3n. Normalmente esto es incrementar o decrementar la variable\u00a0i\u00a0en 1.<\/li>\n<li>Vuelve a repetir todo desde el paso 2.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se modifican los cuatro arrays para almacenar 4 elementos cada uno.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se establece el tama\u00f1o de la ventana a 800 x 800 p\u00edxeles para que quepan las cuatro im\u00e1genes.<\/li>\n<li>Se emplea un bucle for para cargar y almacenar los archivos de las im\u00e1genes en el array\u00a0im:\n<ul>\n<li>Se declara la variable\u00a0i\u00a0tipo entero y se inicializa a 0.<\/li>\n<li>Se realiza la comprobaci\u00f3n,\u00a0i&lt;4, y es cierta, 0 es menor que 4.<\/li>\n<li>Se emplea la variable\u00a0i\u00a0para acceder a los elementos de los arrays. En la primera iteraci\u00f3n,\u00a0ies igual a 0, lo que significa que\u00a0imFile[0]\u00a0(one.jpg\u00a0se carga y se almacena en\u00a0im[0].<\/li>\n<li>Se ejecuta la actualizaci\u00f3n, es decir, se incrementa en 1 la variable\u00a0i,\u00a0i = i+1.<\/li>\n<li>Se realiza la comprobaci\u00f3n de nuevo y sigue siendo verdadera, 1 es menor que 4.<\/li>\n<li>Se carga la imagen\u00a0imFile[1],\u00a0two.jpg, y se almacena en\u00a0im[1].<\/li>\n<li>Se ejecuta de nuevo la actualizaci\u00f3n.<\/li>\n<li>Este bucle itera hasta que la variable\u00a0i\u00a0es igual a 4, entonces la comprobaci\u00f3n ser\u00e1 falsa, 4 es no menor que 4.<\/li>\n<\/ul>\n<\/li>\n<li>En la funci\u00f3n\u00a0draw()\u00a0las cuatro im\u00e1genes se muestran en una cuadr\u00edcula.<\/li>\n<\/ul>\n<\/li>\n<li value=\"8\">\n<h3>M\u00faltiples im\u00e1genes<\/h3>\n<p>Puesto que el objetivo de este programa es crear un reloj, en este paso, mostrar\u00e1s las diferentes im\u00e1genes que usar\u00e1s despu\u00e9s para representar el tiempo.<\/p>\n<p>Descarga las im\u00e1genes que representan los n\u00fameros:\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-8\" rel=\"nofollow\">0<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-9\" rel=\"nofollow\">1<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-10\" rel=\"nofollow\">2<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-11\" rel=\"nofollow\">3<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-12\" rel=\"nofollow\">4<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-13\" rel=\"nofollow\">5<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-14\" rel=\"nofollow\">6<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-15\" rel=\"nofollow\">7<\/a>,\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-16\" rel=\"nofollow\">8<\/a>\u00a0y\u00a0<a href=\"http:\/\/verkstad.cc\/urler\/ctc-dld-b1-p-2-17\" rel=\"nofollow\">9<\/a>.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog6.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9197\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog6.jpg\" alt=\"\" width=\"883\" height=\"308\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog6.jpg 883w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog6-300x105.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog6-768x268.jpg 768w\" sizes=\"auto, (max-width: 883px) 100vw, 883px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>El programa muestra las im\u00e1genes de los n\u00fameros 0 al 9.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-9\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Se modifican los dos arrays para almacenar cada uno diez elementos.<\/li>\n<li>En la funci\u00f3n\u00a0setup(), se establece el tama\u00f1o de la ventana a 700 x 95 p\u00edxeles, para mostrar diez im\u00e1genes de 70 x 95 p\u00edxeles en fila .<\/li>\n<li>Un bucle for se ejecuta diez veces para cargar todos los archivos de las im\u00e1genes en el array\u00a0im.<\/li>\n<li>En la funci\u00f3n\u00a0draw()\u00a0otro bucle for se ejecuta diez veces para mostrar las im\u00e1genes:\n<ul>\n<li>En la primera iteraci\u00f3n, cuando la variable\u00a0i\u00a0es igual a 0, la imagen en\u00a0im[0]\u00a0se muestra con la esquina superior izquierda en las coordenadas (0,\u00a00), ya que\u00a070*0 = 0.<\/li>\n<li>En la segunda iteraci\u00f3n, cuando la variable\u00a0i\u00a0es igual a 1, la imagen en\u00a0img[1]\u00a0se muestra en las coordenadas (70,\u00a00), ya que\u00a070*1 = 70.<\/li>\n<li>Esto se ejecuta continuamente hasta que la variable\u00a0i\u00a0es igual a 10.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li value=\"9\">\n<h3>El Tiempo<\/h3>\n<p>En este paso mostrar\u00e1s la hora actual.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog7.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9198\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog7.jpg\" alt=\"\" width=\"880\" height=\"344\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog7.jpg 880w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog7-300x117.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog7-768x300.jpg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>El programa muestra dos im\u00e1genes basadas en la hora actual.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-10\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>hour(): Devuelve la hora actual como un n\u00famero entre 0 y 23.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>En la funci\u00f3n\u00a0setup()\u00a0se establece el tama\u00f1o de la ventana a 140 x 95 p\u00edxeles, para mostrar dos im\u00e1genes, una junto a la otra.<\/li>\n<li>En la funci\u00f3n\u00a0draw(), se declaran tres variables nuevas:\u00a0h,\u00a0h_dec\u00a0y\u00a0h_uni.\u00a0h\u00a0se emplea para almacenar la hora actual.\u00a0h_dec\u00a0y\u00a0h_uni\u00a0se emplean para acceder a las posiciones del array en el que est\u00e1n las im\u00e1genes que quieres mostrar.<\/li>\n<li>Cuando la hora actual es 14:30, se hacen los siguientes c\u00e1lculos:\n<ul>\n<li>h =\u00a0hour() = 14<\/li>\n<li>h_dec = int( h\/10 ) = int( 1.4 ) = 1<\/li>\n<li>h_uni = h-h_dec *10 = 14-1*10 = 14-10 = 4<\/li>\n<\/ul>\n<\/li>\n<li>Cuando la hora actual es 02:00 se hacen los siguientes c\u00e1lculos:\n<ul>\n<li>h = hour() = 2<\/li>\n<li>h_dec = int( 2\/10 ) = int( 0.2 ) = 0<\/li>\n<li>h_uni = h-h_dec *10 = 2-0*10 = 2-0 = 2<\/li>\n<\/ul>\n<\/li>\n<li>Se muestran las im\u00e1genes\u00a0im[h_dec]\u00a0y\u00a0im[h_uni]\u00a0una junto a la otra.<\/li>\n<\/ul>\n<\/li>\n<li value=\"10\">\n<h3>El reloj final<\/h3>\n<p>Este es el \u00faltimo paso del proyecto. En este paso a\u00f1adir\u00e1s los minutos y los segundos al reloj.<\/p>\n<div><a href=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog8.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9199\" src=\"http:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog8.jpg\" alt=\"\" width=\"884\" height=\"532\" srcset=\"https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog8.jpg 884w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog8-300x181.jpg 300w, https:\/\/agora.xtec.cat\/ieshugroger\/wp-content\/uploads\/usu596\/2017\/09\/prog8-768x462.jpg 768w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/a><\/div>\n<h4>Resultado<\/h4>\n<p>El programa muestra seis im\u00e1genes, basadas en el tiempo actual en horas, minutos y segundos.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/verkstad.cc\/urler\/ctc-ns-101g-01-02-11\" alt=\"\" width=\"580\" height=\"524\" \/><\/p>\n<h4>Comandos<\/h4>\n<ul>\n<li>minute(): devuelve los minutos actuales como un valor entre 0 y 59.<\/li>\n<li>second(): devuelve los segundos actuales como un valor entre 0 y 59.<\/li>\n<\/ul>\n<h4>C\u00f3mo funciona<\/h4>\n<ul>\n<li>Una vez que se muestra la hora en la funci\u00f3n\u00a0draw(), se declaran tres variables nuevas,\u00a0m,\u00a0m_decy\u00a0m_unit\u00a0para almacenar los minutos.<\/li>\n<li>Cuando la hora actual es 14:30, se hacen los siguientes c\u00e1lculos:\n<ul>\n<li>m = minute() = 30<\/li>\n<li>m_dec = int( m\/10 ) = int( 3 ) = 3<\/li>\n<li>m_uni = m-m_dec *10 = 30-3*10 = 30-30 = 0<\/li>\n<\/ul>\n<\/li>\n<li>Se muestran las im\u00e1genes\u00a0im[m_dec]\u00a0y\u00a0im[m_uni]\u00a0una junto a la otra, debajo de las im\u00e1genes de la hora.<\/li>\n<li>Se declaran tres variables nuevas,\u00a0s,\u00a0s_dec\u00a0y\u00a0s_uni, para almacenar los segundos.<\/li>\n<li>Se muestran las im\u00e1genes\u00a0im[s_dec]\u00a0y\u00a0im[s_uni]\u00a0una junto a la otra, debajo de las im\u00e1genes de los minutos.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h2>SIGUE EXPERIMENTANDO<\/h2>\n<ul>\n<li>Usando las mismas variables de sistema, crea un temporizador para la cocina, por ejemplo un reloj que cuente hacia atr\u00e1s con im\u00e1genes.<\/li>\n<li>Toma tus propias fotos de los d\u00edgitos y \u00fasalas en tu programa.<\/li>\n<\/ul>\n<\/div>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><a href=\"https:\/\/create.arduino.cc\/ctc\/101\/course\/view.php?id=257#section-1\">Reloj de Post-it<\/a><\/p>\n<ul>\n<li id=\"module-268\">\n<p>En este miniproyecto vas a crear un reloj donde los n\u00fameros estar\u00e1n hechos a partir de fotograf\u00edas de notas adhesivas o Post-it. Para ello, aprender\u00e1s a utilizar im\u00e1genes en tus programas y almacenarlas en\u00a0arrays\u00a0(luego entender\u00e1s lo que son). De nuevo, iremos&hellip;  <a href=\"https:\/\/agora.xtec.cat\/ieshugroger\/impulsem-la-robotica\/reloj-de-post-it\/\" title=\"Read Reloj de Post-it\">Llegeix m\u00e9s\u00bb<\/a><\/p>\n","protected":false},"author":3,"featured_media":9189,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[394],"tags":[],"class_list":["post-9188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-impulsem-la-robotica"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/comments?post=9188"}],"version-history":[{"count":3,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9188\/revisions"}],"predecessor-version":[{"id":9200,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/posts\/9188\/revisions\/9200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/media\/9189"}],"wp:attachment":[{"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/media?parent=9188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/categories?post=9188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agora.xtec.cat\/ieshugroger\/wp-json\/wp\/v2\/tags?post=9188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}