UNIVERSIDAD DE LAS FUERZAS ARMADAS “ESPE” 

Departamento de Ciencias de la Computación

Ingeniería de Software

Asignatura: Computación Gráfica

Integrantes: Jeremy Cadena, Andy Pilozo

NRC: 8015

Docente:  Ing. Cesar Javier Villacis Silva

 Octubre 2022 - Marzo 2023

Caso de Estudio 1.3: Gema de 10 Lados y Polígonos Estrellados de 10

Puntas.

A) Descripción del Problema

Dado el lado de un decágono, dibujar la figura geométrica correspondiente a una gema

y los diferentes polígonos estrellados de 10 puntas, tal y como se muestra en la figura
1.3.1. Se debe considerar que las figuras geométricas se grafican con respecto al punto
O (0,0).

Ilustración 1.3.1. Gema de 10 lados y polígonos estrellados de 10 puntas.

B) Geometría de la Figura

Ilustración 1.3.2. Vértices y ángulos de Gema de 10 lados y polígonos estrellados de 10 puntas.

Por construcción se encierra a la figura geométrica dentro de un rectángulo, luego se
extienden algunos vértices hacia los lados del rectángulo formándose los segmentos ‘a’,
‘b’, ‘c’, ‘d’, que se calculan resolviendo dos triángulos rectángulos cuyos 5 ángulos
forman parte del decágono regular. Todos estos segmentos permiten obtener los valores
de los vértices del decágono regular que se utilizarán para graficar el polígono estrellado
de 10 puntas, para lo cual es necesario calcular sus pendientes y resolver varios sistemas
de ecuaciones con dos incógnitas.

Calculamos los valores de los segmentos ‘b’ y ‘c’ en el triángulo rectángulo AJW:

AJ=L; AW=b; JW=c

AW b
cos (36 °)= =
AJ L

(1)
b=cos (36 °)⋅ L

c=sin(36 °) ⋅ L (2)

Calculamos los valores de los segmentos ‘a’ y ‘d’ en el triángulo rectángulo IJX:

IJ =L ; JX =a ; IX=d

IX d
cos (18 °)= =
IJ L

d=cos ( 18 ° ) ⋅ L
(3)
 a=sin ⁡(18°)⋅ L (4)

Obtenemos así los siguientes puntos:

A(x A , y A )= A (a+b ; 0)

B ( x B , y B )=B ( a+ b+ L; 0 )

C ( x C , y C )=C ( a+2 b+ L; c )

D ( x D , y D )=D ( 2 a+2 b+ L ; c +d )

E ( x E , y E )=E ( a+2 b+ L; c+2 d )

F ( x F , y F ) =F ( a+ b+ L ; 2 c+2 d )

G ( x G , y G )=G ( a+b ; 2 c +2 d )

H ( x H , y H )=H ( a ; c +2 d )

I ( x I , y I )=I ( 0 ; c+ d )

J ( x J , y J )=J ( a; c )

( L
O ( xO , y O ) =O a+ b+ ; c +d
2 )
Con los puntos obtenidos se pueden graficar con líneas las siguientes figuras
geométricas: a) Un decágono regular grande ABCDEFGHIJ, de color negro (Black); b)
un polígono estrellado de 10 puntas ABCDEFGHIJ, de color azul oscuro (DarkBlue).

Aplicando el teorema mostrado en clases sabemos que para encontrar la intersección

entre dos rectas conociendo todos sus puntos extremos, donde las coordenadas ( x P , y P )
del punto P estará dada por la siguiente expresión:

P ( x P , y P ) =P
( y 3− y 1 +m1 ⋅ x 1−m2 ⋅ x 3
m1−m2 )
; y 1 +m1 ( x P−x 1 ) ;m1−m2 ≠0
Con este Teorema se pueden calcular los puntos de intersección entre las diferentes
rectas que conforman al decágono regular grande para calcular los puntos de la estrella
de 10 puntas, de esta manera:

Polígono estrellado interior de 10 puntas, de color azul oscuro (DarkBlue):

KMNVUTSRQP.

 Resolver el sistema de ecuaciones entre las rectas l AD y l BI , para obtener el punto

K.
 Resolver el sistema de ecuaciones entre las rectas l BE y l CJ , para obtener el punto
M.
 Resolver el sistema de ecuaciones entre las rectas l AD y l CF , para obtener el punto
N.
 Resolver el sistema de ecuaciones entre las rectas l BE y l DG , para obtener el punto
V.
 Resolver el sistema de ecuaciones entre las rectas l CF y l EH , para obtener el punto
U.
 Resolver el sistema de ecuaciones entre las rectas l DG y l FI , para obtener el punto
T.
 Resolver el sistema de ecuaciones entre las rectas l EH y l GJ , para obtener el punto
S.
 Resolver el sistema de ecuaciones entre las rectas l AH y l FI , para obtener el punto
R.
 Resolver el sistema de ecuaciones entre las rectas l BI y l GJ , para obtener el punto
Q.
 Resolver el sistema de ecuaciones entre las rectas l AH y l CJ , para obtener el punto
P.

Estrella interior de 10 puntas, de color azul oscuro (DarkBlue):

P1 P2 P3 P 4 P5 P6 P7 P8 P9 P 10.

 Resolver el sistema de ecuaciones entre las rectas l PV y l KS , para obtener el

punto P1.
 Resolver el sistema de ecuaciones entre las rectas l KU y l MR , para obtener el
punto P2.
 Resolver el sistema de ecuaciones entre las rectas l MT y l NQ , para obtener el
punto P3.
 Resolver el sistema de ecuaciones entre las rectas l PV y l NS , para obtener el punto
P4 .
 Resolver el sistema de ecuaciones entre las rectas l KU y l VR, para obtener el punto
P5.
 Resolver el sistema de ecuaciones entre las rectas l MT y l UQ, para obtener el
punto P6.
 Resolver el sistema de ecuaciones entre las rectas l PT y l NS , para obtener el punto
P7 .
 Resolver el sistema de ecuaciones entre las rectas l KS y l VR, para obtener el punto
P8 .
 Resolver el sistema de ecuaciones entre las rectas l UQ y l MR , para obtener el punto
P9 .
 Resolver el sistema de ecuaciones entre las rectas l PT y l NQ , para obtener el punto
P10.

C) Algoritmos

1.

1.1

1.2

1.3

1.3.1 Algoritmo de la Función ReadData()

1. Convertir el ángulo ‘1’ de grados a radianes, multiplicando el valor del

ángulo de 36 grados por PI radianes y por último dividir su resultado para 180
grados.
2. Convertir el ángulo ‘2’ de grados a radianes, multiplicando el valor del
ángulo de 18 grados por PI radianes y por último su resultado para 180
grados.
3. Calcular el valor del segmento 'a' del contorno del pentágono.
4. Calcular el valor del segmento 'b' del contorno del pentágono.
5. Calcular el valor del segmento 'c' del contorno del pentágono.
6. Calcular el valor del segmento 'd' del contorno del pentágono.
7. Calcular las coordenadas del vértice 'A'.
8. Calcular las coordenadas del vértice 'B'.
9. Calcular las coordenadas del vértice 'C'.
10. Calcular las coordenadas del vértice 'D'.
11. Calcular las coordenadas del vértice 'E'.
 12. Calcular las coordenadas del vértice 'F'.
13. Calcular las coordenadas del vértice 'G'.
14. Calcular las coordenadas del vértice 'H'.
15. Calcular las coordenadas del vértice 'I'.
16. Calcular las coordenadas del vértice 'J'.
17. Calcular las coordenadas del vértice 'O'.

1.3.2 Algoritmo de la Función CalculateIntersectionPoint()

1. Calcular el valor de la pendiente m1 .

2. Calcular el valor de la pendiente m 2 .
3. Si el valor de la resta entre las dos pendientes es diferente de cero, entonces:
3.1 Calcular el valor de ‘x’ del punto de intersección aplicando el Teorema 1.
3.2 Calcular el valor de ‘x’ del punto de intersección aplicando el Teorema 1.

1.3.3 Algoritmo de la Función CalculateVertexTenPointedRegularStar()

1. Resolver el sistema de ecuaciones entre las rectas l AD y l BI , para obtener el

punto K.
2. Resolver el sistema de ecuaciones entre las rectas l BE y l CJ , para obtener el
punto M.
3. Resolver el sistema de ecuaciones entre las rectas l AD y l CF , para obtener el
punto N.
4. Resolver el sistema de ecuaciones entre las rectas l BE y l DG , para obtener el
punto V.
5. Resolver el sistema de ecuaciones entre las rectas l CF y l EH , para obtener el
punto U.
6. Resolver el sistema de ecuaciones entre las rectas l DG y l FI , para obtener el
punto T.
7. Resolver el sistema de ecuaciones entre las rectas l EH y l GJ , para obtener el
punto S.
8. Resolver el sistema de ecuaciones entre las rectas l AH y l FI , para obtener el
punto R.
9. Resolver el sistema de ecuaciones entre las rectas l BI y l GJ , para obtener el
punto Q.
10. Resolver el sistema de ecuaciones entre las rectas l AH y l CJ , para obtener el
punto P.

1.3.4 Algoritmo de la Función CalculateVertexTenPointedInteriorStar()

 1. Resolver el sistema de ecuaciones entre las rectas l PV y l KS , para obtener el
punto P1.
2. Resolver el sistema de ecuaciones entre las rectas l KU y l MR , para obtener el
punto P2.
3. Resolver el sistema de ecuaciones entre las rectas l MT y l NQ , para obtener el
punto P3.
4. Resolver el sistema de ecuaciones entre las rectas l PV y l NS , para obtener el
punto P4 .
5. Resolver el sistema de ecuaciones entre las rectas l KU y l VR, para obtener el
punto P5.
6. Resolver el sistema de ecuaciones entre las rectas l MT y l UQ, para obtener el
punto P6.
7. Resolver el sistema de ecuaciones entre las rectas l PT y l NS , para obtener el
punto P7.
8. Resolver el sistema de ecuaciones entre las rectas l KS y l VR, para obtener el
punto P8.
9. Resolver el sistema de ecuaciones entre las rectas l UQ y l MR , para obtener el
punto P9.
10. Resolver el sistema de ecuaciones entre las rectas l PT y l NQ , para obtener el
punto P10.

D) Código de la Aplicación

1.3.1 Código de la clase CTenPointGemPoligon del programa.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Windows.Forms;

namespace WinAppTenPointGemPoligon
{
class CTenPointGemPoligon
{
// Datos Miembro (Atributos).

// Lado del decágono.

private float side;
// Segmentos del decágono.
private float a, b, c, d;
// Ángulos del decágono.
private float angle1, angle2;
// Objeto que activa el modo gráfico.
 private Graphics graph;
// Objeto bolígrafo para dibujar en un lienzo.
private Pen pen;
// Constante scale factor (Zoom In/Zoom Out).
private const float SF = 20;
// Objeto Punto que representa a los diez vértices del
// decágono grande.
private PointF A, B, C, D, E, F, G, H, I, J;
// Objeto Punto que representa a los vértices de la
estrella
// grande de cinco puntas.
private PointF K, M, N, P, Q, R, S, T, U, V, O;
private PointF P1, P2, P3, P4, P5, P6, P7, P8, P9, P10;

// Funciones Miembro - Métodos.

// Constructor sin parámetros.

public CTenPointGemPoligon()
{
side = 0.0f;
}

// Función que lee el lado del decágono.

// ObjTenPointGemPoligon.ReadData(txtSide);
// txtSideSide = txtSide;
public void ReadData(TextBox txtSide)
{
try
{
side = float.Parse(txtSide.Text);
}
catch
{
MessageBox.Show("Ingreso no válido...");
}
}

// Función que inicializa los datos y controles de la

figura.
// ObjTenPointGemPoligon.InitializeData(txtSide,
picCanvas);
// txtSide = txtSide; picCanvas = picCanvas;
public void InitializeData(TextBox txtSide,
PictureBox picCanvas)
{
txtSide.Text = ""; txtSide.Focus();
side = 0.0f; picCanvas.Refresh();
}

// Función que calcula los valores de los diez vértices

del decágono grande.
private void CalculateVertexDecagon()
{
angle1 = 36.0f * (float)Math.PI / 180.0f;
 angle2 = 18.0f * (float)Math.PI / 180.0f;

a = side * (float)Math.Sin(angle2);
b = side * (float)Math.Cos(angle1);
c = side * (float)Math.Sin(angle1);
d = side * (float)Math.Cos(angle2);

A.X = a + b; A.Y = 0;
B.X = a + b + side; B.Y = 0;
C.X = a + 2 * b + side; C.Y = c;
D.X = 2 * a + 2 * b + side; D.Y = c + d;
E.X = a + 2 * b + side; E.Y = c + 2 * d;
F.X = a + b + side; F.Y = 2 * c + 2 * d;
G.X = a + b; G.Y = 2 * c + 2 * d;
H.X = a; H.Y = c + 2 * d;
I.X = 0; I.Y = c + d;
J.X = a; J.Y = c;

O.X = a + b + (side / 2.0f); O.Y = c + d;

}

// Función que calcula el punto de intersección entre

dos rectas utilizando el Teorema 1.
private PointF CalculateIntersectionPoint(PointF P1,
PointF P2, PointF P3, PointF P4)
{
PointF P = new PointF();
float m1 = (P2.Y - P1.Y) / (P2.X - P1.X);
float m2 = (P4.Y - P3.Y) / (P4.X - P3.X);

if ((m1 - m2) != 0)
{
P.X = (P3.Y - P1.Y + m1 * P1.X - m2 * P3.X) /
(m1 - m2);
P.Y = P1.Y + m1 * (P.X - P1.X);
}
return (P);
}

// Función que calcula los valores de los diez vértices

de la estrella regular de diez puntas.
private void CalculateVertexTenPointedRegularStar()
{
K = CalculateIntersectionPoint(A, D, B, I);
M = CalculateIntersectionPoint(B, E, C, J);
N = CalculateIntersectionPoint(A, D, C, F);
V = CalculateIntersectionPoint(B, E, D, G);
U = CalculateIntersectionPoint(C, F, E, H);
T = CalculateIntersectionPoint(D, G, F, I);
S = CalculateIntersectionPoint(E, H, G, J);
R = CalculateIntersectionPoint(A, H, F, I);
Q = CalculateIntersectionPoint(B, I, G, J);
P = CalculateIntersectionPoint(A, H, C, J);
}
 // Función que calcula los valores de los diez vértices
de la estrella Interior de diez puntas.
private void CalculateVertexTenPointedInteriorStar()
{
P1 = CalculateIntersectionPoint(P, V, K, S);
P2 = CalculateIntersectionPoint(K, U, M, R);
P3 = CalculateIntersectionPoint(M, T, N, Q);
P4 = CalculateIntersectionPoint(P, V, N, S);
P5 = CalculateIntersectionPoint(K, U, V, R);
P6 = CalculateIntersectionPoint(M, T, U, Q);
P7 = CalculateIntersectionPoint(P, T, N, S);
P8 = CalculateIntersectionPoint(K, S, V, R);
P9 = CalculateIntersectionPoint(U, Q, M, R);
P10 = CalculateIntersectionPoint(P, T, N, Q);
}

// Función que grafica las estrellas poligonales de 10

puntas de color azul obscuro (DarkBlue), y
// un decagono regular grande de color negro (Black).
public void PlotFigures(PictureBox picCanvas)
{
graph = picCanvas.CreateGraphics();

CalculateVertexDecagon();
CalculateVertexTenPointedRegularStar();
CalculateVertexTenPointedInteriorStar();

A.X = A.X * SF; A.Y = A.Y * SF;

B.X = B.X * SF; B.Y = B.Y * SF;
C.X = C.X * SF; C.Y = C.Y * SF;
D.X = D.X * SF; D.Y = D.Y * SF;
E.X = E.X * SF; E.Y = E.Y * SF;
F.X = F.X * SF; F.Y = F.Y * SF;
G.X = G.X * SF; G.Y = G.Y * SF;
H.X = H.X * SF; H.Y = H.Y * SF;
I.X = I.X * SF; I.Y = I.Y * SF;
J.X = J.X * SF; J.Y = J.Y * SF;

K.X = K.X * SF; K.Y = K.Y * SF;

M.X = M.X * SF; M.Y = M.Y * SF;
N.X = N.X * SF; N.Y = N.Y * SF;
V.X = V.X * SF; V.Y = V.Y * SF;
U.X = U.X * SF; U.Y = U.Y * SF;
T.X = T.X * SF; T.Y = T.Y * SF;
S.X = S.X * SF; S.Y = S.Y * SF;
R.X = R.X * SF; R.Y = R.Y * SF;
Q.X = Q.X * SF; Q.Y = Q.Y * SF;
P.X = P.X * SF; P.Y = P.Y * SF;
O.X = O.X * SF; O.Y = O.Y * SF;

P1.X = P1.X * SF; P1.Y = P1.Y * SF;

P2.X = P2.X * SF; P2.Y = P2.Y * SF;
P3.X = P3.X * SF; P3.Y = P3.Y * SF;
P4.X = P4.X * SF; P4.Y = P4.Y * SF;
P5.X = P5.X * SF; P5.Y = P5.Y * SF;
P6.X = P6.X * SF; P6.Y = P6.Y * SF;
P7.X = P7.X * SF; P7.Y = P7.Y * SF;
P8.X = P8.X * SF; P8.Y = P8.Y * SF;
P9.X = P9.X * SF; P9.Y = P9.Y * SF;
P10.X = P10.X * SF; P10.Y = P10.Y * SF;

pen = new Pen(Color.DarkBlue);

// Se grafica la estrella Interior de 10 puntas

PointF[] polInsideStar1 = { O, P1, K, P2, O };
graph.DrawPolygon(pen, polInsideStar1);
PointF[] polInsideStar2 = { O, P2, M, P3, O };
graph.DrawPolygon(pen, polInsideStar2);
PointF[] polInsideStar3 = { O, P3, N, P4, O };
graph.DrawPolygon(pen, polInsideStar3);
PointF[] polInsideStar4 = { O, P4, V, P5, O };
graph.DrawPolygon(pen, polInsideStar4);
PointF[] polInsideStar5 = { O, P5, U, P6, O };
graph.DrawPolygon(pen, polInsideStar5);
PointF[] polInsideStar6 = { O, P6, T, P7, O };
graph.DrawPolygon(pen, polInsideStar6);
PointF[] polInsideStar7 = { O, P7, S, P8, O };
graph.DrawPolygon(pen, polInsideStar7);
PointF[] polInsideStar8 = { O, P8, R, P9, O };
graph.DrawPolygon(pen, polInsideStar8);
PointF[] polInsideStar9 = { O, P9, Q, P10, O };
graph.DrawPolygon(pen, polInsideStar9);
PointF[] polInsideStar10 = { O, P10, P, P1, O };
graph.DrawPolygon(pen, polInsideStar10);

// Se grafica la estrella exterior de 10 puntas

PointF[] polOuterStar1 = { K, A, B};
graph.DrawPolygon(pen, polOuterStar1);
PointF[] polOuterStar2 = { M, B, C };
graph.DrawPolygon(pen, polOuterStar2);
PointF[] polOuterStar3 = { N, C, D };
graph.DrawPolygon(pen, polOuterStar3);
PointF[] polOuterStar4 = { V, D, E };
graph.DrawPolygon(pen, polOuterStar4);
PointF[] polOuterStar5 = { U, E, F };
graph.DrawPolygon(pen, polOuterStar5);
PointF[] polOuterStar6 = { T, F, G };
graph.DrawPolygon(pen, polOuterStar6);
PointF[] polOuterStar7 = { S, G, H };
graph.DrawPolygon(pen, polOuterStar7);
PointF[] polOuterStar8 = { R, H, I };
graph.DrawPolygon(pen, polOuterStar8);
PointF[] polOuterStar9 = { Q, I, J };
graph.DrawPolygon(pen, polOuterStar9);
PointF[] polOuterStar10 = { P, J, A };
graph.DrawPolygon(pen, polOuterStar10);
 // Se grafica el decagono regular grande
pen = new Pen(Color.Black, 3);
PointF[] polExt1 = { A, B, C, D, E, F, G, H, I, J, A
};
graph.DrawPolygon(pen, polExt1);

// Función que cierra un formulario.

public void CloseForm(Form ObjForm)
{
ObjForm.Close();
}
}
}

1.3.2 Código de la clase frmTenPointGemPoligon del programa.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WinAppTenPointGemPoligon
{
public partial class frmTenPointGemPoligon : Form
{
// Definición de un objeto de tipo CTenPointGemPoligon.
CTenPointGemPoligon ObjTenPointedStarPolygon = new
CTenPointGemPoligon();

public frmTenPointGemPoligon()
{
InitializeComponent();
}

private void frmTenPointGemPoligon_Load(object sender,

EventArgs e)
{
// Inicialización de los datos y controles.
// Llamada a la función InitializeData.
ObjTenPointedStarPolygon.InitializeData(txtSide,
picCanvas);
}

private void btnCalculate_Click(object sender, EventArgs

e)
 {
// Lectura de datos.
// Llamada a la función ReadData.
ObjTenPointedStarPolygon.ReadData(txtSide);

ObjTenPointedStarPolygon.PlotFigures(picCanvas);
}

private void btnReset_Click(object sender, EventArgs e)

{
// Inicialización de los datos y controles.
// Llamada a la función InitializeData.
ObjTenPointedStarPolygon.InitializeData(txtSide,
picCanvas);
}

private void btnExit_Click(object sender, EventArgs e)

{
// Cierre de un formulario.
// Llamada a la función CloseForm.
ObjTenPointedStarPolygon.CloseForm(this);
}
}
}

E) Pruebas de la Aplicación

A continuación, se muestra un ejemplo de la corrida del programa:

Ilustración 1.3.3. Ejecución del Programa