Gua didctica del mdulo 1

Programacin II. Creando cdigo fuente

 Gua didctica del mdulo 1

ndice
Unidad 0: Instalacin y puesta a punto ........................................ 3
Unidad 0.1 Descargar e instalar Processing ............................ 3
Unidad 0.2 Registrarse en openProcessing.org ...................... 4
Unidad 0.3 Reinventar un proyectos ........................................ 4
Unidad 0.4 La Reference de Processing................................. 4
Unidad 1: Aros Olmpicos ............................................................... 5
Unidad 1.1 Dibujar y dar color a un crculo ............................. 6
Unidad 1.2 Completar el smbolo olmpico.............................. 6
Unidad 2: Dibujando funciones ..................................................... 7
Unidad 2.1 Dibujando un sin ..................................................... 8
Unidad 2.2 Cambiando el color de la onda ............................ 10
Unidad 3: Postal ............................................................................ 11
Unidad 3.1 Poniendo imgenes como fondo ........................ 12
Unidad 3.2 Aadiendo elementos a la escena ...................... 12
Unidad 3.3 Elementos en movimiento ................................... 13
Unidad 4: Se hace de noche ........................................................ 14
Unidad 4.1 Un da soleado ....................................................... 14
Unidad 4.2 Cae la noche .......................................................... 14
Unidad 5: Dibuja tu mundo ......................................................... 16
Unidad 5.1 Dibujos simples ..................................................... 17
Unidad 5.2 Cambiando el color ............................................... 18
 Gua didctica del mdulo 1

Unidad 5.3 Cambiando el tamao .......................................... 18

 Gua didctica del mdulo 1

Unidad 0: Instalacin y puesta a punto

Objetivos

Preparar el entorno de trabajo con Processing.

Explorar proyectos de otras personas realizados con Processing.
Familiarizarse con las nuevas instrucciones.

Temporizacin

3 horas.

Actividades

Unidad 0.1 Descargar e instalar Processing

Unidad 0.2 Registrarse en openProcessing.org
Unidad 0.3 Reinventar un proyecto
Unidad 0.4 La Reference de Processing

Seguimiento para la consecucin de los objetivos

Han entendido la utilidad de las instrucciones?

Saben compartir un proyecto mediante openProcessing.org?
Son capaces de hacer un Tweak de un proyecto con algunas modificaciones
propias?
Entienden el funcionamiento de las instrucciones que han utilizado?

Descripcin de las actividades

Unidad 0.1 Descargar e instalar Processing

Ayuda a tus alumnos a descargar en instalar Processing

Explcales las instrucciones ms bsicas como ellipse, rect, size y fill.
Deja que los alumnos que quieran muestren lo que han conseguido con estas
simples instrucciones.
 Gua didctica del mdulo 1

Unidad 0.2 Registrarse en openProcessing.org

Ayuda a tus alumnos a que se registren en la web de openProcessing.org

Pdeles que cuelguen un proyecto en la web (el que han creado en la Unidad 0.1)
y lo compartan pblicamente.
Ahora deja que busquen otros proyectos que les gusten utilizando la opcin
Explore
Pueden identificar al creador del proyecto?

Unidad 0.3 Reinventar un proyectos

Pdeles que compartan entre ellos los enlaces de sus proyectos.

Ahora haz que hagan Tweaks de los proyectos de sus compaeros con sus
propios retoques y lo guarden en su cuenta con el nombre que deseen.

Unidad 0.4 La Reference de Processing

Navega hasta la pgina processing.org/reference

Explcales que aqu se encuentran todas las instrucciones disponibles en
Processing y aydales a mirar las entradas de las ms sencillas para que as
pueden usar la Reference cuando no se acuerden de cmo utilizar una
instruccin.
Djales que intenten utilizar alguna instruccin nueva de la seccin 2D
Primitives o Attributes
 Gua didctica del mdulo 1

Unidad 1: Aros Olmpicos

Objetivos

Entender cmo funcionan las instrucciones de dibujo.

Familiarizarse con las coordenadas cartesianas.

Temporizacin

2 horas.

Actividades

Unidad 1.1 Dibujar y dar color a un crculo.

Unidad 1.2 Completar el smbolo olmpico.

Seguimiento para la consecucin de los objetivos

Han conseguido cierta semejanza con el smbolo original?

Cada crculo dispone de su propio color?
Han entendido la importancia de que las instrucciones estn en un orden
correcto? (las instrucciones de fill y ellipse por ejemplo)
 Gua didctica del mdulo 1

Descripcin de las actividades

Unidad 1.1 Dibujar y dar color a un crculo

Pide a tus alumnos que dibujen un circulo en pantalla del
color que quieran
Recurdales de poner el fill antes de la instruccin que
dibuja la forma y no despus ya que puede causarles
problemas en el siguiente ejercicio en caso contrario.

Han entendido que la instruccin fill al igual que stroke

afecta a las instrucciones por debajo de ella y no a las
anteriores?

Unidad 1.2 Completar el smbolo olmpico

Ensales una imagen del resultado que deben imitar (una foto cualquiera de los
aros olmpicos)
Pdeles que intenten reproducirlo poniendo inciso en que los crculos deben estar
alineados entre s.
 Gua didctica del mdulo 1

Unidad 2: Dibujando funciones

Objetivos

Entender el uso las instrucciones matemticas

Familiarizarse con las variables

Temporizacin

2 horas

Actividades

Unidad 2.1 Dibujando una funcin seno

Unidad 2.2 Cambiando el color de la onda

Seguimiento para la consecucin de los objetivos

Han entendido la importancia de usar la funcin radians() al trabajar con

ngulos?
Han conseguido entender cmo funcionan las variables y han hecho un uso
adecuado?
 Gua didctica del mdulo 1

Descripcin de las actividades

Unidad 2.1 Dibujando un sin

Ensales como funciona la funcin sin y explcales que los
ngulos se los tenemos que pasar mediando con la funcin radians.

Pdeles que hagan una variable que se vaya aumentando a s

misma y que la utilicen para la x del punto que vayan a dibujar.

Como y del punto anterior utilizaremos el sin(radians(x)) as

que utilizaremos tambin la x como ngulo. Este sin lo deberemos
multiplicar por algn nmero para que la onda se vea mejor y no
parezca una lnea.
 Gua didctica del mdulo 1

Pdeles que lo prueben y comprueben que todo funciona como

debera.
 Gua didctica del mdulo 1

Unidad 2.2 Cambiando el color de la onda

Ahora ensales como pueden utilizar las teclas, utilizaremos
tres de ellas.

Pdeles que con cada tecla cambien el stroke a un color

diferente.

Finalmente comprueba los resultados obtenidos, tendran que

ser capaces de cambiar el color de la onda pulsando diferentes teclas.
 Gua didctica del mdulo 1

Unidad 3: Postal
Objetivos

Entender el uso de las imgenes.

Temporizacin

3 horas

Actividades

Unidad 3.1 Poniendo imgenes como fondo.

Unidad 3.2 Aadiendo elementos a la escena.
Unidad 3.3 Elementos en movimiento.

Seguimiento para la consecucin de los objetivos

Han entendido la importancia de incluir las imgenes en el directorio del

programa?
Han utilizado al menos 3 imgenes?
Una de las imgenes se ha dibujado mediante la instruccin background?
 Gua didctica del mdulo 1

Descripcin de las actividades

Unidad 3.1 Poniendo imgenes como fondo

Pide a tus alumnos que busquen una imagen del tamao de la
ventana y la pongan como fondo de esta mediante la instruccin
background (recordad que hay que cargar la imagen en una variable
previamente)

Asegrate que la instruccin size este creando una ventana del

mismo tamao que la imagen.

Unidad 3.2 Aadiendo elementos a la escena

Ahora pide a tus alumnos que busquen algunas imgenes con
las que completar el escenario y las pongan en escena, es
importante que las pongan con sentido ya que queremos que
trabajen con las coordenadas y las entiendan.
 Gua didctica del mdulo 1

Unidad 3.3 Elementos en movimiento

Ahora propn a tus alumnos que hagan que algn elemento tenga movimiento,
por ejemplo un copo de nieve que vaya cayendo.

Al apretar alguna tecla pdeles que el elemento vuelva a su posicin inicial.

 Gua didctica del mdulo 1

Unidad 4: Se hace de noche

Objetivos

Entender el uso de la instruccin mouseReleased y mousePressed

Ver como se dibuja en Processing internamente (cuando se borran los elementos
o cuando se mantienen en pantalla)

Temporizacin

2 horas

Actividades

Unidad 4.1 Un da soleado

Unidad 4.2 Cae la noche

Seguimiento para la consecucin de los objetivos

Han entendido que en pantalla se ver prioritariamente lo ltimo que se ha

dibujado?
Han sido capaces de hacer que no se note lo que haba pintado anteriormente a
la escena actual sin usar background?
Han utilizado ms de 3 imgenes?

Descripcin de las actividades

Unidad 4.1 Un da soleado

Pide a tus alumnos que mediante el uso de imgenes dibujen un paisaje soleado.
Es importante que el paisaje este personalizado por cada uno y se componga de
diferentes imgenes.
 Gua didctica del mdulo 1

Unidad 4.2 Cae la noche

Pide a tus alumnos que aadan una nueva variable por ejemplo con el nombre
oscuridad que empiece en 255.

Ahora pdeles que utilicen esta variable en conjunto con la instruccin tint al
principio de la funcin draw.

Por ltimo se necesita que al pulsar cualquier tecla esta variable se reduzca en
10.
 Gua didctica del mdulo 1

Unidad 5: Dibuja tu mundo

Objetivos

Utilizar Processing de forma ms dinmica.

Aprender a trabajar sin borrar continuamente la pantalla.
Trabajar con las herramientas de dibujo ms a fondo.

Temporizacin

3 horas

Actividades

Unidad 5.1 Dibujos simples

Unidad 5.2 Cambiando el color
Unidad 5.3 Cambiando el tamao

Seguimiento para la consecucin de los objetivos

Han aadido alguna funcionalidad adicional?

Han usado algn mtodo original para cambiar de color como por ejemplo
utilizar tres variables que cambien el color RGB en el que se pinta?
Han aadido un mtodo con el que borrar el lienzo?
 Gua didctica del mdulo 1

Descripcin de las actividades

Unidad 5.1 Dibujos simples

Empieza por pedirle a tus alumnos que cada vez que se pulse el botn del ratn
se dibuje un punto en la posicin de este.

Para ello necesitaremos hacer uso del bloque mouseDragged y dentro de este
aadir el cdigo necesario para dibujar estos puntos continuamente.
 Gua didctica del mdulo 1

Unidad 5.2 Cambiando el color

Ahora necesitaremos que se pueda cambiar el color en el que se pinta en

pantalla, para ello utilizaremos una serie de teclas que cambien el color del
stroke que se utiliza.

Primero empezaremos por aadir el bloque keyReleased y aadir en el algunos if

cada uno para una tecla distinta; y dentro de estos condicionales aadiremos el
stroke con el color en el que se pintara al pulsar la tecla.

Unidad 5.3 Cambiando el tamao

Continuando con las mejoras en esta ocasin vamos a dar la posibilidad de que
se cambie el tamao en el que se pinta, para ello utilizaremos la funcin
strokeWeight.
 Gua didctica del mdulo 1

Lo primero que tendremos que pedirle a nuestros alumnos es que creen una
nueva variable que contendr el ancho con el que se pinta (el argumento de la
instruccin strokeWeight).
Una vez tengan creada la variable haremos que su valor aumente y se reduzca
haciendo uso de dos teclas a su eleccin.

Finalmente nos queda probar el resultado final y comprobar que todo funciona
correctamente.