Bienvenidos al Curso de Programación de Builder C++

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.

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

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.

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);

//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: