Bienvenidos al Curso de Programación de Builder C++ http://www.geocities.ws/builderx2001/cap2.

html

Cap. 2.- Como hacer un graficador sencillo 2D, 3D en Builder C++

En este capítulo haremos un sencillo graficador 2D en coordenadas Cartesianas, en coordenada Polares y un Graficador Tri-
Dimensional

Para este programa empieza diseñamos un formulario con los siguientes objetos:

Fig. 1 Diseño del formulario.

Empezaremos Trazando dos líneas, que se convertirán en los ejes cartesianos, en el componente Canvas del objeto Image tal como
se aprecia en el siguiente Gráfico.

Estos ejes se obtienen con las siguientes líneas de código:

void __fastcall TForm1::Button1Click(TObject *Sender)

{
int Maxx=Image1->Width;
int Maxy=Image1->Height;
//Traza el eje X
Image1->Canvas->MoveTo(0,Maxy/2);
Image1->Canvas->LineTo(Maxx,Maxy/2);
//Traza el eje Y
Image1->Canvas->MoveTo(Maxx/2,0);
Image1->Canvas->LineTo(Maxx/2,Maxy);
}

Fig. 2 Dibujando los ejes cartesianos.

1 de 6 12/04/2021 5:36
Bienvenidos al Curso de Programación de Builder C++ http://www.geocities.ws/builderx2001/cap2.html

COORDENADAS CARTESIANAS

A continuación modificaremos la función anterior para graficar una función en coordenadas cartesianas como se muestra en la
siguiente figura:

Para ello se emplea el siguiente código: (si no funciona no se olviden de incluir en el encabezado del programa la librería math.h)

void __fastcall TForm1::Button1Click(TObject *Sender)

{
int Maxx=Image1->Width;
int Maxy=Image1->Height;
//Traza el eje X
Image1->Canvas->MoveTo(0,Maxy/2);
Image1->Canvas->LineTo(Maxx,Maxy/2);
//Traza el eje Y
Image1->Canvas->MoveTo(Maxx/2,0);
Image1->Canvas->LineTo(Maxx/2,Maxy);
//Declarando funciones que van a ser utilizadas
float x,y,var=0.01,xini=-10,xfin=10,posx,posy;
//Graficando la función en si
for(x=xini;x<xfin;x+=var)
{ y=sin(x);
posx=x*Maxx/(xfin-xini);
posy=y*Maxx/(xfin-xini);
Image1->Canvas->Pixels[Maxx/2+posx][Maxy/2-posy]=clRed;
}
}

Fig. 3 Mostrando la Función y=sin(x) en coordenadas cartesianas

2 de 6 12/04/2021 5:36
Bienvenidos al Curso de Programación de Builder C++ http://www.geocities.ws/builderx2001/cap2.html

Ustedes pueden hacer las modificaciones que consideren convenientes para mostrar estos gráficos de una mejor manera, ya sea
cambiando el tipo de gráfico por ejemplo y=x*sin(x), etc.

COORDENADAS POLARES

A continuación mostraremos la famosa cardioide, dibujada en coordenadas polares y también el código que nos permite realizar
esto:

void __fastcall TForm1::Button2Click(TObject *Sender)

{
int Maxx=Image1->Width;
int Maxy=Image1->Height;
//Traza el eje X
Image1->Canvas->MoveTo(0,Maxy/2);
Image1->Canvas->LineTo(Maxx,Maxy/2);
//Traza el eje Y
Image1->Canvas->MoveTo(Maxx/2,0);
Image1->Canvas->LineTo(Maxx/2,Maxy);
//Declarando funciones que van a ser utilizadas
float x,y,var=0.005,xini=-50,xfin=50,posx,posy,r,ang;
//Graficando la función en si
for(ang=0;ang<2*M_PI;ang+=var)
{ r=(1-sin(ang))*15;//+sin(ang)*3+ang;
x=r*cos(ang);
y=r*sin(ang);
posx=x*Maxx/(xfin-xini);
posy=y*Maxx/(xfin-xini);
Image1->Canvas->Pixels[Maxx/2+posx][Maxy/2-posy]=clBlue;
}
}

Fig. 4 El gráfico de la cardioide en coordenadas polares.

3 de 6 12/04/2021 5:36
Bienvenidos al Curso de Programación de Builder C++ http://www.geocities.ws/builderx2001/cap2.html

GRAFICO DE COORDENADAS POLARES EN TRES DIMENSIONES

Los gráficos en tres dimensiones son algo muy interesante, a continuación se muestra la variación del formulario que contiene el
graficador en 3D, se deben diseñar 4 objetos Image como se muestra en la figura y también se debe diseñar 2 objetos ScrollBar uno
controlará el ángulo de elevación y el otro controlará el ángulo de giro, tres de los controles image nos mostrarán ejes definidos y el
cuarto girará de acuerdo a los ángulos que les proporcionemos.

Fig. 5 Gráfico en 3D función y = sqrt (x*x+z*z)

Seguidamente describiremos lo que hacen los botones, ya conocemos lo que realizan los dos primeros botones, el tercer boton (3D
Cartesiano) contiene el siguiente código que se muestra a continuación:

void __fastcall TForm1::Button3Click(TObject *Sender)

{
int Maxx=Image1->Width;
int Maxy=Image1->Height;
//Traza el eje X
Image1->Canvas->MoveTo(0,Maxy/2);
Image1->Canvas->LineTo(Maxx,Maxy/2);

4 de 6 12/04/2021 5:36
Bienvenidos al Curso de Programación de Builder C++ http://www.geocities.ws/builderx2001/cap2.html

//Traza el eje Y
Image1->Canvas->MoveTo(Maxx/2,0);
Image1->Canvas->LineTo(Maxx/2,Maxy);
//Declarando funciones que van a ser utilizadas
float x,y,z,var=0.1,xini=-10,xfin=10,posx,posy;
//Graficando la función en si
for(x=xini/3;x<xfin/3;x+=var)
{ for(z=xini/3;z<xfin/3;z+=var)
{ y=f(x,z); //Llamada a una función ya definida más arriba
posx=x*Maxx/(xfin-xini);
posy=y*Maxx/(xfin-xini);
Image1->Canvas->Pixels[Maxx/2+posx][Maxy/2-posy]=clRed;
posx=x*Maxx/(xfin-xini);
posy=z*Maxx/(xfin-xini);
Image2->Canvas->Pixels[Maxx/2+posx][Maxy/2-posy]=clRed;
posx=y*Maxx/(xfin-xini);
posy=z*Maxx/(xfin-xini);
Image3->Canvas->Pixels[Maxx/2+posx][Maxy/2-posy]=clRed;
}
}
}

Este Botón nos muestra los tres primeros objetos image que nos muestran los planos x-y, x-z, y-z.

El siguiente Botón (Para Girar) es el que muestra las figuras con el ángulo de Elevación y Giro correspondiente, cuyo código se
muestra a continuación:

void __fastcall TForm1::Button4Click(TObject *Sender)

{
int Maxx=Image1->Width;
int Maxy=Image1->Height;
Image4->Canvas->Pen->Color = clWhite;
Image4->Canvas->FillRect(Rect(0,0,Maxx,Maxy));
Image4->Canvas->Pen->Color = clBlack;

float Elev=ScrollBar1->Position*(2*M_PI)/100;
float Giro=ScrollBar2->Position*(2*M_PI)/100;
float x,y,z,var=0.1,xini=-10,xfin=10,posx,posy,x2D,y2D;
for(x=xini/3;x<xfin/3;x+=var)
{ for(z=xini/3;z<xfin/3;z+=var)
{ y=f(x,z);
x2D= x*cos(Elev)-z*sin(Elev);
y2D=-x*sin(Elev)*sin(Giro)+y*cos(Giro)-z*cos(Elev)*sin(Giro);
posx=x2D*Maxx/(xfin-xini);
posy=y2D*Maxx/(xfin-xini);
Image4->Canvas->Pixels[Maxx/2+posx][Maxy/2-posy]=clRed;
}
}
}

A su vez los objetos ScrollBar deben tener el Siguiente Código:

void __fastcall TForm1::ScrollBar1Change(TObject *Sender)

{
Button4Click(this);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::ScrollBar2Change(TObject *Sender)
{
Button4Click(this);
}

la función y = f(x,z), se define de la siguiente manera:

double f(double x,double z)

{
return sqrt(z*z+x*x);
}

función que debe ser declarada o definida antes de la implementación del Button3 y el Button4

NOTA: El estudiante deberá analizar el programa y hacer las variaciones necesarias para hacer girar otro
tipo de objetos gráficos como Cubos u otros objetos en 3D, programa que debe ser presentado el Día
martes 10 de julio del 2001 en Diskette.
Ejemplo:

5 de 6 12/04/2021 5:36
Bienvenidos al Curso de Programación de Builder C++ http://www.geocities.ws/builderx2001/cap2.html

6 de 6 12/04/2021 5:36