T5 Programacion Estructurada Processing

TICO 2º Bachillerato. Departamento de Tecnología.
IES Nuestra Señora de la Almudena Mª Jesús Saiz
TEMA 5: PROGRAMACIÓN ESTRUCTURADA

1. Introducción
Un programa es una secuencia de instrucciones escritas mediante un lenguaje de programación, que
permiten desarrollar y resolver un problema para el que han sido creados.
Un programa se compone de:
▪ Algoritmo: conjunto de instrucciones que describen el proceso que se debe seguir, para dar
solución a un problema específico. Es una secuencia ordenada de pasos o instrucciones.
Programar es escribir y desarrollar un programa utilizando un lenguaje de programación. El lenguaje de
programación es el conjunto de símbolos y palabras que definen ese "idioma" o lenguaje.
Existen muchos lenguajes de programación, cada uno tiene su propio vocabulario (órdenes) y sintaxis
(forma de colocar las órdenes). Pero todos tienen características comunes.
Ejemplos de Lenguajes de Programación
Lenguaje Aplicación
HTML Creación de páginas web
Java Creación de juegos y aplicaciones
JavaScript Creación de programas interactivos
C++ Creación de sistemas operativos y software
PHP Creación de páginas web con contenido dinámico
Phyton Creación de software, juegos y aplicaciones
Processing Creación de programas multimedia
Arduino, Winlogo, Robolab Robótica
SQL Creación de bases de datos
Los programas se escriben en código fuente (mediante un lenguaje de programación). Este código debe
traducirse a código binario, llamado código máquina, que es el único lenguaje que entiende el ordenador.
Este proceso de traducción se llama compilación.
COMPILADOR O
CÓDIGO FUENTE CÓDIGO MÁQUINA
INTERPRETE
Para poder escribir nuestros programas necesitamos un IDE (Entorno de Desarrollo Integrado), que es
una aplicación informática de editor de código fuente que nos permite teclear las instrucciones y
depurarlas. Algunos IDE llevan un compilador que permite compilar y ejecutar el programa.
2. Tipos de lenguajes de programación

Lenguajes textuales: las ordenes de programación se insertan en forma de texto. Las
ordenes se escriben en inglés, y muchas de ellas coinciden en los diferentes lenguajes (repeat,
delay, if, while,....)
Este tipo de lenguajes son los más potentes y son
los utilizados por los profesionales de la
programación. Ejs: Phyton, JavaScript, C++,
Processing
Lenguajes gráficos: las ordenes o instrucciones se

dan mediante bloques gráficos. Ej: Scratch
Son programas visuales utilizados para el aprendizaje
de programación.
1
TICO 2º Bachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena Mª Jesús Saiz
3. Fases del proceso de programación:

1. Definición y análisis del problema
2. Diseño del algoritmo
3. Codificación del programa: obtenemos el código fuente
4. Compilación: obtenemos el código máquina o código objeto
5. Depuración de errores y verificación del programa
6. Mantenimiento
4. Algoritmo: codigo, pseudocódigo y diagráma de flujo

Algoritmo: conjunto ordenado de instrucciones que describen el proceso que se debe seguir,
para desarrollar un programa informático.
Los algoritmos deben tener las siguientes partes:
▪ Entrada de datos
▪ Proceso: pasos necesarios para ejecutar el algoritmo
▪ Salida de resultados
El programa creado mediante lenguaje de programación (serie de instrucciones) se llama
código.
Cuando escribimos el algoritmo en nuestra lengua o lenguaje habitual, el programa creado
se llama pseudocódigo.
Cada uno puede utilizar sus propios criterios, pero se recomiendan unas normas generales
Las instrucciones del programa también se pueden representar gráficamente mediante
esquemas o dibujos, llamados diagramas de flujo.
Cada uno puede utilizar sus propios criterios, pero se suelen seguir unas normas
generales (utilización de símbolos)
Ejemplo: Desarrollar un algoritmo que permita leer un número cualquiera N y escriba si dicho
número es par o impar
PSEUDOCÓDIGO DIAGRAMA DE FLUJO
1. Inicio
2. Declaración de variable: N INICIO
Definir N como un número

entero
3. Introducir un número N
Definir N como entero
4. Dividir N/2 y obtener el resto
5. Condición: Si el resto de dividir
N/2 = 0
▪ SI: entonces escribir “es Entrada N
par”
▪ Si NO: escribir “es impar”
6. Fin
N/2
SI NO
Resto de N /2 = 0
Es par Es impar
FIN
2
Simbolos de diagramas de flujo:
Proceso (instrucción Entrada / Salida

Inicio / Final Decisión
a realizar) de datos
Entrada de datos Saluida de datos Salida de datos por

por teclado por impresora pantalla
Ejemplo
Hacer un diagrama de flujo que permita leer 2 números diferentes y nos diga cuál es el
mayor de los 2 números.
DIAGRAMA DE FLUJO PSEUDOCÓDIGO
1. Inicio
INICIO 2. Definir A y B como números
enteros
3. Introducir dos números A , B:
4. Comparar los dos valores
Definir A, B como entero ▪ Condición: Si A = B
▪ Si: entonces escribir “A”
es igual a “B”
▪ Si NO:
Entrada A, B ▪ Si A > B: escribir “A
es el mayor”
▪ Si No escribir “B es
el mayor”
SI 5. Fin
A=B
NO
NO SI
A>B
“B” es “A” es “A” es

el el igual a
mayor mayor “B”
FIN
Podemos realizar los pseudocódigos y diagramas de flujo a mano, con ayuda de Word u otro
procesador de texto. O utilizar software que nos ayude en la elaboración, como PSeInt que se explica
más adelante.
3
Algoritmo resuelto con el programa PSeInt
5. Tipos de estructuras de control

Programación estructurada: es programar las secuencias de instrucciones de manera clara y de forma
que se ejecuten de una en una. Para ello se utilizan únicamente tres estructuras de control: secuencia,
selección e iteración
Las estructuras de control deciden qué camino hay que seguir en función de una condición. Pueden ser
de tres tipos:
Estructura secuencial: consiste en colocar una instrucción tras otra, de manera que se van
ejecutando de arriba abajo.
Estructura selectiva o condicional (si, si no): permiten ejecutar un conjunto de instrucciones
u otras en función de si se cumple o no una condición.
Se utilizan los comandos: if y if…else
Estructura iterativa o de repetición (mientras, repetir, para): permite repetir una instrucción
o grupo de ellas un nº fijo de veces o mientras (o hasta que) una condición sea cierta.
Se utilizan los comandos while, do….while, for
6. Algoritmos con software PSeInt

PSeInt es una aplicación informática de software libre que sirve para escribir algoritmos en
pseudocódigo y ejecutarlos, y además genera diagramas de flujo de dichos algoritmos.
4
Podemos realizar la descarga desde la web:

http://pseint.sourceforge.net/index.php?page=descargas.php&os=w32
Algoritmo y FinAlgoritmo son las

palabras que se utilizan para abrir y cerrar,
respectivamente, el algoritmo o programa.
Cada acción o instrucción puede consistir en:
▪ Definiciones de variables
▪ Mostrar texto por pantalla
▪ Pedir datos al usuario por teclado,
▪ Borrar la pantalla,
▪ Expresiones matemáticas o lógicas,
▪ Estructuras de control (condicionales,
bucles, …), etc.
Los botones de comando de la barra lateral
derecha son instrucciones que, cuando los
pulsamos, escriben en el área de trabajo la
sintaxis válida de PSeInt para ayudarnos a
programar.
Una variable es un espacio de la memoria donde guardar información. Es un dato cuyo valor
varia a lo largo del programa, no tiene siempre el mismo valor.
A la variable hay que darle un nombre para identificarla, y ese nombre:
▪ no puede contener espacios, por lo que las palabras deben separarse por guiones bajos
o utilizando mayúsculas al inicio de cada palabra (nombreUsuario o nombre_usuario)
▪ no pueden contener caracteres especiales, excepto guión bajo (_)
▪ pueden contener números, pero no empezar por ellos
Sintaxis de PSeInt
El programa debe empezar y acabar con los siguientes comandos::
Algoritmo y FinAlgoritmo.
Al lado de la palabra Algoritmo, podemos incluir el nombre o título que damos al
programa.
Definición de varibles: debemos utilizar el comando Definir e indicar qué tipo de dato
es la variable:
▪ Número entero
▪ Número real (puede tener decimales)
▪ Carácter (una sola letra)
▪ Texto (texto formado por varias letras)
Mostrar texto por pantalla: el comando es Escribir y debemos indicar
entre comillas el texto y sin comillas el valor de las variables que
queremos que aparezcan.
Escribir “Introduce una letra”
Escribir “El valor calculado es”, N
Comando Leer: Leer un dato introducido con el teclado y lo guarda en
la variable elegida.
Leer A (al introducir un dato, lo guarda en la variable A)
Asignar: permite asignar a una variable la instrucción u operación
deseada
S <- A+B
La operación también puede escribirse mediante fórmula S = A+ B
Estructuras de control (condicionales, bucles, …), etc
Si / SiNo: Permite evaluar
una propiedad de una
variable, y en función de
esta, realizar una acción
determinada
5
Mientras: Permite realizar

una acción mientras se
produzca una condición,
Repetir: Repite una serie de

acciones hasta que se de
cierta condición.
Botones Ejecutar y Dibujar diagrama de flujo:
Ejecutar Dibujar diagrama

de flujo
▪ Una vez escrito el programa en pseudocódigo podemos comprobar su funcionamiento al
pulsar el botón Ejecutar.
Tenemos que introducir los datos, pulsando intro cada vez.
▪ El botón Dibujar diagrama de flujo nos dibuja el diagrama a partir del programa escrito en
pseudocódigo.
Ejemplo: Hacer un diagrama de flujo que permita leer 3 números enteros y nos diga cuál es el
mayor de los 3 números.
PSEUDOCÓDIGO DIAGRAMA DE FLUJO
EJECUCCIÓN DEL PROGRAMA
6
PROGRAMACIÓN ESTRUCTURADA CON PROCESSING

Processing es un lenguaje de programación de código abierto. Está orientado para
programar proyectos multimedia e interactivos y para aprender a programar. Está basado
en el lenguaje de programación Java.
7. Instalación de Processing
Debemos descargar el programa de la web oficial: https://processing.org/download/
Al abrir el archivo que hemos descargado vemos que es un archivo comprimido. Tenemos una carpeta
con el nombre de Processing. Descomprimimos y extraemos la carpeta donde queremos que se ejecute
(por ejemplo, en el escritorio).
Y obtenemos una carpeta en la que habrá un ejecutable.
No es necesario instalación, basta con abrir este ejecutable.
8. Entorno Processing
El IDE de Processing consiste en una ventana con un editor de texto, y lleva además un compilador y
un debugger (sistema de depuración de errores).
Processing llama a sus programas Sketch (esbozo.)
Cuando creamos un proyecto nuevo en Processing, al guardarlo se crea un Sketch, y una carpeta “Sketch
folder” con el mismo nombre y es donde estará el Sketch.
La extensión del archivo o Sketch es .pde .
En la carpeta Sketch folder se pueden añadir otras carpetas para archivos de imagen, video, etc.
Ejecutar: Ejecuta en la ventana el resultado de

la instrucción escrita, es decir, ejecuta el
código.
Este proceso realiza la compilación (pasar a
código binario).
Al ejecutar cualquier programa, se despliega
una ventana. En esta ventana se puede ver el
resultado gráfico de la ejecución del programa
Detener: detiene la ejecución del programa
Depurar: revisa el programa y muestra los

errores
Consola: muestra los errores del programa
7
Editar / Autoformato: Da un formato al código que facilita su compresión, lo ordena y lo alinea

verticalmente.
Sketch / Tweak: Esta función permite modificar el código y poder ¡ver los resultados en tiempo real!
Autocompletado: Es complicado aprenderse todas las funciones de un lenguaje de programación,
sobretodo porque basta con equivocarse en una letra para que no funcione, esta función te permite escribir
parte de la función y terminar de escribirla automáticamente.
Se puede activar en Archivo / Preferencias
Sketch / Importar biblioteca: permite añadir las librerías más comunes, y podemos buscar y descargar
las librerías hechas por terceros. Por ejemplo: librerías de sonido
Cuando creamos un proyecto nuevo en Processing, creamos un Sketch, y el Sketch folder es la carpeta
donde éste se guarda. En principio, el Sketch consta tan solo de la misma carpeta y de un
archivo .pde que contiene el código. Luego se pueden añadir carpetas para archivos de imagen, video,
etc.
RECOMENDACIÓN: Debemos ir guardando diferentes versiones mientras trabajamos en nuestros
proyectos con el comando Guardar como.
9. Sintaxis de Processing
Como en todos los lenguajes de programación, cualquier error de síntaxis puede hacer que no funcione el
programa. Debemos tener mucho cuidado al escribir correctamente las instrucciones.
Las ordenes o instrucciones se separan mediante ;
Los valores de cada instrucción se colocan entre paréntesis ( )
Ejemplo: point (100,100);
Comentarios Son usados para explicar el programa, se colocan entre las líneas de código . Los
comentarios no se ejecutan con el programa, son sólo explicaciones..
Se debe iniciar el comentario con //
Ejemplo: // int v es una variable de velocidad de desplazamiento.
Para hacer comentarios que requieren más de una línea, se debe iniciar el comentario con /* y
finalizarlo con */
Ejemplo: /* Esta instrucción dibuja 20 líneas y modifica el color según con la posición en el eje
y */
Processing distingue entre mayúsculas y minúsculas, no las confundas.
Processing no tiene en cuenta los espacios en blanco, da igual ponerlos o no ponerlos.
10. Dibujar con Processing

Cuadrícula
Processing y java, trabajan píxel a píxel. Es decir, para dibujar con Processing hay que tener en
cuenta que trabajamos sobre una cuadrícula de píxeles, que puede ser de 100x100 (tamaño por
defecto), o el que nosotros definamos.
Para dibujar, por ejemplo, una línea, tenemos que especificar en el código de qué punto a qué otro
de la cuadrícula tiene que ir. Para una esfera, el punto central y el radio, etc.
Cada píxel, tiene su lugar en la cuadrícula. Esta posición se expresa
mediante coordenadas X, Y, con el punto origen (0,0) en la esquina
superior izquierda de la ventana.
Instrucción Descripción Origen

0,0
size (x,y) Tamaño de la ventana o pantalla de dibujo
Si después de programar hay que cambiar el tamaño del dibujo,

debemos usar surface.setSize (x, y)
8
Funciones de dibujo
Instrucción Descripción
point (x,y) punto (dibuja un punto con 1px de diámetro en la
posición x,y)
line (x1,y1,x2,y2) línea (definida por las coordenadas del punto origen x1,y1
y fin x2,y2)
rect (x,y,ancho,alto,radio) rectángulo (definido por las coordenadas x,y de la
esquina superior izquierda; ancho y alto; radio es
opcional y redondea las esquinas)
Para dibujar rectángulos centrados podemos cambiar
el modo de dibujo
rectMode(CENTER);
rect(100,100,50,30);
quad (x1,y1,x2,y2,x3,y3,x4,y4) cuadrilátero (cada par de coordenadas representa en
orden de dibujo, uno de los cuatro vértices). Permite
hacer cuadrados, rombos,…
triangle (x1,y1,x2,y2,x3,y3) triángulo (cada par de coordenadas representa en orden
de dibujo, uno de los tres vértices).
ellipse (x,y,ancho,alto) elipse (definido por las coordenadas x,y del centro; ancho
y alto). Permite dibujar circunferencias
Ejemplo 1:
▪ Define el tamaño de la ventana de 400x300 px
▪ Dibuja una línea recta vertical de longitud 100 px
▪ Dibuja un triángulo rectángulo de lado 60 px
▪ Dibuja un cuadrado de lado 45 px
▪ Dibuja una circunferencia de diámetro 80 px
El mode(CENTER) también puede usarse para las imágenes y las formas
Color
Processing puede trabajar con el modo de color RGB utilizando cuatro variables (rojo, verde, azul y
alfa o transparencia), definidas cada una por un byte con un rango de valores que va de 0 a 255
color (255,0,0) = rojo color (0,255,0,127) = verde con 50% transparencia
Y con el modo de color hexadecimal : #FF5733, transparencia
En ambos casos si no se especifica el parámetro alfa, se entiende que su valor es máximo, 255, y
que por lo tanto no hay transparencia
Si un color tiene sus tres valores R, G y B iguales entre sí, se puede expresar con un solo
valor: color(130);
9
255,0,0
Valor Colores
255,127,0
color (0) Negro
255,255,0
color (255) Blanco
color (255,0,0) Rojo 0,255,0
color (0,255,0) Verde 0,0,255
color (0,0,255) Azul 75,0,130
alfa 255 Sin transparencia
alfa 0 Total transparencia 255,255,255
0,0,0
Cada figura en Processing tiene dos colores: stroke, fill (borde y relleno)
stroke (R,G,B,α) Color RGB del borde
α = 0 (transparente) - α = 255 (opaco)
strokeWeight (valor) Grosor del borde (en px) OJO AL ESCRIBIR
fill (R,G,B,α) Color de relleno
noStroke () Sin borde
noFill () Sin relleno
background (R,G,B,α) Color de fondo de la ventana
Para obtener cualquiera de los colores podemos utilizar abrir el menú principal
en Herramientas / Selector de colores. Y podemos copiar los datos de color
RGB o utilizar la opción “copiar”
Las propiedades de color deben escribirse antes de la función que describen
Ejemplo 2:
11. Estructura de Processing

Hasta ahora hemos utilizado programas secuenciales, donde cada
instrucción se ejecuta una detrás de otra y una sola vez.
Pero la estructura típica de un programa en Processing es con tres zonas:
Definición de datos y variables
void setup () { }
void draw () { }
La función void setup se ejecuta una sola vez al iniciar el programa. En
esta zona irán las instrucciones que sólo deben ejecutarse una vez. Por lo
que por ejemplo la función size se va a ejecutar una sola vez al principio
del programa.
La función void draw se repite constantemente y aquí es donde haremos
el dibujo y todo el tiempo el programa va a estar redibujándolo. Por
ejemplo, si dibujo una elipse (100,100,40,50), aunque no lo podamos ver,
la instrucción draw, está redibujando la elipse constantemente una encima
de otra. Esto permite dar movimiento a una imagen.
10
12. Datos variables y operadores:

En todos los lenguajes de programación, es imprescindible el uso de datos. Para ello deberemos primero
definir los tipos de datos que introduciremos en Processing, según sea su naturaleza (entero, real, carácter,
cadena de caracteres, etc).
Tipos de datos:
Instrucción Descripción Ejemplo
int números entero Int a= 8;
float números con decimales (los decimales se expresan float b=20.35;
con punto)
boolean verdadero o falso boolean c=true / false;
color color que puede tener un pixel color d= color(255,100,10);
color d= #FF640A
char un carácter o letra (se define con comillas simples) char e= ‘V’;
String cadena de caracteres o frase (se define con comillas String f= “Es verdadero”;
dobles)
Variables
Una variable es un espacio en memoria o cajón contenedor donde guardamos un valor. La variable
tiene un nombre fijo y un valor que puede cambiar durante el programa.
Ejemplo, una variable puede ser la distancia de un robot móvil hacia la pared. El nombre de la
variable, "dist_pared", y su valor lo expresaremos en centímetros. Si se acerca a la pared el valor
de "dist_pared" disminuye. También puedo operar con esta variable y multiplicarla o sumarla cierto
número, o la puedo comparar con otros valores, y eso me puede servir para tomar decisiones.
Las variables deben declararse antes de empezar el programa y normalmente se les asigna un
valor de inicio.
int dist_pared = 40; //declara una variable de número entero con el nombre
“dist_pared” y la inicia en valor 40 cm
println (dist_pared); //imprime en consola el valor de la distancia a la pared
Los nombres de las variables:

▪ no pueden contener espacios, por lo que las palabras deben separarse por guiones bajos
o utilizando mayúsculas al inicio de cada palabra (DistPared)
▪ no pueden contener caracteres especiales, excepto guión bajo (_)
▪ pueden contener números, pero no empezar por ellos
int a = 78; size (300,500);

float b = 13.46; int x1 = 50;
println (a*b); int y1 = 60;
float tamano = 100.5;
rect (x1,y1,tamano,tamano);
Variables de sistema
Processing viene con una serie de variables internas que no tenemos que declarar. Algunas de
estas variables son:
width y height Ancho y alto de la ventana
Variables que reaccionan a las acciones del teclado o el ratón:
keyPressed, Presionar una tecla
keyReleased, Soltar o dejar de presionar la tecla
mousePressed, Presionar el ratón
mouseButton, Presionar el botón del ratón: LEFT, CENTER, o RIGHT
mouseReleased Soltar el ratón
Key Variable char que almacena la última tecla presionada en el teclado
11
mouseX y mouseY Posición del ratón en el eje X y eje Y

print ( ) y println ( ) Imprimen mensajes en la consola de texto
print() imprime el texto en una línea y se queda esperando por
la siguiente orden print() o prinln() para imprimirla justo
después, en la misma línea de la consola.
En cambio println() imprime una línea completa y luego salta a
la siguiente línea.
Operadores
Operadores matemáticos
Para operar debemos respetar la jerarquía matemática haciendo uso de los paréntesis “( )”,
+ suma / división
- resta ++ incremento de 1
* multiplicación -- decremento de 1
Operadores de comparación:
== igual que != diferente que

< menor que > mayor que
<= menor o igual que >= mayor o igual que
Operadores lógicos Y / O
&& Y lógico Ej : (x > 0 && y < 5)

|| O lógico Ej : (x > 0 || y > 0)
Ejemplo 3:
Variables:
▪ Definir dos variables a y b con valores enteros iniciales de 40 en ambos casos, para indicar
la posición del centro de los círculos
▪ Definir una variable decimal d con valor inicial de 12.5, para indicar el diámetro de las
circunferencias
▪ Define una variable color c con valor inicial rojo claro
Void setup:
▪ Definir una ventana azul claro de tamaño 200x200 px
Void draw:
▪ Dibujar un círculo con origen a,b; de medida d de diámetro y de color c.
▪ Dibujar otro círculo desplazado 30 px del anterior (en horizontal y vertical), de diámetro d
+10.5 y de color c +60.
▪ Dibujar otro círculo desplazado 60 px del anterior (en horizontal y vertical), de diámetro d
+40.5 y de color c +120
12
13. Dar movimiento a una imagen

Cambiando el valor de las coordenadas del dibujo mediante variables podemos hacer que las formas
se desplacen por la pantalla.
Ejemplo 4:
Podemos cambiar el color de la circunferencia a medida que avanza y eliminar o no el borde de la

forma.
Si no queremos que la imagen deje huella, colocaremos el color de fondo en el void draw para que
se vaya redibujando el fondo antes de dibujar las siguientes circunferencias.
Y si queremos que la forma deje huella redibujaremos rectángulos del mismo tamaño que la ventana
indicándolos color y transparencia
13
Para evitar que la forma se salga de la pantalla podemos utilizar una estructura condicional:
if (a>width)
{ a=0; } // volvemos al principio
14. Interacción con el ratón y el teclado

mouseX y mouseY Posición del ratón en el eje X y eje Y.
Se utilizan para dibujar al colocar el ratón en una posición
Ejemplo: Dibujar un círculo siguiendo el cursor del ratón
Variables que reaccionan a las acciones del ratón (mouse) o el

teclado (key)
mousePressed, Presionar el ratón
mouseButton, Presionar el botón del ratón: LEFT, CENTER, o RIGHT
mouseReleased Soltar el ratón
keyPressed, Presionar una tecla

keyReleased, Soltar o dejar de presionar la tecla
Se suelen utilizar con la estructura condicional if
if (mousePressed)
{
fill(255,0,0,20);
rect(mouseX,mouseY,50,50);
}
O se ejecutan en una función independiente que colocaremos

debajo del void draw
void keyPressed()
{
fill(0,2550,0,20);
rect(100,100,50,50);
}
key Variable que almacena la última tecla presionada en el teclado
keyCode Variable que almacena la última tecla de control presionada en el
teclado UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT.
Su uso debe combinarse con keyPressed para poder consultar la
tecla presionada.
void keyPressed() { void keyPressed() {

if (keyCode==LEFT) { if (key==’m’) {
fill(0,255,0)); fill(255);
rect(100, 100, 100, b++); rect(10,10,100, b++);
} }
14
15. Sentencias de control: condicionales

if (condición SI): Comprueba si una condición se cumple. La función se escribe entre llaves {}
if (width > 500) { x= -x ; }
if…else: SI…..SINO: Ejecuta una u otra función dependiendo de si una condición se cumple o no
if (x > 120) { println (verdadero); }
else { println (falso); }
else if:
Podemos evaluar una serie de condiciones anidando varias sentencias else if, siendo todas
ellas, a su vez, mutuamente excluyentes:
if (x <= 0) {point(20,20);} //se ejecuta con x<0
else if (x < 100) {ellipse(50,50,100,100);} //se ejecuta con 0< x>100
else if (x <= 200) {rect(50,50,100,100);} //se ejecuta con 100< x>200
else {triangle(50,50,50,150,150,150;} //se ejecuta con x>200
if anidados
Si se cumple una primera condición, evaluar una segunda condición anidando varias sentencias
if…
if (x <= 0) {
if (y>10) {ellipse(50,50,100,100);} } //se ejecuta con x<0 e y>10
else {rect(50,50,100,100);} { //se ejecuta en el resto de casos
switch…..case. Se utiliza cuando tenemos 3 ó más funciones que ejecutar, según diferentes
condiciones. (Funciona como la estructura if……else)
switch (letra) { Al principio declaramos la
case ‘A’: variable char letra= ‘N’;
funcion1 ();
break;
case ‘B’: Después podemos definir
funcion2 (); las funciones 1, 2 y 3 de
break; forma independiente
case ‘C’: void funcion1() { };
funcion3 ();
void funcion2() { },
break; }
void funcion3() { };
16. Cambio de dirección en el movimiento de una imagen

Para conseguir que una forma con movimiento retroceda al llegar al final de la pantalla y cambie de
dirección, necesitamos crear una variable de avance a la que multiplicaremos por un número negativo
(-1) para que cambie de dirección.
Int avanceX=5;
Y al llegar al final de la pantalla le decimos que el avance sea negativo:
avanceX = -avanceX;
15
Ejemplo 5:
Círculo que avanza dejando huella hacia la derecha (de 5 en 5) hasta tocar el final de la ventana
y luego retrocede del mismo modo
17. Bucles
for (REPETIR): Es un bucle que repite un bloque encerrado entre llaves un número de veces
mientras una condición se cumple. Utiliza una variable para contar el número de veces que se han
repetido las órdenes.
Lleva 3 comandos:
for (declara la variable contadora y la inicia; condición para que se repita el
bucle; incremento a cada paso del bucle)
for (int x = 0; x<400; x =x+5)
{ line(30,x,80,x); } // Hace líneas paralelas desde la posición 0
hasta la 400 de x
Cada vez que se va a repetir el bucle, se revisa la condición, si es cierta, el bloque de funciones
se ejecuta (en este caso, se suma), y la condición vuelve a ser comprobada de nuevo. Si la
condición es falsa, el bucle termina
while (MIENTRAS): Es un bucle que se repite infinitamente mientras la expresión de dentro del
paréntesis sea cierta.
int x= 0;
while (x < 200)
{ line(30,x,80,x);
X=x+5; } // Hace líneas paralelas desde la posición 0 hasta
la 200 de x
do…while (HACER….MIENTRAS: Trabaja de la misma manera que el bucle while, con la
excepción de que la condición se comprueba al final del bucle, por lo que este bucle se ejecuta
"siempre" al menos una vez.
Int x = 0;
do { line(30,x,80,x);
x= x+5; }
while (x < 200)
break (ROMPER): Es usado para salir de los bucles do, for, o while, pasando por alto la condición
normal del bucle.
for (i = 0; i < 10; i++)
{ Console.WriteLine("valor de i: {0}", i);
if (i > 4) {break; }
16
18. Generar valores aleatorios: función random

La función random (x,y) genera valores aleatorios entre dos límites x e y. Los valores aleatorios no
funcionan con variables de tipo int
Ejemplo 6:
Dibujo de 10 círculos de posición aleatoria y tamaño aleatorio entre 20 y 80 px.
Lo dibujamos en el void setup para que sólo de dibujen una vez.
19. Escribir texto

Instrucción Descripción Ejemplo
textSize (n) Tamaño de letra expresada en puntos textSize (12);
fill (R,G,B) Color de texto fill (23,45,200);
textAlign (modo) Alineación del texto: RIGHT, LEFT, CENTER textAlign (CENTER);
text (“datos”, x, y) Escribe los datos en la posición x,y text (“hola”, 20,30);
Ejemplo 7:
Para incluir una variable dentro de un texto debemos indicar la variable de la siguiente manera:
“+variable+”
Int n=8;
text ("Puntuación="+n+" ", 40, 40);
17
20. Insertar imágenes

Primero debemos guardar la imagen en la carpeta de nuestro proyecto. Para
ello debemos pulsar Sketch/ Añadir archivo. La imagen ya queda dentro de
la carpeta data de nuestro proyecto.
O creamos la carpeta data dentro de nuestro proyecto e introducimos dentro
las imágenes
Primero debemos declarar las variables como imágenes con la
expresión PImage y damos un nombre a nuestra variable imagen.
PImage fondo;
Luego en el void setup cargamos nuestra imagen:
loadImage (nombre imagen)
fondo = loadImage (“cielo.jpg”);
En el void draw incluimos la función image (nombre
variable, posición x, posición y, dimensión x, dimensión y)
image (fondo,0,0);
También podemos cargarla en el void setup si la imagen
no se va a modificar durante el programa.
Si no ponemos dimensiones, la imagen se carga a su tamaño real.
21. Insertar música

Para reproducir un sonido, cuando se pulse una tecla determinada, ocurra alguna acción o durante el
programa, podemos usar la librería processing sound.
Una librería es un conjunto de subprogramas que amplían las funciones de nuestro lenguaje.
processing sound es una librería incluida en Processing y para usarla basta con importarla mediante el
código:
import processing.sound.*;
O añadirla del siguiente modo, buscando por criterio sonido e instalando.
Después debemos meter en la carpeta DATA de nuestro proyecto los sonidos con los que vayamos a
trabajar.
Esta Liberia permite reproducir y manipular archivos de sonido. Los formatos soportados son: WAV, AIF /
AIFF, MP3. Pero la decodificación de MP3 puede ser muy lenta y generalmente se recomienda utilizar
archivos WAV o AIF sin pérdida.
Algunos de los comandos de sonido que podemos utilizar son:
play(); Inicia la reproducción del archivo de sonido. Solo se reproduce una vez
hasta el final de la muestra de audio.
loop(); Inicia la reproducción del archivo de sonido que se repetirá en bucle
pause(); Detiene la reproducción y la siguiente reproducción se inicia donde se
detuvo la anterior reproducción.
stop(); Detiene la reproducción y la siguiente reproducción se inicia desde el
principio
18
El programa será:
Primero debemos importar la librería “processing sound” y declarar los sonidos que vamos a
utilizar
import processing.sound.*;
SoundFile cancion1; //Declaramos la canción de tipo SoundFile
En setup() cargamos un archivo de audio que previamente hemos guardado en la carpeta data.
void setup() {
cancion1 = new SoundFile(this,"01.mp3"); //Cargamos el archivo de música
canción1.loop(); //Reproducimos la canción en bucle
}
22. Exportar como una aplicación

Podemos exportar un sketch o programa cómo un ejecutable o aplicación
de escritorio, de modo que podamos compartirlo y ejecutar de forma
independiente sin necesidad de tener instalado Processing.
Para entornos Windows convierte el sketch en un .exe (.app en Mac), y
en una serie de clases de Java empaquetadas en .jar.
Podemos seleccionar para que plataforma queremos exportar (en
entornos no Mac, sólo puede exportarse para Windows y Linux).
Podemos seleccionar si queremos que la aplicación se abra cómo
ventana o a pantalla completa. Si elegimos el Modo
Presentación podemos optar, en la siguiente casilla, a que se
incluya un botón para finalizar la aplicación
También podemos elegir si queremos que se incruste Java en la
aplicación. Si vamos a compartir nuestra aplicación con otras personas que pudieran no tener Java
en su ordenador, marcaremos esta opción. El resultado final será, lógicamente, de mayor tamaño,
pero podrá ejecutarlo todo el mundo.
19

T5 Programacion Estructurada Processing

Cargado por

Copyright:

Formatos disponibles

T5 Programacion Estructurada Processing

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

T5 Programacion Estructurada Processing

Cargado por

Copyright:

Formatos disponibles

TICO 2º Bachillerato. Departamento de Tecnología.

IES Nuestra Señora de la Almudena Mª Jesús Saiz

TEMA 5: PROGRAMACIÓN ESTRUCTURADA

2. Tipos de lenguajes de programación

Lenguajes gráficos: las ordenes o instrucciones se

3. Fases del proceso de programación:

4. Algoritmo: codigo, pseudocódigo y diagráma de flujo

Definir N como un número

Simbolos de diagramas de flujo:

Proceso (instrucción Entrada / Salida

Entrada de datos Saluida de datos Salida de datos por

“B” es “A” es “A” es

Algoritmo resuelto con el programa PSeInt

5. Tipos de estructuras de control

6. Algoritmos con software PSeInt

Podemos realizar la descarga desde la web:

Algoritmo y FinAlgoritmo son las

Mientras: Permite realizar

Repetir: Repite una serie de

Botones Ejecutar y Dibujar diagrama de flujo:

Ejecutar Dibujar diagrama

EJECUCCIÓN DEL PROGRAMA

PROGRAMACIÓN ESTRUCTURADA CON PROCESSING

No es necesario instalación, basta con abrir este ejecutable.

Ejecutar: Ejecuta en la ventana el resultado de

Depurar: revisa el programa y muestra los

Consola: muestra los errores del programa

Editar / Autoformato: Da un formato al código que facilita su compresión, lo ordena y lo alinea

10. Dibujar con Processing

Instrucción Descripción Origen

Si después de programar hay que cambiar el tamaño del dibujo,

El mode(CENTER) también puede usarse para las imágenes y las formas

11. Estructura de Processing

12. Datos variables y operadores:

Los nombres de las variables:

int a = 78; size (300,500);

mouseX y mouseY Posición del ratón en el eje X y eje Y

== igual que != diferente que

&& Y lógico Ej : (x > 0 && y < 5)

13. Dar movimiento a una imagen

Podemos cambiar el color de la circunferencia a medida que avanza y eliminar o no el borde de la

14. Interacción con el ratón y el teclado

Variables que reaccionan a las acciones del ratón (mouse) o el

keyPressed, Presionar una tecla

O se ejecutan en una función independiente que colocaremos

void keyPressed() { void keyPressed() {

15. Sentencias de control: condicionales

16. Cambio de dirección en el movimiento de una imagen

18. Generar valores aleatorios: función random

19. Escribir texto

20. Insertar imágenes

21. Insertar música

22. Exportar como una aplicación

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.