root 8 роки тому
джерело
коміт
dae6f2afae
2 змінених файлів з 215 додано та 215 видалено
  1. 71
    144
      README-en.md
  2. 144
    71
      README-es.md

+ 71
- 144
README-en.md Переглянути файл

@@ -1,62 +1,50 @@
1
-# Estructuras de Repetición - Pintar en Cuadrícula
2 1
 
3
-![main1.png](images/main1-small.png)
4
-![main2.png](images/main2.png)
5
-![main3.png](images/main3-small.png)
2
+# Repetition Structures - Grid Plotter
6 3
 
7
-[Version 2016-05-10]
4
+##Objectives
8 5
 
9
-La recursión es una técnica muy utilizada en programación. Con esta técnica se resuelven problemas resolviendo un problema similar pero para casos más pequeños. Podemos construir conjuntos de objetos o procesos utilizando *reglas recursivas* y *valores iniciales*. Las *funciones recursivas* son funciones que se auto-invocan, utilizando cada vez conjuntos o elementos más pequeños,  hasta llegar a un punto en donde se utiliza la condición inicial en lugar de auto-invocarse. En esta experiencia de laboratorio implementarás algunas herramientas para dibujar y practicarás el uso de funciones recursivas para rellenar de color algunas figuras.
6
+Throughout this exercise the students will practice:
10 7
 
11
-## Objetivos:
8
+* For loops
9
+* Nested for loops
12 10
 
13
-1. Definir e implementar funciones recursivas.
14
-2. Practicar el uso de estructuras de repetición.
11
+## Concepts
15 12
 
16
-Esta experiencia de laboratorio es una adaptación de la asignación *GridPlotter* presentada por Alyce Brady y Pamela Cutter en [1]. La implementación de la cuadrícula y la capacidad de pintar en ella fue presentada por Sacha Schutz en [2] pero fue arreglada, modificada y adaptada para esta experiencia de laboratorio.
17 13
 
14
+Possibly many users of Windows OS (if not the most) have used the Paint program, which is a simple graphics painting application. In that software, as in many others graphics painting programs, there are various tools (eg. pencil, paint bucket, line) which allows the user to draw on the graph in different ways.
18 15
 
19
-## Pre-Lab:
20
-
21
-Antes de llegar al laboratorio debes haber:
22
-
23
-1. Repasado los conceptos relacionados a funciones recursivas.
24
-
25
-2. Estudiado los conceptos e instrucciones para la sesión de laboratorio.
26
-
16
+In this laboratory we will make work some of these tools: square, circle, triangle, and some special lines... but don't worry, it will be made in a simpler way.
27 17
 
18
+The tools will be used by clicking any cell in the grid and (from that point) the cells required to form that shape will be painted. For example, if we use the vertical-line tool and then click on the cell (2,3) a vertical line should be painted over all the cells on the column 2 [(2, y) for all y into the grid].
28 19
 
29 20
 ---
30 21
 
31 22
 ---
32 23
 
33 24
 
34
-## Aplicaciones para dibujar
35
-
36
-
37
-Probablemente muchos usuarios del sistema operativo Windows (¡quizás todos!) han usado el programa *Paint*, que es una aplicación simple para dibujar. En ese programado, al igual que en muchos otros programados para dibujar, hay varias herramientas (por ejemplo el lápiz, el cubo de pintura, la línea) que le permiten al usuario dibujar en el área de distintas maneras.
38
-
39
-En esta experiencia de laboratorio haremos funcionar algunas de esas herramientas: cuadrado, círculo, triángulo, y algunas líneas especiales ... ¡no te asustes!, lo haremos de una manera simple. 
40
-
41
-El dibujo se hará sobre una cuadrilla. Las herramientas se utilizarán marcando cualquier celda en la cuadrilla y, desde ese punto, las celdas necesarias para hacer la figura se pintarán. Por ejemplo, si seleccionamos la herramienta de línea vertical y marcamos la celda en posición *(2,3)*, una línea vertical se dibujará en todas las celdas de la columna 2. Esto es, se marcarán todas las celdas en posición $(2,y)$ para todas las $y$ de la cuadrilla.
42
-
25
+## Things you should know or recall:
43 26
 
27
+* The coordinates in Qt goes a little bit different. From left to right is from zero to maximum width. From top to bottom is from 0 to maximum height.
28
+* When we want to insert bidimensional data (such as the grid that has x and y) into a simple array we use a formula. For every point (x,y) in the grid, we solve number-of-columns * y + x and the result will be the index of the point in the array. Example: The index of the point (1,2) in a 5 width grid is 5*2+1 = 11
44 29
 
45 30
 ---
46 31
 
47 32
 ---
48 33
 
34
+## Libraries
49 35
 
50
-## Coordenadas en `Qt`:
36
+For this project you only need to use some of the functions of QtGlobal for the implementation of the circle:
51 37
 
52
-* El sistema de coordenadas en  `Qt` funciona un poco diferente, como muestra la Figura 1. Las entradas van de izquierda a derecha, desde 0 hasta un ancho  máximo, y desde arriba hasta abajo, desde 0 hasta una altura máxima.
38
+* int qFloor(qreal v) // Returns the floor of the value v.
39
+* qreal qSqrt(qreal v) // Returns the square root of v.
40
+* qreal qPow(qreal x, qreal y) // Returns the value of x raised to the power of y.
53 41
 
54
-	![ejemplo.png](images/ejemplo.png)
42
+And use the funcion that paints on the grid:
55 43
 
56
-	**Figura 1.** La imagen muestra la dirección en que se ordenan las coordenadas en las imágenes de `Qt`.
44
+* void switchOn(int x, int y, const QColor& color); //It paints the cell (x,y) with the color given. (You don't have to worry about QColor because is given to you by parameter.)
57 45
 
46
+Though it is not visible in this file (tools.cpp), there exists an array called mColors that contains the colors of all the cells of the grid. This will help you to know what color is in a cell: mColors[columns * y + x]
58 47
 
59
-* Cuando queremos insertar datos bi-dimensionales (como las entradas de una cuadrilla que tiene coordenadas en $x$ y $y$) en un arreglo de una dimensión usamos una fórmula para convertir cada coordenada $(x,y)$ a un índice $i$ del arreglo. Para cada punto con coordenadas $(x,y)$ en la cuadrilla, evaluamos $i=(número-de-columnas)*y+x$, en donde `número-de-columnas` representa el ancho del arreglo bi-dimensional, y el resultado $i$ será el índice del arreglo de una dimensión que corresponde al punto con coordenadas $(x,y)$ en la cuadrilla. Por ejemplo, el índice $i$ correspondiente al punto $(1,2)$ en una cuadrilla de ancho $5$ es $i=(5)*2+1=11$.
60 48
 
61 49
 
62 50
 ---
@@ -64,147 +52,107 @@ El dibujo se hará sobre una cuadrilla. Las herramientas se utilizarán marcando
64 52
 ---
65 53
 
66 54
 
67
-## Bibliotecas
68
-
69
-Para este proyecto necesitarás utilizar las funciones de `QtGlobal` para la implementación del círculo:
70
-
71
-
72
-* `int qFloor(qreal v)` // Devuelve el "piso" del valor $v$.
73
-* `qreal qSqrt(qreal v)` // Devuelve la raíz cuadrada del valor $v$.
74
-* `qreal qPow(qreal x, qreal y)` // Devuelve el valor de $x$ elevado a la potencia $y$.
55
+!INCLUDE "../../eip-diagnostic/gridplot/en/diag-gridplot-01.html"
75 56
 
76
-También necesitarás utilizar la función que pinta en la cuadrilla: 
57
+!INCLUDE "../../eip-diagnostic/gridplot/en/diag-gridplot-02.html"
77 58
 
78
-* `void switchOn(int x, int y, const QColor& color);` // Pinta la celda $(x,y)$ con el color dado. (No tienes que preocuparte por `QColor` porque se pasa a la función por parámetro.)
79
-
80
-Aunque no se ve en el archivo `tools.cpp`, hay una arreglo llamado `mColors` que contiene el color de todas las celas de la cuadrilla. Esto te ayudará a saber cuál color está en una celda: `mColors[columns * y + x]`. Nota que el índice de este arreglo se calcula utilizando la conversión para cambiar coordenadas $(x,y)$ a índices que explicamos arriba.
81 59
 
82 60
 ---
83 61
 
84 62
 ---
85 63
 
86 64
 
87
-!INCLUDE "../../eip-diagnostic/gridplot/es/diag-gridplot-01.html"
65
+## Laboratory session:
88 66
 
89
-!INCLUDE "../../eip-diagnostic/gridplot/es/diag-gridplot-02.html"
67
+### Exercise 1
90 68
 
69
+The Qt project at *HERE???* contains the skeleton for an application to draw lines or shapes on a grid. The application allows the user to select the color to paint, the color of the grid background, the painting shape (e.g., circle, square) and size of the tool. The selected shape is drawn when the user clicks the grid. 
91 70
 
92
----
71
+Your first job is to implement the functions to make the *row-major-fill*, *col-major-fill*, *left-diagonal* and *right-diagonal* buttons work. The function row-major-fill has been implemented for you as an example. The functions should work as follows.
93 72
 
94
----
95
-
96
-## Sesión de laboratorio:
97
-
98
-### Ejercicio  1: Implementar las funciones para hacer funcionar los botones de dibujar líneas
99
-
100
-####Instrucciones
101
-
102
-1. Descarga la carpeta `recursion-GridPlotter` de `Bitbucket` usando un terminal, moviéndote al directorio `Documents/eip`, y escribiendo el comando `git clone http://bitbucket.org/eip-uprrp/recursion-gridplotter`.
103
-
104
-2. Carga a Qt creator el proyecto `GridPlotter`  haciendo doble "click" en el archivo `GridPlotter.pro` que se encuentra en la carpeta  `Documents/eip/recursion-gridplotter` de tu computadora. 
105
-
106
-3. El proyecto contiene el esqueleto para una aplicación para dibujar líneas o figuras en una cuadrilla. La aplicación tiene una interface que le permite al usuario seleccionar el color para pintar, el color para el trasfondo de la cuadrilla, la figura que se va a dibujar (por ejemplo, círculo, cuadrado) y el tamaño de la figura. La figura seleccionada se dibuja cuando el usuario marca una celda en la cuadrilla.
107
-
108
-Estarás trabajando en el archivo `tools.cpp`. Tu primera tarea es implementar las funciones `RowMajorFill`, `ColMajorFill`, `DiagonalLeft` y `DiagonalRight` que hacen que los botones para dibujar líneas funcionen. La función `RowMajorFill` ya está implementada para que la tengas de ejemplo. Las funciones deben trabajar como se indica adelante.
109
-
110
-
111
-##### `RowMajorFill`
112
-
113
-Cuando  se selecciona la figura de línea horizontal en la interface, se dibujará una línea horizontal en la cuadrilla en la fila en donde el usuario marcó. La línea se expandirá a la derecha y a la izquierda de la celda marcada hasta que encuentre una celda (píxel) de un color diferente al color en el trasfondo, o hasta que la cuadrilla termine. La Figura 2 ilustra este comportamiento.
73
+#### row-major: 
114 74
 
75
+When this shape is chosen, a horizontal line will shall be drawn in the grid in the row where the user clicks. The line should expand to the left and right of the cell clicked by the user until it finds a pixel whose color is not the background color (or the grid ends). Figure 1 illustrates this behavior.
115 76
 
116 77
 
117 78
 | (a) | (b) | (c) |  
118 79
 |---|----|----|
119 80
 | ![](images/rowMajor01-small.png) | ![](images/rowMajor02-small.png) | ![](images/rowMajor03-small.png)| 
120 81
 
121
-**Figura 2** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea horizontal (`RowMajorFill`) y marca la celda mostrada, (c) se dibuja una línea horizontal que se expande hacia la izquierda y hacia la derecha de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
122
-
123 82
 
124
-##### `ColMajorFill`
83
+**Figure 1** - (a) A painting with a white background and red dots. (b) When the user clicks the **row-major** button and clicks the shown cell (c) a horizontal line is drawn that expands to the left and right of the clicked cell until a cell of non-background color is found.
125 84
 
126
-Esta función debe trabajar de manera similar a la función `RowMajorFill` pero para columnas. La Figura 3 ilustra su comportamiento.
127 85
 
86
+#### columns-major
128 87
 
88
+This button should work similar to the *row-major* but for columns. Figure 2 illustrates this behavior.
129 89
 
130 90
 | (a) | (b) | (c) | 
131 91
 |---|----|----|
132
-| ![](images/colMajor01-small.png) | ![](images/colMajor02-small.png) | ![](images/colMajor03-small.png)|  
92
+| ![](images/colMajor01-small.png) | ![](images/colMajor02-small.png) | ![](images/colMajor03-small.png)| 
133 93
 
134
-**Figura 3** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea vertical (`ColMajorFill`) y marca la celda mostrada, (c) se dibuja una línea vertical que se expande hacia arriba y hacia abajo de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
94
+**Figure 2** - (a) A painting with a white background and red dots. (b) When the user clicks the **columns-major** button and clicks the shown cell, (c) a vertical line is drawn that expands to the top and botton of the clicked cell until a cell of non-background color is found.
135 95
 
136
- 
137 96
 
138
-##### `DiagonalLeft`
139 97
 
140
-Esta función debe trabajar de manera similar a la función `RowMajorFill` pero produce una línea diagonal desde la izquierda superior hasta la derecha inferior. La Figura 4 ilustra su comportamiento.
98
+#### left-diagonal
141 99
 
142 100
 
101
+This button should work similar to the *row-major* but produces a diagonal from upper left to lower right. Figure 3 illustrates this behavior.
102
+
143 103
 
144 104
 | (a) | (b) | (c) | 
145 105
 |---|----|----|
146
-| ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagLeft02-small.png)| 
147
-
148
-**Figura 4** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea diagonal izquierda (`DiagonalLeft`) y marca la celda mostrada, (c) se dibuja una línea diagonal izquierda que se expande hacia arriba a la izquierda y hacia abajo a la derecha de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
149
-
106
+| ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagLeft02-small.png)|
150 107
 
108
+**Figure 3** - (a) A painting with a white background and red dots. (b) When the user clicks the **left-diagonal** button and clicks the shown cell (c) a left-diagonal line is drawn that expands from the top left to the bottom right of the clicked cell until a cell of non-background color is found.
151 109
 
152
-##### `DiagonalRight`
153
-
154
-Esta función debe trabajar de manera similar a la función `DiagonalLeft` pero produce una línea diagonal desde la derecha superior hasta la izquierda inferior. La Figura 5 ilustra su comportamiento.
155 110
 
111
+#### right-diagonal
156 112
 
113
+This button should work similar to the *left-diagonal* but produces a diagonal from bottom left to top right. Figure 4 illustrates this behavior.
157 114
 
158 115
 | (a) | (b) | (c) | 
159 116
 |---|----|----|
160 117
 | ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagRight02-small.png)| 
161
- 
162
-
163
-**Figura 5** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea diagonal derecha (`DiagonalRight`) y marca la celda mostrada, (c) se dibuja una línea diagonal derecha que se expande hacia arriba a la derecha y hacia abajo a la izquierda de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
164
-
165
-
166
-### Ejercicio 2: Implementar las funciones para hacer funcionar los botones de dibujar cuadrados, triángulos y círculos.
167 118
 
119
+**Figure 4** - (a) A painting with a white background and red dots. (b) When the user clicks the **right-diagonal** button and clicks the shown cell (c) a right-diagonal line is drawn that expands from the bottom left to the top right of the clicked cell until a cell of non-background color is found.
168 120
 
169
-Ahora implementarás la funcionalidad para dibujar cuadrados, círculos y líneas. El **tamaño** de la figura dibujada dependerá del tamaño seleccionado con la barra deslizante en la interface.
121
+## Exercise 2 a
170 122
 
123
+Let's implement the functionality to draw the square, triangle and circle. The **size** of the drawn shape will depend in the size chosen using the slide bar.
171 124
 
172
-#### 2a: Cuadrados 
173
-
174
-Para los cuadrados, ¡lo más fácil es pensar en ellos como si fueran cebollas! Un cuadrado de tamaño 1 es simplemente la celda marcada por el usuario. Un cuadrado de tamaño 2 es la celda marcada, cubierta por una capa de celdas de tamaño 1, y así sucesivamente. En otras palabras, un cuadrado de tamaño $n$ tendrá alto = ancho = $2n-1$.
175
-
125
+For the squares (the easiest) you may think of them as if they were onions!  A square of size 1 is just the cell clicked by the user. A square of size 2 is the clicked cell with a layer of 1 cell, and so forth. In other words, a square of size $n$ will have height = width = $2n-1$
176 126
 
177 127
 
178 128
 ![](images/squares.png)
179 129
 
180
-**Figura 6** - Cuadrados de tamaño 1 (verde), 2 (rojo), 3 (azul), y 4 (amarillo). En cada caso, el usuario marcó la celda del centro del cuadrado. 
130
+**Figure 5** - Squares of size 1 (green), 2 (red), 3 (blue), and 4 (yellow). In each case, the user clicked on the cell at the center of the square.
131
+
181 132
 
182 133
 
183
-#### 2b: Triángulos
134
+## Exercise 2 b
184 135
 
185
-El botón de triángulo produce un triángulo **isóceles** como se muestra en la Figura 7. Para un tamaño $n$ seleccionado, el tamaño de la base será $2n + 1$. La altura debe ser $n+1$.
136
+The triangle button should produce an **isosceles** triangles as shown in Figure 6. For a chosen size **n** the base will be  $2n + 1$. The height should be $n + 1$.
186 137
 
187 138
 
188 139
 ![](images/triangles.png)
189 140
 
190 141
 
191
-**Figura 7** - Triángulos de tamaño 1 (verde), 2 (rojo), 3 (azul), y 4 (amarillo). En cada caso, el usuario marcó la celda del centro de la base del triángulo. 
142
+**Figure 5** - Triangles of size 1 (green), 2 (red), 3 (blue), and 4 (yellow). In each case, the user clicked on the cell at the center of the base of the triangle.
192 143
 
193
-#### 2c: Círculos
144
+## Exercise 2 c
194 145
 
195
-¡Felicitaciones! ¡Llegaste hasta la parte más difícil: círculos! Aquí tendrás que utilizar tus destrezas matemáticas ... esperamos que te haya ido bien en tu clase de pre-cálculo ...
146
+Congrats, you made it to the hardest part: circles! Here you need to use your math skills... hope you did well in that class. 
196 147
 
197 148
 
198 149
 ![](images/circles.png)
199 150
 
200
-**Figura 8** - Círculos de tamaño 1 (verde), 2 (rojo), 3 (azul), y 4 (amarillo). En cada caso, el usuario marcó la celda del centro del círculo. 
151
+**Figure 5** - Circles of size 1 (green), 2 (red), 3 (blue), and 4 (yellow). In each case, the user clicked on the cell at the center the circle.
201 152
 
202
-**Ayuda para producir los círculos:**
203
-
204
-Primero necesitas entender las expresiones asociadas a un círculo con ecuación: $x^2+y^2=r^2$. Por ejemplo, consideremos un círculo con radio $r=1$. La ecuación $x^2+y^2=1$ nos dice que todo punto $(x,y)$ que satisfaga la ecuación es un punto en la *circunferencia* del círculo. La expresión para un círculo *relleno* es: $x^2 + y^2 <=r^2$. Un círculo relleno, de radio $r=1$ tiene expresión  $x^2 + y^2 <= 1$, lo que dice que cualquier punto $(x,y)$ que satisfaga $x^2 + y^2 <= 1$ es un punto en el círculo relleno.
205
-
206
-¿Cómo producimos el círculo? Una manera sería generar todos los puntos **cercanos** al centro del círculo y determinar si éstos satisfacen la expresión $x^2 + y^2 <= r^2$. Por ejemplo, podemos tratar todos los puntos que están en el cuadrado de tamaño $2r+1$. Para un círculo de radio $r=2$ tendríamos que generar los siguientes puntos y probarlos en la expresión $x^2 + y^2 <=4$:
153
+Here is a hint on how to produce the circles. You need to start by understanding what their equation ($r^2 = y^2 + x^2$) means. As an example, lets consider $r=1$. The equation for a circle with $r = 1$ means that any point $(x,y)$ such that $x^2 + y^2 = 1$ is a point in the *circumference* of the circle.  The equation for a *filled* circle is  $x^2 + y^2 <=r^2$. A filled circle of radius 1 has an equation $x^2 + y^2 <= 1$, which means that any point $(x,y)$ such that $x^2 + y^2 <= 1$ is a point in filled circle. 
207 154
 
155
+How to produce a circle? One way would be to generate all points in the **proximity** of the center of the circle and determine if they comply with $x^2 + y^2 <= r^2$. For example, we could try every point that is in the square of size $2r+1$. For a circle of $r=2$ we would need to generate all the following points and test them against the $x^2 + y^2 <=4$ equation:
208 156
 
209 157
 ````
210 158
 (-2, 2) (-1, 2) ( 0, 2) ( 1, 2) ( 2, 2)
@@ -214,8 +162,7 @@ Primero necesitas entender las expresiones asociadas a un círculo con ecuación
214 162
 (-2,-2) (-1,-2) ( 0,-2) ( 1,-2) ( 2,-2)
215 163
 ```` 
216 164
 
217
-En este caso, solo los puntos que se muestran abajo satisfacen la expresión $x^2 + y^2 <=4$.
218
-
165
+In this case, only the shown points would comply to the equation.
219 166
 
220 167
 ````
221 168
                 ( 0, 2) 
@@ -226,21 +173,20 @@ En este caso, solo los puntos que se muestran abajo satisfacen la expresión $x^
226 173
 ```` 
227 174
 
228 175
 
176
+## Exercise 3
229 177
 
230
-### Ejercicio 3: Implementar la función para rellenar figuras utilizando recursión.
231
-
232
-En este ejercicio implementarás la funcionalidad para rellenar de color las figuras. Una de las maneras más convenientes para expresar el algoritmo para rellenar es utilizando recursión. Un algoritmo recursivo básico (pero bastante flojo) se encuentra en Wikipedia:
178
+You will now implement the flood fill functionality. One of the most convenient ways to express the algorithm for flood fill is using recursion. A basic (but rather wastefull) recursive algorithm is given in Wikipedia: 
233 179
 
234 180
 
235 181
 ```
236
-Relleno (celda, color-buscado, color-reemplazo):
237
- 1. Si color-buscado es igual al color-reemplazo, return.
238
- 2. Si el color de celda no es igual al  color-buscado, return.
239
- 3. Ajusta el color de celda al color-reemplazo.
240
- 4. Ejecuta Relleno (un lugar a la izquerda de celda, color-buscado, color-reemplazo).
241
-    Ejecuta Relleno (un lugar a la derecha de celda, color-buscado, color-reemplazo).
242
-    Ejecuta Relleno (un lugar arriba de celda, color-buscado, color-reemplazo).
243
-    Ejecuta Relleno (un lugar abajo de celda, color-buscado, color-reemplazo).
182
+Flood-fill (node, target-color, replacement-color):
183
+ 1. If target-color is equal to replacement-color, return.
184
+ 2. If the color of node is not equal to target-color, return.
185
+ 3. Set the color of node to replacement-color.
186
+ 4. Perform Flood-fill (one step to the west of node, target-color, replacement-color).
187
+    Perform Flood-fill (one step to the east of node, target-color, replacement-color).
188
+    Perform Flood-fill (one step to the north of node, target-color, replacement-color).
189
+    Perform Flood-fill (one step to the south of node, target-color, replacement-color).
244 190
  5. Return.
245 191
 
246 192
 ```
@@ -248,42 +194,23 @@ Relleno (celda, color-buscado, color-reemplazo):
248 194
 ![](images/floodFillAlgo.png)
249 195
 
250 196
 
251
-
252
-**Figura 9** - (a) El dibujo original con trasfondo blanco y celdas negras. (b) Se selecciona una celda y se ejecuta el algoritmo de rellenar en esa celda (1), (c) La celda se pinta anaranjada, entonces (d) invoca `relleno` en la celda de la izquierda (2). (e) La celda 2 se pinta anaranjada, entonces  (f) invoca `relleno` en la celda de la izquierda  (3). Esta celda no es de color-buscado (es negra), la función regresa (returns). 
253
-(g) `relleno` se invoca en la celda de la derecha de la celda 2, pero esa celda ya está pintada del color-reemplazo. (h) `relleno` se invoca en la celda de arriba de la celda  2. (i) Esta celda se pinta anaranjada e (j) invoca `relleno` en la celda de la izquierda  (4). Esta celda no es de color-buscado, por lo tanto la función regresa (k), celda (3) invoca `relleno` en su celda derecha.
254
-
255
-Invoca la función relleno (`flood-fill`) y prueba su funcionamiento utilizando varias figuras. Asegúrate de probar figuras abiertas, como, por ejemplo, la siguiente:
197
+**Figure 6** - (a) The original drawing with white background and black pixels. (b) A pixel is chosen and the flood fill algorithm is run on that cell (1), (c) the cell is painted orange, then (d) invokes flood-fill on its west cell (2). (e) cell 2 is painted orange, then (f) invokes flood-fill on its west cell (3). This cell is not of the target color (it is black), the function returns. (g) flood fill is invoked on the cell to the east of cell 2, however that cell is already changed to the target color. (h) flood fill is invoked on the cell to the north of cell 2. (i) This cell is painted orange and (j) invokes flood cell on its west cell (4). This cell is not of target color, thus the function returns (k) cell (3) invokes flood fill on its east cell.
256 198
 
257 199
 
200
+Implement the flood fill function and test filling out various shapes. Be sure to test open shapes, such as the following:
258 201
 
259 202
 ![](images/floodFillTest-small.png)
260 203
 
261
----
262
-
263
----
264 204
 
265
-## Entregas
266 205
 
267
-Utiliza "Entrega" en Moodle para entregar el archivo `tools.cpp` con las funciones que implementaste en esta experiencia de laboratorio. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
206
+### Deliverables
268 207
 
269
----
208
+In the following textboxes, copy the functions that you developed for the program. Remember to properly comment all functions and use good indentation and variable naming practices.
270 209
 
271
----
272
-
273
-##Referencias
210
+### References
274 211
 
275 212
 [1] Alyce Brady and Pamela Cutter, http://nifty.stanford.edu/2005/GridPlotter/
276 213
 
277 214
 [2] Sacha Schutz, http://www.labsquare.org
278 215
 
279
-[3] http://en.wikipedia.org/wiki/Flood_fill
280
-
281
----
282
-
283
----
284
----
285
-
286
----
287
-
288
-----
289
-
216
+[3] http://en.wikipedia.org/wiki/Flood_fill

+ 144
- 71
README-es.md Переглянути файл

@@ -1,50 +1,62 @@
1
+# Estructuras de Repetición - Pintar en Cuadrícula
1 2
 
2
-# Repetition Structures - Grid Plotter
3
+![main1.png](images/main1-small.png)
4
+![main2.png](images/main2.png)
5
+![main3.png](images/main3-small.png)
3 6
 
4
-##Objectives
7
+[Version 2016-05-10]
5 8
 
6
-Throughout this exercise the students will practice:
9
+La recursión es una técnica muy utilizada en programación. Con esta técnica se resuelven problemas resolviendo un problema similar pero para casos más pequeños. Podemos construir conjuntos de objetos o procesos utilizando *reglas recursivas* y *valores iniciales*. Las *funciones recursivas* son funciones que se auto-invocan, utilizando cada vez conjuntos o elementos más pequeños,  hasta llegar a un punto en donde se utiliza la condición inicial en lugar de auto-invocarse. En esta experiencia de laboratorio implementarás algunas herramientas para dibujar y practicarás el uso de funciones recursivas para rellenar de color algunas figuras.
7 10
 
8
-* For loops
9
-* Nested for loops
11
+## Objetivos:
10 12
 
11
-## Concepts
13
+1. Definir e implementar funciones recursivas.
14
+2. Practicar el uso de estructuras de repetición.
12 15
 
16
+Esta experiencia de laboratorio es una adaptación de la asignación *GridPlotter* presentada por Alyce Brady y Pamela Cutter en [1]. La implementación de la cuadrícula y la capacidad de pintar en ella fue presentada por Sacha Schutz en [2] pero fue arreglada, modificada y adaptada para esta experiencia de laboratorio.
13 17
 
14
-Possibly many users of Windows OS (if not the most) have used the Paint program, which is a simple graphics painting application. In that software, as in many others graphics painting programs, there are various tools (eg. pencil, paint bucket, line) which allows the user to draw on the graph in different ways.
15 18
 
16
-In this laboratory we will make work some of these tools: square, circle, triangle, and some special lines... but don't worry, it will be made in a simpler way.
19
+## Pre-Lab:
20
+
21
+Antes de llegar al laboratorio debes haber:
22
+
23
+1. Repasado los conceptos relacionados a funciones recursivas.
24
+
25
+2. Estudiado los conceptos e instrucciones para la sesión de laboratorio.
26
+
17 27
 
18
-The tools will be used by clicking any cell in the grid and (from that point) the cells required to form that shape will be painted. For example, if we use the vertical-line tool and then click on the cell (2,3) a vertical line should be painted over all the cells on the column 2 [(2, y) for all y into the grid].
19 28
 
20 29
 ---
21 30
 
22 31
 ---
23 32
 
24 33
 
25
-## Things you should know or recall:
34
+## Aplicaciones para dibujar
35
+
36
+
37
+Probablemente muchos usuarios del sistema operativo Windows (¡quizás todos!) han usado el programa *Paint*, que es una aplicación simple para dibujar. En ese programado, al igual que en muchos otros programados para dibujar, hay varias herramientas (por ejemplo el lápiz, el cubo de pintura, la línea) que le permiten al usuario dibujar en el área de distintas maneras.
38
+
39
+En esta experiencia de laboratorio haremos funcionar algunas de esas herramientas: cuadrado, círculo, triángulo, y algunas líneas especiales ... ¡no te asustes!, lo haremos de una manera simple. 
40
+
41
+El dibujo se hará sobre una cuadrilla. Las herramientas se utilizarán marcando cualquier celda en la cuadrilla y, desde ese punto, las celdas necesarias para hacer la figura se pintarán. Por ejemplo, si seleccionamos la herramienta de línea vertical y marcamos la celda en posición *(2,3)*, una línea vertical se dibujará en todas las celdas de la columna 2. Esto es, se marcarán todas las celdas en posición $(2,y)$ para todas las $y$ de la cuadrilla.
42
+
26 43
 
27
-* The coordinates in Qt goes a little bit different. From left to right is from zero to maximum width. From top to bottom is from 0 to maximum height.
28
-* When we want to insert bidimensional data (such as the grid that has x and y) into a simple array we use a formula. For every point (x,y) in the grid, we solve number-of-columns * y + x and the result will be the index of the point in the array. Example: The index of the point (1,2) in a 5 width grid is 5*2+1 = 11
29 44
 
30 45
 ---
31 46
 
32 47
 ---
33 48
 
34
-## Libraries
35 49
 
36
-For this project you only need to use some of the functions of QtGlobal for the implementation of the circle:
50
+## Coordenadas en `Qt`:
37 51
 
38
-* int qFloor(qreal v) // Returns the floor of the value v.
39
-* qreal qSqrt(qreal v) // Returns the square root of v.
40
-* qreal qPow(qreal x, qreal y) // Returns the value of x raised to the power of y.
52
+* El sistema de coordenadas en  `Qt` funciona un poco diferente, como muestra la Figura 1. Las entradas van de izquierda a derecha, desde 0 hasta un ancho  máximo, y desde arriba hasta abajo, desde 0 hasta una altura máxima.
41 53
 
42
-And use the funcion that paints on the grid:
54
+	![ejemplo.png](images/ejemplo.png)
43 55
 
44
-* void switchOn(int x, int y, const QColor& color); //It paints the cell (x,y) with the color given. (You don't have to worry about QColor because is given to you by parameter.)
56
+	**Figura 1.** La imagen muestra la dirección en que se ordenan las coordenadas en las imágenes de `Qt`.
45 57
 
46
-Though it is not visible in this file (tools.cpp), there exists an array called mColors that contains the colors of all the cells of the grid. This will help you to know what color is in a cell: mColors[columns * y + x]
47 58
 
59
+* Cuando queremos insertar datos bi-dimensionales (como las entradas de una cuadrilla que tiene coordenadas en $x$ y $y$) en un arreglo de una dimensión usamos una fórmula para convertir cada coordenada $(x,y)$ a un índice $i$ del arreglo. Para cada punto con coordenadas $(x,y)$ en la cuadrilla, evaluamos $i=(número-de-columnas)*y+x$, en donde `número-de-columnas` representa el ancho del arreglo bi-dimensional, y el resultado $i$ será el índice del arreglo de una dimensión que corresponde al punto con coordenadas $(x,y)$ en la cuadrilla. Por ejemplo, el índice $i$ correspondiente al punto $(1,2)$ en una cuadrilla de ancho $5$ es $i=(5)*2+1=11$.
48 60
 
49 61
 
50 62
 ---
@@ -52,107 +64,147 @@ Though it is not visible in this file (tools.cpp), there exists an array called
52 64
 ---
53 65
 
54 66
 
55
-!INCLUDE "../../eip-diagnostic/gridplot/en/diag-gridplot-01.html"
67
+## Bibliotecas
68
+
69
+Para este proyecto necesitarás utilizar las funciones de `QtGlobal` para la implementación del círculo:
70
+
71
+
72
+* `int qFloor(qreal v)` // Devuelve el "piso" del valor $v$.
73
+* `qreal qSqrt(qreal v)` // Devuelve la raíz cuadrada del valor $v$.
74
+* `qreal qPow(qreal x, qreal y)` // Devuelve el valor de $x$ elevado a la potencia $y$.
56 75
 
57
-!INCLUDE "../../eip-diagnostic/gridplot/en/diag-gridplot-02.html"
76
+También necesitarás utilizar la función que pinta en la cuadrilla: 
58 77
 
78
+* `void switchOn(int x, int y, const QColor& color);` // Pinta la celda $(x,y)$ con el color dado. (No tienes que preocuparte por `QColor` porque se pasa a la función por parámetro.)
79
+
80
+Aunque no se ve en el archivo `tools.cpp`, hay una arreglo llamado `mColors` que contiene el color de todas las celas de la cuadrilla. Esto te ayudará a saber cuál color está en una celda: `mColors[columns * y + x]`. Nota que el índice de este arreglo se calcula utilizando la conversión para cambiar coordenadas $(x,y)$ a índices que explicamos arriba.
59 81
 
60 82
 ---
61 83
 
62 84
 ---
63 85
 
64 86
 
65
-## Laboratory session:
87
+!INCLUDE "../../eip-diagnostic/gridplot/es/diag-gridplot-01.html"
66 88
 
67
-### Exercise 1
89
+!INCLUDE "../../eip-diagnostic/gridplot/es/diag-gridplot-02.html"
68 90
 
69
-The Qt project at *HERE???* contains the skeleton for an application to draw lines or shapes on a grid. The application allows the user to select the color to paint, the color of the grid background, the painting shape (e.g., circle, square) and size of the tool. The selected shape is drawn when the user clicks the grid. 
70 91
 
71
-Your first job is to implement the functions to make the *row-major-fill*, *col-major-fill*, *left-diagonal* and *right-diagonal* buttons work. The function row-major-fill has been implemented for you as an example. The functions should work as follows.
92
+---
72 93
 
73
-#### row-major: 
94
+---
95
+
96
+## Sesión de laboratorio:
97
+
98
+### Ejercicio  1: Implementar las funciones para hacer funcionar los botones de dibujar líneas
99
+
100
+####Instrucciones
101
+
102
+1. Descarga la carpeta `recursion-GridPlotter` de `Bitbucket` usando un terminal, moviéndote al directorio `Documents/eip`, y escribiendo el comando `git clone http://bitbucket.org/eip-uprrp/recursion-gridplotter`.
103
+
104
+2. Carga a Qt creator el proyecto `GridPlotter`  haciendo doble "click" en el archivo `GridPlotter.pro` que se encuentra en la carpeta  `Documents/eip/recursion-gridplotter` de tu computadora. 
105
+
106
+3. El proyecto contiene el esqueleto para una aplicación para dibujar líneas o figuras en una cuadrilla. La aplicación tiene una interface que le permite al usuario seleccionar el color para pintar, el color para el trasfondo de la cuadrilla, la figura que se va a dibujar (por ejemplo, círculo, cuadrado) y el tamaño de la figura. La figura seleccionada se dibuja cuando el usuario marca una celda en la cuadrilla.
107
+
108
+Estarás trabajando en el archivo `tools.cpp`. Tu primera tarea es implementar las funciones `RowMajorFill`, `ColMajorFill`, `DiagonalLeft` y `DiagonalRight` que hacen que los botones para dibujar líneas funcionen. La función `RowMajorFill` ya está implementada para que la tengas de ejemplo. Las funciones deben trabajar como se indica adelante.
109
+
110
+
111
+##### `RowMajorFill`
112
+
113
+Cuando  se selecciona la figura de línea horizontal en la interface, se dibujará una línea horizontal en la cuadrilla en la fila en donde el usuario marcó. La línea se expandirá a la derecha y a la izquierda de la celda marcada hasta que encuentre una celda (píxel) de un color diferente al color en el trasfondo, o hasta que la cuadrilla termine. La Figura 2 ilustra este comportamiento.
74 114
 
75
-When this shape is chosen, a horizontal line will shall be drawn in the grid in the row where the user clicks. The line should expand to the left and right of the cell clicked by the user until it finds a pixel whose color is not the background color (or the grid ends). Figure 1 illustrates this behavior.
76 115
 
77 116
 
78 117
 | (a) | (b) | (c) |  
79 118
 |---|----|----|
80 119
 | ![](images/rowMajor01-small.png) | ![](images/rowMajor02-small.png) | ![](images/rowMajor03-small.png)| 
81 120
 
121
+**Figura 2** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea horizontal (`RowMajorFill`) y marca la celda mostrada, (c) se dibuja una línea horizontal que se expande hacia la izquierda y hacia la derecha de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
122
+
82 123
 
83
-**Figure 1** - (a) A painting with a white background and red dots. (b) When the user clicks the **row-major** button and clicks the shown cell (c) a horizontal line is drawn that expands to the left and right of the clicked cell until a cell of non-background color is found.
124
+##### `ColMajorFill`
84 125
 
126
+Esta función debe trabajar de manera similar a la función `RowMajorFill` pero para columnas. La Figura 3 ilustra su comportamiento.
85 127
 
86
-#### columns-major
87 128
 
88
-This button should work similar to the *row-major* but for columns. Figure 2 illustrates this behavior.
89 129
 
90 130
 | (a) | (b) | (c) | 
91 131
 |---|----|----|
92
-| ![](images/colMajor01-small.png) | ![](images/colMajor02-small.png) | ![](images/colMajor03-small.png)| 
132
+| ![](images/colMajor01-small.png) | ![](images/colMajor02-small.png) | ![](images/colMajor03-small.png)|  
93 133
 
94
-**Figure 2** - (a) A painting with a white background and red dots. (b) When the user clicks the **columns-major** button and clicks the shown cell, (c) a vertical line is drawn that expands to the top and botton of the clicked cell until a cell of non-background color is found.
134
+**Figura 3** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea vertical (`ColMajorFill`) y marca la celda mostrada, (c) se dibuja una línea vertical que se expande hacia arriba y hacia abajo de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
95 135
 
136
+ 
96 137
 
138
+##### `DiagonalLeft`
97 139
 
98
-#### left-diagonal
140
+Esta función debe trabajar de manera similar a la función `RowMajorFill` pero produce una línea diagonal desde la izquierda superior hasta la derecha inferior. La Figura 4 ilustra su comportamiento.
99 141
 
100 142
 
101
-This button should work similar to the *row-major* but produces a diagonal from upper left to lower right. Figure 3 illustrates this behavior.
102
-
103 143
 
104 144
 | (a) | (b) | (c) | 
105 145
 |---|----|----|
106
-| ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagLeft02-small.png)|
146
+| ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagLeft02-small.png)| 
147
+
148
+**Figura 4** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea diagonal izquierda (`DiagonalLeft`) y marca la celda mostrada, (c) se dibuja una línea diagonal izquierda que se expande hacia arriba a la izquierda y hacia abajo a la derecha de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
149
+
107 150
 
108
-**Figure 3** - (a) A painting with a white background and red dots. (b) When the user clicks the **left-diagonal** button and clicks the shown cell (c) a left-diagonal line is drawn that expands from the top left to the bottom right of the clicked cell until a cell of non-background color is found.
109 151
 
152
+##### `DiagonalRight`
153
+
154
+Esta función debe trabajar de manera similar a la función `DiagonalLeft` pero produce una línea diagonal desde la derecha superior hasta la izquierda inferior. La Figura 5 ilustra su comportamiento.
110 155
 
111
-#### right-diagonal
112 156
 
113
-This button should work similar to the *left-diagonal* but produces a diagonal from bottom left to top right. Figure 4 illustrates this behavior.
114 157
 
115 158
 | (a) | (b) | (c) | 
116 159
 |---|----|----|
117 160
 | ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagRight02-small.png)| 
161
+ 
118 162
 
119
-**Figure 4** - (a) A painting with a white background and red dots. (b) When the user clicks the **right-diagonal** button and clicks the shown cell (c) a right-diagonal line is drawn that expands from the bottom left to the top right of the clicked cell until a cell of non-background color is found.
163
+**Figura 5** - (a) Un dibujo con trasfondo blanco y puntos rojos. (b) Cuando el usuario marca el botón de línea diagonal derecha (`DiagonalRight`) y marca la celda mostrada, (c) se dibuja una línea diagonal derecha que se expande hacia arriba a la derecha y hacia abajo a la izquierda de la celda marcada, hasta que se encuantra una celda con un color diferente al color de trasfondo. 
120 164
 
121
-## Exercise 2 a
122 165
 
123
-Let's implement the functionality to draw the square, triangle and circle. The **size** of the drawn shape will depend in the size chosen using the slide bar.
166
+### Ejercicio 2: Implementar las funciones para hacer funcionar los botones de dibujar cuadrados, triángulos y círculos.
124 167
 
125
-For the squares (the easiest) you may think of them as if they were onions!  A square of size 1 is just the cell clicked by the user. A square of size 2 is the clicked cell with a layer of 1 cell, and so forth. In other words, a square of size $n$ will have height = width = $2n-1$
126 168
 
169
+Ahora implementarás la funcionalidad para dibujar cuadrados, círculos y líneas. El **tamaño** de la figura dibujada dependerá del tamaño seleccionado con la barra deslizante en la interface.
127 170
 
128
-![](images/squares.png)
129 171
 
130
-**Figure 5** - Squares of size 1 (green), 2 (red), 3 (blue), and 4 (yellow). In each case, the user clicked on the cell at the center of the square.
172
+#### 2a: Cuadrados 
173
+
174
+Para los cuadrados, ¡lo más fácil es pensar en ellos como si fueran cebollas! Un cuadrado de tamaño 1 es simplemente la celda marcada por el usuario. Un cuadrado de tamaño 2 es la celda marcada, cubierta por una capa de celdas de tamaño 1, y así sucesivamente. En otras palabras, un cuadrado de tamaño $n$ tendrá alto = ancho = $2n-1$.
175
+
176
+
177
+
178
+![](images/squares.png)
131 179
 
180
+**Figura 6** - Cuadrados de tamaño 1 (verde), 2 (rojo), 3 (azul), y 4 (amarillo). En cada caso, el usuario marcó la celda del centro del cuadrado. 
132 181
 
133 182
 
134
-## Exercise 2 b
183
+#### 2b: Triángulos
135 184
 
136
-The triangle button should produce an **isosceles** triangles as shown in Figure 6. For a chosen size **n** the base will be  $2n + 1$. The height should be $n + 1$.
185
+El botón de triángulo produce un triángulo **isóceles** como se muestra en la Figura 7. Para un tamaño $n$ seleccionado, el tamaño de la base será $2n + 1$. La altura debe ser $n+1$.
137 186
 
138 187
 
139 188
 ![](images/triangles.png)
140 189
 
141 190
 
142
-**Figure 5** - Triangles of size 1 (green), 2 (red), 3 (blue), and 4 (yellow). In each case, the user clicked on the cell at the center of the base of the triangle.
191
+**Figura 7** - Triángulos de tamaño 1 (verde), 2 (rojo), 3 (azul), y 4 (amarillo). En cada caso, el usuario marcó la celda del centro de la base del triángulo. 
143 192
 
144
-## Exercise 2 c
193
+#### 2c: Círculos
145 194
 
146
-Congrats, you made it to the hardest part: circles! Here you need to use your math skills... hope you did well in that class. 
195
+¡Felicitaciones! ¡Llegaste hasta la parte más difícil: círculos! Aquí tendrás que utilizar tus destrezas matemáticas ... esperamos que te haya ido bien en tu clase de pre-cálculo ...
147 196
 
148 197
 
149 198
 ![](images/circles.png)
150 199
 
151
-**Figure 5** - Circles of size 1 (green), 2 (red), 3 (blue), and 4 (yellow). In each case, the user clicked on the cell at the center the circle.
200
+**Figura 8** - Círculos de tamaño 1 (verde), 2 (rojo), 3 (azul), y 4 (amarillo). En cada caso, el usuario marcó la celda del centro del círculo. 
152 201
 
153
-Here is a hint on how to produce the circles. You need to start by understanding what their equation ($r^2 = y^2 + x^2$) means. As an example, lets consider $r=1$. The equation for a circle with $r = 1$ means that any point $(x,y)$ such that $x^2 + y^2 = 1$ is a point in the *circumference* of the circle.  The equation for a *filled* circle is  $x^2 + y^2 <=r^2$. A filled circle of radius 1 has an equation $x^2 + y^2 <= 1$, which means that any point $(x,y)$ such that $x^2 + y^2 <= 1$ is a point in filled circle. 
202
+**Ayuda para producir los círculos:**
203
+
204
+Primero necesitas entender las expresiones asociadas a un círculo con ecuación: $x^2+y^2=r^2$. Por ejemplo, consideremos un círculo con radio $r=1$. La ecuación $x^2+y^2=1$ nos dice que todo punto $(x,y)$ que satisfaga la ecuación es un punto en la *circunferencia* del círculo. La expresión para un círculo *relleno* es: $x^2 + y^2 <=r^2$. Un círculo relleno, de radio $r=1$ tiene expresión  $x^2 + y^2 <= 1$, lo que dice que cualquier punto $(x,y)$ que satisfaga $x^2 + y^2 <= 1$ es un punto en el círculo relleno.
205
+
206
+¿Cómo producimos el círculo? Una manera sería generar todos los puntos **cercanos** al centro del círculo y determinar si éstos satisfacen la expresión $x^2 + y^2 <= r^2$. Por ejemplo, podemos tratar todos los puntos que están en el cuadrado de tamaño $2r+1$. Para un círculo de radio $r=2$ tendríamos que generar los siguientes puntos y probarlos en la expresión $x^2 + y^2 <=4$:
154 207
 
155
-How to produce a circle? One way would be to generate all points in the **proximity** of the center of the circle and determine if they comply with $x^2 + y^2 <= r^2$. For example, we could try every point that is in the square of size $2r+1$. For a circle of $r=2$ we would need to generate all the following points and test them against the $x^2 + y^2 <=4$ equation:
156 208
 
157 209
 ````
158 210
 (-2, 2) (-1, 2) ( 0, 2) ( 1, 2) ( 2, 2)
@@ -162,7 +214,8 @@ How to produce a circle? One way would be to generate all points in the **proxim
162 214
 (-2,-2) (-1,-2) ( 0,-2) ( 1,-2) ( 2,-2)
163 215
 ```` 
164 216
 
165
-In this case, only the shown points would comply to the equation.
217
+En este caso, solo los puntos que se muestran abajo satisfacen la expresión $x^2 + y^2 <=4$.
218
+
166 219
 
167 220
 ````
168 221
                 ( 0, 2) 
@@ -173,20 +226,21 @@ In this case, only the shown points would comply to the equation.
173 226
 ```` 
174 227
 
175 228
 
176
-## Exercise 3
177 229
 
178
-You will now implement the flood fill functionality. One of the most convenient ways to express the algorithm for flood fill is using recursion. A basic (but rather wastefull) recursive algorithm is given in Wikipedia: 
230
+### Ejercicio 3: Implementar la función para rellenar figuras utilizando recursión.
231
+
232
+En este ejercicio implementarás la funcionalidad para rellenar de color las figuras. Una de las maneras más convenientes para expresar el algoritmo para rellenar es utilizando recursión. Un algoritmo recursivo básico (pero bastante flojo) se encuentra en Wikipedia:
179 233
 
180 234
 
181 235
 ```
182
-Flood-fill (node, target-color, replacement-color):
183
- 1. If target-color is equal to replacement-color, return.
184
- 2. If the color of node is not equal to target-color, return.
185
- 3. Set the color of node to replacement-color.
186
- 4. Perform Flood-fill (one step to the west of node, target-color, replacement-color).
187
-    Perform Flood-fill (one step to the east of node, target-color, replacement-color).
188
-    Perform Flood-fill (one step to the north of node, target-color, replacement-color).
189
-    Perform Flood-fill (one step to the south of node, target-color, replacement-color).
236
+Relleno (celda, color-buscado, color-reemplazo):
237
+ 1. Si color-buscado es igual al color-reemplazo, return.
238
+ 2. Si el color de celda no es igual al  color-buscado, return.
239
+ 3. Ajusta el color de celda al color-reemplazo.
240
+ 4. Ejecuta Relleno (un lugar a la izquerda de celda, color-buscado, color-reemplazo).
241
+    Ejecuta Relleno (un lugar a la derecha de celda, color-buscado, color-reemplazo).
242
+    Ejecuta Relleno (un lugar arriba de celda, color-buscado, color-reemplazo).
243
+    Ejecuta Relleno (un lugar abajo de celda, color-buscado, color-reemplazo).
190 244
  5. Return.
191 245
 
192 246
 ```
@@ -194,23 +248,42 @@ Flood-fill (node, target-color, replacement-color):
194 248
 ![](images/floodFillAlgo.png)
195 249
 
196 250
 
197
-**Figure 6** - (a) The original drawing with white background and black pixels. (b) A pixel is chosen and the flood fill algorithm is run on that cell (1), (c) the cell is painted orange, then (d) invokes flood-fill on its west cell (2). (e) cell 2 is painted orange, then (f) invokes flood-fill on its west cell (3). This cell is not of the target color (it is black), the function returns. (g) flood fill is invoked on the cell to the east of cell 2, however that cell is already changed to the target color. (h) flood fill is invoked on the cell to the north of cell 2. (i) This cell is painted orange and (j) invokes flood cell on its west cell (4). This cell is not of target color, thus the function returns (k) cell (3) invokes flood fill on its east cell.
251
+
252
+**Figura 9** - (a) El dibujo original con trasfondo blanco y celdas negras. (b) Se selecciona una celda y se ejecuta el algoritmo de rellenar en esa celda (1), (c) La celda se pinta anaranjada, entonces (d) invoca `relleno` en la celda de la izquierda (2). (e) La celda 2 se pinta anaranjada, entonces  (f) invoca `relleno` en la celda de la izquierda  (3). Esta celda no es de color-buscado (es negra), la función regresa (returns). 
253
+(g) `relleno` se invoca en la celda de la derecha de la celda 2, pero esa celda ya está pintada del color-reemplazo. (h) `relleno` se invoca en la celda de arriba de la celda  2. (i) Esta celda se pinta anaranjada e (j) invoca `relleno` en la celda de la izquierda  (4). Esta celda no es de color-buscado, por lo tanto la función regresa (k), celda (3) invoca `relleno` en su celda derecha.
254
+
255
+Invoca la función relleno (`flood-fill`) y prueba su funcionamiento utilizando varias figuras. Asegúrate de probar figuras abiertas, como, por ejemplo, la siguiente:
198 256
 
199 257
 
200
-Implement the flood fill function and test filling out various shapes. Be sure to test open shapes, such as the following:
201 258
 
202 259
 ![](images/floodFillTest-small.png)
203 260
 
261
+---
262
+
263
+---
204 264
 
265
+## Entregas
205 266
 
206
-### Deliverables
267
+Utiliza "Entrega" en Moodle para entregar el archivo `tools.cpp` con las funciones que implementaste en esta experiencia de laboratorio. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
207 268
 
208
-In the following textboxes, copy the functions that you developed for the program. Remember to properly comment all functions and use good indentation and variable naming practices.
269
+---
209 270
 
210
-### References
271
+---
272
+
273
+##Referencias
211 274
 
212 275
 [1] Alyce Brady and Pamela Cutter, http://nifty.stanford.edu/2005/GridPlotter/
213 276
 
214 277
 [2] Sacha Schutz, http://www.labsquare.org
215 278
 
216
-[3] http://en.wikipedia.org/wiki/Flood_fill
279
+[3] http://en.wikipedia.org/wiki/Flood_fill
280
+
281
+---
282
+
283
+---
284
+---
285
+
286
+---
287
+
288
+----
289
+