jueves, 27 de noviembre de 2014

Seguimos pintando


En esta sesión nos planteamos continuar con la herramienta lápiz. El proyecto consiste en crear un lápiz que el usuario pueda manejar libremente y dibujar lo que quiera.
Como siempre creamos un nuevo proyecto y borramos al gato de Scratch que aparece por defecto, nos situamos en el objeto y con el botón derecho del ratón accedemos al menú donde podemos borrar. Añadimos un nuevo objeto de la biblioteca de Scratch, buscamos el lápiz y lo añadimos a nuestro proyecto. Este será nuestro protagonista de hoy.


Queremos que el usuario pueda pintar con este objeto en cualquier punto del escenario utilizando el ratón, por tanto el primer paso que damos es decirle al lápiz que siga al cursor por siempre.


Al probar el programa observamos que el lápiz sigue al cursor pero no como queremos...hay que modificar el centro del objeto para que sea la punta del lápiz. Mirar vídeo.
Dentro de la pestaña disfraces, en el editor de dibujo hacemos clic en el botón superior derecho y clic en la punta del lápiz para que sea este el centro del objeto.

El centro del objeto es muy importante pues cuando movemos el objeto al punto (x,y) es el centro del objeto el que se coloca en ese punto. También es muy importante en los giros que hacemos al objeto, pues es el centro del giro.
Ahora queremos que pinte cuando hagamos clic en el ratón, para ello deberemos utilizar un bloque de la categoría sensores: ¿ratón presionado?. Si el ratón está presionado bajamos lápiz y si no lo subimos para que deje de pintar cuando dejemos de presionar el ratón. Probamos este código.


Perfecto, ya podemos pintar. ¿Y si queremos borrar?...utilizamos el teclado, por ejemplo que sea la tecla espacio la que borre todo el escenario.


Ahora queremos que nuestro lápiz pueda cambiar de color, vamos a elegir diferentes colores y diferentes teclas que serán las que cambien el color del lápiz; pero antes veamos cuántos colores tiene Scratch y qué número corresponde a cada color. En la wiki de ayuda podéis buscar la información sobre todo lo referente al color.
Hay dos formas de asignar color al lápiz ( al objeto, puede ser cualquier objeto, aunque nosotros hemos elegido un lápiz, podría ser cualquier personaje diferente que hubiéramos elegido).
Una forma es con el número, desde el 0 que es el rojo al 200 que vuelve a ser rojo tenemos toda una gama de colores. Para verlos todos vamos a construir un bucle, (luego lo borramos de nuestro programa)


Este es el resultado


Si numeramos empezando por el 0, 1, 2,...,19 que corresponden a la primera fila de colores, la siguiente 20, 21, 22,...,39, la tercera fila son los colores correspondientes a 40, 41, 42,...,59, y así sucesivamente hasta la última 180,181,182,...199.

Además, cada uno de estos colores tiene diferentes intensidades, bueno, yo diría diferentes claridades, pues podemos combinar más o menos con el negro y el blanco, para oscurecer o aclarar cada color. En este caso la intensidad puede ir desde 0 (oscuro) hasta el 100 (claro)
Lo vemos con otro bucle para el color rojo, por ejemplo:


Y este es el resultado:


Por defecto las intensidades están al 50. 
Vamos a elegir para nuestro lápiz cuatro colores básicos y cuatro letras del teclado para cada uno:
  • letra a, azul, número 130
  • letra v, verde, número 70
  • letra r, rojo, número 0
  • letra m, amarillo, número 35
Podéis añadir más colores a vuestros lápices, o incluso diferentes claridades, la programación es la misma cambiando color por intensidad.

La otra forma de asignar un color al lápiz, muy útil cuando tenemos un objeto con un color que queremos copiar exactamente, y es con el bloque donde aparece un cuadradito de color:


Hacemos clic en el cuadradito para activar la copia de color y llevamos el cursor ( que ha cambiado su forma a un dedo) encima del color que queremos copiar (puede ser otro objeto o cualquier color de la pantalla). Mirar el vídeo y como va cambiando el color del cuadradito.

Bueno, volvemos a nuestro proyecto y programamos cada tecla para que el lápiz cambie al color elegido.




Probamos nuestro progama, no os olvidéis volver a poner la intensidad al 50, si la habéis modificado..., funciona! ahora nuestro lápiz cambia de color si tocamos alguna de estas letras del teclado. ¿Qué más podemos modificar de nuestro maravilloso lápiz?...El trazo! podemos elegir un trazo más grueso. Elegimos otras dos teclas para aumentar o disminuir el trazo del lápiz, por ejemplo la t para aumentar y la p para hacerlo más pequeño. 


Perfecto! 
Ahora nos gustaría tener una goma, pero que solo borrara algún trazo y no todo el dibujo del escenario...mmm ¿cómo lo hacemos?. Marta nos da la respuesta: pintar de blanco!! 

Para dar más realismo a nuestra goma, que en realidad es el mismo lápiz pintando del mismo color que tenemos de fondo, vamos a darle la vuelta al objeto y utilizar la goma que viene dibujada en nuestro lápiz. Hay varias maneras de hacer esto, girando el lápiz y desplazando el objeto hasta el cursor, pero quizá es más sencillo si lo que hacemos es cambiar de disfraz. Vamos a la pestaña disfraces y duplicamos el disfraz del lápiz, utilizando los botones de esquina superior derecha damos la vuelta a nuestro objeto y centramos el centro en la goma. Ver Vídeo

Elegimos la letra g, que será la que convierta nuestro lápiz en una goma. Y para volver al lápiz elegimos la letra l.



Al probar el programa tenemos un problema que solucionar: No sabemos con qué color estábamos pintando en el momento de cambiar a goma, y al volver al lápiz hemos puesto rojo, pero si estábamos pintando con azul!
¿Cómo resolvemos este problema? Con variables!!
Vamos a crear una variable, que llamaremos color que guarde el color con el que nuestro objeto dibuja. Iniciamos el programa con un color, por ejemplo azul, 130, y modificamos en cada letra.
Ahora la goma es perfecta!






Nuestro proyecto mola!

Pero, como yo soy de mates, no puedo evitar añadir unos clones para convertir nuestro maravilloso lápiz en una máquina de crear mandalas, o mejor, en un laboratorio de investigación...de giros y simetrías. Para lo cual creo otras dos variables: giros y simetrías, y utilizo las teclas de las flechas para aumentar o disminuir los giros y para activar o desactivar las simetrías axiales. Creo otros dos objetos lápices que oculto y que serán los que dibujen las simetrías y los giros respectivamente.

Añado cuatro programas más a nuestro lápiz, inicio el giro a 1 y las simetrías a no, si el usuario toca la flecha de la derecha aumento el giro en una unidad y aviso al objeto lápiz-giro para que se clone tantas veces como números de giro guarde la variable y pinte esos giros. Si el usuario toca la flecha arriba activará las simetrías y si toca flecha abajo las desactivará.

Las ecuaciones que transforman un punto (x,y) del plano en otro punto girado un ángulo A respecto del origen son las siguientes: (x*cosA-y*senA, x*senA+ycosA) y las ecuaciones de la simetría respecto de una recta que pasa por el origen y forma un ángulo A con el eje horizontal son : (x*cos2A+ysen2A, xsen2A-ycos2A).

Bueno, veamos el código que añadimos en nuestro lápiz:



Cuando utilizas el código "crear clon de este objeto", se crea un objeto igual con el mismo comportamiento que el original, puedes cambiar cada clon si distingues su creación con un contador, yo he utilizado una variable llamada i para contar los clones que creo y después generar el dibujo dependiendo de esta i que será la que multiplique el ángulo (360/número de giros). Ahora bien, el número de clones que puedes crear es limitado, dependiendo del espacio de memoria que ocupen y si haces muchos el programa no funcionará, por tanto no puedes crear clones de clones pues se dispararía el número, por eso antes de crear clones borro todos los que hubiera, de ahí enviar message1 y esperar. 
Este es el código del lápiz-giro:



Como no cabe todo el código del movimiento, podéis echar un ojo dentro del programa y ver lo que no cabe en esta imagen:


He creado también una variable que es uno cuando el lápiz es una goma y cero cuando no lo es, porque no sé que código numérico tiene el color blanco y así lo he solucionado añadiendo un condicional.

Puede que esta parte de los clones sea algo avanzado para principiantes, pero no he podido resistirme, espero que vuestros alumnos usen este proyecto para hacer un montón de mandalas matemáticos y que me enviéis un montón de capturas de pantalla!!



sábado, 15 de noviembre de 2014

Polígonos regulares


En este primer proyecto planteamos dibujar polígonos regulares en Scratch. Una excusa perfecta para trabajar la herramienta lápiz y los movimientos.
Elegimos un objeto que será el que dibuje el polígono mientras se mueve por el escenario, podéis elegir cualquier personaje de la biblioteca de Scratch o bien dibujar uno propio. Yo voy a quedarme con nuestro gatito que aparece por defecto cuando apretamos el botón Crear.



Supongamos que queremos pintar un cuadrado:

  1. Borramos el escenario ( por si hubiera algo pintado).
  2. Subimos el lápiz
  3. Colocamos a nuestro personaje en la posición inicial para empezar a pintar.
  4. Bajamos el lápiz (para empezar a pintar)
  5. Avanzamos la longitud del lado del cuadrado ( por ejemplo 100 pasos)
  6. Giramos 90 grados hacia la izquierda
  7. Avanzamos la longitud del lado del cuadrado
  8. Giramos 90 grados
  9. Avanzamos la longitud del lado
  10. Giramos 90 grados
  11. Avanzamos la longitud del lado
  12. Subimos el lápiz.
  13. Colocamos nuestro personaje en la esquina inferior izquierda.


Nuestro gatito ha dibujado un perfecto cuadrado:


Mejoras que vemos en nuestro código: Podemos repetir cuatro veces mover y girar con el bloque repetir.



Vemos que la animación es demasiado rápida y nos gustaría que nuestro gatito se moviera más despacio para ver mejor la animación. Para ello introducimos un nuevo bloque, esperar x segundos. Tenemos que mover menos pasos y esperar para volver a mover. Entonces en vez de mover 100 pasos podemos repetir 10 veces mover 10 pasos y esperar 0.03 segundos por ejemplo. Probamos este código:



Perfecto!

Vamos ahora a dibujar un pentágono, en este caso como son cinco lados, tenemos que repetir 5 veces el movimiento de pintar un lado y también deberemos cambiar el ángulo de giro ¿Cuántos grados deberemos girar?



Consultamos los ángulos de un polígono regular y nos damos cuenta que tenemos que dividir 360 grados entre el número de lados en este caso, entre 5, con lo que obtenemos 72º. Bien, probamos el nuevo código.



Y obtenemos, en efecto, un pentágono


Supongamos que queremos pintar ahora un hexágono, ¿qué tendremos que cambiar en nuestro código?. Pues como antes el número de veces que repetimos un lado, en este caso 6 y el ángulo de giro, en este caso 360/6=60. Utilizamos un código operador para hacer la división y probamos el nuevo código.


Llegados a este punto, creo que ya podemos introducir variables. Vamos a crear una variable que guarde el número de lados y que sea nuestro personaje el que pregunte cuántos lados tendrá el polígono regular. Este bloque lo encontraremos en sensores. Primero creamos una variable, lados, en Datos ( color naranja) y después hacemos que el personaje pregunte por el número de lados, la respuesta será el valor de nuestra variable lados.


Si probamos ahora el código, vemos que algo no funciona bien para polígonos con más de 7 lados, puesto que nuestro personaje se sale del escenario. Debemos pues dibujar polígonos regulares con un radio fijado previamente para que nuestro dibujo sea siempre del mismo tamaño aunque tenga muchos lados, es decir, debemos calcular la longitud del lado en función de ese radio que fijemos.

Consultamos ese cálculo. Aplicando el teorema de pitágoras obtenemos que longitud de la mitad del lado= radio * seno de la mitad del ángulo central.


por tanto, en nuestro proyecto tenemos que modificar el número de pasos que avanzamos para dibujar el lado. Utilizamos los bloques operadores. Podemos crear otra variable que se llame radio, aunque en este caso podemos considerarla una constante que fijaremos a un determinado número, por ejemplo 120. Y una variable llamada longitud que guardará la longitud que calculamos en función del número de lados y el radio.


Ahora toca modificar el código del movimiento con esta variable longitud:



Bajamos un poco el lugar inicial (x:0 y:-100) de nuestro personaje para empezar a pintar y que nuestro polígono quede más centrado.


Perfecto!!

En mi ejemplo original, era un lápiz el que pintaba y el gatito estaba fijo en la esquina izquierda para preguntar el número de lados. Simplemente añadimos algún código de control, avisamos al lápiz para que pinte, modificamos el color del lápiz para que vaya cambiando en cada polígono y añadimos un pequeño sonido "pop" en cada lado, al terminar el dibujo volvemos a preguntar. Podéis ver el código en este proyecto.


Licencia CC BY-NC-SA. Con la tecnología de Blogger.

Mi twiter