Browse Source

README-en.md edited online with Bitbucket

Jose R Ortiz Ubarri 8 years ago
parent
commit
c8d3f558e3
1 changed files with 147 additions and 70 deletions
  1. 147
    70
      README-en.md

+ 147
- 70
README-en.md View File

1
+# Repetitions Structures - Grid Plotter
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 Verano 2016- Tatiana]
5
 
8
 
6
-Throughout this exercise the students will practice:
9
+Recursion is a technique that is used commonly in programming. With this technique, problems are solved by solving similar problems but for smaller cases. We can construct sets of objects or tasks using *recursive rules* and *initial values*. *Recursive functions* are functions that are self-invoking, using smaller sets or elements each time, until reaching a point where an initial value is used instead of self-invoking. In this laboratory experience, you will implement some tools to draw and practice the use of recursive functions to fill with color some figures.
7
 
10
 
8
-* For loops
9
-* Nested for loops
10
 
11
 
11
-## Concepts
12
+## Objectives:
12
 
13
 
14
+1. Define and implement recursive function.
15
+2. Practice the use of repetition structures.
13
 
16
 
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.
17
+This laboratory experience is an adaptation of the homework *GridPlotter* presented by Alyce Brady and Pamela Cutter in [1]. The implementation of the grid and the ability to paint in it was presented by Sacha Schutz in [2] but it was fixed, modified and adapted for this laboratory experience.  
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
+Before arriving at the laboratory you should have:
22
+
23
+1. Reviewed the concepts related to recursive functions.
24
+
25
+2. Studied the concepts and instructions for the laboratory session.
26
+
27
+3. Taken the Pre-Lab quiz that can be found in Moodle.
28
+
29
+
30
+
31
+---
32
+
33
+---
34
+
35
+
36
+## Drawing Applications
37
+
38
+
39
+Probably many Windows OS users (if not all of them) have used the program called *Paint*, that is a simple drawing application. In that program, like many other drawing programs, there are several tools (for example: the pencil, the paint bucket and the line) that lets the user draw on the area in different ways.
40
+
41
+In this laboratory experience, we will make the some tools (square, circle, triangle, some special lines) work ... don't worry!, we will do it in a very simple way.
42
+
43
+The drawing will be on a grid. The tools will be used by clicking any cell in the grid and, from that point, the necessary cells to make the figure will be painted. For example, if we choose the vertical line tool and we click the cell in position *(2,3)*, a vertical line will be drawn in all of the cells in column 2. That is, all of the cells in position $(2,y)$ will be marked for all of the $y$ in the grid. 
17
 
44
 
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
 
45
 
20
 ---
46
 ---
21
 
47
 
22
 ---
48
 ---
23
 
49
 
24
 
50
 
25
-## Things you should know or recall:
51
+## `Qt` Coordinates:
52
+
53
+* The coordinate system in `Qt` works a bit differently, as it is shown in Figure 1. The entries go from left to right, from 0 to the maximum width, and from top to bottom, from 0 to the maximum height.
54
+
55
+	![ejemplo.png](images/ejemplo.png)
56
+
57
+	**Figure 1.**  The image shows the direction in which the coordinates are ordered in `Qt`.
58
+
59
+
60
+* When we want to insert two-dimensional data (like the entries of a grid that has coordinates in $x$ y $y$) in a one-dimensional array we use a formula to convert every coordinate $(x,y)$ to an index $i$ of the array. For every point with coordinates $(x,y)$ in the grid, we evaluate $i=(number-of-columns)*y+x$, where `number-of-columns` represents the width of the two-dimensional array, and the result $i$ will be the index of the one-dimensional array that corresponds to the point with coordinates $(x,y)$ in the grid. For example, the index $i$ that corresponds to the point $(1,2)$ in the grid of width $5$ is $i=(5)*2+1=11$.
26
 
61
 
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
 
62
 
30
 ---
63
 ---
31
 
64
 
32
 ---
65
 ---
33
 
66
 
34
-## Libraries
35
 
67
 
36
-For this project you only need to use some of the functions of QtGlobal for the implementation of the circle:
68
+## Bibliotecas
37
 
69
 
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.
70
+Para este proyecto necesitarás utilizar las funciones de `QtGlobal` para la implementación del círculo:
41
 
71
 
42
-And use the funcion that paints on the grid:
43
 
72
 
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.)
73
+* `int qFloor(qreal v)` // Devuelve el "piso" del valor $v$.
74
+* `qreal qSqrt(qreal v)` // Devuelve la raíz cuadrada del valor $v$.
75
+* `qreal qPow(qreal x, qreal y)` // Devuelve el valor de $x$ elevado a la potencia $y$.
45
 
76
 
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]
77
+También necesitarás utilizar la función que pinta en la cuadrilla: 
47
 
78
 
79
+* `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.)
48
 
80
 
81
+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.
49
 
82
 
50
 ---
83
 ---
51
 
84
 
52
 ---
85
 ---
53
 
86
 
54
 
87
 
55
-!INCLUDE "../../eip-diagnostic/gridplot/en/diag-gridplot-01.html"
88
+!INCLUDE "../../eip-diagnostic/gridplot/es/diag-gridplot-01.html"
56
 <br>
89
 <br>
57
 
90
 
58
-!INCLUDE "../../eip-diagnostic/gridplot/en/diag-gridplot-02.html"
91
+!INCLUDE "../../eip-diagnostic/gridplot/es/diag-gridplot-02.html"
59
 <br>
92
 <br>
60
 
93
 
94
+
61
 ---
95
 ---
62
 
96
 
63
 ---
97
 ---
64
 
98
 
99
+## Sesión de laboratorio:
100
+
101
+### Ejercicio  1: Implementar las funciones para hacer funcionar los botones de dibujar líneas
65
 
102
 
66
-## Laboratory session:
103
+####Instrucciones
67
 
104
 
68
-### Exercise 1
105
+1. Carga a `QtCreator` el proyecto `GridPlotter`. Hay dos maneras de hacer esto:
69
 
106
 
70
-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. 
107
+		* Utilizando la máquina virtual: Haz doble “click” en el archivo `GridPlotter.pro` que se encuentra  en el directorio `/home/eip/labs/recursion-gridplotter` de la máquina virtual.
108
+		* Descargando la carpeta del proyecto de `Bitbucket`: Utiliza un terminal y escribe el commando `git clone http:/bitbucket.org/eip-uprrp/recursion-gridplotter` para descargar la carpeta `recursion-gridplotter` de `Bitbucket`. En esa carpeta, haz doble “click” en el archivo `GridPlotter.pro`.
71
 
109
 
72
-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.
110
+2. 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.
73
 
111
 
74
-#### row-major: 
112
+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.
113
+
114
+
115
+##### `RowMajorFill`
116
+
117
+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.
75
 
118
 
76
-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.
77
 
119
 
78
 
120
 
79
 | (a) | (b) | (c) |  
121
 | (a) | (b) | (c) |  
80
 |---|----|----|
122
 |---|----|----|
81
 | ![](images/rowMajor01-small.png) | ![](images/rowMajor02-small.png) | ![](images/rowMajor03-small.png)| 
123
 | ![](images/rowMajor01-small.png) | ![](images/rowMajor02-small.png) | ![](images/rowMajor03-small.png)| 
82
 
124
 
125
+**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. 
126
+
83
 
127
 
84
-**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.
128
+##### `ColMajorFill`
85
 
129
 
130
+Esta función debe trabajar de manera similar a la función `RowMajorFill` pero para columnas. La Figura 3 ilustra su comportamiento.
86
 
131
 
87
-#### columns-major
88
 
132
 
89
-This button should work similar to the *row-major* but for columns. Figure 2 illustrates this behavior.
90
 
133
 
91
 | (a) | (b) | (c) | 
134
 | (a) | (b) | (c) | 
92
 |---|----|----|
135
 |---|----|----|
93
-| ![](images/colMajor01-small.png) | ![](images/colMajor02-small.png) | ![](images/colMajor03-small.png)| 
136
+| ![](images/colMajor01-small.png) | ![](images/colMajor02-small.png) | ![](images/colMajor03-small.png)|  
94
 
137
 
95
-**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.
138
+**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. 
96
 
139
 
140
+ 
97
 
141
 
142
+##### `DiagonalLeft`
98
 
143
 
99
-#### left-diagonal
144
+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.
100
 
145
 
101
 
146
 
102
-This button should work similar to the *row-major* but produces a diagonal from upper left to lower right. Figure 3 illustrates this behavior.
103
-
104
 
147
 
105
 | (a) | (b) | (c) | 
148
 | (a) | (b) | (c) | 
106
 |---|----|----|
149
 |---|----|----|
107
-| ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagLeft02-small.png)|
150
+| ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagLeft02-small.png)| 
151
+
152
+**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. 
153
+
108
 
154
 
109
-**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.
110
 
155
 
156
+##### `DiagonalRight`
157
+
158
+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.
111
 
159
 
112
-#### right-diagonal
113
 
160
 
114
-This button should work similar to the *left-diagonal* but produces a diagonal from bottom left to top right. Figure 4 illustrates this behavior.
115
 
161
 
116
 | (a) | (b) | (c) | 
162
 | (a) | (b) | (c) | 
117
 |---|----|----|
163
 |---|----|----|
118
 | ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagRight02-small.png)| 
164
 | ![](images/diagLeft00-small.png) | ![](images/diagLeft01-small.png) | ![](images/diagRight02-small.png)| 
165
+ 
119
 
166
 
120
-**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.
167
+**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. 
121
 
168
 
122
-## Exercise 2 a
123
 
169
 
124
-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.
170
+### Ejercicio 2: Implementar las funciones para hacer funcionar los botones de dibujar cuadrados, triángulos y círculos.
125
 
171
 
126
-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$
127
 
172
 
173
+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.
128
 
174
 
129
-![](images/squares.png)
130
 
175
 
131
-**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.
176
+#### 2a: Cuadrados 
177
+
178
+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$.
179
+
132
 
180
 
133
 
181
 
182
+![](images/squares.png)
183
+
184
+**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. 
134
 
185
 
135
-## Exercise 2 b
136
 
186
 
137
-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$.
187
+#### 2b: Triángulos
188
+
189
+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$.
138
 
190
 
139
 
191
 
140
 ![](images/triangles.png)
192
 ![](images/triangles.png)
141
 
193
 
142
 
194
 
143
-**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.
195
+**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. 
144
 
196
 
145
-## Exercise 2 c
197
+#### 2c: Círculos
146
 
198
 
147
-Congrats, you made it to the hardest part: circles! Here you need to use your math skills... hope you did well in that class. 
199
+¡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 ...
148
 
200
 
149
 
201
 
150
 ![](images/circles.png)
202
 ![](images/circles.png)
151
 
203
 
152
-**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.
204
+**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. 
205
+
206
+**Ayuda para producir los círculos:**
153
 
207
 
154
-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. 
208
+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.
209
+
210
+¿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$:
155
 
211
 
156
-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:
157
 
212
 
158
 ````
213
 ````
159
 (-2, 2) (-1, 2) ( 0, 2) ( 1, 2) ( 2, 2)
214
 (-2, 2) (-1, 2) ( 0, 2) ( 1, 2) ( 2, 2)
163
 (-2,-2) (-1,-2) ( 0,-2) ( 1,-2) ( 2,-2)
218
 (-2,-2) (-1,-2) ( 0,-2) ( 1,-2) ( 2,-2)
164
 ```` 
219
 ```` 
165
 
220
 
166
-In this case, only the shown points would comply to the equation.
221
+En este caso, solo los puntos que se muestran abajo satisfacen la expresión $x^2 + y^2 <=4$.
222
+
167
 
223
 
168
 ````
224
 ````
169
                 ( 0, 2) 
225
                 ( 0, 2) 
174
 ```` 
230
 ```` 
175
 
231
 
176
 
232
 
177
-## Exercise 3
178
 
233
 
179
-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: 
234
+### Ejercicio 3: Implementar la función para rellenar figuras utilizando recursión.
235
+
236
+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:
180
 
237
 
181
 
238
 
182
 ```
239
 ```
183
-Flood-fill (node, target-color, replacement-color):
184
- 1. If target-color is equal to replacement-color, return.
185
- 2. If the color of node is not equal to target-color, return.
186
- 3. Set the color of node to replacement-color.
187
- 4. Perform Flood-fill (one step to the west of node, target-color, replacement-color).
188
-    Perform Flood-fill (one step to the east of node, target-color, replacement-color).
189
-    Perform Flood-fill (one step to the north of node, target-color, replacement-color).
190
-    Perform Flood-fill (one step to the south of node, target-color, replacement-color).
240
+Relleno (celda, color-buscado, color-reemplazo):
241
+ 1. Si color-buscado es igual al color-reemplazo, return.
242
+ 2. Si el color de celda no es igual al  color-buscado, return.
243
+ 3. Ajusta el color de celda al color-reemplazo.
244
+ 4. Ejecuta Relleno (un lugar a la izquerda de celda, color-buscado, color-reemplazo).
245
+    Ejecuta Relleno (un lugar a la derecha de celda, color-buscado, color-reemplazo).
246
+    Ejecuta Relleno (un lugar arriba de celda, color-buscado, color-reemplazo).
247
+    Ejecuta Relleno (un lugar abajo de celda, color-buscado, color-reemplazo).
191
  5. Return.
248
  5. Return.
192
 
249
 
193
 ```
250
 ```
195
 ![](images/floodFillAlgo.png)
252
 ![](images/floodFillAlgo.png)
196
 
253
 
197
 
254
 
198
-**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.
255
+
256
+**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). 
257
+(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.
258
+
259
+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:
199
 
260
 
200
 
261
 
201
-Implement the flood fill function and test filling out various shapes. Be sure to test open shapes, such as the following:
202
 
262
 
203
 ![](images/floodFillTest-small.png)
263
 ![](images/floodFillTest-small.png)
204
 
264
 
265
+---
205
 
266
 
267
+---
206
 
268
 
207
-### Deliverables
269
+## Entregas
208
 
270
 
209
-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.
271
+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.
210
 
272
 
211
-### References
273
+---
274
+
275
+---
276
+
277
+##Referencias
212
 
278
 
213
 [1] Alyce Brady and Pamela Cutter, http://nifty.stanford.edu/2005/GridPlotter/
279
 [1] Alyce Brady and Pamela Cutter, http://nifty.stanford.edu/2005/GridPlotter/
214
 
280
 
215
 [2] Sacha Schutz, http://www.labsquare.org
281
 [2] Sacha Schutz, http://www.labsquare.org
216
 
282
 
217
 [3] http://en.wikipedia.org/wiki/Flood_fill
283
 [3] http://en.wikipedia.org/wiki/Flood_fill
284
+
285
+---
286
+
287
+---
288
+---
289
+
290
+---
291
+
292
+----
293
+
294
+