eso tecnología · 2020. 4. 10. · eso m.p. blázquez, i. hoyos, j. santos tecnología propuesta...

ESO

M.P. Bl ázquez , I . Hoyos , J . Santos

tecnología

propuesta didáctica

SUMA piezaS

3

DEMO

Un proyecto sustentado en el aprendizaje competencial y en el desarrollo

de compromisos del alumnado con la realidad de su tiempo

y construye tu aprendizaje.

SUMA piezaS

Suma Piezas propone un nuevo enfoque competencial, con el máximo rigor curricular y una secuenciación de contenidos coherente y coordinada entre todas las áreas a lo largo de la etapa. Favorece la competencia en comunicación lingüística, primordial para acceder al conocimiento que permite comprender el mundo que nos rodea y desarrollar habilidades de convivencia.

De manera flexible, Suma Piezas brinda la posibilidad de incorporar metodologías activas, utilizar estrategias cooperativas y de pensamiento, fomentar las habilidades personales y sociales para la gestión de las emociones y el desarrollo del emprendimiento y atender la orientación académica y profesional, apostando por la igualdad y la inclusión. Y todo ello, dentro del marco de los Objetivos de Desarrollo Sostenible, que han de ser nuestro horizonte en los próximos años.

Compromiso ods Los Objetivos de Desarrollo Sostenible (ODS) establecen el marco a partir del cual articular aprendizajes competenciales que refuercen en el alumnado su preparación hacia una ciudadanía comprometida.

Plan Lingüístico Contribuye al desarrollo de habilidades orales y escritas y al aprendizaje de los diferentes aspectos relacionados con el uso del lenguaje.

Desarrollo del pensamiento Las estrategias de pensamiento fomentan la competencia de aprender a aprender; contribuyen a que el alumnado tome conciencia de sus procesos mentales y a que actúe de forma reflexiva y crítica.

Aprendizaje cooperativo La aplicación de técnicas cooperativas favore-ce el aprendizaje e incrementa la participación y el sentido de responsabilidad del alumnado para generar capacidades de comunicación y cooperación.

Educación emocional Proporciona al alumnado pautas para la gestión emocional de sus situaciones de aprendizaje diarias, ayudándoles a que, a nivel intrapersonal, identifiquen y reconozcan las emociones, las regulen y las gestio-nen; y a nivel interpersonal, adquieran habilidades de relación con las personas.

Cultura emprendedora Promueve las distintas habilidades de emprendi-miento en sus tres dimensiones, personal, social y productiva, de manera trans-versal en todas las áreas a través de una secuencia progresiva de actividades a lo largo de toda la etapa.

TIC Integra el uso de las TIC como recurso para obtener información, seleccio-narla y utilizarla con una finalidad concreta, desarrollar la ciudadanía digital y las competencias de planificación, gestión y elaboración de trabajos, pasando a tener un uso para el aprendizaje y el conocimiento (TAC).

Orientación académica y profesional Facilita el desarrollo de habilida-des que le ayudarán a conocerse a sí mismo, a entender el entorno y a tomar decisiones académicas y profesionales que le permitan entrar en el mercado laboral y prosperar en él.

Evaluación Incorpora estrategias que permiten al alumnado participar en la evaluación de su aprendizaje analizando «qué ha aprendido» y «cómo ha aprendido», acompañando su análisis con el uso del portfolio y de otros instru-mentos que faciliten una valoración objetiva.

LAS CLAVES DEL PROYECTO

ODS

4

ä Presentación de la unidadEl dibujo técnico es uno de los apoyos imprescindibles en toda labor de ingeniería. En la primera parte de esta unidad se introduce el uso de LibreCAD, una aplicación libre, de código abierto, muy apropiada para practicar, por medio de las nuevas tecnologías, los conocimientos sobre dibujo técnico adquiridos a lo largo de toda la etapa.

En el segundo epígrafe se presenta Processing y sus funciones gráficas. A medida que se desarrolla el epígrafe, se van conociendo nuevas posibili-dades del lenguaje, la estructura típica de un sketch de Processing, los tipos de datos admitidos por el lenguaje, las funciones y se finaliza con las estructuras de control.

äRecursos y materialesPara trabajar esta unidad, se necesita disponer de un aula de Informática con PC en los que estén instalados Libre CAD, Java y Processing. También será necesario el propio libro del alumnado y el material descargable de la web anayaeducacion.es. También serán de gran utilidad los demás re-cursos digitales disponibles en la web de Anaya, manuales, enciclopedias y las consultas en la Web.

ä Sugerencias generales

Ideas previas y dificultades de aprendizajeLa programación de código escrito contribuye a la mejora de otras muchas capacidades del alumnado, entre las más destacadas se encuentran las ha-bilidades matemáticas, la capacidad de abstracción y el uso de los idiomas castellano e inglés.

Una experiencia previa en programación en entornos visuales es deseable, pero no imprescindible. Se ha escogido Processing por sus sobresalientes posibilidades en el manejo de gráficos, lo que debe actuar como elemento motivador alentando al alumnado en su avance a través de la unidad. Paso a paso, con profusión de ejemplos, irán aprendiendo todo lo necesario para desenvolverse con soltura en la escritura de pequeños programas. Tanto si el alumnado tiene conocimientos previos de programación como si no, la mayor dificultad con la que suele tropezar es la sintaxis rígida de los lenguajes de programación. La obligatoriedad de escribir ciertos caracteres –como los paréntesis, las llaves que encierran bloques y, sobre todo, el punto y coma al final de cada instrucción– y los errores derivados de su omisión o de su uso incorrecto, suele dejarlos perplejos al principio. Una vez que com-prenden que no tiene sentido quejarse de esa rigidez y admiten que tienen que adaptarse a la máquina, el trabajo va mucho más fluido, aumenta la atención que prestan a la tarea y se reduce ostensiblemente el número de errores cometidos.

Educación en valoresSe sugiere emplear la programación para resolver problemas que afectan a distintas personas o colectivos, crear aplicaciones a medida y como medio de comunicación y expresión. También se puede fomentar el estu-dio de otras culturas e inspirarse en sus expresiones artísticas para reali-zar nuestras propias creaciones.

1 DISEÑO GRÁFICO ASISTIDO POR ORDENADOR

Contenidos y competencias

Contenidos de la unidad Competencias clave

Página inicial• Del papel y lápiz al diseño

por ordenador• Compromiso ODS

CMTSEIP

LibreCAD• Dibujar líneas• Dibujar rectángulos• Dibujar circunferencias• Mover entidades• Acotar objetos• Añadir texto

CMCTCD

Processing• Orientación del lenguaje

y del entorno• Funciones gráficas• Elementos que definen

una figura• Figuras personalizadas• Bloques de código,

variables y tipos de datos• Operadores y operaciones

matemáticas• Funciones• Estructuras de control.

Decisiones• Estructuras de control.

Bucles

CMCTCDCAASIEP

Taller de tecnología• Dibujos fractales

CMCTCD

Trabaja con lo aprendido• LibreCAD• Processing

CLLCMCTCAACD

CC: competencias clave, CCL: comunicación lingüística, CMCT: competencia matemática y competencias básicas en ciencia y tecnología, CD: competencia digital, CAA: aprender a aprender, CSYC: competencias sociales y cívi-cas, SIEP: sentido de iniciativa y espíritu emprendedor y CEC: conciencia y expresiones culturales.

5

Página inicialCE.1.5. (EA.1.5.1.)

Del papel y lápiz al diseño por ordenadorLa unidad comienza con un breve texto introductorio en el que se explica brevemente la evolución de los lenguajes de programación.

Se puede aprovechar esta introducción para tantear los conocimientos pre-vios del alumnado en cuanto a lenguajes de programación y a herramientas informáticas para el diseño gráfico. Conocer la experiencia de las alumnas y los alumnos empleando este tipo de herramientas ayudará al docente a en-focar mejor las primeras lecciones.

Para ello se pueden plantear preguntas como las siguientes:

¿Qué aplicaciones para diseño gráfico conocéis? De esas aplicaciones, ¿cuá-les usaríais para diseño artístico?, ¿cuáles sirven para dibujo técnico?, ¿cuáles sirven para dibujar en 2D y cuáles para crear formas tridimensionales?

¿Cuáles habéis utilizado?

Sugerencias metodológicasLa asignatura de Tecnología tiene en su temario la enseñanza del funciona-miento de mecanismos, estructuras, circuitos eléctricos y electrónicos. En un mundo cada vez más lleno de dispositivos programables, parece natural que se incluya también la enseñanza de programación de computadores.

Como otras unidades didácticas dedicadas a la programación informática, la segunda parte de esta unidad requiere un trabajo individual considerable y un apoyo constante del docente en las primeras fases de la de la programa-ción. Aun así, la formación de grupos de trabajo en el taller y en las aulas de Informática dependerá de la cantidad de equipamiento disponible y de la disponibilidad de docentes con conocimiento profundo de la materia y con flexibilidad horaria para establecer desdobles y refuerzos en las horas de tra-bajo práctico. La primera parte de la unidad, al resultar más descriptiva, plan-tea una menor dificultad para el aprendizaje por parte del alumnado.

Es posible que el alumnado ya haya tenido contacto con entornos visuales, como Scratch o Alice. No obstante, detrás de esa interfaz tan agradable (y limitada) se esconden centenares de líneas de código en lenguajes de pro-gramación como Smalltalk, Java o C.

Los lenguajes de programación mencionados requieren no solo ensamblar bloques, sino la escritura de código siguiendo las reglas que establece el es-tándar del lenguaje elegido.

Processing está basado en Java, pero permite escribir siguiendo tres estilos diferentes: básico, estructurado y orientado a objetos. Esto facilita, a los que se han interesado en este versátil lenguaje, el paso por varios estadíos de aprendizaje empleando cada vez formas más ricas y complejas de progra-mar.

9

1

8

Diseño gráfico asistido por ordenadorDel papel y lápiz al diseño por ordenadorLa programación de computadores es una actividad que ha ido evolucionando desde que surgió en el siglo xx. Al principio, la programación tenía más de artesanía que de trabajo indus-trial. Con el paso del tiempo se fueron descubriendo algoritmos y técnicas que podían aplicarse una y otra vez, como si fueran recetas de cocina. No obstante, estos descubrimientos tenían una componente matemática muy importante, lo que disuadía a muchas personas de emprender la hermosa tarea de aprender cómo programar un computador. En la actualidad existen en-tornos que acercan la programación a prácticamente cualquiera que quiera dar rienda suelta a su creatividad.

compromiso ODSEl diseño gráfico asistido por ordenador se convierte en una he-rramienta elemental en nuestra sociedad digital. Su importancia radica en su poder para comunicar ideas a través de la imagen, el color y toda una serie de técnicas; se trata de dar forma a los mensajes que se dirigen a las personas.

Su aplicación, ha sido imprescindible para la creación de los mate-riales de comunicación para los Objetivos de Desarrollo Sostenible: el logo, la ruleta de colores y los iconos de cada uno de los ODS.

1-2-4 Entra en la página oficial de las Naciones Unidas y observa el diseño de los iconos ODS.

1 ¿Crees que los objetivos se identifican con los iconos que los representan? ¿Podrías mejorar el diseño de alguno de ellos? Realiza un boceto con tus propios iconos.

2 En esta unidad, vas a iniciarte en el manejo de dos entornos de diseño gráfico asistido por ordenador. Consulta los datos asociados a las metas 9.1, 9.c. Piensa en tu comunidad más próxima, el barrio o el pueblo en el que vives, ¿crees que la tecnología está al alcance de cualquiera? Diseña un plan para reducir la brecha digital a pequeña escala compartien-do tus conocimientos tecnológicos.

Del papel y lápiz al diseño por ordenador

LibreCAD

Processing

1

2

diseño gráfico asistido por ordenador

Taller de aula Diseña y construye un semáforo

Trabaja con lo aprendido

LOS Recursos en la web DE ESTA UNIDAD

«Consejos para elaborar tu porfolio».

DOCUMENTO

Fundamentos de programación: operadores.

DOCUMENTO

Plan Lingüístico: textos descriptivos.

DOCUMENTO

«Objetivos de Desarrollo Sostenible».

DOCUMENTO

Diseño asistido por ordenador.

VÍDEO

«Para estudiar».

Cómo aplicar la llave de pensamiento: «¿Qué

pasaría si…?».

DOCUMENTO

Processing: Introducción y entorno

de trabajo.

VIDEOTUTORIAL

LibreCAD: entorno de trabajo y primeros

pasos.

VIDEOTUTORIAL

piezas clave

Plan Lingüístico• Texto descriptivo

Desarrollo del pensamiento• ¿Qué pasaría si...?• Piensa y comparte en pareja

Aprendizaje cooperativo• 1-2-4• Comprobamos• Asamble de ideas

Cultura emprendedoraLa unidad, debido a su carácter práctico promueve:• El desarrollo de la creatividad• Actuar con iniciativa• Traducir ideas en un plan de trabajo

TIC• LibreCAD• Processing• Búsqueda y selección de información

en la Web

Orientación académica y profesionalLos contenidos de la unidad están relacionados con las labores de ingeniería y de programación.

Compromiso ODS• Metas 9.1, 9.c

Evaluación• Trabaja en lo que has aprendido• Elaboración del portfolio

Compromiso ODS

En anayaeducacion.es dispone de vídeos sobre diversas metas de los ODS. Recomendamos que el alumnado vualice las metas 9.1 y 9.c antes de realizar la actividad.

6

LibreCADCE.1.3. (EA.1.3.1.) CE.1.4. (EA.1.4.1.) CE.2.1. (EA.2.1.1.) CE.2.5. (EA.2.5.1.)

Sugerencias metodológicasLibreCAD surgió como proyecto a partir del código de la última versión libre de Qcad. Por esta razón, es posible encontrar en Internet manuales y vídeos de uso de Qcad que se pueden aplicar directamente a LibreCAD.

También es posible encontrar manuales y tutoriales desarrollados específicamente para LibreCad. Por ejemplo:

Libre CAD. Wiki oficial. Manual de usuario

https://dokuwiki.librecad.org/doku.php

Manual de Libre CAD

https://arquirequisitoeninformatica.files.wordpress.com/2018/02/u2-area.pdf

• Es poco probable que los alumnos y las alumnas hayan empleado una aplicación de CAD con anterioridad, por lo que es posible que les cueste hacerse con el manejo de esta aplicación. Por este motivo se ha tenido especial cuidado a la hora de dar pautas de empleo de la interfaz de usuario.

• En el libro del alumnado se ha obviado la forma de salir y entrar del modo dibujo. Si fuera nece-sario, se puede explicar que se entra en el modo dibujo al seleccionar una de las herramientas de dibujo y se sale del modo dibujo haciendo clic en el botón derecho del ratón.

Soluciones

Comprende, piensa, investiga...

1 El recortable debe tener el siguiente aspecto:

10 11

Unidad 11LIBRECAD LibreCAD es una aplicación libre, de código abierto, que dispone de

versiones para los sistemas operativos Windows, MacOSX y Linux.

Tanto las opciones del menú como los comandos que se pueden te-clear en la línea de comandos están traducidos a varios idiomas, entre ellos el castellano.

La primera vez que ejecutes LibreCAD, te permitirá seleccionar las unidades de trabajo, el idioma del entorno y el idioma de los coman-dos. Estos valores se pueden modificar posteriormente en la ventana de Preferencias de LibreCAD.

Seleccionar objetos y suprimirlos

Cuando estás fuera del modo dibujo, podrás seleccionar objetos indi-viduales con el cursor haciendo clic sobre ellos.

Sabrás que un objeto está seleccionado porque cambia del color blan-co a un marrón tenue y la línea pasa a ser discontinua.

Si vuelves a hacer clic sobre el objeto, retorna a su estado normal y deja de estar seleccionado.

Para suprimir un objeto, selecciónalo primero y, a continuación, pulsa la tecla Suprimir.

ä 1.1 Dibujar líneasTodo objeto dibujado con LibreCAD se considera una línea, desde una recta a un rectángulo, pasando por arcos, elipses e incluso, texto. Se pueden modificar las propiedades de las líneas, como el color, el gro-sor o el tamaño. A continuación, vamos a trabajar sobre ello.

Si no se ha modificado nada en la configuración, debe aparecer en el área de trabajo una cruz roja que marca el punto de referencia de coordenadas. Sitúa el cursor del ratón sobre la cruz roja y asegúrate de que está en el origen de coordenadas (0, 0). También debe haber una plantilla marcada por puntos blancos separados entre sí 10 mm en horizontal y en vertical; se trata de la rejilla ortogonal.

Preferencias de LibreCAD

Cuando se instala por primera vez, LibreCAD muestra una pantalla de tra-bajo de color negro con puntos de color claro formando una rejilla.

Es posible cambiar el color de fondo y de las rejillas accediendo al menú Edi-tar/ Preferencias de LibreCAD… Los colores siguen el patrón RGB que se emplea en HTML. En Internet es posible encontrar numerosas páginas con tablas de colores HTML.

Los desplegables ofrecen algunos va-lores típicos, pero se pueden escribir otros directamente en la casilla que los contiene.

Mover y redimensionar objetos

Para mover un objeto, solo hay que se-leccionarlo. Cuando cambia de color, se debe hacer clic sobre él para poder des-plazarlo por el área de trabajo. Una vez en la posición deseada, hay que hacer clic de nuevo para fijarlo en su sitio.

Estando seleccionados, todos los objetos muestran unos puntos de color azul claro y azul oscuro. Haciendo clic sobre ellos y arrastrando el ratón, podemos redimen-sionar y reubicar el objeto.

Gráficos vectoriales

Los dibujos vectoriales están formados por entidades. Se consideran entidades: puntos, líneas, rectángulos, arcos, elip-ses, etc. Cada figura que permite dibujar LibreCAD es una entidad.

Una entidad tiene atributos: tipo de línea, grosor y color, que pueden ser modifi-cados.

Una entidad admite ciertas operaciones sobre ella: seleccionar, mover, copiar, re-cortar, girar, escalar, etc.

1 En la barra de herramientas superior, pulsa sobre el botón Snap on grid, ajustar a la rejilla. Esto facilita el trazado de líneas rectas.

2 En la barra lateral de herramientas selecciona el primer botón, Mostrar barra herramientas «Líneas». En la nueva barra de herramientas seleccio-na Línea con dos puntos. Al situar el cursor sobre el área de trabajo, se ob-serva que ha cambiado de forma y se ha convertido en una cruz naranja. La referencia que tiene en el centro es un punto rojo que se traslada al mover el ratón de un punto a otro de la rejilla. Esto indica que estamos en el modo dibujo.

3 Para comenzar a dibujar una línea, hay que situar el cursor sobre el punto de inicio, por ejemplo, en (0, 0) y hacer clic una sola vez con el botón izquierdo del ratón.

4 Mueve el cursor hasta el punto en el que quieras situar el segundo extremo de la línea, por ejemplo (50, 0), haz clic con el botón izquierdo una vez para fijar el extremo y, a continuación, doble clic con el botón derecho para salir del modo dibujo.

5 Si te equivocas y haces clic o doble clic con el botón izquierdo, el programa entiende que quieres conti-nuar dibujando líneas a partir de ese punto, por lo que no sale del modo dibujo.

6 Para salvar el trabajo, hay que ir al menú Archivo → Guardar, o bien, Archivo → Guardar como…

Práctica guiada


1 Dibuja un recortable para cons-truir un cubo de 50 mm de lado usando líneas.

Barra de menú

Barra de herramientas

Seguimiento acción

Línea de comandos

Coordenadas

Desarrollo del pensamiento

Dispone del recurso «Piensa y comparte en pareja» para que el alumnado aplique esta técnica de pensa-miento

Aprendizaje cooperativo

Dispone del recurso «Asamblea de ideas» a fin de que el alumnado conozca la mecánica para aplicar esta técnica de aprendizaje cooperativo.

Soluciones2 El trabajo realizado por el alumnado debe coincidir con la imagen de la ilustración de su libro.

3 El trabajo realizado por el alumnado debe coincidir con la imagen de la ilustración de su libro.

4 En este caso, el resultado debe ser el mismo que en la actividad 1, pero se trata de que el alum-nado compruebe que se tarda mucho menos empleando la herramienta de dibujar rectángu-los.

5 El trabajo realizado por el alumnado debe coincidir con el de la ilustración de su libro.

6 Es probable que el alumnado dibuje muchas más cotas de las necesarias.

Con las que figuran a continuación debe ser suficiente.12 13

Unidad 1

1 LIBRECAD ä 1.2 Dibujar rectángulosPara dibujar cuadrados y rectángulos, LibreCAD dispone de la herra-mienta apropiada.

➜ En la barra lateral de herramientas haz clic en el botón Línea y a continuación en Rectángulos.

➜ La forma de usarla es más simple que la herramienta Línea con dos puntos. Un clic izquierdo fija la posición inicial del rectángulo; otro clic fija la posición final.

ä 1.3 Dibujar circunferenciasLibreCAD también dispone de una herramienta para dibujar circunfe-rencias, que permite elegir entre varias opciones: dados el centro y un punto, dados el centro y el radio, dados dos puntos opuestos y dados tres puntos. Además, dispone de un botón para hacer circunferencias concéntricas y varios botones para circunferencias inscritas en trián-gulos o tangentes a otras circunferencias.

➜ En la barra lateral de herramientas, haz clic en el botón Círculos y a continuación en Círculo con centro y punto.

➜ Solo hay que fijar el centro con un clic y un punto de la circunfe-rencia con otro clic.

ä 1.4 Mover entidadesSi vas a mover o modificar una única entidad, por ejemplo un rectán-gulo, haz clic sobre él para seleccionarlo. El objeto cambiará de color.

Si se quiere actuar sobre varias entidades, puedes seleccionarlas ha-ciendo clic sobre cada una de ellas o trazando un rectángulo de se-lección múltiple haciendo clic sobre un punto del área de trabajo y arrastrando el ratón manteniendo el botón izquierdo pulsado. Así, se-leccionarás todas las entidades encerradas en el rectángulo.

Para mover un objeto, simplemente haz clic sobre él, mantén el botón izquierdo del ratón pulsado mientras arrastras la selección hasta su nueva ubicación. Para fijarlo, solo tienes que hacer clic de nuevo. Por último, tienes que deseleccionarlo. Como antes, puedes ir uno a uno haciendo clic sobre ellos o ir al menú Seleccionar → Deseleccionar todo.

ä 1.5 Acotar objetosAcotar piezas es imprescindible para poder reproducirlas. LibreCAD proporciona una herramienta de acotación que hace trivial esta tarea, solo hay que elegir el tipo de acotación que queremos, marcar los extremos de una arista o hacer clic sobre los arcos de circunferencia para poder fijar las cotas.

ä 1.6 Añadir textoPara añadir texto a nuestros diseños, lo más cómodo es pulsar sobre el botón Texto; se abrirá un cuadro en el que se pueden observar va-rios bloques de ajustes:

➜ Fuente. Aquí se elige la tipografía, la altura de las letras y el espacio interlineal.

➜ Alineación. Se hace con referencia a los puntos de la rejilla.

➜ Ángulo. El texto puede situarse girándolo con respecto a los ejes de referencia.

➜ Insertar símbolo. Símbolos corrientes que se pueden insertar di-rectamente en el texto.

➜ Insertar Unicode. Para insertar símbolos de diferentes alfabetos, musicales, etc.

➜ Texto. Cuadro en el que teclear el texto que queremos insertar en la lámina. Los botones nos permiten limpiar el cuadro de texto, abrir un fichero de texto, guardar el texto escrito en un archivo, y las ha-bituales funciones de cortar, copiar y pegar.

2 Piensa y comparte en pareja. Dibuja cinco circunfe-rencias concéntricas usando Círculo con centro y punto, la primera debe tener 10 mm de radio y las siguientes deben ir incrementando su radio en 10 mm cada vez.

3 Repite el ejercicio anterior, pero ahora haz que las circunfe-rencias queden apoyadas sobre el punto superior.


4 Vuelve a dibujar el recortable de la actividad 1 para construir un cubo de 50 mm de lado usando cuadrados.

5 Asamblea de ideas. Cambia la plantilla del do-cumento a isométrica (menú Editar → Propiedades del Dibujo Actual) y dibuja las siguientes piezas:

6 Abre el archivo de piezas en isométrica y acótalas correctamente.

7 Por último, dibuja las vistas, sobre rejilla ortogo-nal, que corresponden a las piezas en isométrica que ya has dibujado. Acótalas.


7

7 Para la primera pieza sería suficiente con el alzado y la planta.

ProcessingCE.5.1. (EA.5.1.1.)

Entorno Processing

Sugerencias metodológicas• El bloque introductorio del epígrafe nos habla de las características de este entorno abierto.

Aprovecharemos para debatir sobre las bondades del modelo de trabajo del software y hardware libre, de compartir el conocimiento y publicar la información en lugar de mantener la actitud opuesta: código cerrado, secretos de desarrollo y falta de información como medios para entorpecer el avance de los posibles competidores. Generosidad frente a egoísmo.

• A continuación, se describe la ventana de trabajo. Comparada con la de otros entornos, es muy simple, lo que supone una gran ventaja para aquellos que se enfrentan por primera vez a la pro-gramación de código o que estaban acostumbrados a entornos visuales. Este apartado no de-bería revestir dificultad, pero conviene recordar al alumnado dónde lo tienen disponible para consultar en caso de necesidad.

• Es importante hacer especial énfasis en el apartado de sintaxis, en la obligatoriedad de teclear ciertos caracteres y en características como la distinción entre mayúsculas y minúsculas que hace Processing. Si esto les queda suficientemente claro, se ahorrarán muchos errores.

Soluciones8 El primer ejemplo solo dibuja una elipse, mientras que el segundo dibuja elipses debajo del

puntero del ratón. Además, en este segundo ejemplo, si se presiona el botón izquierdo del ra-tón, la elipse se rellena de negro.

Para asegurarse de que al dejar de presionar el botón las elipses se dibujan con el color por defecto (blanco) se ha incluido un condicional antes de la instrucción que crea las elipses bajo el cursor del ratón.

14 15

Unidad 12PROCESSING ä 2.1 Orientación del lenguaje y del entorno

Processing empezó a desarrollarse en 2001 en el MIT por Casey Reas y Ben Fry. Estos, a su vez, son los autores de los libros Getting Star-ted with Processing y Processing: A Programming Handbook for Vi-sual Designers and Artists, entre otros. Es decir, el lenguaje sirve para aprender a programar, pero sobre todo está enfocado hacia el diseño gráfico, las animaciones y otros aspectos que atañen a artistas visua-les menos interesados en producir programas funcionales y más atraí-dos por producir arte por computador. Con Processing es muy senci-llo crear formas, trabajar con colores y mover objetos por la pantalla.

En palabras de los propios autores, «Creamos Processing para hacer más fácil la programación de gráficos interactivos. Estábamos frus-trados por lo difícil que era escribir este tipo de software con los len-guajes de programación que empleábamos habitualmente (C++ y Java) y fuimos inspirados por la sencillez con la que se podían escribir programas interesantes con los lenguajes de nuestra infancia (Logo y BASIC)».

Processing permite tres formas de programar: básica, estructurada y orientada a objetos, de modo que se puede ir progresando paulatina-mente desde los inicios hasta el nivel avanzado.

Una de las opciones más interesantes es la de Exportar aplicación. Al hacer clic sobre ella, se abre un cuadro de diálogo con opciones para hacer que la aplicación pueda ejecutarse en otros sistemas ope-rativos. También es posible hacer que se ejecute a pantalla completa. Más adelante comprobarás que es muy sencillo definir el tamaño de la ventana de ejecución.

ä 2.2 Funciones gráficasProcessing dispone de muchas funciones gráficas interesantes. Va-mos a ver algunas antes de escribir un primer sketch. Salvo indicación en contra, la unidad de medida en la que trabajan es el píxel.

La sintaxis de Processing

Cada expresión debe finalizar obligatoria-mente con el signo de punto y coma «;». De otro modo, al intentar ejecutar el pro-grama, dará un mensaje de error.

También hay que respetar las mayúsculas y minúsculas en los nombres de función. No es lo mismo line() que Line() o liNE().

1 Abre Processing y escribe la siguiente línea de código:

line(0,0,100,100);

2 Presiona sobre el botón Run.

3 Si te aparece algún error, revisa el código y asegúrate de que no has olvidado teclear el punto y coma al final de la expresión, no has cambiado alguna letra de la instrucción por una mayús-cula (u otra letra), que los números están separados por comas y que los paréntesis están donde deben.

4 Si todo ha ido bien, deberías ver algo similar a la imagen de la derecha. Has dibujado una línea desde el origen de coordenadas (0, 0) hasta el punto (100, 100).

5 Processing tiene asignados una serie de valores por defecto para los elementos que emplea habitualmente. Genera una ven-tana automáticamente, dentro de ella crea un lienzo de color gris enmarcado por una banda de color gris claro y la línea que dibuja es de color negro y con grosor de un píxel. Todos estos elementos, desde la ventana a la línea, podemos configurarlos a nuestra conveniencia.

Práctica guiada

Función Significado

size (ancho, alto)Define el tamaño en píxeles de la ventana gráfica en la que se ejecutará el sketch.

point (x, y) Dibuja un punto en la coordenada (x, y).

line (x1, y1, x2, y2) Traza una línea desde la coordenada (x1, y1) hasta (x2, y2).

triangle (x1, y1, x2, y2, x3, y3)

Dibuja un triángulo con vértices en los puntos (x1, y1), (x2, y2) y (x3, y3).

quad (x1, y1, x2, y2, x3, y3, x4, y4)

Dibuja un cuadrilátero con vértices en los puntos (x1, y1), (x2, y2), (x3, y3) y (x4, y4).

rect (x, y, ancho, alto)

Dibuja un rectángulo con la esquina superior izquierda en (x, y) y dimensiones (ancho, alto).

ellipse (x, y, ancho, alto)

Dibuja una elipse con centro en (x, y) y diámetros (ancho, alto).

arc (x, y, ancho, alto, inicio, fin)

Dibuja un arco con centro (x, y), dimensiones (ancho, alto) y ángulos de inicio y fin en radianes (inicio, fin).


8 Inicia Processing y abre el menú File. Accede al elemento Examples… y verás que se abre una ventana con varias carpetas desplegables.

Sigue la ruta Contributed Exam-ples/Getting Started…/02_Start y abre los dos ejemplos Ex_02_01 y Ex_02_02. Ejecuta ambas apli-caciones y, a la vista del código que has cargado, explica con tus propias palabras qué crees que hace Ex_02_02.

Entorno de Processing

Consola de textos y depurado de errores

Mode Manager. Al desplegarlo, aparece el siguiente cuadro con otros modos posibles de programación.

Área de mensajes

Área de escritura de código

Gestión de pestañas (ficheros)

Nombre del fichero

Ejecutar Parar

Plan Lingüístico

El alumnado dispone en anayaeducacion.es del apar-tado Plan Lingüístico, donde encontrará la informa-ción necesaria sobre cómo escribir un texto descriptivo.

8

Funciones gráficas y elementos que definen una figura

Soluciones9 a) Se muestra una línea recta que recorre el lienzo en diagonal, desde la esquina superior iz-

quierda hasta la inferior derecha.

b) El resultado en el lienzo es el mismo que en el caso anterior, a pesar de haberse modificado el código. La limitación viene dada por el tamaño del lienzo por defecto.

c) Se muestra un cuadrado, centrado en el lienzo, con la esquina superior derecha en el punto (10, 10) y lado 80 píxeles.

d) El cuadrado no se muestra completo, no se ven los bordes inferiores, puesto que tiene un tamaño superior al del lienzo. Añadiendo un lienzo de dimensiones mínimas 200 x 200 píxeles se mostrará la figura completa.

10 El código debería ser:

a) size(640,480);

line(0,0,640,480);

b) Aparentemente, la escala se ha reducido a la mitad. En realidad, Processing solo dibuja la parte visible del objeto línea.

c) La línea parece salir por un lado de la ventana, por lo que no se ha escalado la imagen.

11 Las funciones con sus parámetros y ejemplos de uso se pueden encontrar en las siguientes di-recciones:

https://processing.org/reference/background_.html

https://processing.org/reference/stroke_.html

https://processing.org/reference/line_.html

https://processing.org/reference/noStroke_.html

https://processing.org/reference/strokeWeight_.html

https://processing.org/reference/strokeJoin_.html

https://processing.org/reference/strokeCap_.html

12 b) La primera línea establece el tamaño del lienzo. La segunda, dibuja un rectángulo con la es-quina superior izquierda en (250, 100) y del tamaño que indica. La tercera hace lo propio con la elipse de centro (250, 200).

c) Las figuras se superponen porque su coordenada x coincide y el círculo queda por encima porque Processing va dibujándolas a medida que ejecuta el código.

13 Práctica libre a realizar por el alumnado.

14 a) size(200, 200);

smooth();

ellipse(width/2, height/2, 2*width/3, 2*height/3);

b) Una posible modificación sería:

size(300, 200);

smooth();

ellipse(width/2, height/2, 2*width/3, 2*height/3);

15 a) Se establece un lienzo de 500 x 400 píxeles.

Se elige un color verde para el trazo del borde de las figuras.

Se selecciona como grosor de ese trazo 100 píxeles.

Se dibuja un rectángulo en (0, 0) de 400 x 300 píxeles.

17

Unidad 1

16

2 PROCESSING

9 Abre Processing y ejecuta la instrucción de cada uno de los apartados realizando las observacio-nes que se indican.

a) line(0,0,100,100);

Explica lo que ves en la ventana que aparece.

b) line(0,0,200,200);

Comprueba si varía el tamaño de la ventana gráfica.

c) rect(10,10,80,80);

¿Qué aparece en la ventana gráfica? ¿Ha cambiado el tamaño de la ventana?

d) rect(10,10,180,180);

Describe las anomalías que detectas en la ventana gráfica.

10 Consulta la tabla de funciones de la página ante-rior y modifica el tamaño de la ventana gráfica del primer ejemplo para que tenga 640 x 480 píxeles, la resolución de las antiguas tarjetas gráficas VGA.

a) Escribe el código para trazar la diagonal des-de (0, 0) hasta la esquina opuesta.

b) Modifica el código duplicando el valor de las coordenadas finales: line(0,0,1280,960); ¿Qué sucede?

c) ¿Qué ocurre si solo duplicas el valor de una de las dos coordenadas finales? Prueba ahora con la otra y anota tus conclusiones.

11 Busca en la página de referencia de Processing cómo se usan las siguientes funciones y ano-ta su significado y parámetros en tu cuaderno: background(), stroke(), line(), noStroke(), strokeWeight(), strokeJoin(), strokeCap().

12 Practica con las funciones que conoces.

a) Escribe el siguiente código:

size(500,400);

rect(250,100,150,100);

ellipse(250,200,100,100);

b) Haz en tu cuaderno un análisis de las tres lí-neas de código.

c) ¿Por qué crees que se superponen las fi-guras?


ä 2.3 Elementos que definen una figuraHasta ahora hemos visto que Processing dibuja por defecto las formas usando una línea negra de 1 píxel de grosor y las rellena, en el caso de poder hacerlo, con color blanco. Sería mucho más atractivo conse-guir que nuestros diseños estuvieran llenos de color y que pudiéramos cambiar el contorno de las distintas figuras geométricas. Para ello, se dispone de las siguientes funciones:

➜ Trabaja con línea en escala de grises: stroke(nivel_de_gris); lleva un solo parámetro, donde 0 representaría al negro, y, 255 al blanco. Todos los valores intermedios formarían la escala de grises.

➜ Trabaja con línea en colores: stroke(r,g,b); lleva tres paráme-tros: R, G y B, que son los colores primarios de la mezcla sustractiva red, green y blue. Cada uno puede variar entre 0 y 255.

➜ Cambia el grosor de la línea: strokeWeight(n); modifica el grosor de la línea que se va a dibujar. El valor por defecto es 1.

➜ Rellena las figuras: fill(nivel_de_gris); y fill(r,g,b); rellenan respectivamente una figura en niveles de gris o en color. Todo lo expli-cado para cambiar el color del contorno se aplica también al relleno.

➜ Cambia el color del lienzo: background(nivel_de_gris); y background(r,g,b); pintan el lienzo en niveles de gris o de co-lores respectivamente. Todo lo explicado para cambiar el color del contorno se aplica también al lienzo.

Siempre hay que indicar los atributos antes de dibujar una figu-ra. Es decir, primero se seleccionan el color, el grosor de línea y el relleno; después se dibuja la figura en la posición y con las dimensiones deseadas.

Las variables widht y height almacenan el valor del ancho y alto de la ventana gráfica. Por ejemplo:

size(200, 200);

smooth();

ellipse(width/2, height/2, width/2, width/2);

println(width);

println(height);

En este caso, como el valor del ancho y del alto de la ventana gráfica es de 200, el sketch dibuja una circunferencia en la posición 100, 100 con un ancho y alto de diámetro 100. Además, en la consola aparece el número 200 en dos líneas contiguas.

Las variables width y height

13 Escribe el siguiente código:

size(500,400);

stroke(160);

rect(250,100,150,100);

Ahora modifica los valores de stroke() para comprobar cómo varía el nivel de gris el color del contorno del rectángulo.

14 Prueba el código del apartado «Las variables width y height».

a) Modifícalo para que el diámetro de la circun-ferencia ocupe 2/3 del ancho de la ventana.

b) Cambia también las dimensiones por separa-do y comprueba cómo se adapta la figura a la forma de la ventana.


size(500,400);

stroke(100,180,140);

strokeWeight(100);

rect(0,0,400,300);

a) Explica qué ha ocurrido.

b) Ahora modifica el programa para que el an-cho de línea sea de 5 píxeles y el rectángulo se dibuje en las coordenadas (50, 50).

c) Modifica también los valores de stroke() para comprobar cómo varía el color del con-torno el rectángulo.

16 Modifica el código anterior para que el rectán-gulo quede con un borde verde de 5 píxeles, re-lleno de color rojo y sobre fondo azul.

17 Comprobamos. Elaborad una lista con los países que se encuentran en situación de po-breza extrema y dibujad sus banderas.


Colores RGB

Existen numerosas webs en las que puedes encontrar los códigos de colores RGB que desees usar, como http://es.wikipedia.org/wiki/Colores_web.

Incluso algunas páginas disponen de una sencilla aplicación en la que puedes mover un cursor y seleccionar el color deseado, devolviendo el valor que buscas en un cuadro anexo. Suelen aparecer los valores decimales y también los hexadecimales.

Aprendizaje cooperativo

Dispone del recurso «Comprobamos» a fin de que el alumnado conozca la mecánica para aplicar esta téc-nica de aprendizaje cooperativo.

9

La imagen queda asimétrica debido al exagerado valor del grosor del borde y a que el rec-tángulo se dibuja en la esquina superior izquierda de la ventana. Se puede probar a cambiar las coordenadas a (50, 50) para que el rectángulo quede centrado.

b)

c) Práctica libre a realizar por el alumnado.

16 El código puede ser similar al siguiente:

size(500,400);

stroke(255,0,0);

strokeWeight(5);

fill(0,0,255);

rect(50,50,400,300);

17 Comprobamos: Actividad cooperativa para concienciar sobre la necesidad de perseguir los Objetivos de Desarrollo Sostenible.

Figuras personalizadas

18 No se dibuja la última arista de la estrella.

19 Respuesta abierta.

20 Los códigos que producen las dos ilustraciones son:

size(400, 400);

beginShape();

strokeWeight(10);

strokeJoin(BEVEL);

strokeCap(ROUND);

vertex(200, 30);

vertex(230, 170);

vertex(370, 200);

vertex(230, 230);

vertex(200, 370);

vertex(170, 230);

18 19

Unidad 1

2 PROCESSING ä 2.4 Figuras personalizadasProcessing permite la creación de nuevas figuras aparte de las que están predefinidas. Para ello hay que indicarle el inicio y el fin de las instrucciones que la definen así como las coordenadas de cada vértice de la figura. Todo esto se consigue con beginShape(), endShape() y vertex(x,y).

Por ejemplo, para definir una estrella de cuatro puntas:

size(400, 400);

beginShape();vertex(200, 30);

vertex(230, 170);

vertex(370, 200);

vertex(230, 230);

vertex(200, 370);

vertex(170, 230);

vertex(30, 200);

vertex(170, 170);

endShape(CLOSE);

ä 2.5 Bloques de código, variables y tipos de datos Hasta el momento no hemos necesitado dividir nuestros programas en bloques; sin embargo, esto irá cambiando a medida que avance-mos en el tema. En Processing, los bloques de código se encierran entre llaves «{ }». Estos bloques pueden ocupar varias líneas.

Por otro lado, hasta ahora solo hemos dado valores numéricos fijos a los parámetros que iban entre paréntesis de las distintas expresiones. Tampoco hemos creado aplicaciones interactivas. Para ello vamos a requerir el uso de variables.

Las variables son esenciales en programación. Contienen valores que serán utilizados más tarde. Habitualmente, asociamos las variables solo con números, pero también pueden contener caracteres, texto, imágenes, valores lógicos, etc.

Es necesario nombrar las variables. Se recomienda dar nombres que ayuden a deducir para qué sirven, pero no demasiado largos, por ejemplo: edad, nombre, etc.

Las variables deben ser de algún tipo: numérico, carácter u otro. Processing distingue entre dos tipos de datos: primitivos y compues-tos. Principalmente, trabajaremos con datos primitivos que, por orden alfabético, son: boolean, byte, char, color, double, float, int y long.

Entre los datos compuestos que se suelen emplear al inicio están: array, string y table. Por ejemplo:

int x; // Declara la variable de tipo entero x

x = 3; // Asigna un valor a la variable x

Se puede declarar una variable y asignarle un valor en una sola línea de código.

int x = 3; // Declara la variable de tipo entero x // y le asigna valor

ä 2.6 Operadores y operaciones matemáticasLos operadores son símbolos que aplican una función matemática o lógica a los operandos. Tenemos los siguientes operadores:

Asignación: =, signo igual.

Aritméticos: +, -, *, /, %, ++ y --, que se corresponden con suma, dife-rencia, producto, división, resto o módulo de la división entera, incre-mento y decremento en una unidad.

Relacionales: >, >=, <, <=, == y !=, que se corresponden con mayor que, mayor o igual que, menor que, menor o igual que, igual a, dis-tinto de.

Lógicos: !, && y ||, que se corresponden con las funciones lógicas NOT, AND y OR. Se emplean con frecuencia en estructuras de control.

Imágenes de fondo

La función background (imagen) se puede usar para cargar una imagen en el fondo.

El tamaño en píxeles de la imagen y del lienzo deben ser iguales.

Los formatos de imagen admitidos son gif, jpg, png y tga. Las imágenes pueden verse tanto en 2D como en 3D.


18 Después de introducir el código de la estrella de cuatro pun-tas, prueba a suprimir la palabra clave CLOSE dentro de la función endshape(). ¿Qué es lo que ocurre?

19 Crea dos nuevas figuras; por ejemplo, una flecha y una estrella con un número distinto de puntas.

20 Practica con las funciones strokeWeight(), strokeJoin() y strokeCap(). Cada una admite distintos parámetros, no solo numéricos. Modifica el código de las figuras que acabas de crear para obtener resultados similares a los de los ejemplos a continuación.

21 Crea un sketch combinando las dos figuras que acabas de construir. Rellena cada una de un color distinto y usa otro di-ferente para las aristas de las figuras. También debes cambiar el color del fondo.



int a=3;

int b=5;

int c=a+b;

print(c);

a) Fíjate en el área de texto y ex-plica qué ha ocurrido. ¿Qué hace la función print(c)?

b) Ahora modifica el programa para que las variables sean de tipo float. ¿Qué pasa si combinas variables de tipo int y float en el cálculo?

strokeJoin() strokeCap()

miter round

bevel square

round project

Operadores lógicos

Posiblemente, con un gráfico se entien-da mejor lo que hacen los operadores !, && y ll, que se corresponden con las funciones lógicas NOT, AND y OR. Em-plearemos la notación de conjuntos para mayor claridad.

U

A_A

A B A B

A + BA – B_A = U – A

NOT/NONegación

lógica NOT A

AND/YProducto

lógico A AND B

OR/OSuma lógica

A OR B

10

vertex(30, 200);

vertex(170, 170);

endShape(CLOSE);

size(400, 400);

beginShape();

strokeWeight(8);

strokeJoin(ROUND);

strokeCap(SQUARE);

vertex(200, 30);

vertex(230, 170);

vertex(370, 200);

vertex(230, 230);

vertex(200, 370);

vertex(170, 230);

vertex(30, 200);

vertex(170, 170);

endShape(CLOSE);

21 El alumnado puede elegir entre superponer una con otra, ampliar el lienzo y ponerlas una al lado de otra, modificar sus dimensiones, etc. Se recomienda establecer alguna restricción, co-mo que no puedan coincidir las coordenadas de ambas.

22 a) Imprime la variable c en el área de texto, en este caso, 8.

b) El resultado pasa a ser 8.0. Al combinar variables de dos tipos como int y float en el mismo cálculo, Processing muestra el mensaje de error: Cannot convert from float to int.

Funciones

Sugerencias metodológicas• Una de las características que más le cuesta entender al alumnado es la necesidad de usar va-

riables locales siempre que sea posible, debido a los posibles efectos inesperados que pueden ocasionar las modificaciones de variables globales en distintos puntos de un programa.

• Las funciones setup() y draw() son muy similares a las setup() y loop() de Arduino. Conviene que el alumnado entienda las características diferenciadoras de ambas, como que setup() solo se ejecuta una vez al iniciar el sketch y draw() es un bucle que se ejecuta sin parar hasta que se cierra la ventana de ejecución.

• Una ventaja de usar funciones es que no tenemos que entender cómo operan, es suficiente con saber cómo se usan. Podemos imaginar una función como una caja con mecanismos internos que actúan sobre los datos.

• Conviene señalar que también es posible escribir nuestras propias funciones. Se emplean para hacer cosas redundantes, que van a ser ejecutadas varias veces. Hace más sencilla la programa-ción y reduce los errores. Una explicación sencilla de cómo crear funciones puede encontrase en este enlace:

http://dunadigital.com/processing/2013/08/10/crear-una-funcion-propia/

Soluciones

23 Este sketch emplea las primeras seis líneas en establecer el valor de diversas variables que necesitará con posterioridad: las dos primeras establecen las dimensiones de la ventana y, en la última línea del sketch, se usan también para centrar la elipse y hacerla con diámetros de la mitad de esas dimensiones. Las variables rojo, verde y azul se usan para los niveles de colores RGB de stroke(). La última variable se emplea para el grosor de línea que se usará para dibujar objetos.

24 Un posible código sería:

int anchoV=500; // Fijamos el ancho y alto de la ventana

int altoV=500;

int colorMax=255; // Valor máximo que pueden tomar los colores

size(anchoV,altoV); // Crear la ventana gráfica

background(0); // Fondo negro

noStroke(); // Vamos a dibujar sin línea

fill(colorMax,0,0); // Primer círculo en rojo

/* Todos los círculos estarán centrados

20 21

Unidad 1

ä 2.7 FuncionesYa hemos empleado funciones incluidas en Processing como son line(), size() y stroke(), pero también podemos escribir nuestras propias funciones.

Las funciones se utilizan para definir tareas que van a ser ejecutadas varias veces. Su uso hace la programación más sencilla y reduce los errores de código.

Las funciones admiten parámetros y pueden devolver valores. Los pa-rámetros de una función son variables con las que opera.

Definición de variables dentro y fuera de las funciones

Las variables definidas dentro de una función se consideran lo-cales a la función y no están disponibles para otras funciones del programa.

Las variables definidas fuera de las funciones (normalmente al ini-cio del programa) se consideran globales y están disponibles para todo el programa. Esto podría parecer una ventaja, sin embargo, entraña el riesgo de que sus valores sean modificados en algún punto del programa del que hayamos perdido conciencia de que lo hacía, pudiendo originar resultados inesperados y errores.

Las funciones setup y draw

Existen dos funciones especialmente interesantes que se usan de for-ma conjunta en numerosos sketches. Se trata de setup() y draw(). Si has probado alguno de los ejemplos que vienen con Processing, es posible que hayas reparado en ellas. Su utilidad es la siguiente:

➜ setup() se escribe al principio del sketch, justo después de las va-riables globales que se van a usar. Sirve para inicializar el entorno de trabajo. Por ejemplo, dentro de setup() se puede definir el ta-maño de la ventana gráfica con size(), decidir si se van a suavizar los bordes de los objetos dibujados para darles más realismo con smooth(), o no, con noSmooth().

➜ draw() crea un bucle de repetición automático. Es decir, si que-remos que nuestro programa no finalice, solo hay que escribir el código dentro de draw().

Si no lo has hecho aún, abre Processing. Dirígete a File / Examples. En la ventana selecciona: Contributed Examples / Getting Started… / 02_Start / Ex_02_02. El ejemplo procede de Getting Started with Processing, de Casey Reas y Ben Fry.

Este sencillo ejemplo ilustra el uso de las funciones setup() y draw(), además de introducir el uso de una estructura de control simple. El sketch dibuja circunferencias que van siguiendo al puntero del ratón. Si solo movemos el ratón sobre la ventana, las rellena de blanco; pero si presionamos el botón izquierdo del ratón, las rellena de negro.

En la página siguiente puedes ver el código y el resultado de ejecutar el sketch Ex_02_02.

Las funciones elipse() y ellipseMode()

La función ellipse() tiene cuatro parámetros, y la función ellipse Mode() cambia el modo en que son interpretados. Hay cuatro posi-bilidades:

➜ CENTER. La opción por defecto. Los dos primeros parámetros de ellipse()son las coordenadas del centro de la elipse y los otros dos son el ancho y el alto totales (los diámetros).

➜ RADIUS. Los dos primeros parámetros de ellipse() son las coor-denadas del centro de la elipse y los otros dos son la mitad del ancho y del alto (los radios).

➜ CORNER. Suponiendo que la elipse estuviera inscrita en un rectán-gulo, los dos primeros parámetros de ellipse() son las coordena-das de la esquina superior izquierda del rectántulo y los otros dos son el ancho y el alto totales.

➜ CORNERS. Los dos primeros parámetros de ellipse() son las coordenadas de la esquina superior izquierda del rectántulo cir-cunscrito a ella y los otros dos parámetros son las coordenadas de su esquina inferior derecha.

La función arc()

Hay dos modos de llamar a la función arc():

arc(x, y, ancho, alto, inicio, fin)

arc(x, y, ancho, alto, inicio, fin, modo)

La segunda forma añade el parámetro modo, que admite tres formas:

➜ OPEN (por defecto). Deja el arco abierto.

➜ CHORD. Traza una línea desde el inicio al fin del arco.

➜ PIE. Traza una línea desde el inicio del arco al centro de la elipse que lo genera y, desde allí, otra línea hasta el fin del arco.

2 PROCESSINGCódigo del sketch Ex_02_02

void setup() {

size(480, 480); // Modificado para pantalla cuadrada

smooth(); // Original size (480, 120)

}

void draw() {

if (mousePressed) {

fill(0);

} else {

fill(255);

}

ellipse(mouseX, mouseY, 80, 80);}

Ejemplo resuelto

Función ellipseMode()

ellipseMode(RADIUS);fill(179,223,31); // Verde

ellipse(50,50,30,30);

ellipseMode(CENTER);fill(199,51,255); // Rosa

ellipse(50,50,30,30);

ellipseMode(CORNER);fill(31,188,223); // Azul

ellipse(25,25,50,50;

ellipseMode(CORNERS);fill(228,234,16); // Amarillo

ellipse(25,25,50,50);

22 23

Unidad 1

ä 2.8 Estructuras de control. DecisionesSi un programa solo fuera una lista de instrucciones que se ejecutan una tras otra de forma lineal, desde el inicio hasta el fin, resultaría útil, pero un poco pobre, ya que en ocasiones se pueden dar circunstan-cias que hagan que el curso del programa deba cambiar. Para detec-tar estas situaciones, están las estructuras de selección y decisión. En Processing hay dos de estas estructuras: if else y switch case.

if else

if (condición)

{instrucciones en caso de que la condición sea

cierta}

else

{instrucciones en caso de que la condición sea

falsa}

2 PROCESSING

23 Escribe el siguiente código y redacta en tu cuaderno un análisis de lo que hace el programa.

int anchoV=500;

int altoV=400;

int rojo=100;

int verde=180;

int azul=140;

int grosorLinea=3;

size(anchoV,altoV);

stroke(rojo,verde,azul);

strokeWeight(grosorLinea);ellipse(anchoV/2,altoV/2,anchoV/2,altoV/2);

24 Escribe un sketch que dibuje una ventana cuadrada y en su interior una diana con cuatro círculos concéntricos. El fondo debe ser negro, el centro de la diana blanco y cada uno de los tres círculos restantes de los colores básicos RGB. Usa variables y operaciones matemáticas para calcular las dimensiones de los círculos. No olvides poner comentarios en el código.

25 Comprueba cómo cambia el aspecto de las circunferencias del ejemplo anterior usando la función noSmooth(). Si no parece es-tar bastante clara la diferencia, abre un nuevo sketch, introdu-ce el siguiente código y hazlo funcionar primero con la función Smooth() y, después, sustituyendo por la función noSmooth().

size(800,600);

smooth(); // Activa smooth

ellipse(400,300,500,500);

26 Modifica el ejemplo Ex-02-02 para que el fondo sea de color gris y la forma que se dibuje sea un cuadrado de 20 x 20 píxeles de color verde cuando no se presiona el botón del ratón, y de color rojo al presionarlo. ¿Dónde situarías el cambio de color del fondo? ¿Y los cambios de color y de forma del objeto que sigue al ratón?


smooth()

La función smooth() viene activada por defecto, aunque es buena cos-tumbre añadirla a la función setup(). En la figura se puede ver un círculo con función smooth (izquierda) y uno con función noSmooth (dere-cha).

El siguiente sketch dibuja una elpise en la posición del puntero del ratón. Si el puntero está sobre la mitad izquierda de la ventana, la elipse se rellena de negro. Si el puntero se sitúa sobre la mitad derecha, cambia a blanco.

void setup(){

size(300,300);

smooth();

} // Fin setup()

void draw(){

background(150) ; // Un gris intermedio

if(mouseX<150 ) // La mitad de la ventana

{

fill(0);

ellipse(mouseX,mouseY,50,50);

} // Fin if mouseX

else

{

fill(255);


} // Fin else

}

Ejemplo resuelto

Estructuras if else if

En esencia se trata de la misma estructura. Tras el if siempre va una condición que en caso de cumplirse, hará que se ejecuten las instrucciones del bloque entre llaves que hay a continuación.

Después, el programa continúa con su ejecución. Si queremos añadir otro grupo de instrucciones para el caso específico en que la condición sea falsa, añadimos else y otro bloque de instrucciones entre llaves.

También podemos encadenar secuencias if else:

if (condición)

{instrucciones}

else if (otra condición)

{más instrucciones}else {otras instrucciones}


27 Teclea el código del ejemplo if else de la izquierda. ¿Qué pasa si escribes la función background() en setup() en lugar de hacerlo en draw()?

28 Modifica el código del ejem-plo para que la ventana tenga 500 x 200 píxeles y divídela (de forma imaginaria) en cinco bloques iguales, de modo que al mover el ratón por el primer bloque la elipse esté rellena de color negro, los tres bloques intermedios correspondan con rellenos rojo, verde y azul, y que en el último bloque se rellene de blanco. Pista: tendrás que encadenar una serie de if else, cada uno con una condición.

Saco de dudas

11

y el primero será de diámetro igual al

de la ventana */

ellipse(anchoV/2,altoV/2,anchoV,altoV);

fill(0,colorMax,0); // Segundo círculo en verde

/* Las proporciones pueden variar */

ellipse(anchoV/2,altoV/2,2*anchoV/3,2*altoV/3);

fill(0,0,colorMax); // Tercer círculo en azul

ellipse(anchoV/2,altoV/2,anchoV/3,altoV/3);

fill(colorMax); // El círculo central en blanco

ellipse(anchoV/2,altoV/2,anchoV/10,altoV/10);

25 Al utilizar la función smooth(), los bordes de las figuras aparecen aparecen suavizados. Es la técnica llamada anti-aliasing que permite suavizar los bordes de los objetos representados. A modo de curiosidad, existen diferentes niveles de suavizado, que se aplican como parámetro de la función, por ejemplo, smooth(4);

26 El código debería ser similar al siguiente:

// Example 02-02 from «Getting Started with Processing»

// by Reas & Fry. O’Reilly / Make 2010

// Modified by Ignacio Hoyos

// 2015, April

void setup() {

size(480, 120);

background(100);

smooth();

}

void draw() {

if (mousePressed) {

fill(255,0,0);

} else {

fill(0,255,0);

}

rect(mouseX, mouseY, 20, 20);

}

El cambio de color de fondo debe ir en setup(), mientras que los cambios de color y forma del objeto deben ir en draw().

Estructuras de control. Decisiones

Soluciones27 No se repinta el fondo a medida que se dibujan las elipses, por lo que van dejando rastro sobre

el lienzo.

28 El código debería ser similar al siguiente:

void setup(){

size(500,200);

smooth();

}

void draw(){

if(mouseX<100){

fill(0);

} else if(mouseX>=100 && mouseX<200){

fill(255,0,0);


fill(0,255,0);


fill(0,0,255);

} else if(mouseX>=400){

fill(255);

}

12

background(150); // Si se quita deja rastro


}

29 El código del ejemplo cambia el color de relleno de la elipse en función de nuestras pulsacio-nes de teclas. Si definimos la variable letter en setup(), al intentar ejecutar el sketch, nos de-vuelve un error: Cannot find anything named «letter» (No puedo encontrar nada llamado «let-ter»). Si definimos la variable fuera de setup() y de draw(), el programa se ejecuta, pero no responde a las pulsaciones de teclas cambiando el color de relleno de la elipse, por lo que no hace lo que esperábamos.

30 Lo más sencillo es definir background() en setup().

31 Se espera que asigne los colores blanco, negro, rojo, verde y azul a los números del 0 al 4 para el relleno y del 5 al 9 para el fondo. El código podría ser similar a:

void setup(){

size(500,200);

smooth();

} // Fin setup()

void draw(){

char letter = key; // Leer carácter de teclado

background(150); // Fondo gris intermedio

switch(letter){

case ‘0’: // Si pulsamos ‘0’

fill(0); // Relleno negro

break;


fill(255); // Relleno blanco

break;


fill(255,0,0); // Relleno rojo

break;


fill(0,255,0); // Relleno verde

break;


fill(0,0,255); // Relleno azul

break;



break;


background(255); // Fondo blanco

break;


background(255,0,0); // Fondo rojo

break;


background(0,255,0); // Fondo verde

break;


background(0,0,255); // Fondo azul

break;

default:

fill(255); // Si pulsamos otra tecla relleno blanco y


} // Fin switch


} // Fin draw()

24 25

Unidad 1

switch case

Se emplea cuando hay más de dos posibles valores entre los que elegir:

switch (expresión)

{

case etiqueta_1:

instrucciones; // No son necesarias las llaves

break;

case etiqueta_2:

otras instrucciones;

break;

default:

instrucciones si no se cumplen los anteriores

casos;

}

ä 2.9 Estructuras de control. BuclesUn bucle es una estructura que contiene una serie de instrucciones que deben ejecutarse de forma reiterativa mientras se cumple cierta condición (también hay bucles que se ejecutan hasta que se cumple cierta condición). En Processing hay dos bucles: el bucle while y el bucle for.

El bucle while

El bucle while ejecuta una serie de instrucciones mientras se cumple la condición de control del bucle. Los diseñadores de Processing nos advierten de que lo usemos con cuidado, pues el código que hay den-tro del bucle se ejecutará hasta que se cumpla la condición de salida. Esto podría ocasionar que los eventos de teclado y ratón quedaran desactualizados e, incluso, se podría llegar a bloquear el entorno de ejecución.

while (condición)

{

Instrucciones del interior del bucle, se

ejecutan mientras la condición entre paréntesis

es cierta.

Una de las instrucciones debe cambiar la

variable de control del bucle de modo que la

condición de control deje de ser cierta.

}

2 PROCESSING

Este código dibuja una elipse en la posición del puntero del ratón. Si pulsamos en el teclado las letras R, G o B (mayúsculas o mi-núsculas), el color de relleno de la elipse pasa a ser rojo, verde o azul, respectivamente. Si pulsamos cualquier otra tecla, el relleno cambia a blanco.

void setup(){

size(500,200);

smooth();

} // Fin setup()

void draw(){



switch(letter){

case 'r': // Si pulsamos ‘r’ o ‘R’

case 'R':


break;

case 'g': // Si pulsamos ‘g’ o ‘G’

case 'G':


break;

case 'b': // Si pulsamos ‘b’ o ‘B’

case 'B':


break;

default:

fill(255); // Si pulsamos otro relleno blanco

} // Fin switch

ellipse(mouseX,mouseY,50,50);} // Fin draw()

Ejemplo resuelto

void setup(){size(500,200);smooth();background(150); // Fondo gris intermedionoStroke(); // Figuras sin borde

} // Fin setup()void draw(){

int i = 50; // Variable de control del bucle // servirá para variar la coordenada X

while(i<width-25){ellipse(i,height/2,25,25); // Dibujamos las // elipses en las coordenadas que marcan i y // (height/2) así quedan centradas verticalmentei=i+50; // Incrementamos i para salir del bucle

} // Fin while} // Fin draw()

Ejemplo resuelto


29 Teclea el código del ejemplo re-suelto switch case. ¿Qué pasa si la variable letter la defines en setup()? ¿Y si la defines fuera de las dos funciones, setup() y draw()?

30 ¿Qué se debe hacer si quieres dejar un rastro de elipses de colores a lo largo de la ventana gráfica?

31 Modifica el código del ejemplo switch case para que puedas cambiar el color de la elipse al pulsar los números del 0 al 4 y el color del fondo al pulsar los números del 5 al 9.

32 Modifica el código del ejem-plo if else de la página ante-rior para que la ventana tenga 500 x 500 píxeles y divídela (de forma imaginaria) en cua-tro cuadrantes. Haz que la elip-se cambie a uno de los cuatro colores del parchís (rojo, ver-de, amarillo y azul) al entrar en cada uno de los cuadrantes co-rrespondientes. Haz que el fon-do cambie a blanco al pulsar la letra W y que cambie a negro al pulsar K, en ambos casos se deben admitir mayúsculas y mi-núsculas.


33 Teclea el código del ejemplo, haz un análisis de la función draw() y responde a las si-guientes preguntas:

a) ¿Qué pasa si cambiamos el tamaño de la ventana a 300 x 100?

b) ¿Y si sobre el original cam-biamos la condición del while a (i < 1000)?

c) ¿Y con la condición (i > 1)?

34 Modifica el código del ejemplo while para que el alto de las elipses se adapte a la altura de la ventana.

35 Busca en https://processing. org/reference/while.html la ex-plicación para while, e introdu-ce el ejemplo que allí aparece. Explica línea a línea qué es lo que hace cada una de las ins-trucciones.

36 Modifica ese ejemplo introdu-ciendo las siguientes variaciones:

line(30, i, 80-i, i);

line(0, i, 80-i, i);

line(0, 80+i, 80-i, i);

line(0, 80+i, 80, i);

37 Crea ahora dos nuevas varia-ciones y explica qué es lo que hacen.

13

32 El código podría ser similar a:

void setup(){

size(500,500);

smooth();

} // Fin setup()

void draw(){



switch(letter){ // Cambio de fondo

case ‘W’:

case ‘w’: // Si pulsamos ‘W’ o ‘w’

background(255); // Fondo blanco

break;

case ‘K’:

case ‘k’: // Si pulsamos ‘K’ o ‘k’


break;

default:

background(150); // Si pulsamos otra tecla fondo gris intermedio

} // Fin switch

if(mouseX<250 && mouseY<250){


} else if(mouseX>=250 && mouseY<250){


} else if(mouseX<250 && mouseY>=250){


} else if(mouseX>=250 && mouseY>=250){

fill(255,255,0); // Relleno amarillo

}


} // Fin draw()

Estructuras de control. Bucles

• Es necesario hacer ver al alumnado que la elección incorrecta de las condiciones de control del bucle puede ocasionar efectos inesperados, desde que no llegue a ejecutarse nunca hasta que se convierta en un bucle infinito.

Soluciones33 La primera línea de la función draw() crea una variable numérica de tipo entero y la inicializa.

Como indican los comentarios, servirá para controlar la ejecución del bucle, así como para modificar a cada paso la coordendada x en la que se dibujarán las elipses.

La siguienta línea de código es un bucle while. La condición de control indica que el bucle de-berá repetirse mientras el valor de i sea menor que el ancho de la ventana menos 25 píxeles.

Se dibuja una circunferencia de 25 píxeles de diámetro en las coordenadas indicadas por el valor de i para x, y en el medio de la ventana para la y. Esta segunda coordenada permanece constante durante la ejecución del bucle.

Se incrementa el valor de i en 50 unidades. Esto hará que al avanzar la ejecución, se alcance la condición de salida.

a) El número de elipses dibujadas se reduce a cinco, pero siguen estando centradas horizontal y verticalmente.

14

b) Las elipses siguen estando centradas verticalmente, pero el programa trata de seguir dibu-jando más allá del límite derecho de la ventana.

c) Con esa condición se crea un bucle infinito. En este caso, la ejecución deja una pantalla en blanco.

34 Esta actividad está pensada para que el alumnado trabaje el uso de dimensiones relativas.

Como solo se menciona la altura de la ventana, la línea de código que habría que modificar podría quedar como:

ellipse(i,height/2,25,height/8);

Esa modificación nos devolvería el resultado original para las dimensiones de ventana 500 x 200. Los alumnos y las alumnas pueden proponer diversas fórmulas.

Para las dimensiones 500 x 100, la ejecución sería:

Para las dimensiones 500 x 400, la ejecución sería:

35 El código del ejemplo es el siguiente:

int i = 0;

while (i < 80) {

line(30, i, 80, i);

i = i + 5;

}

Este ejemplo aprovecha el tamaño de ventana por defecto para dibujar líneas paralelas verti-cales.

La primera instrucción crea una variable de tipo entero, i, y la inicializa a 0.

La segunda instrucción crea un bucle while. Se saldrá del bucle cuando i > = 80.

El cuerpo del bucle lo forman dos instrucciones:

– La primera, traza una línea desde x = 30, y = i hasta x = 80, y = i.

Las líneas siempre tendrán 50 píxeles de longitud, empiezan y acaban en las mismas coorde-nadas x, y lo que cambia dentro del bucle es el valor de la coordenada y.

– La segunda instrucción del bucle incrementa en 5 unidades el valor de i, lo que permitirá al-canzar la condición de salida del bucle tras dieciséis repeticiones.

15

36 Esta actividad ilustra el hecho de que el simple cambio de alguno de los parámetros de una instrucción tan sencilla como line puede producir efectos sorprendentes.

a) Para line(30, i, 80-i, i); b) Para line(0, i, 80-i, i);

c) Para line(0, 80+i, 80-i, i); d) Para line(0, 80+i, 80, i);

37 Trabajo a realizar por el alumnado.

38 El código de la primera versión de for es:

for (int i = 0; i < 40; i = i+1) {

line(30, i, 80, i);

}

Su ejecución produce 40 líneas horizontales contiguas, por lo que da la sensación de ser un rectángulo relleno.

El código de la segunda versión de for es:

for (int i = 0; i < 80; i = i+5) {

line(30, i, 80, i);

}

Su ejecución es como la de la primera versión del bucle while de la actividad 16.

El código de la tercera versión de for es:

for (int i = 40; i < 80; i = i+5) {

line(30, i, 80, i);

}

Su ejecución es muy similar a la del anterior ejemplo. La única diferencia es que el bucle em-pieza en 40 en lugar de 0, por lo que se ejecuta menos veces y la primera línea dibujada ya no está en y = 0, sino en y = 40.

39 Las condiciones del bucle no se modifican. Solo hay que cambiar: line(i, 30, i, 80);

40 Una posible solución es:

void setup(){

size(150,100);

smooth();

} // Fin setup()

void draw(){

// La variable de control del bucle

// se puede declarar dentro del paréntesis

for(int i=0;i<width-50;i=i+5){

line(i,80,i+50,30); // dibujamos las líneas diagonales

} // Fin for

} // Fin draw()

26 27

Unidad 1

El bucle for

El bucle for ejecuta una serie de instrucciones mientras que se cumpla una determinada condición de test. Además del bloque de instruc-ciones que se van a repetir, el bucle for consta de tres partes que se escriben entre paréntesis: inicialización de la variable de control, com-paración y actualización de la variable de control. Las tres partes se separan entre sí por medio de «;».

for (inicialización; comparación; incremento)

{

Instrucciones del interior del bucle, se

ejecutan mientras la condición entre paréntesis

es cierta.

Este bucle modifica la variable de control

automáticamente, nosotros decidimos el valor del

incremento.

}

38 Busca en la página de referencia del lenguaje Processing, la explicación para for, e introduce los tres primeros ejemplos que allí aparecen.

Explica qué es lo que diferen-cia las tres versiones del códi-go.

39 Modifica el código del segun-do ejemplo para formar líneas paralelas verticales.

40 Crea ahora líneas inclinadas 45° como las del ejemplo. Emplea las funciones se-

tup() y draw() para ajustar las dimensiones de la ventana y declarar las variables donde mejor corresponda.


void setup(){

size(500,500);

smooth();

background(117,221,143); // Fondo verde claro

noStroke(); // Figuras sin borde

} // Fin setup()

void draw(){



for(int i=0;i<width;i=i+10){

fill(i/2); // Aprovecho i para un degradado de negro a blanco

ellipse(i,i,12,10); // Dibujamos las elipses formando

// una diagonal

} // Fin for

} // Fin draw()

Ejemplo resuelto

Mediante esta práctica guiada vamos a ver cómo anidar un bucle for dentro de otro y sacar partido de su empleo.

El ejercicio consistirá en dibujar una matriz de círculos de 3 filas y 5 columnas. En cada fila, los círculos harán un degradado de uno de los colores primarios, RGB. Para ello, vamos a ir resolviendo paso a paso cada una de las partes y, finalmente, pondremos todo a trabajar en conjunto.

1 En una primera aproximación construimos una fila y trabajamos sin color:

void setup(){

size(600,100);

smooth();

noStroke(); // Figuras sin borde} // Fin setup()

void draw(){



for(int i=0;i<5;i=i+1){

fill(255/(i+1)); // Aprovecho i para un

// degradado de blanco a negro

ellipse((i+1)*100,50,70,70); // Elipses

} // Fin for

} // Fin draw()

2 Lo siguiente es construir tres filas. Para ello hay que redimensio-nar la ventana. También podemos aprovechar para usar un color diferente en cada una de las filas.

void setup(){

size(600,300);

smooth();


void draw(){




fill(255/(i+1),0,0); // Aprovecho i para el

//degradado de rojo

ellipse((i+1)*100,50,70,70); // Elipses

} // Fin primer for

Práctica guiada2 PROCESSING Videotutoriales de Processing

En el siguiente enlace puedes encontrar numerosos tutoriales en vídeo que co-bren los habituales niveles; principiante, intermedio y avanzado. Pueden resultarte de gran ayuda.

16

Processing. Práctica guiadaLa anidación de bucles se puede considerar característica avanzada para el alumnado de 3.º de ESO. No deberían abordar este epígrafe sin haber realizado las actividades de las páginas previas y haber entendido todo lo que concierne a coordenadas y operaciones para modificar la posición y las proporciones de los objetos dibujados.

Soluciones41 Una posible solución es:

void setup(){

size(600,400);

smooth();


} // Fin setup()

void draw(){

for(int j=0;j<4;j=j+1){


if(j==0){fill(255/(i+1));}

else if(j==1){fill(255/(i+1),0,0);} // Aprovecho i para el degradado de color

else if(j==2){fill(0,255/(i+1),0);}

else if(j==3){fill(0,0,255/(i+1));}

ellipse((i+1)*100,j*100+50,70,70); // dibujamos las elipses

} // Fin for interno. Controla coordenada x

} // Fin for externo. Controla coordenada y

} // Fin draw()

42 Una posible solución es:

void setup(){

size(600,300);

smooth();


} // Fin setup()

void draw(){



if(j==0){fill(255/(i+1),0,0);} // Aprovecho i para el degradado de color

else if(j==1){fill(0,255/(i+1),0);}

else if(j==2){fill(0,0,255/(i+1));}

ellipse((i+1)*100,j*100+50,70,70); // dibujamos las elipses



} // Fin draw()

29

Unidad 1

Taller de tecnología

2928

2 PROCESSING for(int i=0;i<5;i=i+1){

fill(0,255/(i+1),0); // Aprovecho i para el

// degradado de verde

ellipse((i+1)*100,150,70,70); // Dibujamos las

elipses

} // Fin segundo for


fill(0,0,255/(i+1)); // Aprovecho i para el

// degradado de azul


// elipses

} // Fin tercer for

} // Fin draw()

3 Como se puede observar en el código anterior, es posible reutilizar la variable i, aunque también podríamos haber elegido otros nom-bres de variables de control para los bucles segundo y tercero. No obstante, es fácil darse cuenta de que, salvo por pequeñas dife-rencias, hemos repetido el código del primer bucle tres veces. Una alternativa es emplear dos bucles anidados, de modo que uno se encargue de variar la coordenada x, y otro, la coordenada y.

void setup(){

size(600,300);

smooth();


void draw(){



if(j==0){fill(255/(i+1),0,0);}

else if(j==1){fill(0,255/(i+1),0);}

else if(j==2){fill(0,0,255/(i+1));}

ellipse((i+1)*100,(j+1)*75,70,70);

// Dibujamos las elipses



} // Fin draw()

Presentaciónproyecto

Los fractales son figuras geométricas en las que las formas que se di-bujan se repiten en diferentes escalas. Imagínate que dibujas un trián-gulo sencillo y que defines un segmento de su perímetro en el que haces el mismo triángulo, pero más pequeño, y que según creas el triángulo pequeño, haces nuevos segmentos con triángulos aún más pequeños y así sucesivamente, disminuyendo la escala de los triángu-los y aumentando su número. Cada vez que reduces la escala, produ-ces una iteración. La figura geométrica que obtendrías se llama Curva de Koch. Copia el programa de Processing y observa el resultado.

// Rombos fractales, creado por M.Blazquez, I.Hoyos y

// J.Santos (2019)

void setup(){

size(500,500); // Pantalla de 500x500 píxeles

}

void draw(){

background(200,200,220); // Fondo de color violeta

stroke(0,0,200,50); // Atributos color contorno

fill(0,0,255,70); // Atributos de color de relleno

translate(width/2,height/2); // Traslado al centro

draw_fractal(250); // Llamada función fractal r=250

}

// Inicio de la función de dibujo fractal

void draw_fractal(floatr){

quad(-r,0,0,r,r,0,0,-r); // Rombo que servirá de base

if (r<1) // El rombo más pequeño tendrá lado 1 px

return; // Matriz de rombos trasladados hacia abajo

pushMatrix(); // Se crea la matriz de transformaciones

translate(0,r/4); // Mueve el origen abajo 1/4 de r

draw_fractal(r/2); // Llamada recursiva rombo 1/2

popMatrix(); // Se cierra la matriz de transformaciones

// Se repite el proceso trasladando rombos hacia arriba

pushMatrix();

translate(0,-r/4);

draw_fractal(r/2);

popMatrix();

// Repite el proceso trasladando rombos derecha

pushMatrix();

translate(r/4,0);

draw_fractal(r/2);

pushMatrix();

// Repite el proceso trasladando rombos izquierda

pushMatrix();

translate(-r/4,0);

draw_fractal(r/2);

pushMatrix();

}

Dibujos fractales

1.ª Interacción

3.ª Interacción

2.ª Interacción

Hay muchas figuras de la naturaleza que se construyen mediante fractales. Observa, por ejemplo, la forma de una coliflor romanesco.

41 Modifica Elipses_color_for_anidados para que en la primera fila aparezca la escala de grises. Tendrás que ajustar también el tamaño de la ventana.

42 En el ejemplo Elipses_color_for_anidados se ha dejado, a propósito, una separación en el eje y dis-tinta de la del ejemplo anterior, Elipses_color_for. Haz las modificaciones necesarias para que el re-sultado obtenido sea igual al de Elipses_color_for.

43 Aumenta el número de elipses por fila hasta 10. Tendrás que modificar sus diámetros. También sería recomendable modificar el tamaño de la ventana para que las elipses se ajusten mejor y el color de fondo no predomine.

44 ¿Cómo harías para que el tamaño de las elipses y su separación se ajustaran a las dimensiones de la ventana?


17

43 Una posible solución se encuentra en la web de Anaya Educación.

Otra solución viene dada por la modificación de la función draw():

void draw(){



if (j==0) {fill(255/(0.5*i+1),0,0);}

else if(j==1){fill(0,255/(0.5*i+1),0);}

else if(j==2){fill(0,0,255/(0.5*i+1));}

ellipse((i+1)*width/11,(j+1)*75,width/15,width/15);




} // Fin draw()

En el segundo bucle, que corresponde al número de circunferencias en cada fila, se reemplaza el valor de 5 por 10.

Para hacer que los degradados sean más progresivos, se puede multiplicar por 0.5 el valor de la variable i en las instrucciones fill.

Por último, se ajusta el diámetro de las circunferencias al del lienzo utilizando la variable width, variable del sistema que almacena el ancho del lienzo. Es utilizada para determinar la distancia entre los centros y sus diámetros. El alumno puede encontrar el valor a utilizar mediante un sencillo razonamiento matemático, o bien, mediante prueba y error.

44 Se trata de deducir una fórmula que ajuste de manera automática las dimensiones de las elip-ses y las coordenadas en las que dibujarlas.

Todos los cálculos deben hacerse en relación con las dimensiones de la ventana y con el nú-mero de elipses que se quiera dibujar.

Taller de Tecnología. Dibujos fractalesCE.5.1. (EA.5.1.1.)

Este proyecto propone que los alumnos y las alumnas se adentren en el concepto de geometría fractal y hagan modificaciones al código para producir nuevos y sorprendentes resultados.

Se puede proponer a aquellos alumnos y alumnas más avanzados, que investiguen sobre otros fractales distintos del propuesto y escriban el código que los genera.

En relación con la generación de fractales en Processing, se pueden visitar las siguientes páginas:

https://natureofcode.com/book/chapter-8-fractals/

http://www.emilianocausa.ar/emiliano/textos/

Fractales%20Mediante%20Funciones%20Recursivas-Emiliano%20Causa.pdf

https://es.wikipedia.org/wiki/Arte_generativo

Trabaja con lo aprendidoCE.1.3. (EA.1.3.1.) CE.1.4. (EA.1.4.1.) CE.2.1. (EA.2.1.1.) CE.2.5. (EA.2.5.1.) CE.5.1. (EA.5.1.1.)

LibreCAD

Soluciones1 La ventana habrá de tener este aspecto:

29

Unidad 1

Taller de tecnología

2928

2 PROCESSING for(int i=0;i<5;i=i+1){

fill(0,255/(i+1),0); // Aprovecho i para el

// degradado de verde


elipses

} // Fin segundo for


fill(0,0,255/(i+1)); // Aprovecho i para el

// degradado de azul


// elipses

} // Fin tercer for

} // Fin draw()

3 Como se puede observar en el código anterior, es posible reutilizar la variable i, aunque también podríamos haber elegido otros nom-bres de variables de control para los bucles segundo y tercero. No obstante, es fácil darse cuenta de que, salvo por pequeñas dife-rencias, hemos repetido el código del primer bucle tres veces. Una alternativa es emplear dos bucles anidados, de modo que uno se encargue de variar la coordenada x, y otro, la coordenada y.

void setup(){

size(600,300);

smooth();


void draw(){



if(j==0){fill(255/(i+1),0,0);}

else if(j==1){fill(0,255/(i+1),0);}

else if(j==2){fill(0,0,255/(i+1));}

ellipse((i+1)*100,(j+1)*75,70,70);




} // Fin draw()

Presentaciónproyecto

Los fractales son figuras geométricas en las que las formas que se di-bujan se repiten en diferentes escalas. Imagínate que dibujas un trián-gulo sencillo y que defines un segmento de su perímetro en el que haces el mismo triángulo, pero más pequeño, y que según creas el triángulo pequeño, haces nuevos segmentos con triángulos aún más pequeños y así sucesivamente, disminuyendo la escala de los triángu-los y aumentando su número. Cada vez que reduces la escala, produ-ces una iteración. La figura geométrica que obtendrías se llama Curva de Koch. Copia el programa de Processing y observa el resultado.

// Rombos fractales, creado por M.Blazquez, I.Hoyos y

// J.Santos (2019)

void setup(){

size(500,500); // Pantalla de 500x500 píxeles

}

void draw(){

background(200,200,220); // Fondo de color violeta

stroke(0,0,200,50); // Atributos color contorno

fill(0,0,255,70); // Atributos de color de relleno

translate(width/2,height/2); // Traslado al centro

draw_fractal(250); // Llamada función fractal r=250

}

// Inicio de la función de dibujo fractal

void draw_fractal(floatr){

quad(-r,0,0,r,r,0,0,-r); // Rombo que servirá de base

if (r<1) // El rombo más pequeño tendrá lado 1 px

return; // Matriz de rombos trasladados hacia abajo

pushMatrix(); // Se crea la matriz de transformaciones

translate(0,r/4); // Mueve el origen abajo 1/4 de r

draw_fractal(r/2); // Llamada recursiva rombo 1/2

popMatrix(); // Se cierra la matriz de transformaciones

// Se repite el proceso trasladando rombos hacia arriba

pushMatrix();

translate(0,-r/4);

draw_fractal(r/2);

popMatrix();

// Repite el proceso trasladando rombos derecha

pushMatrix();

translate(r/4,0);

draw_fractal(r/2);

pushMatrix();

// Repite el proceso trasladando rombos izquierda

pushMatrix();

translate(-r/4,0);

draw_fractal(r/2);

pushMatrix();

}

Dibujos fractales

1.ª Interacción

3.ª Interacción

2.ª Interacción

Hay muchas figuras de la naturaleza que se construyen mediante fractales. Observa, por ejemplo, la forma de una coliflor romanesco.

41 Modifica Elipses_color_for_anidados para que en la primera fila aparezca la escala de grises. Tendrás que ajustar también el tamaño de la ventana.

42 En el ejemplo Elipses_color_for_anidados se ha dejado, a propósito, una separación en el eje y dis-tinta de la del ejemplo anterior, Elipses_color_for. Haz las modificaciones necesarias para que el re-sultado obtenido sea igual al de Elipses_color_for.

43 Aumenta el número de elipses por fila hasta 10. Tendrás que modificar sus diámetros. También sería recomendable modificar el tamaño de la ventana para que las elipses se ajusten mejor y el color de fondo no predomine.

44 ¿Cómo harías para que el tamaño de las elipses y su separación se ajustaran a las dimensiones de la ventana?


trabaja con lo aprendidoUnidad 1En el «Portfolio» del banco de recursos de anayaeducacion.es,

encontrarás orientaciones sobre cómo elaborar tu portfolio.

30 31

Cualquier figura geométrica se puede replicar mediante un fractal y Processing es un lenguaje con el que se puede implementar cualquier curva desde figuras más sencillas.

Entra en la página oficial de Processing y ejecuta el proyecto Recursi-ve Tree de Daniel Shiffman. Mueve el ratón hacia la izquierda y hacia la derecha para cambiar el ángulo.

Trata de modificar el código de los programas para obtener diferentes iteraciones y figuras distintas.

float theta;

void setup() {

size(400, 400);

}

void draw() {

background(0);

frameRate(30);stroke(0, 255, 0);

strokeWeight (2);// Ángulo de 0 a 90 grados según la posición del ratón

float a = (mouseX / (float) width) * 90f;

theta = radians(a); //Convertir a radianes

// Comenzar el árbol desde la zona inferior

translate(width/2,height);

line(0,0,0,-120); // Dibujar una línea de 120 píxeles

// Mover al final de la línea

translate(0,-120);

// Comienza la rafimicación recursiva

branch(120);

}

void branch(float h) {

stroke(0, 255, 0);

h *= 0.66; // Cada rama tendrá dos tercios de la anterior

// Todas las funciones recursivas deben tener una

// condición de salida: longitud es de 2 píxeles o menos

if (h > 2) {

pushMatrix(); // Guarda el estado actual

rotate(theta); // Rotar por theta

line(0, 0, 0, -h); // Dibuja la rama

translate(0, -h); // Moverse al final de la rama

branch(h); // Generar dos nuevas ramas

popMatrix(); // Restaurar el estado de la matriz

// Repite lo mismo, bifurcando a la izquierda

pushMatrix();

rotate(-theta);

line(0, 0, 0, -h); // Dibuja la rama

translate(0, -h); // Moverse al final de la rama

branch(h);

popMatrix();

}

}

LibreCAD

1 Abre LibreCAD y representa esta figura que corres-ponde a las vistas de un objeto. Trata después de representar en el mismo archivo dicho objeto en perspectiva.

2 En la siguiente pantalla se ha representado un ob-jeto en perspectiva caballera. Reproduce en un ar-chivo de LibreCAD el mismo y realiza a su lado las vistas del objeto.

3 Observa la siguiente pieza realizada en LibreCAD. Se trata de una pieza que partiendo de un cuadra-do de 90 mm de lado se le han realizado cuatro agujeros cuyos centros coinciden con los radios de curvatura de las esquinas redondeadas. Los aguje-ros tienen un diámetro de 20 mm, mientras que las esquinas redondeadas corresponden con un arco de circunferencia de 40 mm de diámetro. Repre-senta la figura y realiza las acotaciones necesarias para poder fabricar la pieza.

Processing4 En el desarrollo de un programa, en un punto dado

hay que repetir tres veces una determinada ac-ción. ¿Qué tipo de estructura habría que emplear? a) Un procedimiento; b) una función ; c) una de-cisión; d) un bucle no condicionado; e) un bucle condicionado. Justifica tu elección.

5 Indica al menos cuatro características técnicas más sobresalientes de Processing.

6 ¿Cuál es el principal enfoque que se le da a Processing? ¿Crees que se le puede sacar partido en otros ámbitos?

7 ¿Para qué sistema operativo valen las aplicaciones que puedes desarrollar programando con Proces-sing? ¿Qué herramienta está relacionada con la capacidad de exportación de aplicaciones?

8 ¿Cómo se denomina la ventana gráfica sobre la que se dibuja en Processing?

9 Explica cómo resolver el error que contiene la si-guiente expresión: line(10,15;120,100).

10 ¿Cuál es la expresión que permite cerrar un arco mediante una línea recta?, ¿con qué instrucción puedes trazar una línea desde el inicio del arco al centro de la elipse que lo genera y, desde ese punto, otra línea hasta el fin del arco?

El programa representa una estructura simple en forma de árbol a través de la recursividad. El ángulo de ramifi-cación se calcula en función de la ubicación horizontal del ratón.

18

2 La ventana de trabajo tendrá este aspecto:

3 El resultado tendrá este aspecto:

Processing4 Se emplearía un bucle condicionado. Tendría una variable de control que se incrementaría tres

veces hasta alcanzar (o superar) el valor de referencia.

5 Algunas de las características que podrían citar son:

• Libre para descarga y de código abierto.

• Disponible para GNU/Linux, Windows y Mac OS X.

• Bien documentado y con gran cantidad de libros disponibles.

• Creación de programas interactivos con salida 2D, 3D y PDF.

• Integración de OpenGL para aceleración en 3D.

• Más de 100 librerías que extienden el núcleo del software.

• Permite crear aplicaciones para la web, como un applet Java y también programando en JavaScript Mode.

• Permite crear aplicaciones para móviles usando el Android Mode.

• Permite conectar con hardware como Arduino y Wiring.

• Importación de fuentes tipográficas para uso en nuestros sketches.

• Impresión de documentos y gráficos de calidad.

6 El principal enfoque es artístico. No obstante, al estar escrito en Java, puede interactuar con infinidad de sistemas y dispositivos, como placas Arduino.

7 El código de Processing es de alto nivel e independiente de la plataforma.

La herramienta relacionada con la capacidad de exportación es el propio lenguaje Java.

8 Canvas o lienzo.

9 Contiene un punto y coma tras la segunda cifra, el 15, que hay que borrar.

10 Se cierra empleando el modo CHORD al final de la llamada a la función:

arc():arc(x, y, ancho, alto, inicio, fin, modo).

El modo PIE es el que traza una línea desde el inicio del arco al centro de la elipse que lo gene-ra y, desde allí, otra línea hasta el fin del arco.

32 33

Unidad 1

11 ¿Cuántos colores diferentes utiliza Processing? Si trabajas en escala de grises, ¿qué expresión hay que utilizar y cuántos valores de tonalidades de gris puedes elegir entre el negro y el blanco?

12 Al cambiar el color de un lienzo, se utiliza la instrucción: background (a, b, c) donde a, b y c corresponden a valores que se asignan a los colores primarios. ¿Cuáles son? ¿A qué po-sición pertenece cada uno de ellos en la expre-sión? ¿Qué rango numérico puede tomar cada uno? Haz un cálculo rápido e indica el número de diferentes colores compuestos que se pue-den conseguir.

13 Observa el siguiente código. Trata de modificarlo para que el grosor de la línea sea el mínimo posible.

size(450,300);

stroke(75,90,100);

strokeWeight(90);rect(0,0,400,200);

14 Haz un programa que dibuje una estrella de seis puntas en un lienzo de tamaño 500 por 500.

15 Explica cómo puedes insertar comentarios en un programa de Processing en los siguientes casos:

a) que ocupe varias líneas;

b) que ocupe una sola línea;

c) que ocupe varias líneas y además sea un co-mentario de documentación.

16 ¿Qué pasaría si…? ¿Se puede guardar un dato tipo float en una variable declarada como int? ¿Qué ocurre con los datos que se guarden?

17 ¿Qué inconveniente tiene guardar un valor que nunca tendrá más de 10 valores diferentes en una variable declarada como long?

18 ¿Qué diferencia hay entre una variable global y una variable local?

19 Explica en qué consiste una estructura de decisión simple. Escribe un ejemplo en el que, dependien-do del valor de una variable tipo char se dibuje un cuadrado o se dibuje un círculo. Fija tú mismo los valores de la variable char según los cuales el pro-grama debe actuar de una u otra manera.

20 ¿Qué estructura de decisión se emplea cuando se cuenta con más de dos opciones? Pon un ejemplo utilizando los comentarios.

21 ¿Cuál es la principal función de la siguiente expresión?

while (condición)

{

// Instrucciones de acción

}

22 ¿Qué diferencia encuentras entre estos dos códi-gos que contienen las mismas instrucciones? ¿Se reproducen las mismas figuras?//---- Código 1 ----

size(500,500);

ellipse (250,250,300,300);

line(50,200,450,200);

//---- Código 2 ----

size(500,500);

line(50,200,450,200);

ellipse (250,250,300,300);

23 Observa la siguiente figura realizada en un lien-zo de 500 píxeles de ancho por 550 píxeles de alto. Se compone de figuras sencillas que se unen en los vértices. Mide en el dibujo la posición de cada vértice con una regla y trata de calcular la posición de cada vértice a fin de hacer un progra-ma con Processing que realice esta composición. Cuenta con una pista: todas las medidas son múl-tiplos de 25.

24 Observa el siguiente código. Cópialo en Proces-sing y escribe comentarios en cada línea explican-do su funcionamiento.

void setup(){

size(500,500);

}

void draw(){

background(30,125,30);

line(250,25,250,475);

if(mouseX<250)

{

fill(200,25,25);

rect(mouseX,mouseY,50,100);

}

else

{

fill(25,25,200);

rect(mouseX,mouseY,50,100);

}

}

25 Observa este código en el que se simula la acción de la gravedad sobre una pelota. Contesta a las siguientes preguntas:

a) ¿Qué tipo de variables son x e y?

b) ¿Qué instrucción determina la velocidad de la pelota en cada momento?

c) ¿Qué pasa si se modifica el valor de la variable gravedad desde el valor inicial de 0,3 a 0,9?

d) ¿Qué le ocurre a la pelota si se cambia la ins-trucción velocidad = velocidad*-0.85 por la expresión velocidad = velocidad*-0.25?

e) Escribe el código en Processing y realiza co-mentarios explicando el funcionamiento del programa.

//---- Código ----

float x = 240;

float y = 0;

float velocidad = 0;

float gravedad = 0.3;

void setup() {

size(480, 480);

}

void draw() {

background(255);

fill(0,0,255);

stroke(0);

ellipseMode(CENTER);ellipse(x, y, 25, 25);

y = y + velocidad;

velocidad = velocidad + gravedad;

if (y > height) {

velocidad = velocidad * -0.85;

y = height;

}

}

26 Observa el siguiente código:

int C=0;

void setup() {

size(400, 400);

smooth();

}

void draw() {

for (C=0; C<width; C=C+40) {

fill(C);

ellipse (width/2, width/2, (width-C),

(width-C));

}

}

a) Indica qué líneas corresponden con el bloque de declaración de variables, con la configura-ción general del programa y con el bucle de re-petición.

b) ¿Qué medidas tiene el lienzo donde se va a re-crear la figura?

c) ¿Qué significa en el programa la variable C? ¿De qué tipo es?

d) Copia el código en Processing y ejecútalo. Es-cribe el código con comentarios que expliquen qué hace el programa.

e) ¿Cómo puedes hacer un degradado más fino?

anayaeducacion.es Consulta el apartado «Para estudiar» en el banco de recursos.

Desarrollo del pensamiento

Dispone del recurso «¿Qué pasaría si…? para que el alumnado aplique esta técnica de pensamiento.

19

11 Processing emplea colores RGB, 8 bits para cada uno de los componentes.

También permite escala de grises, con 256 tonos que van desde 0 (negro) a 255 (blanco).

Se emplean colores en funciones como fill(), background() o stroke().

• Un solo valor entre 0 y 255, dentro de los paréntesis, para escala de grises.

• Tres valores separados por comas, entre 0 y 255 cada uno de ellos, dentro de los paréntesis, para colores RGB.

12 Las letras a, b y c se corresponderían con los colores RGB.

La a sería el rojo; la b, el verde, y la c, el azul.

El rango de cada uno va de 0 a 255.

El número de colores distintos sería 256 x 256 x 256 = 16 777 216

13 Habría que modificar strokeWeight().

• Si se escribe 0 entre paréntesis, no habría borde alrededor de la figura.

• Si se escribe 1, el borde tendrá el grosor de un pixel.

14 Una posible solución sería:

background(230,230,250); // lavender

fill(148,0,211); // darkviolet

beginShape();

strokeWeight(4);

strokeJoin(ROUND);

strokeCap(SQUARE);

vertex(42, 374);

vertex(196, 356);

vertex(256, 498);

vertex(317, 356);

vertex(472, 374);

vertex(380, 248);

vertex(472, 125);

vertex(317, 144);

vertex(256, 0);

vertex(198, 144);

vertex(42, 126);

vertex(137, 248);

endShape(CLOSE);

15 Processing admite tres tipos de comentarios:

a) Para que ocupen varias líneas, deben ir encerrados entre los caracteres /* y */

b) Un comentario hasta fin de línea se indica con //

c) Comienzan con /** y terminan con */

16 No, no se pueden asignar los números en coma flotante a enteros, da error. Otros lenguajes, como C, podrían truncar los valores a la parte entera, pero eso no lo hace Java.

17 Las variables de tipo long ocupan 8 bytes en memoria, mientras que es posible emplear tipos como short int (2 bytes) o byte (1 byte) para almacenar información.

18 Las variables locales se definen dentro de una función y solo pueden ser empleadas por esa función.

Las variables globales se definen fuera de las funciones y se puede acceder a ellas desde cual-quier punto del programa.

20

19 Una estructura de decisión simple se bifurca en dos alternativas.

Una posible solución sería el siguiente código:

void setup(){

size(500,500);

smooth();

} // Fin setup()

void draw(){



if(letter == ‘e’ ||letter == ‘E’){ // Dibujar circunferencia


} else if (letter == ‘c’ ||letter == ‘C’){

rect(mouseX,mouseY,50,50); // Dibujar cuadrado

} else { // Si pulsamos otra tecla

ellipse(mouseX,mouseY,100,50); // Dibujar elipse

}

} // Fin draw()

20 Se utiliza switch-case, aunque también se pueden anidar cadenas de if-else. Esta última solu-ción es menos elegante y resulta mucho más confusa, por lo que debería evitarse.

21 Se trata de un bucle que se ejecutará mientras se cumpla la condición que va entre paréntesis. Dentro del propio bucle debería haber una instrucción que modificara de forma apropiada la variable de control de la condición; de otro modo, se trataría de un bucle infinito.

22 El orden en que se ejecuta el código determina el orden en el que los elementos son dibujados en el lienzo. En el primer caso, se dibuja la circunferencia sobre la línea ocultándola, mientras que en el segundo, la línea queda sobre la circunferencia.

23 El código que dibuja la imagen presentada es:

size(500,550);

fill(25,125,200);

quad(200,75,250,25,300,75,250,125);

fill(125,25,200);

triangle(250,125,175,200,325,200);

fill(25,125,25);

quad(325,200,375,200,375,350,325,350);

quad(175,200,125,200,125,350,175,350);

fill(125,25,200);

triangle(175,350,325,350,250,425);

fill(25,125,200);

quad(200,475,250,425,300,475,250,525);

24 Cuando se ejecuta el código, aparece un lienzo verde con una línea vertical en su centro. Además, se dibuja un rectángulo en posición vertical que se mueve según la posición del pun-tero del ratón, tomando el color rojo si se encuentra a la izquierda del lienzo y el color azul si su posición está a la derecha del lienzo.

Código con comentarios

void setup(){

size(500,500); // Se establece un tamaño de pantalla de 500x500

} //fin de la función setup()

void draw(){ //se inicia la función draw para que se repitan las instrucciones

contenidas en ella

background(30,125,30); // El fondo de pantalla será verde oscuro

line(250,25,250,475); //se dibuja una línea vertical que divide la pantalla

en dos zonas verticales iguales

if(mouseX<250) // Se establece la condición de decisión cuando se detecte

que el puntero del ratón sea menor que el valor de 250 píxeles

{ //bloque de instrucciones que se han de ejecutar cuando se cumpla la

condición indicada

21

fill(200,25,25); // El color de relleno de las figuras será rojizo cuando

se cumpla la condición, es decir cuando el puntero del ratón sea inferior a

250

rect(mouseX,mouseY,50,100); // se dibuja un rectángulo cuyo vértice supe-

rior izquierdo coincide con la posición del puntero del ratón y con un ancho

de 50 píxeles y un alto de 100 píxeles

} // Fin de la condición

else // Si no se cumple la condición (situación alternativa de la condi-

ción), es decir si el puntero del ratón está posicionado en un valor superior

a 250 píxeles...

{ //bloque de instrucciones que se han de ejecutar cuando se cumpla la si-

tuación alternativa de la condición

fill(25,25,200); //la figura que aparezca en el lado derecho de la pantalla

se coloreará de azul oscuro

rect(mouseX,mouseY,50,100); // la figura que hay que dibujar será el mismo

rectángulo que en la condición anterior

} // Fin de instrucciones de la situación alternativa de la condición (else)

} // Fin de la función draw()

25 a) Las variables x e y son del tipo numérico con decimales (float) y determinan la posición del centro de la pelota en cada momento.

b) La velocidad se establece con la instrucción velocidad = velocidad + gravedad;

c) Con el valor de gravedad de 0,3, la pelota tarda más en subir y bajar. Si ponemos el valor de gravedad a 0,9, la pelota realizará rebotes más rápidos.

d) Con un valor de –0,85, la pelota rebota varias veces, de forma parecida a como lo hace en la realidad una pelota de goma. Si modificamos este número a –0,25 parece como si la pelota tuviera mucho peso y apenas rebota 3 veces antes de pararse. Este parámetro simula, pues, el peso de la pelota.

e) Código comentado:

// Simulación de gravedad en una pelota

float x = 240; // situación X de la figura

float y = 0; // situación Y de la figura

float velocidad = 0; // velocidad de la figura

// Se va emplear la variable gravedad para la aceleración

// Empezamos con un número pequeño, pero se puede modificar a valores enteros

como 0.2, 0.3, etc.

// la aceleración se acumula en el tiempo, aumentando la velocidad.

float gravedad = 0.3;

void setup() {

size(480, 480);

}

void draw() {

background(255);

// Se dibuja un círculo a modo de pelota

fill(0,0,255);

stroke(0);

ellipseMode(CENTER);

ellipse(x, y, 25, 25);

//Se añade el valor de velocidad a la coordenada vertical

y = y + velocidad;

// Se incrementa la velocidad en función de la gravedad

velocidad = velocidad + gravedad;

// Cuando la pelota alcance el suelo, se invierte la velocidad

if (y > height) {

// Si se multiplica la velocidad por -1, siempre dará el mismo rebote

// Pero si se multiplica la velocidad por un valor entre 0 y -1, por

ejemplo, -0.85,

22

// el rebote será más realista ya que cada vez subirá un poco menos

// simulando la gravedad ejercida sobre la pelota.

//

velocidad = velocidad * -0.85;

y = height;

}

}

26 a)

Bloque de declaración de variables

int C=0;

Bloque de configuración del programa

void setup() {

size(400, 400);

smooth();

}

Bloque de bucle de repetición

void draw() {

for (C=0; C<width; C=C+40) {

fill(C);

ellipse (width/2, width/2, (width-C), (width-C));

}

}

b) Las medidas del lienzo son de 400 x 400 píxeles.

c) “C” actúa como una variable que identifica el valor del diámetro del círculo y del relleno del grado de gris en cada uno de los pasos del bucle. Se trata de una variable de tipo entero, declarada utilizando la palabra clave int.

d)

int C=0; // Declaro la variable entera C

void setup() {

size(400, 400); //Tamaño del lienzo

smooth(); //Dibujar con bordes lisos

}

void draw() {

for (C=0; C<width; C=C+40) { //El bucle termina cuando

//C es igual o mayor que 400, es decir, que el ancho de la pantalla.

fill(C); //Establece el color de relleno al valor de C: 40/80/120 ...

ellipse (width/2, width/2, (width-C), (width-C)); //Establece el centro

//de las elipses en la coordenada x=200 y=200 y el mimso ancho y alto

//con los siguientes valores: 360/320/280/240/200/160/120/80/40

}

}

e) El degradado se hace más fino y compacto a medida que modificamos el valor de la varia-ble C en el incremento de la instrucción for. Se puede invitar al alumnado a que pruebe con diferentes valores menores al 40 inicial, tanto por encima como por debajo, y observe el resultado.

Estándares de aprendizaje y criterios de evaluacióncurrÍculo de andalucía

Unidad 1

8 4 2 1 7 2 8 5 2 1 0 4 2 9227

564

www.anayaeducacion.es

y construye tu aprendiza

je.

SUMA

piezaS

eso tecnología · 2020. 4. 10. · eso m.p. blázquez, i. hoyos, j. santos tecnología propuesta...

Documents