Beruflich Dokumente
Kultur Dokumente
CONTENIDO
Introduccin 5
Relacin del contenido con el programa de estudios
de la UEA Fundamentos de programacin estructurada
Iconografa utilizada
11
13
13
16
18
19
19
Captulo 2. Dibujo
El pixel y formas bsicas
El punto
La lnea
El rectngulo
La elipse
El tringulo
El cuadriltero
Los arcos
El size
La escala de grises
El background
23
23
26
26
26
27
28
29
29
30
30
30
El stroke
El color
La transparencia
31
32
33
Captulo 3. Interaccin
37
Funcin setup() y draw() 37
Variables del sistema mouseX y mouseY, pmouseX y pmouseY
40
Interaccin con el teclado
43
Captulo 4. Variables
Las variables
Tipos de datos
Las variables predefinidas (del sistema)
El random
47
47
48
51
54
Captulo 5. Condicionales
57
Las condicionales
57
Tipos de condicionales
58
Simples 58
Dobles 59
Mltiples 61
Condicionales compuestas y los operadores lgicos
62
Construccin de botones
65
Captulo 6. Iteracin
La iteracin
La instruccin while
La instruccin for
Es bueno saber que ...
71
71
72
75
76
Conclusin 81
Bibliografa 83
Sitio mvil de Hola Mundo con Processing
85
Glosario 87
Introduccin
Hasta hace algunos aos, el aprender a programar solo era accesible para
una lite que pasaba mucho tiempo frente a una computadora intentando
escribir algunas lneas de cdigo. Sin embargo, ahora aparecen cada vez
ms herramientas que inducen a la programacin desde una temprana edad.
Dichas herramientas ofrecen un entorno amigable y diversas alternativas de
aprendizaje de los elementos bsicos de los lenguajes de alto nivel: variables, estructuras de control, sentencias, funciones, condicionales, operadores, etc. A su vez, el aprendizaje de fundamentos de programacin a partir
de este tipo de herramientas facilita el desarrollo de diversas habilidades
multidisciplinares que se ponen en marcha cuando se elaboran pequeos
programas encaminados, por ejemplo, a la resolucin de problemas, la creacin de juegos sencillos e incluso la generacin de escenarios complejos en
3D.
El doctor Mitchel Resnick, director del Grupo Kindergarten Lifelong en
el MIT Media Lab, del Massachusetts Institute of Technology, sostiene que
en la actualidad saber programar es como saber leer y escribir. Tambin es
posible compararlo con aprender otro idioma, ya que cada lenguaje de programacin que aprendamos nos sirve de la misma manera que nos sirve conocer otra lengua. En un artculo, Resnick asegura que existen razones ms
profundas y generales para aprender a programar:
en el proceso de aprender a programar, las personas aprenden muchas
otras cosas. No estn simplemente aprendiendo a programar, estn programando para aprender; pues adems de comprender ideas matemticas y computacionales, tales como variables y condicionales, simultneamente estn aprendiendo estrategias para solucionar problemas, disear
proyectos y comunicar ideas. Esas habilidades son tiles no solo para los
cientficos de la computacin, sino para todas las personas sin distingos de
Descripcin de la importancia
de los conocimientos a adquirir, as como
de las habilidades y actitudes a desarrollar
11
Iconografa utilizada
A lo largo del material, se utilizan un conjunto de conos que muestran cada
una de las tareas a realizar. La lista de los conos utilizados es la siguiente:
Objetivo
Actividades de aprendizaje
Ejemplos
Ejercicios
Actividad integradora
Experiencias previas
13
Actividades de aprendizaje
14
Ejemplo 1
Cules son los pasos que debemos seguir para comer en la cafetera?
La respuesta es:
Ir a la caja para comprar un boleto de la cafetera
Desplazarse a la cafetera
Hacer la fila para poder entrar
Seleccionar alimentos para comer
Seleccionar postre y agua
Entregar el boleto de comida
Buscar un lugar para sentarse
Comer los alimentos seleccionados
Introduccin a la programacin
15
podran afectar la continuidad del mismo. No solo se trata de hacer la previsin, sino de dar una solucin adecuada para lograr el resultado esperado
al finalizar el algoritmo.
El segundo es la iteracin: un conjunto de pasos pueden repetirse un
nmero determinado de veces o mientras una condicin no se cumpla. Este
elemento tambin debe estar diseado para que el algoritmo brinde el resultado esperado.
A continuacin se muestra un ejemplo que incluye estos dos elementos
adicionales, a los que llamaremos estructuras de control.
Ejemplo 2
Cules son los pasos que debemos de seguir para comer en la cafetera?
La respuesta es:
1. Ir a la caja para comprar un boleto de la cafetera
a. Si no hay boletos, entonces pedir un boleto prestado
2. Desplazarse a la cafetera
3. Formarme en la fila para poder entrar
b. Mientras estoy en la fila, entonces hago la tarea
4. Seleccionar alimentos para comer
5. Seleccionar postre y agua
6. Entregar boleto de comida
7. Buscar un lugar para sentarse
8. Si no hay lugar, entonces esperar a que se libere una mesa
c. Comer los alimentos seleccionados
16
Smbolo de decisin que nos sirve para generar una bifurcacin en el flujo de la informacin
Introduccin a la programacin
17
18
Ejercicio 2 propuesto
Disea los diagramas de flujo correspondientes para los algoritmos que se especifican a
continuacin. Agrega estructuras de control para obtener el resultado deseado:
Pasos que se deben de realizar para llegar a la universidad
Pasos para hacer un pastel de elote
Pasos para hacer una carne asada
Pasos para cambiar una llanta de un auto
Pasos para inscribirse en la universidad
Pasos para obtener la credencial del INE
Pasos para obtener un pasaporte
El arte de programar
La computadora es una mquina con extraordinarias capacidades (elaboracin de clculos matemticos, muestra de grficos e imgenes, procesamiento y almacenamiento datos, etc.) pero incapaz de hacer algo por s misma. La
potencialidad est a la espera de que una persona (nosotros) le saque provecho y, para ello, lo nico que se necesita es proporcionarle instrucciones.
Programar es definir instrucciones para ser ejecutadas por una computadora (programa). El objetivo de programar es invariablemente resolver un
problema.
El poder programar es entonces el poder comunicarse con una mquina,
darle instrucciones para que ejecute las tareas que se le piden. Estos programas se basan en algoritmos y en los diagramas de flujo de datos, los cuales
nos ayudarn a solucionar algn problema. Si un programa es la traduccin
de un algoritmo, entonces tambin tendr que heredar sus caractersticas
bsicas: ser preciso, estar bien definido y ser finito.
El programa es la traduccin de un algoritmo en un conjunto de instrucciones o lneas de cdigo que seguirn una sintaxis determinada, que el
lenguaje de programacin podr entender y posteriormente ejecutar.
Programar es un arte porque es un medio de creacin de cada uno de
los individuos que interactan con la computadora. Hay programadores expertos o novatos, pero lo importante es que la creacin de un programa es
nica y los programadores podrn llegar a un mismo resultado de manera
muy distinta. Esta es una caracterstica nica del arte de programar.
Introduccin a la programacin
19
Iniciacin a Processing
Processing es un lenguaje de programacin open source y un ambiente para
la gente que quiere programar imgenes, animacin y sonido. Es utilizado
por estudiantes, artistas, diseadores, arquitectos, investigadores e interesados en aprender, prototipar y producir. Ha sido creado para ensear los
fundamentos de la programacin dentro de un contexto visual.
Todos los recursos sobre Processing se encuentran en la pgina web:
http://www.processing.org, misma que incluye ejemplos, referencias y tutoriales, as como las libreras con las que se cuenta, blogs y, adems, se puede
descargar de manera gratuita el software. La versin ms actual de Processing tambin est disponible para dispositivos mviles. Se debe de seleccionar la versin que se necesite en funcin del sistema operativo (Windows,
Linux o Mac OS) con que se cuente.
20
Los elementos con los que cuenta son simples: un men principal con las
opciones File, Edit, Sketch, Tools y Help. Tambin cuenta con una barra de
herramientas con seis opciones, mediante las cuales se puede tener todo el
control sobre el programa. Estas opciones son:
Ejecutar el programa
Detener la ejecucin del programa
Crear un nuevo programa
Introduccin a la programacin
21
En el tabulador se mostrar el o los programas que estn activos. Posteriormente, se encuentra el editor de texto. En esta rea de trabajo, escribiremos el conjunto de instrucciones, es decir, nuestro programa. En el rea de
mensajes, se mostrarn los posibles errores cometidos durante la ejecucin
del programa. Finalmente, en la consola es posible visualizar la ejecucin del
programa y tener una interaccin con la ejecucin del programa.
Al ejecutar cualquier programa
, siempre se desplegar una ventana.
En esta ventana se podr observar el resultado grfico de la ejecucin del
programa. El siguiente ejemplo muestra, por el momento, una ventana vaca, debido a que no existe un elemento grfico a desplegar.
Aprender a programar en Processing implica explorar mucho cdigo: ejecutarlo, cambiarlo y mejorarlo hasta obtener nuevas cosas. Con esta idea
22
Actividad integradora
Un estudiante de la UAM C est inscrito en la UEA Programacin estructurada. Al llegar a casa, su pap
le pregunta: Cmo vas a hacer para obtener la mejor calificacin en la UEA?
Esta respuesta requiere una explicacin detallada del estudiante: cmo lo hara? Cmo lo representara de manera grfica para que se entendiera mejor? Podra explicar qu herramienta utilizara para
lograrlo? Podra representar la serie de pasos que va a realizar para estudiar?
23
Captulo 2. Dibujo
Los mejores programadores no son solo marginalmente
mejores que los buenos. Se trata de un orden de magnitud mayor,
medida por cualquier estndar: creatividad conceptual, velocidad,
ingenio o habilidad para solucionar problemas.
Randall E. Stross
Objetivo
Actividades de aprendizaje
El alumno explorar las funciones utilizadas para plasmar las formas bsicas,
as como los parmetros utilizados.
Interactuar con el editor de texto de
Processing para ejecutar sus programas
usando funciones nuevas (size(),
fill(), noFill(), background()).
Utilizar la herramienta de color selector
para identificar el uso de colores con sus
representaciones RGB, HSB y codificacin hexadecimal.
24
A continuacin mostramos un ejemplo donde, utilizando las funciones antes mencionadas, podemos dibujar estas cuatro formas bsicas.
Dibujo
25
El nombre de la funcin es un identificador definido por Processing, donde le decimos cul es la instruccin que utilizaremos. Processing cuenta con
una lista de instrucciones, las cuales pueden ser consultadas en el manual de
referencia en http://www.processing.org. Los parmetros, tambin llamados
argumentos, brindan mayor flexibilidad a la funcin; en este caso, por medio
de los parmetros podremos especificar las dimensiones de la lnea (coordenada en x del punto 1, coordenada y del punto 1, coordenada x del punto 2
y coordenada y del punto 2). Nosotros no tendremos que especificar a qu
corresponde cada uno de los valores, simplemente la instruccin identifica
el orden de los argumentos para saber a qu corresponden.
Las formas bsicas que definimos y dibujamos en papel son exactamente
las mismas que deberemos utilizar en Processing para generar los programas.
26
El punto
El punto es la instruccin ms simple. El punto lo utilizaremos para pintar
un solo pixel en nuestra ventana de trabajo. De este modo, si quisiramos
pintar el pixel con las coordenadas 4, 5, la sintaxis sera la siguiente:
point(4,5);
La lnea
Esta funcin permite dibujar una lnea modificando las coordenadas (x, y)
tanto del punto de origen como las coordenadas x, y del punto final. Esto
nos permite controlar las dimensiones y la orientacin de la lnea. Si quisiramos pintar la lnea que fuera de la coordenada (3, 6) a la (10, 50), la sintaxis
sera la siguiente:
line(3,6,10,50);
El rectngulo
Para poder dibujar un rectngulo, debemos utilizar la funcin rect(). A esta
funcin podemos asociar cuatro parmetros, los cuales representan la coordenada superior izquierda donde nos interese ubicar el rectngulo y las dimensiones
del rectngulo (ancho x alto). Si quisiramos pintar un rectngulo en la coordenada (30, 30) con un ancho de 50 y una altura de 20, la sintaxis sera la siguiente:
rect(30,30,50,20);
De hecho, esta no es la nica forma en que se puede representar el rectngulo en Processing, existen otras dos formas en las que podemos ubicar
los parmetros en la instruccin, esto depende de cmo queremos dibujar
dicho rectngulo.
Cuando dibujamos el rectngulo utilizando las coordenadas (x, y) como el
punto superior izquierdo y damos el ancho y el alto (como lo hemos visto),
estamos utilizando el mode CORNER.
rectMode(CORNER);
Dibujo
27
La elipse
El funcionamiento de la instruccin elipse (ellipse) es muy similar a la del
rectngulo (rect) antes vista. Para dibujar cualquier elipse, se sigue la tcnica del Rectngulo Mnimo de Delimitacin (MBR). Esta tcnica se refiere a
que cualquier elipse puede ser enmarcada siempre por un rectngulo mnimo. Teniendo esto en cuenta, debemos entonces verificar las coordenadas
de este rectngulo. A la funcin ellipse podemos asociar cuatro parmetros, donde los dos primeros parmetros corresponden a las coordenadas (x,
y) del punto central de la elipse y los dos parmetros restantes corresponden
al ancho y al alto.
ellipse(30,80,40,40);
Esta forma de representacin es el modo por default CENTER. Si quisiramos cambiar de modo de dibujo, al igual que en la funcin rect, entonces
tendramos los siguientes modos de representacin:
ellipseMode(CENTER);
ellipseMode(CORNER);
ellipseMode(CORNERS);
28
Este conjunto de instrucciones las podemos plasmar directamente en Processing para ver el resultado.
El tringulo
El tringulo se realiza conectando tres puntos. Los primeros dos argumentos
se refieren a las coordenadas del primer punto, los dos argumentos siguientes se refieren a las coordenadas del segundo punto, para terminar con los
ltimos dos argumentos que definen las coordenadas del tercer punto.
triangle(0,90,45,45,70,70);
Dibujo
29
El cuadriltero
El cuadriltero es similar a la funcin rect(), solo que ahora debemos de
dar un total de cuatro coordenadas diferentes, lo que provocar que los
ngulos no necesariamente sean de 45 grados, esto quiere decir que el nmero de parmetros ser de 8.
quad(90,60,130,45,180,90,150,85);
Los arcos
Para dibujar los arcos, se debe de tomar en cuenta la forma de trabajar de la
funcin ellipse(). La funcin arc() utilizar seis parmetros. Los cuatro
primeros son los mismos que para poder dibujar cualquier elipse, es decir,
coordenadas del punto central x, y, el ancho y el alto. Para los dos ltimos
parmetros, debemos de escribir el segmento inicial y final que queremos
dibujar. Estos segmentos estn definidos en radianes (0, PI,TWO_PI, etc.).
arc(250,250,100,100,0,PI);
Existen tres formas diferentes de dibujar el arco, que estn definidas por
un sptimo parmetro. Estas tres formas son OPEN, la cual dejar completamente abierto el arco y el modo por default, el modo PIE, que completar el arco tomando en cuenta el centro del arco y tomar la forma de pie,
mientras que el tercer modo es CHORD, el cual genera un lnea que cierra el
semicrculo desde el punto de origen hasta el punto final. A continuacin,
se muestra la manera como se ven estas nuevas formas geomtricas directamente en Processing.
30
El size
Otra funcin muy importante es size(), que permite definir el tamao de la
ventana donde vamos a desplegar todos los elementos visuales generados
por el programa. Esta funcin generalmente se ubica en la parte superior de
los programas. Los parmetros utilizados por la funcin son el nmero de
pixeles correspondientes al ancho y el alto de la ventana.
La escala de grises
Digitalmente, el color negro corresponde al valor 0 y el color blanco al valor
255. Esto quiere decir que existen, entre estos dos valores, 254 diferentes
colores que podramos representar. Dichos valores corresponden entonces
a una escala de grises. Con esto en mente, debemos inicialmente comprender tres instrucciones adicionales, mediante las cuales podremos aplicar la
escala de niveles de gris. Estas instrucciones son background(), fill()
y stroke().
El background
La instruccin background() permite definir la escala de grises deseada
que utilizaremos para el fondo de pantalla donde se desplegarn cada una
de las formas geomtricas utilizadas.
background(10);
Dibujo
31
El stroke
La funcin stroke() permite definir la escala de grises deseada para los
contornos de las formas geomtricas.
stroke(255);
La funcin stroke() permite trabajar con los contornos de las formas, existe la funcin noStroke(), que desaparece totalmente el contorno. Tambin podemos utilizar la funcin strokeWeight() para definir el grosor del
contorno deseado.
El fill
La instruccin fill() permite modificar el nivel de gris de la parte interna de
las formas. Este es un relleno que se utiliza de la siguiente manera:
fill(130);
Asimismo, est la funcin noFill(), la cual eliminar por completo el relleno de las formas y permitir visualizar nicamente el contorno. A continuacin, se muestra un ejemplo del uso de estas instrucciones.
32
El color
El color, en el mundo digital, es generalmente construido al mezclar tres
colores primarios (rojo, verde, azul), en ingls RGB (Red, Green, Blue). Processing no es la excepcin. Para generar algn color, tenemos que formar
una combinacin de estas tonalidades.
Processing cuenta con una herramienta llamada color selector, la cual puede ser desplegada a partir del men Tools, como se muestra a continuacin:
Dibujo
33
La transparencia
Adems de definir cualquier combinacin de color, Processing permite definir el nivel de transparencia de cada uno de los colores. Este nivel va del
0 (color completamente slido) al 255 (color completamente transparente). Este nivel de transparencia, muchas veces llamado nivel alpha, se define como un cuarto parmetro dentro de las funciones background(),
fill(), y stroke().
Como recordaremos en los captulos de este material, al visitar el manual
de referencia de la pgina http://processing.org se puede obtener una gran
ayuda para terminar de comprender los conceptos e instrucciones vistos en
cada captulo.
Actividad Integradora
Realizar un dibujo libre utilizando las primitivas bsicas y el color, donde se plasme algn
rea comn de la universidad (biblioteca, canchas deportivas, comedor, reas al aire libre,
etc.)
Experiencias previas
Dibujo libre usando figuras bsicas
Autor: Rebeca
Ortiz Santibez
Ciencias de la Comunicacin
Trimestre 13 Invierno
34
Autor: Dalia
Castaeda Nez
Ciencias de la Comunicacin
Trimestre 14 Otoo
Dibujo
35
Experiencias previas
Dibujar iniciales de nombre utilizando formas bsicas
37
Captulo 3. Interaccin
Los ordenadores son intiles. Solo pueden darte respuestas
Pablo Picasso
Objetivo
Actividades de aprendizaje
38
Cuando se realizan dibujos utilizando Processing, se piensa inmediatamente en la posibilidad de poder interactuar con dichos dibujos. Asimismo,
es importante ir ms all de los dibujos estticos. En este caso, tomando
como conocimiento previo la manera en la que se dan instrucciones (paso
a paso), podemos decir que todos los programas tienen un flujo (serie de
instrucciones), un inicio y un fin. Por ejemplo:
Paso 1. Doy las condiciones de inicio
Paso 2. Sigo las instrucciones, una y otra vez, hasta que el programa
termina
En un ejemplo ms concreto, podemos tener no solo condiciones de inicio, sino tambin instrucciones que se repiten muchas veces hasta que se
cumple determinado objetivo. Por ejemplo, si vamos a participar en una carrera de 10 kilmetros, algunas de las instrucciones que seguiramos seran:
Paso 1. Me pongo tenis y hago estiramientos
Paso 2. Empiezo a correr dando un paso tras otro. Repito esto lo ms
rpido posible.
Paso 3. Al llegar al dcimo kilmetro me detengo.
En el ejemplo anterior, la condicin de inicio est representada con el
paso 1. Es decir que no podemos empezar a correr si no hay algunas condiciones previas. El paso 2 corresponde a un ciclo en el cual se repiten las
condiciones una y otra vez hasta que sucede algo. Ese suceso, que detiene
el paso 2, es llegar a la meta. Aqu, el objetivo final es correr 10 kilmetros,
por lo que se repetir el paso 2 hasta que se haya logrado dicho objetivo.
En un programa computacional, tambin debemos de preparar el escenario y realizar algunas instrucciones que inicializan el proceso antes de dar
paso a la serie de instrucciones, mediante las cuales alcanzaremos un determinado objetivo.
En Processing, la serie de instrucciones que inicializan estn dentro de una
funcin llamada setup(). Como su nombre lo dice, setup() permite configurar diversas opciones de acuerdo con las necesidades del usuario. Por
su parte, la funcin que agrupar una serie de instrucciones de dibujo hasta
alcanzar un objetivo se llama draw(). En esta instruccin se agrupan las
instrucciones que se realizarn muchas veces. En cambio, en setup() las
instrucciones solo se realizan la primera vez.
Interaccin
39
void setup()
{
// instrucciones de inicializacin
}
void draw()
{
// instrucciones de dibujo
}
A continuacin, mostramos un ejemplo en el que se utiliza void setup() y void draw(), y se constata con un ejemplo donde el cdigo no
est dentro de estos bloques. El objetivo del ejemplo es dibujar una elipse.
(a)
int a;
a = 10;
size(200,200);
background(255);
fill(0);
a = (a+1) % 200;
ellipse(a,50,10,10);
(a)
(b)
40
En el caso (a), la elipse solo se dibuja una vez; en cambio, en el caso (b), se
dibuja tantas veces mientras no se presione el botn de stop. Es decir que el
draw() funciona como un ciclo, las instrucciones se repiten una y otra vez.
Interaccin
(a)
41
42
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
stroke(0);
line(pmouseX, pmouseY, mouseX, mouseY);
}
Interaccin
43
void setup()
{
size(200,200); background(255);
}
void draw()
{
}
void mousePressed()
{
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,16,16);
}
44
Actividad integradora
Realizar un dibujo libre utilizando los conceptos que se estudiaron en el presente captulo:
formas, colores, movimiento con mouse, keyPressed() y mousePressed(). El dibujo
libre debe de contar con al menos tres elementos que tengan interactividad.
Experiencias previas
Mascota mexicana que, al oprimir una tecla, cambie de color, y si se da un clic, cambie de
tamao.
Usando mousePressed():
Usando keyPressed():
Usando mousePressed():
Usando keyPressed():
45
Experiencias previas
Mascota mexicana que, al oprimir una tecla, cambie de color, y si se da un clic, cambie de
tamao.
Autor: Ilse Lpez Gonzlez
Ciencias de la Comunicacin
Trimestre 14 Otoo
Usando mousePressed():
Usando keyPressed():
Usando mousePressed():
Usando keyPressed():
47
Captulo 4. Variables
Controlar la complejidad es la esencia de la programacin
Brian Kernigan
Objetivo
Actividades de aprendizaje
Las variables
La variable es un elemento frecuentemente utilizado en la computacin y, en
general, en todos los lenguajes de programacin. El concepto bsico de la
variable se relaciona con la capacidad de poder almacenar un valor dentro
del programa. Este valor podr utilizarse y modificarse en la ejecucin del
programa.
Una variable est formada por un espacio fsico en la memoria de la computadora, su valor, y un nombre simblico, comnmente llamado identificador,
que est asociado a dicho espacio. El valor y el identificador de la variable
permiten que el identificador sea usado independientemente de la informacin exacta que representa. El identificador, en el programa, puede estar
ligado a un valor durante el tiempo de ejecucin y el valor de la variable
puede por lo tanto cambiar durante el curso de la ejecucin del programa.
48
Tipos de datos
El tipo de dato es un atributo que indica a la computadora (y/o al programador) qu datos se van a procesar. En el caso de las variables, indica qu tipo
de informacin podemos almacenar en el identificador y qu operaciones
podemos realizar. Los tipos de datos comunes son: enteros, flotantes (decimales), caracteres, cadenas de caracteres, etc.
int
El tipo de dato int representa un conjunto de enteros de 32 bits, as como
las operaciones que se pueden realizar con los enteros, como la suma, la
resta y la multiplicacin. Su rango va del -2.147.483.648 al 2.147.483.647.
float
El tipo de dato float se refiere a la utilizacin de nmeros con punto decimal. El rango de valores va del -3.40282347E+38 al 3.40282347E+38 y
est almacenado en 32 bits.
char
El tipo de dato char permite almacenar cualquier tipo de carcter (letras
o smbolos) en el formato Unicode.
boolean
Variables
49
Si las variables van a ser utilizadas en todo el programa, se debern declarar al inicio del programa, antes de la funcin setup(), y se les nombrar
variables globales. Si las variables se utilizan nicamente en alguna funcin,
entonces debern declararse al inicio de la funcin deseada y se llamarn
variables locales. Estas variables nicamente existirn cuando la funcin est
siendo utilizada.
Las variables deben de tomar su valor mediante una llamada asignacin
del valor. El smbolo para realizar esta asignacin es el =. En computacin,
este smbolo no significa igual que y no estamos haciendo ningn tipo de
comparacin entre dos valores. La asignacin se realiza modificando el valor
de la variable por el valor o por el resultado de la parte derecha del smbolo =.
De este modo, algunas asignaciones comunes son las siguientes:
int count =0;
char letter = a;
float d= 132.32;
float x = 4.0;
float y = x + 5.2;
float z = x*y + 15.0;
50
Es importante hacer notar que, por ejemplo, en algunos casos los valores de las variables se adquieren mediante el resultado de una operacin
realizada en la parte derecha del smbolo =. Eso pasa, por ejemplo, en la
asignacin del valor de la variable z.
Una vez asignado un valor en la variable, entonces esta se encuentra lista
para ser utilizada en cualquier seccin de nuestro programa. La idea de la
variable es generar un dinamismo en el programa y que no sea completamente esttico. Para lograrlo, la variable tendr que ser utilizada en el programa, sustituyendo normalmente algn valor esttico utilizado.
A continuacin, se muestra un ejemplo del uso de una variable.
Variables
51
52
Variables
53
54
El random
La funcin random se refiere al proceso de aleatoriedad. Este trmino se
asocia a todo proceso cuyo resultado no es previsible ms que por azar.
El resultado de todo suceso aleatorio no puede determinarse en ningn
caso antes de que este se produzca. En computacin, la funcin random
es capaz de generar un nmero flotante aleatorio dado un rango de valores
proporcionado.
La funcin random se utiliza de la siguiente manera:
float w;
w=random(0,10);
Variables
55
Actividad integradora
Utilizando los elementos vistos en el captulo (variables, variables del sistema), genera un
protector de pantalla que genere elementos visuales aleatorios, dado un determinado
tiempo y a una determinada velocidad.
Experiencias previas
Generacin aleatoria de colores y movimiento
56
57
Captulo 5. Condicionales
Lo mejor de los booleanos es que si te equivocas,
ests a un solo bit de la solucin correcta
Annimo
Objetivo
Actividades de aprendizaje
Las condicionales
Despus de haber visto el concepto de variables y sus mltiples usos, es
momento de estudiar uno de los pilares de la programacin estructurada:
las condicionales.
Una condicional, en la programacin, es una sentencia o grupo de sentencias que puede ejecutarse, o no, en funcin del valor de una condicin.
La estructura condicional compara una variable contra otro(s) valor(es), para
que con base en el resultado de esta comparacin, se siga un curso de accin dentro del programa. Cabe mencionar que la comparacin se puede
hacer contra otra variable o contra una constante, segn se necesite.
58
Estas comparaciones utilizan los llamados operadores relacionales para verificar el resultado y saber si el resultado es verdadero o falso. Los operadores
que podemos utilizar son los siguientes:
> Mayor que
< Menor que
>= Mayor o igual
<= Menor o igual
== Igualdad
! Diferente
Tipos de condicionales
Simples
Las estructuras condicionales simples son conocidas como tomas de decisin. Estas tomas de decisin lo nico que hacen es verificar una nica comparacin. Si el resultado es verdadero, entonces se ejecutar el conjunto de
instrucciones que est dentro del bloque. Si el resultado es falso, simplemente se ignora todo el bloque. El flujo del programa contina despus de
hacer esta simple comparacin. La estructura simple es:
if (expresin booleana){
// Este conjunto de instrucciones se ejecutan
//si la condicin es verdadera
}
Condicionales
59
En este ejemplo, dentro del programa solo hay un if. El programa verificar el valor de la variable y lo comparar con el valor width/2 (que
corresponde al centro de la pantalla). Cuando el valor de var1 es menor (en
este caso, su valor inicial es 0) a la mitad de la pantalla, el resultado de la evaluacin es falso y no se ejecutarn las instrucciones dentro del if. Cuando
el valor de var1 es mayor a la mitad del ancho de la pantalla, entonces automticamente se ejecutarn las instrucciones que estn dentro del if, en
este caso el background(0), lo que generar que el fondo de la pantalla
adquiera el color negro.
Dobles
Las estructuras condicionales dobles permiten elegir entre dos opciones o
alternativas posibles en funcin del cumplimiento o no de una determinada
60
condicin. Si el resultado de la comparacin es verdadero, entonces ejecutar un conjunto de instrucciones, y si el resultado es falso, entonces ejecutar otro conjunto diferente de instrucciones. Una vez realizado este, se
continuar con la ejecucin del programa.
if (expresin booleana){
/* El cdigo que se ejecuta si la condicin es verdadera*/
} else {
// El cdigo que se ejecuta si la condicin es falsa
}
Condicionales
61
Mltiples
Las estructuras de comparacin mltiples son tomas de decisin especializadas que permiten comparar una variable contra distintos posibles resultados, ejecutando para cada caso una serie de instrucciones especficas. La
forma comn es la siguiente:
if (expresin booleana # 1){
// El cdigo que se ejecuta si la condicin # 1 es verdadera
} else if (expresin booleana # 2){
// El cdigo que se ejecuta si la condicin # 2 es verdadera
} else if (expresin booleana # n){
// El cdigo que se ejecuta si la condicin # n es verdadera
} else {
// Ejecucin si ninguna de las condiciones anteriores fueron
// verdaderas
}
62
Ejercicio propuesto
Utilizando la estructura de las condicionales, crea un rebote en la pelota de arriba para
abajo. Cada vez que toque una de las paredes de la ventana, deber de cambiar de color
aleatoriamente. Cuando haya realizado diez rebotes, la pelota deber regresar al centro;
en ese momento, debe finalizar el programa.
Condicionales
63
Para simplificar estas dos estructuras, existen los llamados operadores lgicos, que permiten hacer una evaluacin unificada, dado un conjunto de
condiciones. Los operadores lgicos utilizados son:
||
&&
(O lgico)
(Y lgico)
! (NOT lgico)
64
Al utilizar estos operadores lgicos, la estructura de las condicionales sera de la siguiente manera:
Para el | | (O lgico):
if (variable1==1 || variable1 ==2 || variable1==3){
variable2=100;
}
Para el && (Y lgico):
if (variable1==1 && variable2==5){
ellipse(10,10,10,10);
}
De esta manera, se puede apreciar que la condicional es ms concisa y se entiende mejor, adems de que no se tiene la necesidad de repetir instrucciones.
La evaluacin de un conjunto de condiciones simultneas requiere que,
al final de la verificacin global, se tenga un veredicto para ejecutar, o no,
un bloque de cdigo. Para estos casos, se debern de seguir las llamadas
tablas de verdad, para finalmente poder verificar si un conjunto de condiciones son verdaderas o no.
El &&. La conjuncin es un operador que opera sobre dos valores de verdad. Tpicamente los valores de verdad de dos condiciones, devolviendo el
valor de verdad verdadero cuando ambas proposiciones son verdaderas, y
falso en cualquier otro caso. Es decir que es verdadera cuando ambas son
verdaderas.
La tabla de verdad de la conjuncin es la siguiente:
V
V
F
F
&&
&&
&&
&&
V
F
V
F
->
->
->
->
V
F
F
F
El ||. La disyuncin es un operador que funciona sobre dos valores de verdad, tpicamente los valores de verdad de dos condiciones, devolviendo el
valor de verdadero cuando una de las proposiciones es verdadera, o cuando
ambas lo son, y falso cuando ambas son falsas.
V
V
F
F
|
|
|
|
|
|
|
|
V
F
V
F
->
->
->
->
V
V
V
F
Condicionales
65
Construccin de botones
Los botones, en computacin, son una metfora utilizada en las interfaces
grficas para simular el funcionamiento de un botn corriente. Los botones
suelen representarse como rectngulos con una leyenda o cono dentro. La
principal funcionalidad de los botones es realizar una seleccin. Esta selec-
66
cin se realiza mediante dos estados que puede tener el botn (encendido
o apagado). Con esta primicia, las variables booleanas pueden ser de gran
ayuda. Recordemos que las variables booleanas solo aceptan un par de valores (true y false).
A continuacin, se muestra un ejemplo de la elaboracin de un botn.
Condicionales
67
68
Actividad integradora 1
Actividad integradora 2
Utilizando los botones que se revisaron en el captulo, disea una calculadora bsica que permita realizar las operaciones bsicas (+,-,/,*). El ingreso de
los nmeros ser mediante los botones y el despegado del resultado deber
ser directamente en la consola.
Condicionales
69
Experiencias previas
Uso de botones, variables, colores y formas para generar un miniPaint.
70
71
Captulo 6. Iteracin
El optimismo es un riesgo laboral de la programacin;
el feedback es el tratamiento
Kent Beck
Objetivo
Actividades de aprendizaje
La iteracin
En la vida diaria existen situaciones que frecuentemente se resuelven por
medio de realizar una secuencia de pasos que puede repetirse muchas veces. Por ejemplo:
El proceso que seguimos para comer, mientras no terminemos la comida.
El proceso de pagar con monedas en el estacionamiento hasta llegar a
la cantidad necesaria.
Las operaciones que realizamos para llamar por telfono, mientras no se
logre la comunicacin.
Las acciones que hacemos mientras estamos en el autobs.
72
rect(20,20,20,20);
rect(50,20,20,20);
rect(80,20,20,20);
rect(110,20,20,20);
rect(140,20,20,20);
La instruccin while
Esta instruccin, permite repetir un nmero indeterminado de veces una instruccin o un bloque de instrucciones hasta que no se cumpla una condicin
especfica. La estructura del while es la siguiente:
while (expresin booleana){
// Este es el conjunto de instrucciones que se ejecutan
// si la condicin es verdadera
}
Al cumplirse la expresin booleana, el flujo del programa entrar a la estructura while y repetir la ejecucin de las instrucciones de manera indefinida
Iteracin
73
int variable1=20;
while(variable1<=140){
rect(variable1,20,20,20);
variable1 = variable1 + 30;
}
Los elementos integrados en la estructura son representados de la manera siguiente. La inicializacin se debe definir mediante la asignacin inicial del valor de la variable1. En este caso variable1=20. Es el punto
de partida de nuestra iteracin. La condicin (variable1<=40) es la que
verifica la repeticin constante del bloque de instrucciones. Finalmente, la
actualizacin (variable1=variable1+30) es la que se encarga de hacer
evolucionar la variable1 que a su vez ser comparada cada vez mediante la
condicin. En el ejemplo se repetir la accin hasta que la variable1 sea
mayor a 40. En este caso, se terminar con la ejecucin de la iteracin y el
programa seguir su flujo normal.
74
Iteracin
75
En este ejemplo, se aprecia que existen dos ciclos while, uno dentro del
otro. Es importante mencionar que tanto las condiciones como las variables
que se deben de verificar tienen que ser diferentes, con el propsito de evitar conflictos entre las variables.
La instruccin for
La instruccin for es utilizada cuando sabemos de antemano el nmero de
veces que debemos repetir un conjunto de instrucciones. Tambin es un
bloque, y est definido de la siguiente manera:
for (inicializacin, condicin, actualizacin)
{
// Este es el conjunto de instrucciones que se ejecutan
// n nmero de veces
}
La estructura del for debe de tener los tres elementos de la iteracin (inicializacin, actualizacin y condicin), representadas de manera implcita en
la propia estructura iterativa.
As, para el ejemplo de dibujar un nmero n de rectngulos, la estructura
for sera la siguiente:
76
x++; es equivalente a:
x--; es equivalente a:
x+=2; es equivalente a
x*=3; es equivalente a
x
x
x
x
=
=
=
=
x+1;
x-1;
x+2;
x*3;
Iteracin
77
Todos los programas que se han trabajado, utilizan las estructuras setup() y draw(). Una de las caractersticas de esta segunda funcin es
la de siempre ejecutar un ciclo y estar indefinidamente repitindose. Sin
saberlo, utilizamos ya una estructura cclica. Al introducir un ciclo for o
while, estamos provocando la generacin interna de un ciclo anidado.
Existen en la prctica dos tipos de variables: las globales y las locales.
Hasta el momento, siempre hemos declarado las variables al inicio del
programa, pero en la prctica pueden ser declaradas en cualquier lugar
del programa. Las variables globales son aquellas que se declaran en la
cabecera del programa (fuera del setup() y del draw()) y podrn ser
utilizadas durante todo el programa. Las variables locales son declaradas
dentro de algn bloque de cdigo (setup(), draw(), mousePressed(), keyPressed(), if, while, for) y nicamente pueden
ser utilizadas dentro del bloque. Ahora bien, la pregunta obligada es:
para qu usamos las variables locales? No es ms fcil declarar al inicio
todas las variables? En la prctica, es ms fcil, eficiente, prctico y menos confuso declarar las variables cuando las utilizamos. A continuacin,
se muestra un ejemplo del uso de una variable local.
78
Actividad integradora
Realiza la generacin automtica de una cuadrcula utilizando los colores random. Debes
utilizar una sola instruccin rect() para poder dibujar todo el conjunto de rectngulos.
La cuadrcula se debe parecer a esto:
Iteracin
79
Experiencias previas
81
Conclusin
Este material es muy interesante para los alumnos que no han tenido una
experiencia previa con los lenguajes de programacin. Incluso para aquellos que han tenido experiencias malas al haberse enfrentado por primera
vez con lenguajes de programacin que no estn adaptados para un primer
acercamiento con el maravilloso mundo de la programacin.
En este material, hemos estudiado y experimentado con los elementos
fundamentales de toda Programacin Estructurada (la secuencia, la condicin y la iteracin). Un programa escrito con este enfoque tendr una estructura clara, fcil y comprensible.
Hemos utilizado el lenguaje de programacin Processing para plasmar de
manera visual el resultado de estos elementos. Hemos trabajado con formas, colores, estructuras, adems de promover la creatividad y la expresin
artstica.
Processing permite, adems de lo explorado en este material, trabajar
con muchos otros elementos. Por ejemplo:
La representacin 3D, donde se estudia el espacio no solo en dos dimensiones, sino en tres.
La manipulacin de texto grfico, que permite generar mltiples efectos
con formas y colores al texto.
La manipulacin de imgenes, donde no solo es posible desplegar, sino
manipular las imgenes pixel por pixel.
La manipulacin de video y sonido, agregando efectos y creaciones tanto sonoras como visuales.
La manipulacin de cadenas y archivos para profundizar en el procesamiento de caracteres y manejo de archivos.
Manejo de cmara, luces y sombras para una mejor representacin.
82
83
Bibliografa
Bohnacker, H. et al. (2012). Generative Design: Visualize, Program, and Create with Processing. Nueva York_ Princeton Architectural Press.
Glassner, A. (2010). Processing for Visual Artists: How to Create Expressive
Images and Interactive Art. Natick, MA: AK Peters, Ltd.
Greenberg, I. (2007). Processing: creative coding and computational art.
Nueva York: Apress.
Reas, Casey & Fry, B. (2007). Processing: a programming handbook for visual
designers and artists. Cambridge: MIT Press.
Reas, Casey & Fry, B. (2010). Getting Started with Processing. California, EUA:
OReilly Media, Inc.
Shiffman, D. (2009). Learning Processing: a beginners guide to programming
images, animation, and interaction. Massachusetts: Morgan Kaufmann,.
Terzidis, K. (2009). Algorithms for visual design using the processing language. Indianapolis: John Wiley & Sons.
Recursos web*:
http://processing.org
http://www.joan.cat/processing/cs/
http://www.learningprocessing.com/tutorials/
Recursos Youtube*:
https://www.youtube.com/watch?v=9UcL8B0GQuE&list=PL374E5107CB62B2BE
https://www.youtube.com/watch?v=ZByppaYSJB8
* Todos los recursos web se encuentran tambin en el sitio mvil: Sitio mvil
de Hola mundo con Processing: http://winksite.com/aranike/hmp
85
El objetivo del sitio mvil es contar con recursos digitales que puedan ser
compartidos con el grupo. Esta iniciativa fue implementada a partir del trimestre 14 Otoo.
86
87
Glosario
88