Documentos de Académico
Documentos de Profesional
Documentos de Cultura
NOMBRES (ALUMNOS)
1. INTRODUCCIÓN
2. OBJETIVO (COMPETENCIA)
1. Realizar un programa que se base en los aspectos principales de un SFML aplicando los
métodos aprendidos en clases.
2. Desarrollar e implementar las funcionalidades de un entorno gráfico simple para la
creación de un lienzo digital.
3. Comprender la diferencia entre OpenGl y C# para tener una visión amplia del desarrollo
de entornos gráficos
3. FUNDAMENTO
● Manejo de funciones básicas de una biblioteca gráfica como puntos, vectores, colores en
C#
● Funciones primitivas de OpenGL.
● Conceptos básicos sobre el SFML.
● Aspectos básicos sobre programación orientada a objetos.
● Conceptos sobre posición, traslación y coordenadas en los ejes.
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
Para Desarrollar la aplicación se debe tener en cuenta las enseñanzas por parte del docente y
exposiciones de los compañeros en el caso de C#.
glutPostRedisplay
glutAddMenuEntry
glutAddSubMenu
Son métodos para la manipulación de menús que ofrece freeglut, con los cuales se
desarrolló el menú de herramientas del Paint.
5. RESULTADOS Y CONCLUSIONES
6. CUESTIONARIO
b. GL_LINE_STIPPLE
c. GL_LOOP.
d. GL_LINES
10. ¿Qué comando sirve para cambiar el tamaño de la ventana de trabajo en OpenGL?
6. Referencias
Análisis e implementación
Pantalla principal
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
Guardar Imagen
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
Código fuente:
frmPaint.cs
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;
using System.Drawing.Imaging;
using System.Reflection;
namespace Painter
{
public partial class frmPaint : Form
{
private int typeGraph;
private int cont=0;
private bool MouseIsDown;
//Objetos
private clsLine objLine = new clsLine();
private clsRectangle objRectangle = new clsRectangle();
private clsTriangle objTriangle = new clsTriangle();
private clsEllipse objEllipse = new clsEllipse();
private clsPencil objPencil = new clsPencil();
public frmPaint()
{
InitializeComponent();
}
private void picCanvas_MouseDown(object sender, MouseEventArgs e)
{
MouseIsDown = true;
txtPosX.Text = e.X.ToString();
txtPosY.Text = e.Y.ToString();
if (typeGraph == 1)
{
objLine.ReadPositions(txtPosX, txtPosY);
cont++;
if(cont == 2)
{
objLine.DrawListLine(picCanvas);
cont = 0;
}
}
else if (typeGraph == 2)
{
//Pos Inicial Rectangulo
objRectangle.SelectSize(picCanvas);
txtPosY.Text = objRectangle.FinalY(e.Y).ToString();
objRectangle.ReadStartPosition(txtPosX, txtPosY);
}
else if (typeGraph == 3)
{
//Pos Inicial Triangulo
objTriangle.SelectSize(picCanvas);
txtPosY.Text = objTriangle.FinalY(e.Y).ToString();
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
objTriangle.ReadStartPosition(txtPosX, txtPosY);
}
else if (typeGraph == 4)
{
//Pos Inicial Circle
objEllipse.SelectSize(picCanvas);
txtPosY.Text = objEllipse.FinalY(e.Y).ToString();
objEllipse.ReadStartPosition(txtPosX, txtPosY);
txtPosY.Text = objRectangle.FinalY(e.Y).ToString();
objTriangle.ReadEndPosition(txtPosX, txtPosY);
objTriangle.DrawTriangle(picCanvas);
}
else if (typeGraph == 4)
{
//Dibujar Elipse
txtPosY.Text = objEllipse.FinalY(e.Y).ToString();
objEllipse.ReadEndPosition(txtPosX, txtPosY);
objEllipse.DrawEllipse(picCanvas);
}
else if (typeGraph == 5)
{
//Dibujar con Lapiz
objPencil.ClearPoint();
//objPencil.ReadPosition(txtPosX, txtPosY);
picCanvas.Cursor = Cursors.SizeAll;
}
}
}
clsPencil.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
namespace Painter
{
internal class clsPencil
{
private Graphics mGraph;
private Pen mPen, mErazer, mPenFill1, mPenFill;
private int mScale, mScale1=8;
private Point mPointStart;
private Point mPointEnd;
private List<PointF> points = new List<PointF>();
public clsPencil()
{
mPointStart.X = mPointStart.Y = -1;
mPointEnd.X = mPointEnd.Y = -1;
mScale = 2;
mPen = new Pen(Color.Black, mScale);
mErazer = new Pen(Color.White, mScale1);
mPenFill = new Pen(Color.Black);
mPenFill1 = new Pen(Color.White);
}
//Leer Posición
points.Clear();
}
public void DrawPencil(PictureBox picCanvas, TextBox txtPosX,
TextBox txtPosY)
{
mPointEnd.X = int.Parse(txtPosX.Text);
mPointEnd.Y = int.Parse(txtPosY.Text);
mGraph = picCanvas.CreateGraphics();
if (points.Count != 1)
{
mGraph.DrawLines(mPen, points.ToArray());
//points.Clear();
}
}
public void DrawErazer(PictureBox picCanvas, TextBox posX, TextBox
posY)
{
mGraph = picCanvas.CreateGraphics();
}
}
clsLine.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
namespace Painter
{
internal class clsLine
{
//Atributos
private Point mPointEnd;
private Point mPointStart;
private Graphics mGraph;
private Pen mPen;
private int mScale;
//Constructor
public clsLine()
{
mPointStart.X=mPointStart.Y=-1;
mPointEnd.X=mPointEnd.Y=-1;
mScale = 2;
mPen = new Pen(Color.Black, mScale);
}
//Metodos
//Dibujar Linea desde Lista de Puntos
public void DrawLine(PictureBox picCanvas)
{
mGraph = picCanvas.CreateGraphics();
//dibuja la linea
mGraph.DrawLine(mPen, mPointStart.X, mPointStart.Y,
mPointEnd.X, mPointEnd.Y);
mPointStart.X = mPointStart.Y = -1;
mPointEnd.X = mPointEnd.Y = -1;
}
//Dibujar Linea
public void DrawListLine(PictureBox picCanvas)
{
mGraph = picCanvas.CreateGraphics();
mGraph.DrawLine(mPen, listPoints[0], listPoints[1]);
listPoints.Clear();
mPointStart.X = mPointStart.Y = -1;
mPointEnd.X = mPointEnd.Y = -1;
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
}
//Leer Posiciones
public void ReadPositions(TextBox txtPosX,TextBox txtPosY)
{
if (mPointStart.X == -1)
{
mPointStart.X = int.Parse(txtPosX.Text);
mPointStart.Y = int.Parse(txtPosY.Text);
listPoints.Add(new Point(mPointStart.X, mPointStart.Y));
}
else if (mPointEnd.X == -1)
{
mPointEnd.X = int.Parse(txtPosX.Text);
mPointEnd.Y = int.Parse(txtPosY.Text);
listPoints.Add(new Point(mPointEnd.X, mPointEnd.Y));
}
}
//Seleccionar Color
public void SelectColor(Button picColor)
{
mPen.Color = picColor.BackColor;
}
//Seleccionar escala
public void SelectScale(int scale)
{
mPen.Width = scale;
}
//Seleccionar estilo
public void ChangeStylePen(int type)
{
if (type == 0)
{
mPen.DashStyle = DashStyle.Solid;
}
else if (type == 1)
{
mPen.DashStyle = DashStyle.Dash;
}
else if (type == 2)
{
mPen.DashStyle = DashStyle.Dot;
}
else if (type == 3)
{
mPen.DashStyle = DashStyle.DashDot;
}
else if (type == 4)
{
mPen.DashStyle = DashStyle.DashDotDot;
}
}
}
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
clsRectangle.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
namespace Painter
{
internal class clsRectangle
{
//Atributos
private Graphics mGraph;
private Pen mPen;
private int mScale,MaxHeight;
private Point mPointStart;
private Point mPointEnd;
private int recWidth, recHeight;
public clsRectangle()
{
mPointStart.X = mPointStart.Y = -1;
mPointEnd.X = mPointEnd.Y = -1;
mScale = 2;
mPen = new Pen(Color.Black, mScale);
}
//Leer Posición
public void ReadStartPosition(TextBox txtPosX, TextBox txtPosY)
{
mPointStart.X = int.Parse(txtPosX.Text);
mPointStart.Y = int.Parse(txtPosY.Text);
}
public void ReadEndPosition(TextBox posX, TextBox posY)
{
mPointEnd.X = int.Parse(posX.Text);
mPointEnd.Y = int.Parse(posY.Text);
CalculateDimension();
}
public void CalculateDimension()
{
recWidth = mPointEnd.X - mPointStart.X;
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
//Seleccionar estilo
public void ChangeStylePen(int type)
{
if (type == 0)
{
mPen.DashStyle = DashStyle.Solid;
}
else if (type == 1)
{
mPen.DashStyle = DashStyle.Dash;
}
else if (type == 2)
{
mPen.DashStyle = DashStyle.Dot;
}
else if (type == 3)
{
mPen.DashStyle = DashStyle.DashDot;
}
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
else if (type == 4)
{
mPen.DashStyle = DashStyle.DashDotDot;
}
}
}
clsEllipse.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
namespace Painter
{
internal class clsEllipse
{
//Atributos
private Graphics mGraph;
private Pen mPen;
private int mScale, MaxHeight;
private Point mPointStart;
private Point mPointEnd;
private int elipWidth, elipHeight;
public clsEllipse()
{
mPointStart.X = mPointStart.Y = -1;
mPointEnd.X = mPointEnd.Y = -1;
mScale = 2;
mPen = new Pen(Color.Black, mScale);
}
//Transformacion a coordenadas logicas
public int InicioY(float y)
{
return (int)(MaxHeight - Math.Round(y));
}
public float FinalY(int y)
{
return (MaxHeight - y);
}
//Leer Posición
public void ReadStartPosition(TextBox txtPosX, TextBox txtPosY)
{
mPointStart.X = int.Parse(txtPosX.Text);
mPointStart.Y = int.Parse(txtPosY.Text);
}
public void ReadEndPosition(TextBox posX, TextBox posY)
{
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
mPointEnd.X = int.Parse(posX.Text);
mPointEnd.Y = int.Parse(posY.Text);
CalculateDimension();
}
public void CalculateDimension()
{
elipWidth = mPointEnd.X - mPointStart.X;
elipHeight = mPointEnd.Y - mPointStart.Y;
}
//Tamaño del Dibujo
public void SelectSize(PictureBox picCanvas)
{
MaxHeight = picCanvas.Height - 1;
}
public void SelectColor(Button picColor)
{
mPen.Color = picColor.BackColor;
}
//Dibujar Elipse
public void DrawEllipse(PictureBox picCanvas)
{
//Crear el lienzo del dibujo
mGraph = picCanvas.CreateGraphics();
//Dibujar el rectangulo
if (elipWidth > 0 && elipHeight > 0)
{
mGraph.DrawEllipse(mPen, mPointStart.X,
FinalY(mPointEnd.Y), elipWidth, elipHeight);
}
if (elipWidth < 0 && elipHeight > 0)
{
mGraph.DrawEllipse(mPen, mPointStart.X,
FinalY(mPointEnd.Y), elipWidth * -1, elipHeight);
}
if (elipWidth < 0 && elipHeight < 0)
{
mGraph.DrawEllipse(mPen, mPointEnd.X,
FinalY(mPointStart.Y), elipWidth * -1, elipHeight * -1);
}
if (elipWidth > 0 && elipHeight < 0)
{
mGraph.DrawEllipse(mPen, mPointStart.X,
FinalY(mPointStart.Y), elipWidth, elipHeight * -1);
}
}
//Seleccionar estilo
public void ChangeStylePen(int type)
{
if (type == 0)
{
mPen.DashStyle = DashStyle.Solid;
}
else if (type == 1)
{
mPen.DashStyle = DashStyle.Dash;
}
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
else if (type == 2)
{
mPen.DashStyle = DashStyle.Dot;
}
else if (type == 3)
{
mPen.DashStyle = DashStyle.DashDot;
}
else if (type == 4)
{
mPen.DashStyle = DashStyle.DashDotDot;
}
}
}
clsTriangle.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
namespace Painter
{
internal class clsTriangle
{
//Atributos
private Graphics mGraph;
private Pen mPen;
private int mScale, MaxHeight;
private Point mPointStart;
private Point mPointEnd;
private int triWidth, triHeight;
public clsTriangle()
{
mPointStart.X = mPointStart.Y = -1;
mPointEnd.X = mPointEnd.Y = -1;
mScale = 2;
mPen = new Pen(Color.Black, mScale);
}
//Transformacion a coordenadas logicas
public int InicioY(float y)
{
return (int)(MaxHeight - Math.Round(y));
}
public float FinalY(int y)
{
return (MaxHeight - y);
}
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
//Leer Posición
public void ReadStartPosition(TextBox txtPosX, TextBox txtPosY)
{
mPointStart.X = int.Parse(txtPosX.Text);
mPointStart.Y = int.Parse(txtPosY.Text);
}
public void ReadEndPosition(TextBox posX, TextBox posY)
{
mPointEnd.X = int.Parse(posX.Text);
mPointEnd.Y = int.Parse(posY.Text);
CalculateDimension();
}
public void CalculateDimension()
{
triWidth = mPointEnd.X - mPointStart.X;
triHeight = mPointEnd.Y - mPointStart.Y;
}
//Tamaño del Dibujo
public void SelectSize(PictureBox picCanvas)
{
MaxHeight = picCanvas.Height - 1;
}
public void SelectColor(Button picColor)
{
mPen.Color = picColor.BackColor;
}
//Dibujar Trinagulo
public void DrawTriangle(PictureBox picCanvas)
{
//Crear el lienzo del dibujo
mGraph = picCanvas.CreateGraphics();
}
public void SelectScale(int scale)
{
mPen.Width = scale;
}
//Seleccionar estilo
public void ChangeStylePen(int type)
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
{
if (type == 0)
{
mPen.DashStyle = DashStyle.Solid;
}
else if (type == 1)
{
mPen.DashStyle = DashStyle.Dash;
}
else if (type == 2)
{
mPen.DashStyle = DashStyle.Dot;
}
else if (type == 3)
{
mPen.DashStyle = DashStyle.DashDot;
}
else if (type == 4)
{
mPen.DashStyle = DashStyle.DashDotDot;
}
}
}
OpenGL
Programa ejecutandoese
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
Codigo Fuente
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
main.cpp
#include<windows.h>
/*Libreria del OpenGL*/
#include<GL/glut.h>
#include<Windows.h>
#include <gl/glut.h>
#include <iostream>
#include <cmath>
using namespace std;
Color color;
Shape figureList[MAX];
int typeFigure = 0;
// Color menu
enum COLOR_CODE
{
RED, GREEN, BLUE, CYAN, MAGENTA, YELLOW, WHITE, BLACK
};
figureList[typeFigure].type = "Triangle";
}
if (mode == W_RECTANGLE_MODE || mode == F_RECTANGLE_MODE) //
opcion para el rectangulo
{
if (mode == F_RECTANGLE_MODE) // Rectangulo relleno
{
figureList[typeFigure].isFilled = true;
}
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
figureList[typeFigure].type = "Rectangle";
}
if (mode == W_CIRCLE_MODE || mode == F_CIRCLE_MODE) // opcion
para el circulo
{
if (mode == F_CIRCLE_MODE) // Circulo relleno
{
figureList[typeFigure].isFilled = true;
}
else // circunferencia, contorno
{
figureList[typeFigure].isFilled = false;
}
figureList[typeFigure].type = "Circle";
}
typeFigure++;
}
}
figureList[current].endX = x;
figureList[current].endY = y;
glutPostRedisplay();
}
return;
}
// Dibujado final
dragging = false;
glutPostRedisplay();
}
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glFlush();
glutPostRedisplay();
}
// Color menu
void colorMenu(int code)
{
if (code == RED) // Rojo
{
color.r = 1.0;
color.g = 0.0;
color.b = 0.0;
}
else if (code == GREEN) // Verde
{
color.r = 0.0;
color.g = 1.0;
color.b = 0.0;
}
else if (code == BLUE) // Azul
{
color.r = 0.0;
color.g = 0.0;
color.b = 1.0;
}
else if (code == CYAN) // Cian
{
color.r = 0.0;
color.g = 1.0;
color.b = 1.0;
}
else if (code == MAGENTA) // Magenta
{
color.r = 1.0;
color.g = 0.0;
color.b = 1.0;
}
else if (code == YELLOW) // Amarillo
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
{
color.r = 1.0;
color.g = 1.0;
color.b = 0.0;
}
else if (code == WHITE) // Blanco
{
color.r = 1.0;
color.g = 1.0;
color.b = 1.0;
}
else if (code == BLACK) // Negro
{
color.r = 0.0;
color.g = 0.0;
color.b = 0.0;
}
glutPostRedisplay();
}
glutPostRedisplay();
}
glutAddMenuEntry("Blanco", WHITE);
glutAddMenuEntry("Negro", BLACK);
{
mode = F_CIRCLE_MODE;
}
}
{
glColor3f(1.0, 1.0, 1.0);
glBegin(GL_LINE_LOOP);
glVertex2i(2, window_h - 251);
glVertex2i(49, window_h - 251);
glVertex2i(49, window_h - 299);
glVertex2i(2, window_h - 299);
glEnd();
}
else if (mode == W_CIRCLE_MODE) // opcion contorno de circulo
{
glColor3f(1.0, 1.0, 1.0);
glBegin(GL_LINE_LOOP);
glVertex2i(2, window_h - 301);
glVertex2i(49, window_h - 301);
glVertex2i(49, window_h - 349);
glVertex2i(2, window_h - 349);
glEnd();
}
else if (mode == F_CIRCLE_MODE) // opcion circulo relleno
{
glColor3f(1.0, 1.0, 1.0);
glBegin(GL_LINE_LOOP);
glVertex2i(2, window_h - 351);
glVertex2i(49, window_h - 351);
glVertex2i(49, window_h - 399);
glVertex2i(2, window_h - 399);
glEnd();
}
}
glEnd();
glEnd();
glColor3f(0, 0, 0);
glRectf(0, 0, 50, window_h);
glEnd();
}
glutPostRedisplay();
}
{
// Dibujar punto
glPointSize(figureList[i].pointSize);
glBegin(GL_POINTS);
glVertex2f(figureList[i].startX,
figureList[i].startY);
glEnd();
}
if (figureList[i].type == "Line") // Line
{
// Dibujar linea
glLineWidth(figureList[i].lineWidth);
glBegin(GL_LINES);
glVertex2f(figureList[i].startX,
figureList[i].startY);
glVertex2f(figureList[i].endX, figureList[i].endY);
glEnd();
}
// Dibujar triangulo
glVertex2f(figureList[i].startX,
figureList[i].startY);
glVertex2f(((figureList[i].endX -
figureList[i].startX) / 2) +
figureList[i].startX, figureList[i].endY);
glVertex2f(figureList[i].endX, figureList[i].startY);
glEnd();
}
if (figureList[i].type == "Rectangle") // Rectangulo
{
if (figureList[i].isFilled) // Rellenado
{
glBegin(GL_QUADS);
}
else // Contorno
{
glLineWidth(figureList[i].lineWidth);
glBegin(GL_LINE_LOOP);
}
// Dibujar rectangulo
glVertex2f(figureList[i].startX,
figureList[i].startY);
glVertex2f(figureList[i].endX, figureList[i].startY);
glVertex2f(figureList[i].endX, figureList[i].endY);
glVertex2f(figureList[i].startX, figureList[i].endY);
glEnd();
}
if (figureList[i].type == "Circle") // Circulo
{
if (figureList[i].isFilled) // Rellenado
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
{
glBegin(GL_TRIANGLE_FAN);
}
else // Contorno
{
glLineWidth(figureList[i].lineWidth);
glBegin(GL_LINE_LOOP);
}
// Calcular centr X y Y
float centerX = figureList[i].startX + halfWidth;
float centerY = figureList[i].startY + halfHeight;
// Dibujar circulo
for (int j = 0; j < 360; j++)
{
float angle = j * PI / 180.0;
float x = centerX + (cos(angle) * halfWidth);
float y = centerY + (sin(angle) * halfHeight);
glVertex2f(x, y);
}
glEnd();
}
// Marco de línea
if (figureList[i].type == "Line")
{
glVertex2f(figureList[i].startX,
figureList[i].startY);
glVertex2f(figureList[i].endX,
figureList[i].endY);
}
// Triangulo/Rectangulo/Circulo MArco
if (figureList[i].type == "Triangle" ||
figureList[i].type == "Rectangle" ||
figureList[i].type == "Circle")
{
glVertex2f(figureList[i].startX,
figureList[i].startY);
glVertex2f(figureList[i].endX,
figureList[i].startY);
glVertex2f(figureList[i].endX,
figureList[i].endY);
glVertex2f(figureList[i].startX,
figureList[i].endY);
}
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
glEnd();
glDisable(GL_LINE_STIPPLE);
}
}
}
drawPrimitives();
drawInterface();
glutSwapBuffers();
}
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
display();
glFlush();
if (state == GLUT_DOWN)
{
// Desactivar forma anterior
figureList[typeFigure - 1].isActivated = false;
// Principal
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
UNIVERSIDAD DE LAS FUERZAS ARMADAS - ESPE
init();
// Callback functions
glutDisplayFunc(display);
glutReshapeFunc(reshape);
glutMouseFunc(mouse);
glutMotionFunc(motion);
glutMainLoop();
return 0;
}