Taller REA con Scratch - Movimiento y Animación by julio cubillan

Agosto 2011-08-16 Versi贸n 1.0

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Contenido Contenido ................................................................................................ 2 Introducción. ............................................................................................ 3 Objetivos de la Actividad. ........................................................................ 3 Movimiento de los Objetos. ..................................................................... 3 Bloques de interés para los proyectos de esta Actividad. ...................... 5 Proyecto 1: Trazando Dibujos con los Objetos. ...................................... 9 Primer paso: Prepararse para programar. ........................................... 9 Segundo Paso: Definiendo las Variables. ..........................................11 Tercer Paso: Programando el objeto La Profe. .................................15 Cuarto Paso: Programando en Objeto Dibujador. .............................17 Otra Versión: Multihilos y mensajes entre objetos. ............................21 Proyecto 2: Animaciones. ......................................................................25 Primer Paso: Preparación de la animación. .......................................26 Segundo Paso: Programando la animación. .....................................28 Proyecto 3: Fecundación del Óvulo. .....................................................30 Primer Paso: Preparación para el Proyecto. .....................................31 Segundo Paso: Programando y Animando el Óvulo. ........................32 Tercer Paso: Programando y Animando el Esperma. .......................34 Consideraciones Finales acerca del proyecto. ..................................35 Sinopsis. ................................................................................................36 Anexo A – Polígonos Regulares y No Regulares .................................37

Julio C. Cubillán M.

Página 2 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Introducción. Este módulo está estructurado en dos etapas, en la primera se hará énfasis en cuanto al movimiento de los objetos utilizando sus coordenadas en los ejes cartesiano del escenario y los valores polares, distancia y dirección. En la segunda etapa estarán desarrollando animaciones de objetos, que combinándolas con los movimientos de los mismos proveerán un efecto de movimiento más completo. Desde el punto de vista de las técnicas de programación se estará introduciendo a la programación multi hilos y la interacción entre objetos.. También se ampliará el uso de bloques de control como los ciclos finitos e infinitos y la construcción de bloques de decisiones simples.

Objetivos de la Actividad. Elaborar proyectos donde se utilicen movimiento y animación de objetos.

Movimiento de los Objetos. Como es sabido, los objetos en Scratch pueden moverse arrastrándolos convenientemente con el ratón cuando no se está en el modo de pantalla completa (salvo algunas excepciones). Sin embargo para lograr movimiento de objetos mediante programas es necesario recurrir a los bloques respectivos y muy especialmente a los bloques de Movimiento. Para comprender exactamente el uso de estos bloques, es necesario entender las dos formas concurrentes de movimiento que se disponen para tal fin; estas son los ejes cartesianos y los movimientos polares (comandos de tortuga). El primero está basado en un Sistema de Ejes Cartesianos teniendo como origen el centro del Escenario, en el entorno del Scratch, es posible visualizar en todo momento la coordenada X y la coordenada Y del cursor, también las del objeto activo tal como se muestra en la Figura 4.1:

Julio C. Cubillán M.

Página 3 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Figura 4.1 – Sistema de ejes coordenados

Coordenadas del objeto activo

Coordenadas del cursor

De manera que la posición queda determinada por dos números que son el par de coordenadas o proyecciones del objeto sobre los ejes, en el caso del objeto (gato) su proyección sobre el eje X (horizontal) corresponde a 100, mientras que su proyección en el eje Y (vertical) corresponde a 101. Se dice entonces que el objeto está en las coordenadas x:100, y:101. Estos valores quedan reflejados automáticamente en el Área de Datos del Objeto Activo cada vez que es movido por el usuario o por algún programa. Igualmente, las coordenadas del cursor son registradas automáticamente, incluso cuando el cursor sale del área del escenario y pueden visualizarse en la esquina inferior derecha del escenario, siempre y cuando no esté activado el Modo de Pantalla Completa. Esto es útil cuando se están haciendo programas en los que es importante delimitar espacios en el escenario sobre los cuales se tomarán decisiones dentro del programa mismo. La otra forma de movimiento se basa en Coordenadas Polares: En este caso se recurre a la dirección del objeto (la cual está visible en el Área de Datos Julio C. Cubillán M.

Página 4 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

del Objeto Activo) y una distancia a recorrer en esa dirección y sentido, cabe destacar que cuando se mueve el objeto usando esta forma, sus coordenadas se actualizan automáticamente y viceversa. Es por eso que ambos sistemas de movimiento son concurrentes. En este orden de ideas, la dirección de cada objeto es relativa al centro del objeto donde 0 (cero) grados indica hacia arriba, girando en sentido de las agujas del reloj, 90 grados indica hacia la derecha, 180 grados indica hacia abajo, 270 hacia la izquierda. Girando en sentido inverso los valores son negativos. En el Área de Datos del Objeto Activo existen dos elementos que indican la dirección, este es el indicador gráfico de dirección del objeto (línea azul en el ícono del objeto) y el valor de dirección que se muestra: Figura 4.2 – Indicador Gráfico de Dirección

Indicador gráfico de dirección del objeto

El indicador gráfico de dirección puede arrastrarse para manipular la dirección del objeto (véase Figura 4.2).

Bloques de interés para los proyectos de esta Actividad. A continuación se describen en detalle cada uno de los bloques se utilizarán en los diferentes proyectos de esta actividad. Julio C. Cubillán M.

Página 5 de 37 02/01/2011

Taller Diseño de REA con Scratch. Bloque

Guía de Trabajo 04 Movimiento y Animación. Paleta

Movimiento

Control

Control Julio C. Cubillán M.

Descripción Mueve el objeto a las coordenadas X y Y especificadas en los espacios. Cuando se activa un objeto estos valores se actualizan en la paleta. Desplaza el objeto, a las coordenadas especificadas en el tiempo especificado. Mueve el objeto a la posición X especificada, respetando la posición en Y. Mueve el objeto a la posición Y especificada, respetando la posición en X. Incrementa la posición en X del objeto en la cantidad especificada (10 en este caso) Incrementa la posición en Y del objeto en la cantidad especificada (10 en este caso) Gira el objeto hasta colocarlo en la dirección especificada. ( en este caso 90 grados, mirando a la derecha) Gira el objeto a la derecha la cantidad de grados especificados. Colocando valores negativos se produce un giro en sentido contrario. Gira el objeto a la izquierda la cantidad de grados especificados. Colocando valores negativos se produce un giro en sentido contrario. Mueve el objeto 10 pasos (pixeles) hacia delante. Colocando números negativos se obtiene movimiento hacia atrás. Este bloque encabeza los programas o scripts que inician en el momento que se presiona la bandera verde. Evalúa la decisión que se coloque en el hexágono vacío y dependiendo del resultado, ejecuta los bloque encerrados en la sección “si” o en la sección “si no” Envía un mensaje predefinido a todos Página 6 de 37 02/01/2011

Taller Diseño de REA con Scratch. Bloque

Guía de Trabajo 04 Movimiento y Animación. Paleta

Control

Variables

Operadores

Julio C. Cubillán M.

Descripción los objetos del proyecto incluyendo el escenario Envía un mensaje predefinido a todos los objetos del proyecto incluyendo el escenario el programa es detenido en este punto hasta que se termine de ejecutar el programa que activa el mensaje enviado Este bloque se utiliza para encabezar programas que se ejecutarán al recibir un determinado mensaje proveniente de otro objeto. En este caso, cuando el objeto reciba el mensaje “cuadrado”, se ejecutarán todos los bloque que estén articulados a este bloque. Asigna un valor en la variable seleccionada. Presionando el triángulo invertido se despliegan todas las variables definidas y es posible seleccionar. Haciendo clic sobre el cuadro blanco, es posible cambiar el valor a asignar, el cual puede ser un número letras o combinaciones de estas. Este bloque incrementa el valor de la variable de acuerdo al valor colocado en el óvalo blanco, siempre y cuando el valor previo sea un numérico. En este caso, si el valor de la variable “aciertos” es 3, entonces almacenará en esta variable, el valor 4. Si el valor de la variable no es un número, entonces asume que el valor previo es cero almacenando en la variable el valor colocado en el óvalo blando. Bloque de decisión que se incrusta en algunos bloque de control. En los espacios vacíos pueden colocarse valores o variables que son comparados para arrojar un resultado que puede ser “cierto” o “falso”. En este caso sin el valor de la izquierda Página 7 de 37 02/01/2011

Taller Diseño de REA con Scratch. Bloque

Guía de Trabajo 04 Movimiento y Animación. Paleta

Operadores

Julio C. Cubillán M.

Descripción es igual que el valor de la derecha el resultado en “cierto”, en caso contrario es “falso” Bloque de decisión que se incrusta en algunos bloque de control. En los espacios vacíos pueden colocarse valores o variables que son comparados para arrojar un resultado que puede ser “cierto” o “falso”. En este caso sin el valor de la izquierda es menor que el valor de la derecha el resultado en “cierto”, en caso contrario es “falso” Bloque de decisión que se incrusta en algunos bloque de control. En los espacios vacíos pueden colocarse valores o variables que son comparados para arrojar un resultado que puede ser “cierto” o “falso”. En este caso sin el valor de la izquierda es mayor que el valor de la derecha el resultado en “cierto”, en caso contrario es “falso” Une dos valores o el contenido de dos variables.

Página 8 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Proyecto 1: Trazando Dibujos con los Objetos. En esta oportunidad vamos a realizar un proyecto donde un objeto que llamaremos dibujador, traza sobre el escenario una figura geométrica mientras personaje (womanwaving, en la carpeta people) pregunta por el nombre de la figura, realizará esto cinco veces con diferentes figuras y al final el personaje informará sobre los aciertos del usuario además de felicitar, si es propicio. Puedes descargar el ejecutable quefiguraes.exe, con la finalidad de familiarizarte con su funcionamiento. Los dos objetos (womanwaving y dibujador) estarán sincronizados mediante una variable global denominada “siguiente”. Un objeto (womanwaving) actualizará esta variable para indicar al otro objeto (dibujador) que dibuje la siguiente figura.

Primer paso: Prepararse para programar. Cree un proyecto nuevo, coloque el nombre que le parezca más apropiado, también es recomendable que escriba una breve descripción del proyecto y el autor en las “Notas del Proyecto” las cuales se posible encontrar en la función Archivo tal como se muestra a continuación (Figura 4.3): Figura 4.3 – Notas sobre el Proyecto

Julio C. Cubillán M.

Página 9 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Las notas del proyecto pueden utilizarse para colocar instrucciones, la descripción de sus variables, explicar algoritmos que puedan ser de difícil entendimiento. En fin cualquier nota que ayude a comprender mejor su proyecto y poder utilizarlo total o parcialmente (remezclar). Es importante en los entornos de programación desarrollar el hábito de documentar los programas, no solo por las razones antes descritas, también porque facilita el trabajo de mantenimiento de los programas, este hábito es característico de un Recurso Educativo Abierto. Ahora importe el fondo pizarra o simplemente dibújelo con el editor de gráficos del Scratch, el cual guarda mucha similitud en apariencia y funcionamiento con el Paint de Microsoft. Puede profundizar respecto al editor de gráficos del Scratch en el manual PROGRAMACIÓN CON SCRATCH CUADERNO DE TRABAJO PARA ESTUDIANTES página 25. Seguidamente, importe los objetos; el primero denominado womanwaving, en la carpeta people y cambie el nombre a “La Profe” (en adelante se estará haciendo referencia a este objeto con este nombre); el segundo denominado dibujador (puedes descargar el proyecto quefiguraes_base.sb, contiene el escenario y los dos objetos sin los programas). Al finalizar el proyecto debería tener el aspecto que se muestra en la Figura 4.4:

Julio C. Cubillán M.

Página 10 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Figura 4.4 – Preparando “que figura es”

Segundo Paso: Definiendo las Variables. El objeto La Profe estará encargado de hacer las preguntas, avisar al objeto dibujador cuándo trazar la figura correspondiente. Para lograr esto, se utilizará una variable denominada “siguiente” de carácter general (variables que pueden ser consultadas o actualizadas por programas desde cualquier objeto, incluyendo el escenario). También actualizará otra variable denominada “aciertos” la cual se incrementará cada vez que el usuario escriba correctamente lo que se le pregunta. Como se ha explicado anteriormente, las variables son espacios de memoria que maneja Scratch (y todos los lenguajes de programación) donde se pueden almacenar temporalmente valores de distinto tipo. Las variables en Scratch pueden crearse a voluntad y pueden ser de dos tipos: Locales, pueden utilizarse en el ámbito de un objeto o globales, las cuales pueden utilizarse desde cualquier objeto. En el escenario solo pueden crearse variables globales.

Julio C. Cubillán M.

Página 11 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

En este caso se crearán dos variables: siguiente de tipo global y aciertos de tipo local. Para tal fin es necesario hacer clic el botón variables de la paleta de bloques. Figura 4.5 – Definiendo Variables

Luego presiona el botón “nueva variable”. Inmediatamente aparecerá una ventana emergente tal como se muestra a continuación: Figura 4.6 – Nombre de la Variable

Escribe el nombre de la variable (siguiente) en el campo y como se mencionó selecciones la opción “Para todos los objetos”. Esto creará la variable de tipo global. Es de hacer notar que estas opciones no aparecen si se crea una

Julio C. Cubillán M.

Página 12 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

variable desde el escenario ya que en el escenario solo se crean variables de tipo global. La opción “para este objeto” se utiliza cuando la variable solo puede ser consultada o actualizada en el objeto en el se crea, Este es el caso de la variable aciertos la cual se utilizará para contabilizar las veces que se escribe correctamente la respuesta a lo que se pregunta. Una vez creada la primera variable, entonces aparecen los bloques que permiten la manipulación de las mismas, tal como se muestra en la Figura 4.7 – Bloques de las Variables: Figura 4.7 – Bloques de Variables

Pueden observarse los diferentes bloques en la paleta respectiva, la variable recién creada aparece en un óvalo naranja. También aparece un óvalo gris con el nombre de la variable y el valor que posee, en el escenario. Haciendo doble clic sobre éste óvalo pueden visualizarse sus diferentes presentaciones:

La primera es la imagen normal de la variable que muestra el nombre y el valor. La siguiente incluye un deslizador el cual puede manipularse con el Mouse para modificar el valor de la variable. Finalmente el tercera presentación solo incluye el valor de la variable.

Julio C. Cubillán M.

Página 13 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Adicionalmente es posible hacer clic derecho sobre el óvalo, en cuyo caso se desplegará una pequeña ventana de opciones donde es posible escoger la presentación más adecuada para sus propósitos incluyendo la opción “esconder” la cual oculta la variable del escenario tal como se muestra en la Figura 4.8: Figura 4.8 – Mostrando la Variable

Otra forma de esconder la variable del escenario es haciendo clic sobre el cuadro de tilde que aparece al lado de la variable en la paleta de bloques.

Julio C. Cubillán M.

Página 14 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Figura 4.9 Bloques de Variables

Guía de Trabajo 04 Movimiento y Animación.

Después de haber creado las dos variables del objeto La Profe y haberlas ocultado del escenario, la paleta de variables debe lucir como se muestra en la figura contigua. Es de hacer notar que las variables globales aparecen separadas de las variables locales, las variables globales primero, una línea de separación y luego las variables locales con el resto de los bloque de la paleta. Las variables creadas pueden arrastrarse para formar parte de otros bloques donde se requiera especificar su contenido y respecto a los bloques estos serán descritos en detalle en la medida que vayan utilizando.

Tercer Paso: Programando el objeto La Profe. En este nivel todo está dispuesto para comenzar a programar este objeto, como puede observarse en el proyecto de referencia (quefiguraes.exe). El objeto la La Profe, hace 5 preguntas y responde dependiendo de, si la respuesta del usuario concuerda con el nombre de la figura de manera que el código estará compuesto inicialmente por cinco grupos de bloque, uno para cada pregunta. Para realizar este programa se necesitarán los que se muestran en la Figura 4.10: Figura 4.10 – Bloques Necesarios para Programar

Julio C. Cubillán M.

Página 15 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

A continuación se explica el programa inicial, el cual será repetido tantas veces como preguntas haga el objeto La Profe con las modificaciones a que corresponda las particularidades de cada pregunta: El primer bloque “al presionar bandera verde”,

utiliza

para

programa.

Los

“”fijar

inicializan

a”,

siguientes las

iniciar

Figura 4.11 Fragmento de Programa de La Profe

bloques variables

respectivas con el valor cero (0).

bloque “preguntar y esperar” despliega la pregunta “Qué figura es esta?” y espera por la respuesta. El bloque “si sino” compara la respuesta con la palabra “triangulo”, si son iguales entonces, desplegará “bien.” Por 2 segundos y e incrementará la variable “aciertos en uno (1)”. En caso contrario, desplegará “No… es un TRIÁNGULO”. Finalmente, se coloca el valor uno (1) en la variable siguiente, al cambiar este valor, el objeto dibujador debe trazar la figura siguiente. El resto del código consistirá en repetir el código anterior (con excepción de los dos primero bloques “fijar a”, cambiando el valor a comparar por “cuadrado” “pentágono”, etc. También deberá cambiar el valor a asignar en la variable siguiente, al final del código para indicar al objeto dibujador la figura a trazar, de Manera que al asignar 1 a la variable siguiente, el objeto dibujador trace un cuadrado,

al asignar 2 a la variable siguiente, el objeto dibujador trace un

pentágono y así sucesivamente. Recuerda que al finalizar, el objeto La Profe deberá informar sobre los aciertos y felicitar, si es necesario. Se deja al participante el desarrollo de dicho código, el cual puede verificar descargando el proyecto quefiguraes.sb. Julio C. Cubillán M.

Página 16 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Cuarto Paso: Programando en Objeto Dibujador. El dibujador tendrá como función dibujar las figuras geométricas en la medida que se vayan requiriendo, esto se determinará mediante la variable siguiente al presionar la bandera verde, deberá dibujar un triángulo para ese momento el valor de la variable es cero (0). Al cambiar el valor de la variable siguiente a uno (1) debe dibujar un cuadrado; al cambiar a dos (2) deberá realizar un hexágono; cuando sea tres (3) un rectángulo y cuando sea cuatro (4) deberá dibujar un pentágono, un octágono y un heptágono. Los dibujos se realizarán con una combinación de bloque de movimiento y lápiz, mientras que la espera mientras cambia la variable siguiente se realizará mediante el bloque de control “esperar hasta que”. La figura 4.12 muestra los bloques a utilizar en este script: Figura 4.12– Bloques Necesarios para Programar el Dibujador

Todos los objetos pueden dejar un trazo en el escenario, el cual puede modificarse en color, grosor e intensidad. Utilizando estas funcionalidades, el objeto dibujador, trazará las diferentes figuras recorriendo el escenario. Las mencionadas funciones se asocian con la idea de un lápiz. Por defecto el lápiz está desactivado, es decir el lápiz está arriba, para activarlo es necesario “bajar el lápiz”. Para conducir el objeto con la dirección y distancia adecuada, se utilizarán los bloque “mover” y “girar grados”, eventualmente también habrá que utilizar el bloque “ir a X Y” y “apuntar en dirección” para ubicar el dibujador en las posiciones adecuadas para realizar las figuras. Los bloques para inicializar el programa se muestran en la Figura 4.13: Julio C. Cubillán M.

Página 17 de 37 02/01/2011

Taller Diseño de REA con Scratch. Figura 4.13 Inicializando el Programa del Dibujado

Guía de Trabajo 04 Movimiento y Animación. La posición inicial de la mayoría de las figuras es el origen del sistema de coordenadas (0,0) por eso el primer bloque “ir a X Y” contiene tales coordenadas. Luego se borra el escenario de cualquier trazo, es necesario “fijar el tamaño del lápiz a” 2, seguidamente se fija la dirección del objeto hacia arriba (“apuntar en dirección” ), este valor puede actualizarse haciendo clic sobre el triángulo invertido del bloque y se desplegará una ventana con los 4 valores por

defecto: Derecha (90), izquierda (-90), Arriba (0), Abajo (180). También es posible hacer clic sobre el valor y digitar un valor diferente. Finalmente el bloque “fijar color de lápiz a”. Haciendo clic sobre el cuadro de

Figura 4.14 Cambiando el Color del Lápiz

color del bloque, el cursor cambia a la forma de un gotero con lo que es posible hacer clic sobre el color de su preferencia

para

seleccionarlo

cualquier parte del escenario. Pero si no está el color deseado, también aparece un arco iris con todos los colores disponibles para ser seleccionados por el gotero, tal como se muestra en la Figura 4.14 – Cambiando el color del lápiz. Cualquier bloque relacionado que contenga un cuadrado para seleccionar colores, desplegará el arco iris al hacer clic sobre el, activando la función de seleccionar color (gotero) en el cursor.

Julio C. Cubillán M.

Página 18 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Figura 4.15 El Triángulo y sus Medidas

Guía de Trabajo 04 Movimiento y Animación.

A continuación, sigue, el trazo del triángulo, de manera que es necesario “bajar lápiz”

y mover el dibujador 100

pasos hacia delante para hacer el primer lado, luego girar 120 grados hacia la derecha, y dejarlo en posición para trazar el siguiente lado. Cada trazo se realiza con un bloque “mover 100 pasos” y “girar 120 grados”, se necesitan entonces otras dos secuencias

“mover”

“girar”

para

completar la figura. La figura 4.15 muestra en azul el trazo y en rojo las medidas de longitud y giro requeridas para dibujar un triángulo. Es decir, para que el triángulo quede dibujado en el escenario, es necesario agregar al final del fragmento programa anterior (el que aparece en las Figuras 4.13 y 4.15) lo siguiente:

O bien:

Los dos grupos de bloques anteriores, realizan el mismo trabajo, el de la derecha, simplifica el código mediante el uso del bloque “repetir” en cuyo interior se encuentran los bloques que se repiten, o sea, “mover 100 pasos” y “girar 120 grados”, los cuales se repiten tres (3) veces. Tal vez, con este ejemplo no se distinga la diferencia porque solo son tres lados pero cuando se trata de más lados, si es conveniente el uso de este bloque de control.

Julio C. Cubillán M.

Página 19 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Hasta ahora el programa (código) debería quedar Figura 4.16

como

se muestra en la figura 4.16. En este punto el

programa debería esperar hasta que la variable siguiente cambien su valor a uno (1), de manera que es necesario incluir un bloque “esperar hasta que” con la condición adecuada con los bloques “igual que” y la variable siguiente. La figura 4.17 ilustra la forma de construir la condición necesaria para incrustarla en el bloque “esperar hasta que”. Basta con arrastrar los bloques y armarlos en el orden correcto. A continuación es necesario borrar los trazos previos para dibujar un cuadrado, en este caso es necesario que el objeto dibujador recorra 100 pasos y gire 90 grados para hacer un lado. Con los bloques “mover 100 pasos” y “girar 90 grados”. Estos bloques deberán entonces repetirse cuatro (4) veces para completar el cuadrado. Para luego esperar a que la

Figura 4.17 – Construyendo una Condición

variable siguiente asuma el valor dos (2). La siguiente figura

dibujar

hexágono, pero antes es necesario borrar los trazos anteriores. El hexágono se traza de manera similar a los polígonos

regulares

anteriores, el tamaño del lado debe ser menor a 100 pasos para que no se salga de la pizarra (se

Julio C. Cubillán M.

Página 20 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

recomienda 50 pasos), respecto al giro, debe ser de 60 grados. Existe una regla para determinar el ángulo que consiste en dividir 360 entre la cantidad de lados del polígono regular. En el caso del hexágono por ejemplo, se divide 360 entre seis (6) lados que tiene el hexágono para obtener 60 grados como resultado. Esta regla será de utilidad para dibujar el heptágono (7 lados) y el octágono (8 lados) como parte del programa completo del objeto dibujador. Puede consultarse adicionalmente el Anexo A – Polígonos Regulares y No Regulares donde se muestran tales figuras con sus respectivas dimensiones. Se deja al lector el completar el programa, y para verificar puede comparar sus programas con los del proyecto de referencias quefiguraes.sb

Otra Versión: Multihilos y mensajes entre objetos. Cuando se trata de lenguajes de programación, siempre existe otras formas de hacer las cosas, vamos a aprovechar esto para introducir a los conceptos de Multihilos y mensajes entre objetos. La programación multihilos consiste en la presencia de dos o más programas en un objeto que pueden ejecutarse simultáneamente, en secuencia o en una combinación de las dos. En este sentido el programa del objeto dibujador se dividirá en vario programas y cada uno se ejecutará cuando el objeto reciba determinado mensaje del objeto La Profe, es decir que se definirá un mensaje para cada programa. De esta manera, cuando el objeto La Profe, envíe el mensaje “cuadrado” entonces el objeto dibujador, trazará un cuadrado en el escenario; cuando el objeto La Profe envíe el mensaje “triangulo” entonces el objeto dibujador trazará un triángulo en el escenario. El separar los programas del objeto dibujador de esta manera, permite que otros objetos utilicen los programas que tiene este objeto de manera independiente, esto responde a los criterios de modularidad y reuso del código de algunas metodologías de programación como la Programación Orientada a Objetos (POO). Los bloques nuevos a utilizar en esta sección son:

Julio C. Cubillán M.

Página 21 de 37 02/01/2011

Taller Diseño de REA con Scratch. Bloque

Paleta Control

Control

Guía de Trabajo 04 Movimiento y Animación. Descripción Envía un mensaje a todos los objetos del proyecto y continua con la ejecución del programa. Encabeza los programas que serán ejecutados cuando se reciba determinado mensaje. Cuando se crea un proyecto nuevo,

Figura 4.18 – Mensajes entre objetos

no hay mensajes disponibles es por esto que los bloques “enviar a todos”, “enviar a todos

esperar”

“recibir”

solo

muestran un triangulo invertido, en caso contrario; si se abre un proyecto que donde se hayan definido previamente mensajes entre objetos, podrá observar el primer mensaje en los bloques antes mencionados

mismo

triángulo

invertido. En todo caso, es posible crear

nuevos mensajes haciendo clic es el

triángulo invertido, Inmediatamente se desplegará una lista de selección con todos los mensajes creados y la palabra Figura 4.19 – Creación de Mensajes

“nuevo…”

este

momento

puede

seleccionarse el mensaje con el que se desea relacionar e bloque en cuestión. Pero si se desea crear un mensaje, se selecciona la opción “nuevo…” para desplegar la ventan de creación de mensajes tal como se muestra en la figura 4.19. Digitando el nombre del mensaje nuevo y presionando el botón identificado como “Aceptar” , el mensaje quedará creado y disponible para utilizarse en el proyecto. Julio C. Cubillán M.

Página 22 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

De acuerdo a lo anterior, es posible entonces crear varios programas en el objeto dibujador, cada uno de los cuales realiza el trazo de una figura diferente. Cada programa estaría encabezado por un bloque “al recibir” (

), Por su

parte el objeto La Profe, en vez de actualizar la variable siguiente, envía los mensajes utilizando el boque “enviar a todos”(

Los programas

quedarían distribuidos de cómo se muestra en la Figura 4.20. La Profe

Julio C. Cubillán M.

Figura 4.20 – Programas multihilos Dibujador

Página 23 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Naturalmente, este ejemplo tiene fines didácticos por lo que no tiene que ser corto ni elegante, pero si es necesario tratar de minimizar la cantidad de bloques de un programa en scratch ya que no está diseñado para hacer programas largos. En este orden de ideas, al analizar los programas del dibujador es posible, simplificar algunos de ellos. Por ejemplo los programas triángulo, cuadrado, pentágono, hexágono, heptágono y octágono pueden sustituirse por uno solo donde solo se varía la cantidad de lados, los cuales pueden estar almacenados en una variable global. Dejo al lector este reto y el proyecto quefiguraes1.sb, bajo el entendido que es solo una solución del problema propuesto y que con las listas pueden mejorar sustancialmente el algoritmo.

Julio C. Cubillán M.

Página 24 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Proyecto 2: Animaciones. Las cámaras para grabar movimiento toman fotografías a una velocidad tal que la diferencia en tiempo entre foto y foto es mínima. Para reproducir las imágenes en movimiento, se proyectan en la misma

secuencia

a la misma

velocidad. La cantidad de fotos por segundo (frecuencia) debe ser al menos unas 10 imágenes por segundo para que la transición son sea perceptible. Este mismo principio se utiliza universalmente para todo lo que son animaciones digitales y no digitales. Scratch es este sentido cuenta con los disfraces para realizar animaciones. Todo objeto tiene una imagen visible, sin embargo puede tener asociadas todas las que permita la memoria del computador, aunque solo se mostrará una a la vez. Estas imágenes se conocen como disfraces. En la figura 4.21 se muestran los elementos que se utilizan para gestionar los disfraces a los cuales se tiene acceso presionando la pestaña Disfraces del objeto activo. Como Figura 4.21 - Disfraces

puede

observarse

en la

Figura 4.21, los tres (3) botones superiores permiten Pintar, Importar o capturar un disfraz con la Cámara. En el primer caso, Pintar, se despliega el editor de gráficos de Scratch con el cual será posible crear un disfraz nuevo. Puede profundizar respecto al

editor de gráficos del Scratch en el

manual

PROGRAMACIÓN

CON

SCRATCH CUADERNO DE TRABAJO PARA ESTUDIANTES página 25. En el segundo caso, Importar, se desplegará la ventana la ventana de importar disfraz, donde podrá escoger entre la gama de imágenes de la biblioteca de Scratch, o cualquier otra imagen en formatos gif, tif, png, jpg o bmp para que Julio C. Cubillán M.

Página 25 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

forme parte del disfraz de su objeto. Finalmente puede utilizarse Cámara para capturar imágenes utilizando la cámara web del computador. En todo caso los disfraces se van acumulando uno tras otro asignándole automáticamente un número correlativo. Los nombres de los disfraces pueden cambiarse haciendo clic en el nombre respectivo. También es posible arrastrar los disfraces al lugar de la lista que se considere más apropiado. Puede notarse también la presencia de tres (3) botones al lado de cada disfraz: Editar, Copiar y Eliminar (X). El Primero (Editar) despliega el editor de disfraces para poder modificar la apariencia del disfraz, el segundo (Copiar) hace una copia idéntica del disfraz y lo coloca al final de la lista. Finalmente el tercero (Eliminar) (X) elimina el disfraz en cuestión SIN MEDIAR PALABRA, de manera que tenga cuidado con este botón. Con lo anterior es posible gestionar todo lo relacionado con los disfraces para lograr la secuencia de disfraces adecuada para la animación, pero a nivel de programa, es necesario conocer algunos bloques con los que se controlará la visualización de los disfraces para lograr el efecto de animación. Para introducir el tema tomaremos como base ejercicio 2 (diálogo2.sb) y se incluirá un personaje nuevo (el cuarto personaje): un sujeto que, deseoso de averiguar sobre la conversación camina de un lado a otro para ver si se entera. En primer lugar abriremos el proyecto dialogo2.sb y lo guardaremos como dialogo4.sb. Esto nos permite conservar el proyecto original y se trabajará sobre el nuevo.

Primer Paso: Preparación de la animación. El personaje en cuestión está en la librería de imágenes del scratch denominada people y el objeto se llama boy4-walking-a, nótese que existen también boy4-walking-b, boy4-walking-c, boy4-walking-d y boy4-walking-e., que corresponden al mismo personaje en posiciones consecutivas de su caminata. La idea es cargar todos estos objetos como disfraces para utilizarlos en la animación.

Julio C. Cubillán M.

Página 26 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Después de habilitar el objeto boy4-walking-a, le cambiamos el nombre a averiguador, en adelante se hará referencia a este objeto con este nombre. Ubique el objeto como se muestra en la Figura 4.22. Figura 4.22 – Ubicación del Averiguador

Seguidamente, haga clic sobre el objeto averiguador en la lista de objetos, luego haga clic sobre la pestaña disfraces, Normalmente la pestaña que está activa es la de Programas, Scratch suele recordar la última pestaña utilizada para cada objeto. Para agregar los objetos boy4-walking-b, boy4-walking-c, boy4walking-d y boy4-walking-e. presione el botón Importar, con el cual se desplegará la ventana de importar disfraces. Tal como se muestra en la Figura 4.23. Repita el procedimiento hasta completar los cinco disfraces. Es importante que los disfraces estén en la secuencia adecuada para que la animación resulte lo más natural

Julio C. Cubillán M.

Página 27 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

posible, de manera que si existen disfraces fuera de secuencia, puede arrastrarlos a su sitio. Figura 4.23 – Disfraces del Averiguador.

Segundo Paso: Programando la animación. La programación del objeto se simplifica bastante si los disfraces están ordenados en la secuencia adecuada, le invito realizar el programa. Le recomiendo que tome en cuenta los estilos de giro de los objetos, recurso muy útil para realizar animaciones y que explico a continuación: Cuando los objetos giran, por defecto, el disfraz activo se adapta a la dirección que asume el objeto. Esto puede ser modificado con los Estilos de Giro: Giro habilitado( ): el objeto cambia su forma de acuerdo a la dirección que tenga; Giro Izquierda – Derecha (

): El objeto solo

asume la forma respectiva como si estuviese en dirección a la derecha (90 grados) o a la izquierda (-90 grados) dependiendo si tiende hacia la izquierda o la derecha; Sin Giro(

), el objeto no cambia de forma sin importar la dirección que asuma.

Para los efectos el estilo de giro adecuado para este objeto debe ser Giro Izquierda

Julio C. Cubillán M.

Página 28 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

– Derecha. Puede hacer la prueba fijando diferentes estilos de giro para observar los efectos que tiene. Figura 4.24 – Estilos de Giro

Otro aspecto importante a tomar en cuenta son los bloques que controlan los disfraces, en este caso deben ser utilizados 2 de ellos: Bloque

Paleta

Descripción.

Apariencia

Este bloque cambia el disfraz activo por el indicado. El nombre del disfraz puede ser cambiado haciendo clic sobre el triángulo negro que está al lado del nombre del disfraz (▼). En lugar del nombre también puede haber una variable que contenga el número del disfraz a activar.

Apariencia

Este bloque activa el siguiente disfraz de la lista. Si el disfraz activo es el número 2 de la lista, este bloque activará el 3; si es el último, entonces activará el primero de la lista.

Puede descargar el proyecto diálogo3.sp para verificar el programa respectivo y compararlo con el realizado por usted.

Julio C. Cubillán M.

Página 29 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Proyecto 3: Fecundación del Óvulo. Con este proyecto se pondrán en práctica una buena parte de las técnicas de animación con Scratch para lo cual será necesario conocer algunos bloques nuevos de control y de sensores. Para iniciar le invito a familiarizarse con el proyecto, antes de comenzar la explicación descargando fecundacion.sb o fecundacion.exe. Una de las técnicas que se utilizará, denomina clonación y consiste en realizar un programa en un objeto que a pesar de que el programa es el mismo, el comportamiento del objeto es muy particular en cada clon. Es el caso de los espermatozoides del proyecto, solo se programó uno que llamó esperma y luego se copia repetidas veces. Por su puesto hay un espermatozoide que, aunque tiene la misma apariencia de los demás, es el que fecunda el óvulo y se denomina fecundador en el proyecto. Finalmente está el óvulo. Estos tres objetos deben ser programados para moverse y animarse. Existe un cuarto objeto que presenta los mensajes explicativos y se denomina texto, el resto de los objetos son clones del objeto esperma. A continuación los bloque de interés para este proyecto: Bloque

Paleta

Operadores

Control

Sensores

Julio C. Cubillán M.

Descripción Genera un número aleatorio entre los dos valores que aparecen en los óvalos blancos. Estos números pueden cambiarse a voluntad, pueden ser negativos. Se utiliza en combinación con otros bloques que requieren un valor numérico. Permite incrustar una lista de bloques en su interior que se repetirán hasta que se cumpla la condición colocada en el hexágono vacío. La condición deberá construirse con los bloques de decisión (hexágonos) que se encuentran en las paletas de Operadores y Sensores. Bloque de decisión que se incrusta en algunos bloque de control. Haciendo clic en el triángulo negro (▼), puede Página 30 de 37 02/01/2011

Taller Diseño de REA con Scratch. Bloque

Guía de Trabajo 04 Movimiento y Animación. Paleta

Sensores

Movimiento

Descripción seleccionarse alguno de los objetos definidos en el proyecto. Cuando el objeto que contiene este bloque está tocando el objeto especificado con el triángulo negro, arroja un resultado “cierto” y “falso” en caso contrario. Bloque de decisión que se incrusta en algunos bloque de control. Cuando el objeto que contiene este bloque está tocando el color especificado con el cuadro, arroja un resultado “cierto” y “falso” en caso contrario. Haciendo clic sobre el cuadro de color del bloque, el cursor cambia a la forma de un gotero con lo que es posible hacer clic sobre el color de su preferencia para seleccionarlo de cualquier parte del escenario. Pero si no está el color deseado, también aparece un arco iris con todos los colores disponibles. Permite que un objeto tenga acceso a algún valor de algún atributo de otro objeto. Haciendo clic en el segundo triángulo negro (▼), puede seleccionarse el objeto que se desea y presionando el primer triángulo negro (▼) se selecciona el atributo. En el ejemplo, el bloque traerá el número del disfraz activo del objeto denominado ovulo. Haciendo clic en el triángulo negro (▼), puede seleccionarse alguno de los objetos definidos en el proyecto. Y su efecto es que deja el objeto que lo contiene en dirección hacia el objeto especificado con el triángulo negro.

Primer Paso: Preparación para el Proyecto. Antes de comenzar con la creación y programación de los objetos, repase la teoría sobre la fecundación del óvulo humano y prepara el escenario convenientemente utilizando el editor de dibujos. El editor de dibujos de Scratch es

Julio C. Cubillán M.

Página 31 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

bastante intuitivo, es muy similar a la herramienta Paint que viene con el ambiente operativo Windows, si necesita más orientaciones respecto al uso

Segundo Paso: Programando y Animando el Óvulo. Figura 4.25 Disfraces del Ovulo

En primer lugar es necesario definir la secuencia de imágenes que producen la transformación del óvulo en zigoto para comenzar a dividirse (mitosis). La siguiente técnica de animación consiste en iniciar con una

imagen

básica,

copiarla,

cambios en la copia, copiar

introducir

pequeños

la copia (valga la

redundancia) antes modificada para introducir nuevos cambios y así sucesivamente hasta obtener la imagen final. Como puede apreciarse en la Figura 4.25, que la primera

imagen,

identificada

con

número

denominada “sin fecundar” es la primera en dibujarse. Esta se copia produciendo la imagen 2, denominada “fecundada” La modificación consistió en incluir el núcleo del espermatozoide que fecunda al óvulo (óvalo verde). Es de hacer notar que este está ubicado sobre el eje de 0 grados del óvulo (véase el indicador de dirección del objeto en el área de datos del mismo), de manera que al apuntar en dirección del objeto fecundador produzca el efecto de penetración y desprendimiento de la cola. La activación de esta imagen deberá estar coordinada con la desaparición del objeto fecundador, pero eso se resuelve con los programas que se realizarán en cada objeto y se discutirán posteriormente. El resto de las imágenes corresponde a la secuencia de transformación del óvulo fecundado en zigoto, la imagen 3 (fecundado1) se obtiene copiando la Julio C. Cubillán M.

Página 32 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

imagen 2 y moviendo el óvalo verde hacia el núcleo de óvulo con las herramientas disponibles en el editor de gráficos. El resto de las imágenes se producen de manera similar. Entre más disfraces se produzcan con diferencias pequeñas entre uno y otro, más natural será la animación. El programa realizado para el óvulo se presenta en la Figura 4.26 y se explica a continuación, es recomendable repasar la descripción de los bloques necesario para esta práctica que está al comienzo de esta sección. Figura 4.26 Programa del Óvulo

Los primero cinco (5) bloques establecen las condiciones iniciales del objeto. Nótese que los bloques “Fijar x a” y “Fijar y a” tiene incrustados bloques “número al azar”. Esto permite que la posición del óvulo sea

diferente

restringida

cada a

los

vez,

pero rangos

especificados. Seguidamente hay un bloque “repetir hasta que” el cual produce el movimiento lento del óvulo. Nótese que este bloque tiene incrustado un bloque sensor “tocando fecundador” con el cual se detecta el contacto con este objeto, para detener el ciclo y continuar. Al salir de este ciclo envía el mensaje “siguiente” el cual es recibido por el objeto texto para que coloque el texto adecuado. Espera 1 segundo para entrar el ciclo “repetir” que produce la animación de transformación del óvulo en zigoto. Al salir de este ciclo, envía el mensaje “siguiente” el cual es recibido por el objeto texto para que coloque el texto pertinente.

Julio C. Cubillán M.

Página 33 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Tercer Paso: Programando y Animando el Esperma. El objeto esperma, después de programado, será clonado tantas veces como se desee (10 veces es un buen número). El código se explica a continuación: Figura 4.27 – Programa de Esperma

Los

primero

bloques

tres

establecen

(3) las

condiciones iniciales del objeto. Nótese que los bloques “Fijar x a” y “Fijar y a” tiene incrustados bloques “número al azar”. Esto permite que la posición del espermatozoide

sea

diferente

cada vez y en cada uno de sus clones. Seguidamente

hay

bloque “repetir hasta que” el cual produce

movimiento

animación del objeto. Nótese que este bloque tiene incrustado un bloque sensor “# de disfraz de ovulo” (bloque de sensores valor de objeto) con el cual se detecta cuando el óvulo es fecundado, para detener el ciclo y continuar. Dentro de este ciclo destacan el bloque “apuntar hacia” con el cual se mantiene el objeto, en dirección al óvulo. El otro bloque: “si” que detecta la pared celular del óvulo y anula el avance con el bloque “mover”. El siguiente ciclo “repetir”, mantiene la actividad del espermatozoide un tiempo después de la fecundación para luego desaparecer. La programación del objeto fecundador, se deja como ejercicio al lector, el cual es similar al del anterior, puede descargar el proyecto fecundación.sb para compara el programa realizado con el del ejemplo.

Julio C. Cubillán M.

Página 34 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Consideraciones Finales acerca del proyecto. Los programas presentados aun cuando funcionan pueden mejorarse mucho, tanto en algoritmo como en estilo, por ejemplo en el programa de la Figura 4.27, dentro del ciclo “repetir hasta que” lo lógico es que primero se ubique el objeto en dirección al óvulo “apuntar hacia” para luego avanzar; allí está al revés. Por otro lado las buenas prácticas establecen que debería separarse la programación de movimiento y animación en hilos diferentes. Otras mejoras, ya más orientadas a mejorar la animación, consisten en: 1. Los espermatozoides (incluyendo el fecundador) podrían aparecer en un área cerca de la entrada de la trompa de Falopio (zona derecha del escenario)

para

dar la impresión

de flujo.

(la

aparición

los

espermatozoides puede ser aleatoria también). 2. El período de muerte de los espermatozoides puede ser aleatoria. 3. La muerte de los espermatozoides puede mejorarse con un efecto de desvanecimiento. 4. Puede mejorarse la animación del óvulo hasta llegar a 32 células o más. 5. Pueden agregarse otros escenarios para simular el descenso del zigoto a la matriz y su implantación en el endometrio. Agregando naturalmente los textos explicativos respectivos. 6. Introduzca preguntas y puntuación para convertirlo en un proyecto interactivo. Se invita al lector a abordar estas mejoras sobre el ejercicio propuesto, algunas de estas mejoras se pueden observar en el proyecto fecundación1. Para finalizar lo recomendable es que este ejercicio sea realizado por estudiantes como un proyecto complementario de la materia de biología o ciencias naturales y el docente sea el orientador del proceso (esto le conferiría significancia

Julio C. Cubillán M.

Página 35 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

al proceso de aprendizaje) , de cualquier manera resulta muy bien como REA que pueda complementar otros contenidos en línea o fuera de línea.

Sinopsis. Scratch cuenta con dos sistemas de localización de objetos sobre el escenario, El primero está basado en un Sistema de Ejes Cartesianos teniendo como origen el centro del Escenario, la posición del los objetos queda determinada por dos números que son el par de coordenadas o proyecciones del objeto sobre los ejes. La otra forma de movimiento se basa en Coordenadas Polares: En este caso se recurre a la dirección del objeto (la cual está visible en el Área de Datos del Objeto Activo) y una distancia a recorrer en esa dirección y sentido. Ambos sistemas son concurrentes y existen bloques para mover los objetos utilizando sistemas estos bloques están concentrados en la paleta Movimiento. También se introdujo al concepto de interactividad el cual consiste en que el programa solicita información al usuario y puede actuar dependiendo de las respuestas del mismo utilizando bloque de control y decisiones. El primer proyecto, quefiguraes.sb, utiliza las definiciones anteriores para dibujar figuras en el escenario e invitar al usuario a identificarlas. Se utilizan ciclos de control definidos (repetir) para dibujar polígonos regulares. En este proyecto se introduce también al uso de variables locales y generales y como gestionarlas en scratch, al igual que la programación multihilo. En el segundo proyecto se introduce a los principios de animación mediante el uso de los disfraces. Se abordan las técnicas de dibujo cuadro a cuadro basado en el anterior y los estilos de giro de los objetos. En el tercer y último proyecto se introduce a los números aleatorios, ciclos controlados, interacción entre objetos mediante los bloques sensores recursos que se conjugan con la técnica de clonado para optimizar el desarrollo del proyecto.

Julio C. Cubillán M.

Página 36 de 37 02/01/2011

Taller Diseño de REA con Scratch.

Guía de Trabajo 04 Movimiento y Animación.

Anexo A – Polígonos Regulares y No Regulares

Julio C. Cubillán M.

Página 37 de 37 02/01/2011