En estos ejercicios se necesitan escribir fórmulas que proporcionen las coordenadas de los elementos del dibujo. Para ello el alumno debe ser capaz de deducir la fórmula, tarea que es más fácil de lo que parece porque los valores forman sucesiones aritméticas. En la lección Sucesiones aritméticas de los apuntes sobre Temas de Informática se explica cómo deducir las fórmulas a partir de un par de valores y en la lección Ejercicio de sucesiones aritméticas se puede practicar esta tarea hasta dominarla.
for (2) 01 - Círculos en fila (1)
Escriba un programa que dibuje entre 1 y 10 círculos (al azar) de 30px de radio.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de círculos cambia al actualizar la página):
El título puede estar en singular o plural ("círculo" o "círculos").
Atributo cx de la etiqueta circle
Los valores de la posición horizontal de cada círculo (atributo cx de la etiqueta circle) son los siguientes (contando los círculos desde 0):
Círculo
0
1
2
3
4
...
`\$\i`
cx
30
120
210
300
390
...
`\$\c\x`
for (2) 02 - Círculos en fila (2)
Escriba un programa que dibuje entre 1 y 10 círculos (al azar) de 30px de radio.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de círculos cambia al actualizar la página):
Los valores del ancho de la imagen (atributo width de la etiqueta svg) sólo dependen del número total de círculos de la figura y son los siguientes:
Círculos
1
2
3
4
5
...
`\$\c\i\r\c\u\l\o\s`
width
60
150
240
330
420
...
`$width`
Atributo cx de la etiqueta circle
Los valores de la posición horizontal de cada círculo (atributo cx de la etiqueta circle) son como los del ejercicio anterior.
for (2) 03 - Círculos en fila (3)
Escriba un programa que dibuje entre 1 y 10 círculos (al azar) de radio entre 10 y 50 píxeles (al azar).
La dificultad de este ejercicio reside en que en las fórmulas aparecen dos variables. Aunque no se puede hablar estrictamente de sucesiones aritméticas, las fórmulas se pueden deducir del ejercicio anterior o razonar a partir del propio dibujo.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número y tamaño de los círculos cambia al actualizar la página):
En las fórmulas de este ejercicio interviene también el radio de los círculos, como podemos ver en este dibujo:
Atributo height de la etiqueta svg
La altura de la imagen (atributo height de la etiqueta svg) depende únicamente del radio de los círculos.
Atributo width de la etiqueta svg
El ancho de la imagen (atributo width de la etiqueta svg) depende tanto del número de círculos como de su radio y son los siguientes:
Círculos
1
2
3
4
5
...
`\$\c\i\r\c\u\l\o\s`
width
`2 * $radio`
`5 * $radio`
`8 * $radio`
`11 * $radio`
`14 * $radio`
...
`$width`
Atributo cx de la etiqueta circle
La posición horizontal de cada círculo (atributo cx de la etiqueta circle) depende tanto del número de círculo como de su radio y son los siguientes (contando los círculos desde 0):
Círculo
0
1
2
3
4
...
`\$\i`
cx
`1 * $radio`
`4 * $radio`
`7 * $radio`
`10 * $radio`
`13 * $radio`
...
`\$\c\x`
for (2) 04 - Líneas (1)
Escriba un programa que dibuje entre 3 y 10 líneas (al azar) con un punto común.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de líneas cambia al actualizar la página):
Los valores de la posición horizontal del extremo inferior de cada línea (atributo x2 de la etiqueta line) son los siguientes (contando las líneas desde 0):
Línea
0
1
2
3
4
...
`\$\i`
x2
10
60
110
160
210
...
`\$\x\2`
for (2) 05 - Líneas (2)
Escriba un programa que dibuje entre 3 y 10 líneas (al azar) con un punto común.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de líneas cambia al actualizar la página):
Los valores del ancho de la imagen (atributos width y viewBox de la etiqueta svg) sólo dependen del número total de líneas de la figura y son los siguientes:
Líneas
3
4
5
6
7
...
`$l\i\n\eas`
width
150
200
250
300
350
...
`$width`
Atributo x2 de la etiqueta line
Los valores de la posición horizontal del extremo inferior de cada línea (atributo x2 de la etiqueta line) son los siguientes (contando las líneas desde 0):
Línea
0
1
2
3
4
...
`\$\i`
x2
0
50
100
150
200
...
`\$\x\2`
for (2) 06 - Líneas (3)
Escriba un programa que dibuje entre 3 y 10 líneas (al azar) con un punto común.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de líneas cambia al actualizar la página):
Atributos width y viewBox (3º valor) de la etiqueta svg
Los valores del ancho de la imagen (atributos width y viewBox de la etiqueta svg) sólo dependen del número total de líneas de la figura y son los siguientes:
Líneas
3
4
5
6
7
...
`$l\i\n\eas`
width
125
175
225
275
325
...
`$width`
Atributo x1 de la etiqueta line
Los valores de la posición horizontal del extremo superior de cada línea (atributo x1 de la etiqueta line) sólo dependen del número total de líneas de la figura y son los siguientes:
Líneas
3
4
5
6
7
...
`$l\i\n\eas`
x1
50
75
100
125
150
...
`\$\x\1`
Atributo x2 de la etiqueta line
Los valores de la posición horizontal del extremo inferior de cada línea (atributo x2 de la etiqueta line) son como los del ejercicio anterior.
for (2) 07 - Arco iris circular
Escriba un programa que cada vez que se ejecute dibuje un número de círculos concéntricos, elegido al azar entre 3 y 10, que vayan recorriendo los colores del arco iris.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de círculos cambia al actualizar la página):
Atributos width, height y viewBox (3º y 4º valor) de la etiqueta svg
Los valores del tamaño de la imagen (atributos width, height y viewBox (3º y 4º valor) de la etiqueta svg) dependen del número de círculos del dibujo y son los siguientes:
Círculos
3
4
5
6
7
...
`$c\í\r\c\u\l\o\s`
width
180
240
300
360
420
...
`$width`
Atributo viewBox (1º y 2º valor) de la etiqueta svg
Los valores del origen de la zona visible del dibujo (1º y 2º valor del atributo viewBox de la etiqueta svg) dependen del número de círculos del dibujo y son los siguientes:
Círculos
3
4
5
6
7
...
`$c\í\r\c\u\l\o\s`
viewBox
-90
-120
-150
-180
-210
...
`$\o\r\i\g\e\n`
Atributo r de la etiqueta circle
Los valores del radio de los círculos (atributo r de la etiqueta circle) son los siguientes. Como son valores decrecientes, para expresar la fórmula podemos tener en cuenta que el valor inicial del radio depende del número de círculos y ese valor se va reduciendo en los círculos siguientes. Por ejemplo, en el caso de seis círculos:
Círculo
0
1
2
3
4
5
`$i`
r
180
150
120
90
60
30
`$r`
r
180 - 0
180 - 30
180 - 60
180 - 90
180 - 120
180 - 150
`$r`
Atributo fill (1º valor) de la etiqueta circle
El incremento del matiz de color de los círculos (incrementos del primer valor del atributo fill de la etiqueta circle) depende del número de círculos del dibujo, como ilustran los siguientes círculos cromáticos:
Los valores de los incrementos de los colores de los círculos son los siguientes (NO se trata de una sucesión aritmética):
Círculos
3
4
5
6
...
`$c\í\r\c\u\l\o\s`
paso
120
90
72
60
...
`$paso`
Los valores de los colores de cada círculo (atributo fill de la etiqueta circle) son los siguientes:
Círculo
0
1
2
3
4
...
`$i`
fill
0
$paso
2 * $paso
3 * $paso
4 * $paso
...
`$fill`
for (2) 08 - Arco iris semicircular
Escriba un programa que cada vez que se ejecute dibuje un número de semicírculos, elegido al azar entre 3 y 10, que vayan recorriendo los colores del arco iris.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de semicírculos cambia al actualizar la página):
<h2>4 franjas</h2>
<p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="260" height="140" viewBox="-130-130260140" style="border: black 1px solid; background-color: white;">
<path d="M -120,0 L 120,0 A 120120 0 0 0 -120,0 z" fill="hwb(0 10% 10%)" />
<path d="M -90,0 L 90,0 A 9090 0 0 0 -90,0 z" fill="hwb(90 10% 10%)" />
<path d="M -60,0 L 60,0 A 6060 0 0 0 -60,0 z" fill="hwb(180 10% 10%)" />
<path d="M -30,0 L 30,0 A 3030 0 0 0 -30,0 z" fill="hwb(270 10% 10%)" />
</svg>
</p>
Atributos width y viewBox (3º valor) de la etiqueta svg
Los valores del ancho de la imagen (atributos width y tercer valor de la etiqueta viewBox) dependen del número de semicírculos del dibujo y son los siguientes:
Semicírculos
3
4
5
6
7
...
`$\s\e\m\i\c\í\r\c`
width
200
260
320
380
440
...
`$\o\r\i\g\e\n`
Atributos height y viewBox (4º valor) de la etiqueta svg
Los valores de la altura de la imagen (atributos height y cuarto valor de la etiqueta viewBox ) dependen del número de semicírculos del dibujo y son los siguientes:
Semicírculos
3
4
5
6
7
...
`$\s\e\m\i\c\í\r\c`
height
110
140
170
200
230
...
`$height`
Atributo viewBox (1º y 2º valor) de la etiqueta svg
Los valores del origen de la zona visible del dibujo (1º y 2º valor del atributo viewBox de la etiqueta svg) dependen del número de semicírculos del dibujo y son los siguientes:
Semicírculos
3
4
5
6
7
...
`$\s\e\m\i\c\í\r\c`
viewBox
-100
-130
-160
-190
-220
...
`$\v\i\e\w\B\o\x`
Atributo d de la etiqueta path
Los valores que definen los semicírculos (atributo d de la etiqueta path) son como los del atributo r de la etiqueta circle del ejercicio anterior (dos de ellos con valor negativo).
Atributo fill (1º valor) de la etiqueta path
Los valores de los colores de los semicírculos (atributo fill de la etiqueta path) son como los del ejercicio anterior.
for (2) 09 - Arco iris
Escriba un programa que cada vez que se ejecute dibuje un número de semicírculos, elegido al azar entre 3 y 10, que vayan recorriendo los colores del arco iris.
Ayuda
En el código fuente del programa de ejemplo podemos identificar los valores que necesitan ser calculados (el número de semicírculos cambia al actualizar la página):
<h2>4 franjas</h2>
<p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
width="260" height="140" viewBox="-130-130260140" style="border: black 1px solid; background-color: white;">
<path d="M -120,0 L 120,0 A 120120 0 0 0 -120,0 z" fill="hwb(0 10% 10%)" />
<path d="M -105,0 L 105,0 A 105105 0 0 0 -105,0 z" fill="hwb(90 10% 10%)" />
<path d="M -90,0 L 90,0 A 9090 0 0 0 -90,0 z" fill="hwb(180 10% 10%)" />
<path d="M -75,0 L 75,0 A 7575 0 0 0 -75,0 z" fill="hwb(270 10% 10%)" />
<path d="M -60,0 L 60,0 A 6060 0 0 0 -60,0 z" fill="white" stroke="white" />
</svg>
</p>
Atributos width y viewBox (3º valor) de la etiqueta svg
Los valores del ancho de la imagen (atributos width y viewBox (3º valor) de la etiqueta svg) son como los del ejercicio anterior.
Atributos height y viewBox (4º valor) de la etiqueta svg
Los valores de la altura de la imagen (atributos height y viewBox (4º valor) de la etiqueta svg) son como los del ejercicio anterior.
Atributo viewBox (1º y 2º valor) de la etiqueta svg
Los valores del origen de la zona visible del dibujo (1º y 2º valor del atributo viewBox de la etiqueta svg) son como los del ejercicio anterior.
Atributo d de la etiqueta path
Los valores que definen los semicírculos (atributo d de la etiqueta path) son los siguientes. Como son valores decrecientes, para expresar la fórmula podemos tener en cuenta que el valor inicial depende del número de semicírculos y ese valor se va reduciendo en los semicírculos siguientes. Por ejemplo, en el caso de cinco semicírculos:
Semicírculo
0
1
2
3
4
`$i`
d
150
135
120
105
90
`$d`
d
150 - 0
150 - 15
150 - 30
150 - 45
150 - 60
`$d`
El último semircírculo es distinto al resto, pues es de color blanco. Los valores que lo definen (atributo d de la etiqueta path) dependen únicamente del número de semicírculos del dibujo. Los valores son los siguientes.
Semicírculos
3
4
5
6
...
`$i`
d
45
60
75
90
...
`$d`
Atributo fill (1º valor) de la etiqueta path
Los valores de los colores de los semicírculos (atributo fill de la etiqueta path) son como los de los dos ejercicios anteriores.
En estos ejercicios se necesitan escribir fórmulas que proporcionen las coordenadas de los elementos del dibujo. Para ello el alumno debe ser capaz de deducir la fórmula, tarea que es más fácil de lo que parece porque los valores forman sucesiones aritméticas. En la lección Sucesiones aritméticas de los apuntes sobre Temas de Informática se explica cómo deducir las fórmulas a partir de un par de valores y en la lección Ejercicio de sucesiones aritméticas se puede practicar esta tarea hasta dominarla.