Ejemplos de ejercicios (2). Brython. SVG. Python. Bartolomé Sintes Marco. www.mclibre.org

Gráficos SVG Brython (2) - 1 - Una fórmula, una forma

Queremos completar la página web que se muestra a continuación a la izquierda de manera que se muestre el dibujo que se muestra a la derecha:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG Brython (2) 0 1. Ejercicios. Python</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="320" height="320" viewBox="-10 -10 320 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Como queremos dibujar once líneas, el programa incluirá un bucle que se ejecutará once veces, dibujando una línea en cada iteración:
```
for i in range(11):
    # instrucción que dibuja una línea
```
Si el viewbox de la imagen anterior es "-10 -10 320 320", los ejes de coordenadas y las coordenadas correspondientes serían los que se muestran en la imagen siguiente:
A continuación hay que elegir en qué orden queremos dibujar las líneas. En este caso vamos a dibujarlas de izquierda a derecha, como muestra la imagen siguiente:

Las líneas se han numerado de 0 a 10 en vez de 1 a 11 porque la variable i del bucle for toma valores de 0 a 10.
Para dibujar una línea debemos indicar las coordenadas de los puntos situados en los extremos de las líneas, como muestra la imagen siguiente, que también indica el orden en que se van a indicar los puntos (el mismo que el orden de las líneas).

Como queremos dibujar las líneas mediante un bucle, debemos expresar las coordenadas de los extremos como fórmulas que dependan de la variable del bucle (en este caso i):

En el caso de los extremos superiores de las líneas, las coordenadas de los puntos y su fórmulas correspondientes son:

i:     0    1    2    3    4    5    6    7    8    9   10     Fórmula
X:     0   30   60   90  120  150  180  210  240  270  300 --> 30*i
Y:     0    0    0    0    0    0    0    0    0    0    0 --> 0

En el caso de los extremos inferiores de las líneas, las coordenadas de los puntos y su fórmulas correspondientes son:

i:     0    1    2    3    4    5    6    7    8    9   10     Fórmula
X:     0   30   60   90  120  150  180  210  240  270  300 --> 30*i
Y:   300  300  300  300  300  300  300  300  300  300  300 --> 300

Por tanto el programa sería el siguiente:

from browser import document
import browser.svg as svg

for i in range(11):
    document["imagen"] <= svg.line(x1=30*i, y1=0, x2=30*i, y2=300, stroke="black", stroke_width=1)

Enlace al programa completo

Gráficos SVG Brython (2) - 2 - Varias fórmulas, una forma

Queremos completar la página web que se muestra a continuación a la izquierda de manera que se muestre el dibujo que se muestra a la derecha:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 0 2. Ejercicios SVG (3). Brython. Python</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="320" height="320" viewBox="-160 -160 320 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Como queremos dibujar seis líneas, el programa incluirá un bucle que se ejecutará seis veces, dibujando una línea en cada iteración:
```
for i in range(6):
    # instrucción que dibuja una línea
```
Si el viewbox de la imagen anterior es "-150 -150 320 320", los ejes de coordenadas y las coordenadas correspondientes serían los que se muestran en la imagen siguiente:
A continuación hay que elegir en qué orden queremos dibujar las líneas. En este caso vamos a dibujarlas de izquierda a derecha, como muestra la imagen siguiente:

Las líneas se han numerado de 0 a 5 en vez de 1 a 6 porque la variable i del bucle for toma valores de 0 a 5.
Para dibujar una línea debemos indicar las coordenadas de los puntos situados en los extremos de las líneas, como muestra la imagen siguiente, que también indica el orden en que se van a indicar los puntos (el mismo que el orden de las líneas).
Como queremos dibujar las líneas mediante un bucle, debemos expresar las coordenadas de los extremos como fórmulas que dependan de la variable del bucle (en este caso i):
- En el caso de los extremos de las líneas situados a la izquierda, las coordenadas de los puntos y su fórmulas correspondientes son:
```
i:     0     1     2     3     4     5     Fórmula
X:  -150  -150  -150  -150  -150  -150 --> -150
Y:  -150   -90   -30    30    90   150 --> -150+60*i
```
- En el caso de los extremos de las líneas situados a la derecha, las coordenadas de los puntos y su fórmulas correspondientes son:
```
i:     0     1     2     3     4     5     Fórmula
X:   150   150   150   150   150   150 -->  150
Y:   150    90    30   -30   -90  -150 -->  150-60*i
```

Por tanto el programa sería el siguiente:

from browser import document
import browser.svg as svg

for i in range(11):
    document["imagen"] <= svg.line(x1=-150, y1=-150+60*i, x2=150, y2=150-60*i, stroke="black", stroke_width=1)

Enlace al programa completo

Gráficos SVG Brython (2) - 3 - Varias fórmulas, una forma

Queremos completar la página web que se muestra a continuación a la izquierda de manera que se muestre el dibujo que se muestra a la derecha:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 0 3. Ejercicios SVG (3). Brython. Python</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="320" height="320" viewBox="-20 -20 640 640"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Este dibujo se puede interpretar como tres rectángulos, así que el programa incluirá un bucle que se ejecutará tres veces, dibujando un rectángulo en cada iteración:
```
for i in range(3):
    # instrucción que dibuja un rectángulo
```
Si el viewbox de la imagen anterior es "-20 -20 640 640", los ejes de coordenadas y las coordenadas correspondientes serían los que se muestran en la imagen siguiente:
A continuación hay que elegir en qué orden queremos dibujar los rectángulos. En este caso vamos a dibujarlos de izquierda a derecha, como muestra la imagen siguiente:

Los rectángulos se han numerado de 0 a 2 en vez de 1 a 3 porque la variable i del bucle for toma valores de 0 a 2.
Para dibujar un rectángulo debemos indicar las coordenadas del vértice superior izquierda y el ancho y el alto del rectángulo, como muestra la imagen siguiente, que también indica el orden en que se van a indicar los puntos y distancias (el mismo que el orden de los rectángulos).
Como queremos dibujar los rectángulos mediante un bucle, debemos expresar las coordenadas de los vértices, el ancho y el alto como fórmulas que dependan de la variable del bucle (en este caso i):
```
i:        0     1     2      Fórmula
X:       50   150   250 -->  50 + 100*i
Y:       50    50    50 -->  50
Ancho:  500   300   100 -->  500 - 200*i
Alto:   150   300   450 -->  150 + 150*i
```

Por tanto el programa sería el siguiente:

from browser import document
import browser.svg as svg

for i in range(3):
    document["imagen"] <= svg.rect(x=50+100*i, y=50, width=500-200*i, height=150+150*i, stroke="black", stroke_width=2, fill="none")

Enlace al programa completo

Gráficos SVG Brython (2) - 4 - Varias fórmulas, varias formas

Queremos completar la página web que se muestra a continuación a la izquierda de manera que se muestre el dibujo que se muestra a la derecha:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 0 4. Ejercicios SVG (3). Brython. Python</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="320" height="320" viewBox="-160 -160 320 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Este dibujo no se puede dibujar con un sólo bucle y una sola forma ya que los extremos de las líneas no se encuentran distribuidos uniformemente a lo largo de una recta. Para hacer este dibujo se podrían utilizar dos bucles consecutivos, dibujando primero en un bucle las líneas desde la línea más larga hacia abajo a la izquierda y después en otro bucle las líneas desde la línea más larga hacia arriba a la izquierda. Pero también se puede dibujar en un único bucle, dibujando en cada iteración dos líneas, desde el centro hacia los lados (la línea central se dibujaría dos veces en la primera iteración del bucle). El programa incluirá un bucle que se ejecutará cinco veces, dibujando dos líneas en cada iteración:
```
for i in range(5):
    # instrucción que dibuja una línea
    # instrucción que dibuja otra línea
```
Si el viewbox de la imagen anterior es "-150 -150 320 320", los ejes de coordenadas y las coordenadas correspondientes serían los que se muestran en la imagen siguiente:
A continuación hay que elegir en qué orden queremos dibujar las líneas. En este caso vamos a dibujarlas desde el centro hacia los extremos, como muestra la imagen siguiente:

Las líneas se han numerado de 0 a 5 en vez de 1 a 6 porque la variable i del bucle for toma valores de 0 a 5.
Para dibujar una línea debemos indicar las coordenadas de los puntos situados en los extremos de las líneas, como muestra la imagen siguiente, que también indica el orden en que se van a indicar los puntos (el mismo que el orden de las líneas).
Como queremos dibujar las líneas mediante un bucle, debemos expresar las coordenadas de los extremos como fórmulas que dependan de la variable del bucle (en este caso i):
- La primera instrucción que dibuje líneas dibujará las líneas situadas a la izquierda
  - En el caso de los extremos de las líneas situados a la izquierda, las coordenadas de los puntos y su fórmulas correspondientes son:
```
i:     0     1     2     3     4      Fórmula
X:  -150  -150  -150  -150  -150  --> -150
Y:  -150   -90   -30    30    90  --> -150+60*i
```
  - En el caso de los extremos de las líneas situados abajo, las coordenadas de los puntos y su fórmulas correspondientes son:
```
i:     0     1     2     3     4       Fórmula
X:   150    90    30   -30   -60  -->  150-60*i
Y:   150   150   150   150   150  -->  150
```
- La segunda instrucción que dibuje líneas dibujará las líneas situadas a la derecha
  - En el caso de los extremos de las líneas situados arriba, las coordenadas de los puntos y su fórmulas correspondientes son:
```
i:     0     1     2     3     4      Fórmula
X:  -150   -90   -30    30    90  --> -150+60*i
Y:  -150  -150  -150  -150  -150  --> -150
```
  - En el caso de los extremos de las líneas situados a la derecha, las coordenadas de los puntos y su fórmulas correspondientes son:
```
i:     0     1     2     3     4       Fórmula
X:   150   150   150   150   150  -->  150
Y:   150    90    30   -30   -60  -->  150-60*i
```

Por tanto el programa sería el siguiente:

from browser import document
import browser.svg as svg

for i in range(5):
    document["imagen"] <= svg.line(x1=-150, y1=-150+60*i, x2=150-60*i, y2=150, stroke="black", stroke_width=1)
    document["imagen"] <= svg.line(x1=-150+60*i, y1=-150, x2=150, y2=150-60*i, stroke="black", stroke_width=1)

Enlace al programa completo

Gráficos SVG - Brython - Ejemplos de ejercicios resueltos (2)

Gráficos SVG Brython (2) - 1 - Una fórmula, una forma

Gráficos SVG Brython (2) - 2 - Varias fórmulas, una forma

Gráficos SVG Brython (2) - 3 - Varias fórmulas, una forma

Gráficos SVG Brython (2) - 4 - Varias fórmulas, varias formas