Graficación

Linea DDA en C# Con Open GL

2012-04-11T19:12:00.001-05:00

Hola chavos! Me da gusto saludarlos y que me acompañen a realizar más aplicaciones de graficación. El día de hoy vamos a continuar con aplicaciones en C#, vamos a volver a realizar la aplicación del algoritmo DDA para dibujar líneas pero ésta vez lo vamos a hacer utilizando las librerías de Open GL.

Lo primero que tenemos que hacer es descargar la aplicación taoframework (en mi caso estoy usando la versión 2.1.0). Lo instalamos normalmente dando "Next" a cada ventana que nos salga. Ahora creamos una nueva aplicación en consola en C#. Aun no podemos utilizar las librerías de Open GL sino que tenemos que agregar las referencias al nuestro proyecto, lo anterior lo hacemos abriendo el menú "Proyecto", luego "Agregar referencia...", después nos vamos a la pestaña "Examinar" y ahí buscamos la carpeta donde hayamos instalado el taoframework y en alguna de las carpetas buscamos los archivos "Tao.OpenGL.dll" y "Tao.FreeGlut.dll" y le damos clic a "Aceptar". Ahora tenemos que agregar los "using" para poder acceder a las clases de estas librerías, agregamos los siguientes "using" al final de los que están cargados por defecto:

using Tao.FreeGlut;
using Tao.OpenGl;

Ahora declaramos las siguientes variables de manera local:

static double x1, y1, x2, y2;

Ahora dentro del método Main() que es el principal de nuestra aplicación, escribimos el siguiente código:

static void Main(string[] args)
{
Console.WriteLine("introduzca el valor de X1");
x1 = Convert.ToDouble(Console.ReadLine());
Console.WriteLine("introduzca el valor de Y1");
y1 = Convert.ToDouble(Console.ReadLine());
Console.WriteLine("introduzca el valor de X2");
x2 = Convert.ToDouble(Console.ReadLine());
Console.WriteLine("introduzca el valor de Y2");
y2 = Convert.ToDouble(Console.ReadLine());
Glut.glutInit();//funciones propias de opengl
Glut.glutInitDisplayMode(Glut.GLUT_SINGLE | Glut.GLUT_RGB);
Glut.glutInitWindowSize(640, 480);//creamos una ventana
Glut.glutCreateWindow("**************Algoritmo DDA**************");//colocamos titulo a la ventana
//llamamos a la funcion dda
Glut.glutDisplayFunc(dda);
Glut.glutMainLoop();
}

Después declaramos un método estático llamado dda(), el cual dibujará unas líneas que dividirán la pantalla representando los 4 cuadrantes y llamará al método que dibujará la línea DDA:

public static void dda()
{
//componentes necesarios de opengl
Gl.glClear(Gl.GL_COLOR_BUFFER_BIT);//limpia el buffer de la pantall
Gl.glColor3f(0.6F, 0.6F, 0.6F);//poner color a los pixeles
Gl.glLoadIdentity();//''muy importante;
Gl.glPointSize(0.5f);//medida de los puntos
Gl.glBegin(Gl.GL_POINTS);//funcion para dibujar puntos
//dibujando el plano
float z = -1, w = 1, c = 0;
for (int i = 0; i < 200; i++)
{
Gl.glColor3f(w, c, z);
Gl.glVertex2d(z, 0);
Gl.glVertex2d(0, w);
z += .01f;
w -= .01f;
c += .1f;
}
Gl.glEnd();//termina funcion para dibujar puntos
//pasamos las
Gl.glPointSize(3.0f);//sirve para el tamaño de los pixeles
Gl.glColor3f(1.0f, 0.0f, 0.0f);//sirve para el color de los pixeles
ddaDibujar(x1, y1, x2, y2);
}

Finalmente escribimos el método que contiene el algoritmo para dibujar la línea DDA en este caso el nombre del método es ddaDibujar() y el código es el siguiente:

public static void ddaDibujar(double x1, double y1, double x2, double y2)
{
double xinicial = x1, yinicial = y1, xfinal = x2, yfinal = y2, x, y;
double deltax, deltay, xincremento, yincremento;
double pasos;
deltax = xfinal - xinicial;
deltay = yfinal - yinicial;
if (Math.Abs(deltax) > Math.Abs(deltay))
pasos = Math.Abs(deltax);
else
pasos = Math.Abs(deltay);
xincremento = (deltax / pasos) / 25;//10;
yincremento = (deltay / pasos) / 25;// 10;
x = xinicial;
y = yinicial;
Gl.glBegin(Gl.GL_POINTS);
Gl.glVertex2d(x, y);//funcion que pinta un pixel en las coordenadas especificadas
for (double k = .1; k <= pasos; k += .1)
{
x = (x + xincremento);
y = (y + yincremento);
Gl.glVertex2d(x, y);
}
Gl.glEnd();
//termina dda
}

Y eso es todo amigos, si instalaron bien el taoframework y agregaron bien las referencias de las librerías a la aplicación no deberían de tener problemas ya que el resto fue bastante sencillo ahora compilamos y corremos nuestra aplicación y nos saldrá una ventana de consola pidiendo los valores de x1, y1, x2 y y2, que serán las coordenadas iniciales y finales de la línea a dibujar:

Podemos teclear los valore que nosotros deseemos, tanto valores negativos como valores positivos ya que tenemos representados los 4 cuadrantes. En mi caso a manera de ejemplo colocaré las coordenadas de: 0, 0, 1, 1. La línea que me saldrá a mi estará representada en el primer cuadrante debido a que estoy utilizando solo valores positivos, aquí lo tenemos:

Y bien amigos pues eso es todo por esta ocasión, los espero en la próxima para ver más figuras que podemos graficar y las diferentes maneras que tenemos para hacerlo. La próxima semana regresaremos a realizar aplicaciones en C++ Builder que ha sido nuestra principal herramienta de programación a lo largo de este semestre. Hasta la próxima amigos!.

Linea DDA en C#

2012-04-10T13:51:00.000-05:00

Hola una vez más amigos, me alegro de poder saludarlos de nueva cuenta y hay que seguir con más aplicaciones de programación, pero esta vez no serán en C++ Builder, sino que la aplicación de hoy la programaremos en C#. La aplicación que vamos a realizar será la misma que hicimos la vez pasada del algoritmo DDA para dibujar líneas solo que ahora estará en C#.

Bien pues empezamos, lo primero será colocar los siguientes componentes en la Forma:

-1 pictureBox

-1 panel

Dentro del panel colocamos los siguientes componentes:

-6 label

-4 textBox

-5 button

Además también necesitaremos:

-1 colorDialog

-3 timer

Los componentes pueden acomodarlos de la manera como ustedes gusten como siempre, en mi caso yo los acomode de la siguiente manera:

Ahora para nuestra aplicación también necesitaremos crear nuestra propia clase. Para esto nos vamos al menú "Proyecto" y luego "Agregar clase..." y le damos el nombre de "Graficos".

Luego necesitaremos agregar un "using" para poder utilizar las clases de los componentes que colocamos sobre la Forma, la siguiente línea la agregamos al final de los "using" ya por default:

using System.Windows.Forms;

Bien ahora si comenzamos con la codificación del método para dibujar la linea DDA, al igual que la aplicación realizada en C++ Builder, nuestro método tendrá 2 sobrecargas, una para dibujar la línea normal y la otra para dibujarla con el color que deseemos. A diferencia de C++ Builder, aquí además de los 4 parámetros que necesitamos, agregaremos un parámetro más, el cual será el pictureBox donde estamos graficando. Enseguida tenemos el código de nuestro primer método LineaDDA():

public void lineaDDA(int x1, int y1, int x2, int y2, PictureBox p1)

{

int dx, dy, pasos, k;

float x_inc, y_inc, x, y;

dx = x2 - x1;

dy = y2 - y1;

if (Math.Abs(dx) > Math.Abs(dy))

pasos = Math.Abs(dx);

else

pasos = Math.Abs(dy);

x_inc = (float)dx / pasos;

y_inc = (float)dy / pasos;

x = x1;

y = y1;

Bitmap bmp = new Bitmap(p1.ClientSize.Width, p1.ClientSize.Height);

bmp.SetPixel((int)x, (int)y, Color.Gray);

for (k = 1; k < pasos + 1; k++)

{

x = x + x_inc;

y = y + y_inc;

bmp.SetPixel((int)x, (int)y, Color.Gray);

}

Graphics g = p1.CreateGraphics();

g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height);

}

Ahora codificamos la segunda sobrecarga del método, con el parámetro del color:

public void lineaDDA(int x1, int y1, int x2, int y2, PictureBox p1, Color color)

{

int dx, dy, pasos, k;

float x_inc, y_inc, x, y;

dx = x2 - x1;

dy = y2 - y1;

if (Math.Abs(dx) > Math.Abs(dy))

pasos = Math.Abs(dx);

else

pasos = Math.Abs(dy);

x_inc = (float)dx / pasos;

y_inc = (float)dy / pasos;

x = x1;

y = y1;

Bitmap bmp = new Bitmap(p1.ClientSize.Width, p1.ClientSize.Height);

bmp.SetPixel((int)x, (int)y, Color.Red);

for (k = 1; k < pasos + 1; k++)

{

x = x + x_inc;

y = y + y_inc;

bmp.SetPixel((int)x, (int)y, color);

}

Graphics g = p1.CreateGraphics();

g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height);

}

Ahora nos vamos al código de nuestro Form1.cs. Ahí declarmos las siguientes variables y objetos de manera global:

Graficos g = new Graficos();

int x1, y1, x2, y2, lenght=80;

Color color = Color.Black;

bool cono=false, circ=false, pol=false;

Ahora abrimos el primer botón, el cual en mi caso es el botón que nos servirá para cambiar el color de la línea. En ese botón escribimos el siguiente código:

private void button1_Click(object sender, EventArgs e)

{

if (colorDialog1.ShowDialog() == DialogResult.OK)

color = colorDialog1.Color;

}

Ahora damos clic en el button2, el cual será el que trazará la línea con las coordenadas dadas en los textBox, el código lo tenemos a continuación:

private void button2_Click(object sender, EventArgs e)

{

this.Refresh();

x1 = Convert.ToInt16(textBox1.Text);

y1 = Convert.ToInt16(textBox2.Text);

x2 = Convert.ToInt16(textBox3.Text);

y2 = Convert.ToInt16(textBox4.Text);

g.lineaDDA(x1, y1, x2, y2, pictureBox1, color);

}

En nuestra aplicación también tendremos varios efectos generados con líneas, el primer botón habilitará el primer efecto es caso de estar inhabilitado y lo inhabilitará en caso de que esté habilitado:

private void button3_Click(object sender, EventArgs e)

{

if (cono == false)

{

cono = true;

timer1.Enabled = true;

}

else

{

cono = false;

timer1.Enabled = false;

}

El siguiente botón hace exactamente lo mismo que el anterior solo que con el segundo efecto que generaremos:

private void button4_Click(object sender, EventArgs e)

{

if (circ == false)

{

circ = true;

timer2.Enabled = true;

}

else

{

circ = false;

timer2.Enabled = false;

}

Ahora hacemos doble clic en el último botón el cual hará lo mismo que los 2 anteriores solo que con el último efecto que vamos a generar:

private void button5_Click(object sender, EventArgs e)

{

if (pol == false)

{

pol = true;

timer3.Enabled = true;

}

else

{

pol = false;

timer3.Enabled = false;

}

Cada uno de los efectos estará dentro de un timer. Vamos a codificar el primero, el cual generará el efecto de que se está dibujando un cono con líneas de diferentes colores:

private void timer1_Tick(object sender, EventArgs e)

{

int centro_x = 150;

int centro_y = 150;

Graphics gr = pictureBox1.CreateGraphics();

float pos_x, pos_y;

int angle;

Random ran = new Random();

Pen pluma;

for (angle = 0; angle < 360 * 10; angle++)

{

pos_x = (float)(centro_x + lenght * Math.Sin(angle / (180 * Math.PI)));

pos_y = (float)(centro_y + lenght * Math.Cos(angle / (180 * Math.PI)));

pluma = new Pen(Color.FromArgb(ran.Next(256), ran.Next(256), ran.Next(256)));

gr.DrawLine(pluma, centro_x, centro_y, pos_x+80, pos_y+180);

}

Thread.Sleep(100);

}

Ahora vamos a codificar el efecto que estará en el segundo timer. Este efecto dibujará un circulo con líneas de diferentes colores:

private void timer2_Tick(object sender, EventArgs e)

{

int centro_x = 150;

int centro_y = 150;

Graphics gr = pictureBox1.CreateGraphics();

float pos_x, pos_y;

int angle;

Random ran = new Random();

Pen pluma;

for (angle = 0; angle < 360*10; angle++)

{

pos_x = (float)(centro_x + lenght * Math.Sin(angle / (180 * Math.PI)));

pos_y = (float)(centro_y + lenght * Math.Cos(angle / (180 * Math.PI)));

pluma = new Pen(Color.FromArgb(ran.Next(256), ran.Next(256), ran.Next(256)));

gr.DrawLine(pluma, centro_x, centro_y, pos_x, pos_y);

}

Finalmente codificamos el último de nuestros efectos, el cuál dibujará un cuadrado que gira sobre una de sus esquinas dibujando un par de círculos concéntricos, el código lo tenemos a continuación:

private void timer3_Tick(object sender, EventArgs e)

{

int centro_x = pictureBox1.Width / 2;

int centro_y = pictureBox1.Height / 2;

lenght = 90;

int angle;

float pos_x, pos_y, pos_x2, pos_y2, pos_x3, pos_y3;

double hypot = Math.Sqrt(lenght * lenght + lenght * lenght);

Random ran = new Random();

for (angle = 0; angle < 360; angle++)

{

color = Color.FromArgb(ran.Next(255), ran.Next(255), ran.Next(255));

pos_y = (float)(centro_y + lenght * Math.Sin(angle / 180.0 * Math.PI));

pos_x = (float)(centro_x + lenght * Math.Cos(angle / 180.0 * Math.PI));

pos_y2 = (float)(centro_y + hypot * Math.Sin((angle + 45) / 180.0 * Math.PI));

pos_x2 = (float)(centro_x + hypot * Math.Cos((angle + 45) / 180.0 * Math.PI));

g.lineaDDA((int)pos_x, (int)pos_y, (int)pos_x2, (int)pos_y2, pictureBox1, color);

pos_y3 = (float)(centro_y + lenght * Math.Sin((angle + 90) / 180.0 * Math.PI));

pos_x3 = (float)(centro_x + lenght * Math.Cos((angle + 90) / 180.0 * Math.PI));

g.lineaDDA((int)pos_x2, (int)pos_y2, (int)pos_x3, (int)pos_y3, pictureBox1, color);

g.lineaDDA((int)pos_x3, (int)pos_y3, (int)centro_x, (int)centro_y, pictureBox1, color);

}

Thread.Sleep(1);

}

Bien ahora solo compilamos y corremos nuestra aplicación y vemos los diferentes resultados que tenemos. Deben ser como los siguientes:

Bien amigos eso es todo por el día de hoy. Espero que hayan comprendido bien el funcionamiento de nuestro programa en C# que prácticamente son muy pocas las diferencias entre éste y el programa que hicimos en C++ Builder y que ambos realizan lo mismo. Nos vemos en la próxima para continuar con más aplicaciones y aprendiendo un poco más de graficación, ya sea en C++ Builder o en C#. Hasta pronto amigos!.

Linea DDA

2012-04-09T17:59:00.001-05:00

Hola amigos espero que estén de lo mejor y me alegro de saludarlos de nuevo y de que me acompañen a realizar más aplicaciones en C++ Builder. En esta ocasión vamos a comenzar con el trazo de líneas mediante el algoritmo conocido como DDA (Analizador Diferencial Digital).

Antes de codificar este algoritmo vamos a explicar un poco de como funciona. Lo que hace el algoritmo de la línea DDA es ir calculando las posiciones de cada uno de los pixeles a lo largo de una línea. Esta tarea la lleva a cabo realizando pasos o incrementos unitarios en una de las coordenadas, y realizando los cálculos necesarios para encontrar el valor de la otra coordenada. Básicamente ese es el funcionamiento del algoritmo.

Bien pues comenzamos con nuestra aplicación para dibujar nuestra línea DDA. Ésta aplicación tendrá bastantes componentes dentro de la Forma, dichos componentes los tenemos en la siguiente lista:

-1 PaintBox
-1 ColorDialog
-7 Timer (todos tienen que estar con su propiedad Enabled en false)
-1 Panel

Dentro del Panel tenemos los siguientes componentes:

-1 Label
-1 ComboBox, y en su propiedad Items agregamos las siguientes cadenas:
-Cono

-Círculo
-Polígono
-Efecto Propio 1

-Efecto Propio 2
-Efecto Propio 3
-Efecto Propio 4

-3 Button
-1GroupBox

Dentro del GroupBox tendremos los siguientes componentes:

-5 Label
-4 Edit
-1 SpeedButton (podemos crear nuestro propio Bitmap para agregarlo a su propiedad Glyph, lo hacemos desde el Image Editor accesible desde el menú Tools de C++ Builder)

Y por la parte visual de nuestra aplicación eso sería todo. Los componentes pueden acomodarlos de la manera que ustedes gusten, en mi caso yo lo hice de la siguiente manera:

Ahora vamos con la parte del código. Nuestra línea DDA la dibujaremos desde una clase que vamos a crear nosotros mismos. Para hacer esto abrimos el menú "File", después la primera opción "New" y seleccionamos "Unit". A nuestra nueva clase la llamaremos "Graficos".

Para crear nuestra clase gráficos primero nos vamos al archivo H de la nueva unidad que creamos, y definimos el constructor el cual recibirá el Canvas del componente donde estemos dibujando y lo asignará al de la clase Graficos para con el dibujar la línea DDA, además también definiremos el método LineaDDA(), el cual tendrá 2 sobrecargas, la primera para dibujar la línea normalmente y la segunda para dibujar la línea con un color que hayamos elegido. El código del archivo H de nuestra clase Graficos lo tenemos a continuación:

class Graficos
{
TCanvas *canvas;
public:
Graficos(TCanvas *CanvaS)
{
canvas = CanvaS;
}
int round(float n);
void LineaDDA(int x1, int y1, int x2, int y2);
void LineaDDA(int x1, int y1, int x2, int y2, TColor color);
};

Debemos cuidar que el código anterior lo hayamos escrito antes de la línea:
#endif

Ahora en el archivo .cpp, en la parte superior escribimos la línea de código para incluir la clase Math en nuestra aplicación ya que la utilizaremos más adelante:

#include <Math.h>

Ahora debajo de la línea de código:
#pragma package(smart_init)
comenzamos a escribir nuestros métodos para la línea DDA.

Primero escribiremos un método propio para redondear los números que deseemos. El código es bastante sencillo y lo tenemos a continuación:

int Graficos::round(float n)
{
return int(n+0.5);
}
//-----------------------------------------------------------------------------

Ahora codificamos el método para dibujar nuestra línea DDA los parámetros que necesitamos son las coordenadas iniciales de la línea y las coordenadas finales. El código para dibujar la línea DDA es el siguiente:

void Graficos::LineaDDA(int x1, int y1, int x2, int y2)
{
int dx, dy, steps, k;
float x_inc, y_inc, x, y;
dx = x2 - x1;
dy = y2 - y1;
if (abs(dx) > abs(dy))
steps = abs(dx);
else
steps = abs(dy);
x_inc = (float)dx/steps;
y_inc = (float)dy/steps;
x = x1;
y = y1;
canvas->Pixels[floor(x+0.5)][floor(y+0.5)];
for (k = 1; k < steps+1; k++)
{
x = x + x_inc;
y = y + y_inc;
canvas->Pixels[floor(x+0.5)][floor(y+0.5)];
}
}
//-------------------------------------------------------------------------------

Ahora escribimos la segunda sobrecarga del método LineaDDA(), en la cual incluimos el color personalizado de la línea, el código es prácticamente el mismo:

void Graficos::LineaDDA(int x1, int y1, int x2, int y2, TColor color)
{
int dx, dy, steps, k;
float x_inc, y_inc, x, y;
dx = x2 - x1;
dy = y2 - y1;
if (abs(dx) > abs(dy))
steps = abs(dx);
else
steps = abs(dy);
x_inc = (float)dx/steps;
y_inc = (float)dy/steps;
x = x1;
y = y1;
canvas->Pixels[floor(x+0.5)][floor(y+0.5)] = color;
for (k = 1; k < steps+1; k++)
{
x = x + x_inc;
y = y + y_inc;
canvas->Pixels[floor(x+0.5)][floor(y+0.5)] = color;
}
}
//-------------------------------------------------------------------------------

Y con eso tenemos lista nuestra clase Graficos desde la cual podremos dibujar nuestra Linea DDA.

Ahora nos vamos al archivo .cpp de nuestra aplicación y ahí declaramos de manera global las siguientes variables, las cuales son 4 enteros que serán las coordenadas iniciales y finales de la línea en el momento de dibujarla de manera dinámica con el mouse, y un puntero de la clase Graficos para poder llamar los métodos LineaDDA():

#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
Graficos *graf;
int x1, y1, x2, y2;
//---------------------------------------------------------------------------

Ahora en el evento en el que llamamos a la creación de nuestra Forma colocamos el siguiente código para inicializar los valores y crear el objeto "graf":

_fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
graf = new Graficos(PaintBox1->Canvas);
ComboBox1->ItemIndex = 0;
}
//---------------------------------------------------------------------------

Bien ahora abrimos el evento OnMouseDown del PaintBox que habíamos colocado en la Forma y en el evento escribimos el siguiente código:

void __fastcall TForm1::PaintBox1MouseDown(TObject *Sender,
TMouseButton Button, TShiftState Shift, int X, int Y)
{
if (Shift.Contains(ssLeft))
{
x1 = X;
y1 = Y;
}
}
//---------------------------------------------------------------------------

Ahora abrimos el evento OnMouseMove también del PaintBox y escribimos el código siguiente:

void __fastcall TForm1::PaintBox1MouseMove(TObject *Sender,
TShiftState Shift, int X, int Y)
{
if(Shift.Contains(ssLeft))
PaintBox1MouseUp(Sender, mbLeft, Shift, X, Y);
}
//---------------------------------------------------------------------------

Y finalmente abrimos el evento OnMouseUp del PaintBox y tecleamos el código que tenemos a continuación:

void __fastcall TForm1::PaintBox1MouseUp(TObject *Sender,
TMouseButton Button, TShiftState Shift, int X, int Y)
{
if(Button==mbLeft)
{
x2 = X;
y2 = Y;
Refresh();
graf->LineaDDA(x1, y1, x2, y2, Canvas->Pen->Color);
Edit1->Text = x1;
Edit2->Text = y1;
Edit3->Text = x2;
Edit4->Text = y2;
}
}
//---------------------------------------------------------------------------

Ahora comenzamos con la codificación de los componentes primero hacemos doble clic en el SpeedButton y escribimos el siguiente código:

void __fastcall TForm1::SpeedButton1Click(TObject *Sender)
{
if (ColorDialog1->Execute())
Canvas->Pen->Color = ColorDialog1->Color;
}
//---------------------------------------------------------------------------

Ahora damos doble clic en el Button1 y escribimos el siguiente código:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
PaintBox1->Refresh();
graf->LineaDDA(Edit1->Text.ToInt(), Edit2->Text.ToInt(), Edit3->Text.ToInt(), Edit4->Text.ToInt(), Canvas->Pen->Color);
}
//---------------------------------------------------------------------------

Ahora damos clic en el Button2 el cual iniciará unos efectos que vamos a formar con las líneas que vayamos dibujando, dependiendo de cual de los efectos hayamos elegido en el ComboBox1:

void __fastcall TForm1::Button2Click(TObject *Sender)
{
switch(ComboBox2->ItemIndex)
{
case 0:
Timer1->Enabled = true;
break;
case 1:
Timer2->Enabled = true;
break;
case 2:
Timer3->Enabled = true;
break;
case 3:
Timer4->Enabled = true;
break;
case 4:
Timer5->Enabled = true;
break;
case 5:
Timer6->Enabled = true;
break;
case 6:
Timer7->Enabled = true;
break;
}
}
//---------------------------------------------------------------------------

Después damos doble clic en el Button3 el cual detendrá el efecto con líneas que este seleccionado en el ComboBox1:

void __fastcall TForm1::Button3Click(TObject *Sender)
{
switch(ComboBox2->ItemIndex)
{
case 0:
Timer1->Enabled = false;
break;
case 1:
Timer2->Enabled = false;
break;
case 2:
Timer3->Enabled = false;
break;
case 3:
Timer4->Enabled = false;
break;
case 4:
Timer5->Enabled = false;
break;
case 5:
Timer6->Enabled = false;
break;
case 6:
Timer7->Enabled = false;
break;
}
}
//---------------------------------------------------------------------------

Ahora vamos a codificar los efectos que se irán formando cada efecto estará dentro de un Timer. El primero de nuestros efectos formará un cono dibujando líneas que generen ese efecto, el código es el siguiente:

void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int angle;
TColor color;
float x_pos, y_pos;
int x_center = PaintBox1->ClientWidth/4;
int y_center = PaintBox1->ClientHeight/4;
int length = 80;
for (angle=0; angle<360; angle++)
{
color = (TColor)random(52548899);
y_pos = y_center+length*sin(angle/180.0*M_PI);
x_pos = x_center+length*cos(angle/180.0*M_PI);
graf->LineaDDA(x_center, y_center, x_pos+80, y_pos+180, color);
}
}
//---------------------------------------------------------------------------

El segundo efecto formará un circulo dibujando líneas, el código lo tenemos a continuación:

void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
int angle;
TColor color;
float x_pos, y_pos;
int x_center = PaintBox1->ClientWidth/4;
int y_center = PaintBox1->ClientHeight/4;
int length = 80;
for (angle=0; angle<360; angle++)
{
color = (TColor)random(52548899);
y_pos = y_center+length*sin(angle/180.0*M_PI);
x_pos = x_center+length*cos(angle/180.0*M_PI);
graf->LineaDDA(x_center, y_center, x_pos, y_pos, color);
}
}
//---------------------------------------------------------------------------

El tercero de los efecto es un cuadrado dibujado por líneas que girará y formara el efecto de 2 círculos circuncéntricos:

void __fastcall TForm1::Timer3Timer(TObject *Sender)
{
float x_pos, y_pos, x_pos2, y_pos2, x_pos3, y_pos3;
int x_center = PaintBox1->ClientWidth/2;
int y_center = PaintBox1->ClientHeight/2;
int length = 120;
int angle;
TColor color;
double hypot = sqrt(length * length + length * length);
for (angle = 0; angle < 360; angle++)
{
color = (TColor)random(52548899);
y_pos = (float)(y_center + length * sin(angle / 180.0 * M_PI));
x_pos = (float)(x_center + length * cos(angle / 180.0 * M_PI));
y_pos2 = (float)(y_center + hypot * sin((angle + 45) / 180.0 * M_PI));
x_pos2 = (float)(x_center + hypot * cos((angle + 45) / 180.0 * M_PI));
graf->LineaDDA(x_pos, y_pos, x_pos2, y_pos2, color);
y_pos3 = (float)(y_center + length * sin((angle + 90) / 180.0 * M_PI));
x_pos3 = (float)(x_center + length * cos((angle + 90) / 180.0 * M_PI));
graf->LineaDDA(x_pos2, y_pos2, x_pos3, y_pos3, color);
graf->LineaDDA(x_pos3, y_pos3, x_center, y_center, color);
Sleep(10);
}
}
//---------------------------------------------------------------------------

El efecto siguiente dará la impresión de estar dibujando un diamante mediante líneas:

void __fastcall TForm1::Timer4Timer(TObject *Sender)
{
int angle;
TColor color;
float x_pos, y_pos;
int x_center = PaintBox1->ClientWidth/4;
int y_center = PaintBox1->ClientHeight/4;
int length = 80;
for (angle=0; angle<360; angle++)
{
color = (TColor)random(52548899);
y_pos = y_center+length*sin(angle/180.0*M_PI)*3;
x_pos = x_center+length*cos(angle/180.0*M_PI*10);
graf->LineaDDA(x_pos+130, x_center+130, y_center+130, y_pos+130, color);//(x_center, y_center, x_pos, y_pos, color);
}
}
//---------------------------------------------------------------------------

El siguiente efecto son líneas que se van dibujando desde el centro hacia las esquinas para terminar dibujando un cuadrado con un círculo inscrito dentro:

void __fastcall TForm1::Timer5Timer(TObject *Sender)
{
Refresh();
int i,x,posx,posy;
float y;
posx=PaintBox1->ClientWidth-48;
posy=PaintBox1->ClientHeight-48;
TColor color;
for(i=0,x=posx,y=posy-200;i<21;x-=15,y+=10,i++)
{
color = (TColor)random(52548899);
graf->LineaDDA(x,posy,posx,y, color);
Sleep(10);
}
posx=44;
posy=PaintBox1->ClientHeight-48;
for(i=0,x=posx,y=posy-200;i<21;x+=15,y+=10,i++)
{
color = (TColor)random(52548899);
graf->LineaDDA(x,posy,posx,y,color);
Sleep(10);
}
posx=44;
posy=44;
for(i=0,x=posx,y=posy+200;i<21;x+=15,y-=10,i++)
{
color = (TColor)random(52548899);
graf->LineaDDA(x,posx,posy,y,color);
Sleep(10);
}
posx=PaintBox1->ClientWidth-48;
posy=44;
for(i=0,x=posx,y=posy+200;i<21;x-=15,y-=10,i++)
{
color = (TColor)random(52548899);
graf->LineaDDA(x,posy,posx,y,color);
Sleep(10);
}
}
//---------------------------------------------------------------------------

El penúltimo de los efectos dibujará líneas verticales y horizontales para que quede finalmente una cuadrícula:

void __fastcall TForm1::Timer6Timer(TObject *Sender)
{
Refresh();
TColor color;
color = (TColor)random(52548899);
for(int x = 0; x < Width; x += 20)
{
graf->LineaDDA(x, 0, x, Height, color);
Sleep(10);
}
for(int y = 0; y < Height; y += 20)
{
graf->LineaDDA(0, y, Width, y, color);
Sleep(10);
}
}
//---------------------------------------------------------------------------

El último de los efectos dibujará dos 2 círculos a la vez para terminar formando un efecto de un ovalo al centro rodeado de líneas a su alrededor:

void __fastcall TForm1::Timer7Timer(TObject *Sender)
{
float x_pos, y_pos, x_pos2, y_pos2, x_pos3, y_pos3;
int x_center = PaintBox1->ClientWidth/2-50;
int y_center = PaintBox1->ClientHeight/2;
int length = 120;
int angle;
TColor color;
double hypot = sqrt(length * length + length * length);
for (angle = 0; angle < 360; angle++)
{
color = (TColor)random(52548899);
y_pos = (float)(y_center + length * sin(angle / 180.0 * M_PI));
x_pos = (float)(x_center + length * cos(angle / 180.0 * M_PI));
y_pos2 = (float)(y_center + hypot * sin((angle + 45) / 180.0 * M_PI));
x_pos2 = (float)(x_center + hypot * cos((angle + 45) / 180.0 * M_PI));
graf->LineaDDA(x_pos+100, y_pos, x_pos2, y_pos2, color);
y_pos3 = (float)(y_center + length * sin((angle + 90) / 180.0 * M_PI));
x_pos3 = (float)(x_center + length * cos((angle + 90) / 180.0 * M_PI));
graf->LineaDDA(x_pos2+100, y_pos2, x_pos3, y_pos3, color);
Sleep(10);
}
}
//---------------------------------------------------------------------------

Y con eso terminamos amigos, este programa estuvo un poco largo y medio complicado pero finalmente lo terminamos. Ahora solo compilamos y corremos nuestra aplicación y podemos dibujar la línea dando clic y arrastrando el mouse. Y podemos dar clic al botón "Iniciar" para comenzar a ver nuestros efectos, nuestra aplicación debería verse de la siguiente manera:

Y bien amigos pues eso es todo por esta ocasión espero que hayan comprendido muy bien la aplicación del día de hoy ya que con ella continuaremos trabajando para realizar aplicaciones mas adelante. Por lo pronto me despido de ustedes y los espero en la próxima ocasión para continuar practicando. Hasta la vista chavos!.

Fractal De Landscape

2012-04-08T17:02:00.000-05:00

Que onda chavos pues aquí nos encontramos de nueva cuenta para finalizar con este tema de los fractales, y como les había comentado en la ocasión pasada el fractal que nos falta es un fractal que genera un paisaje, dicho paisaje consta de montañas, el mar y el sol. Este fractal que vamos a programar se le conoce como escena fractal o fractal de Landscape.

Bien pues comenzamos ya con el final de este tema. Para empezar lo primero que haremos será cambiar el color de la Forma ya que dependiendo del color que le pongamos a la Forma es el color que van a tener las montañas de nuestra escena fractal, ustedes pueden elegir el color que mas les guste o que mas se acople al paisaje, yo en mi caso elegí el color gris para la Forma. Después todo lo que necesitamos es colocar un Timer sobre la Forma y terminamos con la parte gráfica, nuestra Forma debe de haber quedado de la siguiente manera:

Bueno ahora continuamos con la parte del código. Primero nos vamos al archivo H y en la parte de declaraciones privadas escribimos las siguientes variables:

private: // User declarations
int MAXSIZE,MAXLEVEL;
double frctl[1000];
int cw,ch,x1;

Ahora en la parte de declaraciones públicas escribimos las siguientes definiciones de los métodos que utilizaremos más adelante:

public: // User declarations
__fastcall TForm1(TComponent* Owner);
void TForm1::subdivide(int f1, int f2, double std, double ratio);
void TForm1::fractal(int y1, int y2, int maxlevel, double h, double scale);
void TForm1::draw_fractal(void);

Ahora nos regresamos a la Forma y abrimos el evento OnCreate de nuestra Forma y en él escribimos el siguiente código para darle valor a las variables apenas corra nuestra aplicación:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
x1=10;
MAXSIZE=1000;
MAXLEVEL=6;
cw=ClientWidth-10;
ch=ClientHeight-10;
this->DoubleBuffered = true;
}
//---------------------------------------------------------------------------

También escribimos en la línea final del código pasado la asignación de la propiedad DoubleBuffered en true, para con esto reducir el parpadeo que se genera al momento de repintar o refrescar la Forma.

Ahora vamos a codificar los métodos que utilizaremos para generar el fractal, el primero que codificaremos será el método llamado fractal():

void TForm1::fractal(int y1,int y2,int maxlevel,double h,double scale)
{
int first, last;
double ratio,std;
first=0;
last=(int)pow(2.0,(double)maxlevel);
frctl[first]=y1;
frctl[last]=y2;
ratio=1.0/pow(2.0,h);
std=scale*ratio;
subdivide(first,last,std,ratio);
}
//--------------------------------------------------------------------------------

Continuamos codificando los métodos ahora le toca el turno al método conocido como subdivide(), el código lo tenemos a continuación:

void TForm1::subdivide(int p1,int p2,double std,double ratio)
{
int midpnt;
double stdmid;
midpnt = (p1 + p2) / 2;
if(midpnt != p1 && midpnt != p2)
{
frctl[midpnt] = (frctl[p1] + frctl[p2]) / 2 + (double)((random(16)-8)) /8.0*std;
stdmid = std * ratio;
subdivide(p1,midpnt,stdmid,ratio);
subdivide(midpnt,p2,stdmid,ratio);
}
}
//-------------------------------------------------------------------------------

Para terminar de codificar los 3 métodos que vamos a utilizar codificamos el último de los métodos el cual lo hemos llamado draw_fractal():

void TForm1::draw_fractal()
{
int i,x,xinc,l;
l=(int)pow(2.0,(double)MAXLEVEL);
xinc = cw / l * 3 / 2;
this->Canvas->MoveTo(0,100);
for(i=0,x=0;i<l;i++,x+=xinc)
this->Canvas->LineTo(x,(int)frctl[i]);
}
//---------------------------------------------------------------------------------

Y con eso terminamos la parte de codificación de los métodos ya solo nos resta teclear el código que irá dentro del Timer y que es el que irá generando el efecto. En el código del Timer hemos agregado una variable x1 que se irá incrementando cada vez que se vuelva a ejecutar el Timer y así dar el efecto de que el sol está en movimiento. Además también hacemos uso de la función FloodFill(), la cual nos sirve para rellenar un área especifica que tenga un color, con otro color que nosotros hayamos especificado. Los parámetros de esta función consta de un par de coordenadas que estén dentro del área que deseamos colorear, el color que tiene el área que deseamos colorear, y el parámetro fsSurface que pintará el área completamente hasta encontrar otro color (si desean conocer más sobre esta función pueden colocar el cursor sobre la palabra FloodFill y oprimir la tecla F1 y se abrirá el menú de ayuda y ahí podrán leer más sobre el funcionamiento de ésta función). El código del Timer1 lo tenemos a continuación:

void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
x1++;
this->Repaint();
randomize();
this->Canvas->Pen->Color=clBlack;
this->Canvas->Brush->Color=clSkyBlue;
fractal(100,100,MAXLEVEL,0.5,50.0);
draw_fractal();
this->Canvas->FloodFill(1,1,this->Color,fsSurface);
this->Canvas->Brush->Color=clTeal;
fractal(170,170,MAXLEVEL,0.9,30.0);
draw_fractal();
this->Canvas->FloodFill(1,ch-1,this->Color,fsSurface);
this->Canvas->Brush->Color=clYellow;
this->Canvas->Ellipse(10+x1,10,80+x1,80);
this->Canvas->FloodFill(cw,50,this->Color,fsSurface);
}
//---------------------------------------------------------------------------

Y pues eso es todo chavos ya solo queda compilar y ejecutar nuestra aplicación y automáticamente comenzará a generar el efecto debido a que el código lo escribimos en un Timer. El efecto de nuestra escena fractal debería de ser como lo que tenemos a continuación:

Y con este último fractal podemos dar por terminado este tema de los fractales. Si quieren pueden seguir buscando y en internet encontrarán muchísimos ejemplos más sobre fractales y si quieren seguir practicando pues pueden programarlos en C++ Builder. Bien pues gracias por haberme acompañado y nos vemos en la próxima ocasión para seguir realizando más aplicaciones de C++ pero ahora con un tema diferente. Hasta pronto amigos!.

Fractal De Sierpinski

2012-04-07T18:10:00.000-05:00

Hola de nuevo amigos me da gusto saludarlos una vez mas y poder seguir practicando con mas aplicaciones en C++ Builder. Bueno ya casi hemos terminado con el tema de los fractales, pero aun nos quedan un par de ejemplo mas para realizar. El fractal que programaremos el día de hoy es el conocido como fractal de Sierpinski.

Bien amigos pues el día de hoy lo haremos un poco más rápido de lo normal debido a que tengo un poco de prisa, entonces me saltaré la parte de cambiarle el color a la Forma y lo único que haré en ella será colocar un botón con la leyenda "Dibujar Sierpinski". Nuestra Forma queda de la siguiente manera:

Bien ahora pasamos a la parte de código y primero nos vamos al archivo H y en la parte de declaraciones privadas declaramos las siguientes variables que utilizaremos más adelante y la definición de los métodos que declararemos más adelante y que son los que nos darán el efecto del fractal:

private: // User declarations
int depth;
int w,h;
void subTriangle(int n, float x1, float y1, float x2, float y2, float x3, float y3);
void drawSierpinski(float x1, float y1, float x2, float y2, float x3, float y3);

Ahora nos preparamos para generar el efecto del fractal de Sierpinski y primero que nada tenemos que abrir el evento OnCreate de la Forma y en él escribimos el código que tenemos a continuación:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
depth=7;
this->ClientWidth=640;
this->ClientHeight=480;
w=this->ClientWidth;
h=this->ClientHeight;
}
//---------------------------------------------------------------------------

Bien enseguida vamos a codificar los métodos definidos anteriormente primero lo haremos con el método drawSierpinski(), el código de dicho método lo tenemos a continuación:

//Esta funcion dibujara solo 1 triangulo y entonces empezara la funcion de recursividad a si mismo
void TForm1::drawSierpinski(float x1, float y1, float x2, float y2, float x3, float y3)
{
//Aqui dibujamos las 3 lineas del triangulo, uniendo los 3 puntos para generar lineas
this->Canvas->Pen->Color=(TColor)random(65000);
this->Canvas->MoveTo(x1,y1);
this->Canvas->LineTo(x2,y2);
this->Canvas->MoveTo(x2,y2);
this->Canvas->LineTo(x3,y3);
this->Canvas->MoveTo(x3,y3);
this->Canvas->LineTo(x1,y1);
//Llamamos a la funcion de recursividad y pintara el resto de los tringulos, las 3 esquinas de triangulo son simempre el centro de su posicion
subTriangle
(
1, //Esto representa la primer recursicion
(x1 + x2) / 2, //coordenada x de la primera esquina
(y1 + y2) / 2, //coordenada y de la primera esquina
(x1 + x3) / 2, //coordenada x de la segunda esquina
(y1 + y3) / 2, //coordenada y de la segunda esquina
(x2 + x3) / 2, //coordenada x de la tercera esquina
(y2 + y3) / 2 //coordenada y de la tercera esquina
);
}
//-------------------------------------------------------------------------------

Ahora codificaremos el siguiente método el cual es llamado subTriangle(), el código se muestra enseguida:

//La funcion de recursividad subtriangulo pintara todo lo que esta dentro del tringulo mayor a este
void TForm1::subTriangle(int n, float x1, float y1, float x2, float y2, float x3, float y3)
{
Sleep(10);
//Dibujamos los 3 lados del subtriangulo
this->Canvas->MoveTo(x1,y1);
this->Canvas->LineTo(x2,y2);
this->Canvas->MoveTo(x2,y2);
this->Canvas->LineTo(x3,y3);
this->Canvas->MoveTo(x3,y3);
this->Canvas->LineTo(x1,y1);
//Llamadas a si mismo 3 veces con nuevas esquinas,pero solo si el actual numero de recurrencias es menor que la profundidad maxima
if(n < depth)
{
//Triangulo mas pequeño #1
subTriangle
(
n+1, //numero de recurrencias para la siguiente llamada con aumento de 1
(x1 + x2) / 2 + (x2 - x3) / 2, //coordenada x de la primera esquina
(y1 + y2) / 2 + (y2 - y3) / 2, //coordenada y de la primera esquina
(x1 + x2) / 2 + (x1 - x3) / 2, //coordenada x de la segunda esquina
(y1 + y2) / 2 + (y1 - y3) / 2, //coordenada y de la segunda esquina
(x1 + x2) / 2, //coordendaa x de la tercera esquina
(y1 + y2) / 2 //coordenada y de la tercera esquina
);
//Triangulo mas pequeño #2
subTriangle
(
n+1, //numero de recurrencias para la siguiente llamada con aumento de 1
(x3 + x2) / 2 + (x2 - x1) / 2,
(y3 + y2) / 2 + (y2 - y1) / 2,
(x3 + x2) / 2 + (x3 - x1) / 2,
(y3 + y2) / 2 + (y3 - y1) / 2,
(x3 + x2) / 2,
(y3 + y2) / 2
);
//Triangulo mas pequeño #3
subTriangle
(
n+1, //numero de recurrencias para la siguiente llamada con aumento de 1
(x1 + x3) / 2 + (x3 - x2) / 2,
(y1 + y3) / 2 + (y3 - y2) / 2,
(x1 + x3) / 2 + (x1 - x2) / 2,
(y1 + y3) / 2 + (y1 - y2) / 2,
(x1 + x3) / 2,
(y1 + y3) / 2
);
}
}
//---------------------------------------------------------------------------------

El código de los 2 métodos anteriores es algo largo y relativamente un poco complicado sin embargo en el código se incluyen comentarios para ayudarnos a saber que hace cada parte del código y así comprender mejor el comportamiento de este fractal.

Ya para terminar solo nos resta escribir la llamada al método drawSierpinski() dentro del evento clic del Button1 (solo se hace la llamada el método drawSierpinski() ya que dentro de éste método se llama al segundo método que es el subTriangle()), el código lo tenemos enseguida:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
this->Repaint();
Sleep(1);
Button1->Enabled=false;
//Llamamos a la función de Sierpinski (funciona con cualquier esquina dentro de la pantalla)
//Asignamos las coordenadas del tringulo principal "el mas grande"
drawSierpinski(10, h - 10, w - 10, h - 10, w / 2, 10);
Button1->Enabled=true;
Button1->SetFocus();
}
//---------------------------------------------------------------------------

Bien chavos pues eso es todo lo que tenemos que hacer ahora solo compilamos y corremos nuestra aplicación y observamos el efecto que nos genera el cual es un poco tardado así que solo dejen el programa correr tranquilamente, dicho efecto debe ser como lo que tenemos enseguida:

Y bueno amigos eso fue todo por hoy, ya solo nos queda un fractal más para concluir con este tema, el fractal restante es el conocido como fractal de Landscape, y nos genera el efecto de un paisaje. Pero todo eso ya lo veremos en la siguiente ocasión. Hasta la próxima amigos!.

Fractal De Malthus 2

2012-04-06T13:47:00.000-05:00

Que onda chavos me da gusto saludarlos de nuevo y en esta ocasión para continuar con el tema de los fractales, programaremos el fractal conocido como el fractal de Malthus 2, como ya se los había dicho en la vez pasada.

Bien pues rápidamente comencemos. Lo primero será como ya hemos estado acostumbrando hacer será cambiar el color de la Forma. Como ya les había mencionado en ocasiones pasadas esto es opcional, si quieren lo pueden hacer e incluso pueden elegir el color que ustedes deseen, en mi caso yo cambiaré el color de la Forma a color rojo. Inmediatamente después tenemos que colocar un botón sobre la Forma.

Nuestra interfaz debería verse mas o menos de la siguiente manera, dependiendo de lo que hayan elegido ustedes:

Ahora nos vamos a la parte del código la cual será bastante sencilla. Primero nos vamos al archivo H y en la parte de declaraciones privadas declaramos las siguientes variables:

private: // User declarations
int maxX, maxY;

Luego en la parte de las declaraciones públicas escribimos la definición del método ExtranioConfinador(), el cual es diferente a los que ya hemos utilizado antes a pesar de tener el mismo nombre:

public: // User declarations
__fastcall TForm1(TComponent* Owner);
void TForm1::ExtranioConfinador();

Bueno ahora nos vamos a la Forma y en sus respectivos eventos buscamos el evento OnCreate y damos doble clic, luego en él escribimos el siguiente código:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
maxX = this->ClientWidth;
maxY = this->ClientHeight;
}
//---------------------------------------------------------------------------

Es hora pues de codificar el método ExtranioConfinador(), el código que necesitaremos para poder generar el efecto del fractal es el que tenemos a continuación:

void TForm1::ExtranioConfinador()
{
int i, j, k, l, Color, Contador;
double PobAnt, PobNueva, X, Y, Razon;
PobAnt = PobNueva = 0.0;
Razon = 2.3;
Y = 0;
for ( j = 1; j <= 15; j++)
{
Color++;
if ( Color > clWhite )
Color = clBlue;
for ( k = 1; k <= 10; k++ )
{
Contador = 0;
Razon = Razon + 0.01;
PobAnt = 0.01;
for ( i = 1; i <= 1000; i++)
{
PobNueva = Razon * ( PobAnt * ( 1 - PobAnt ) );
X = PobNueva - PobAnt;
this->Canvas->Pixels[(X*maxX/2)+maxX/2][(maxY/2)-(Y*maxY/2)]=(TColor)Color;
if( PobAnt == PobNueva )
Contador++;
else
Contador = 0;
if( Contador > 100 )
i = 10000;
PobAnt = PobNueva;
Y = X;
}
}
}
this->Canvas->TextOutA(10, 10, "Flujo Maltusiano");
}

//---------------------------------------------------------------------------

Ya para terminar damos doble clic en el botón que habíamos colocado sobre la Forma y en el escribimos la llamada el método ExtranioConfinador(), el código es así:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
this->Repaint();
ExtranioConfinador();
}
//---------------------------------------------------------------------------

Y es todo chavos ahora todo lo que tenemos que hacer es compilar y correr nuestra aplicación y aquí tenemos el efecto que se debe de generar:

Bien chavos por esta ocasión fue todo, como pueden ir viendo generar los fractales es algo bastante sencillo y rápido pero también muy interesante debido a los efectos que se van formando. Aun nos quedan unos cuantos por ver, pero eso ya será en otra ocasión. Hasta la vista amigos!.

Fractal De Malthus 1

2012-04-05T15:55:00.000-05:00

Hola chavos! Espero que anden de lo mejor y yo aquí ando pasando rápidamente para mostrarles otro ejemplo de los fractales por supuesto programado en C++ Builder. En esta ocasión el fractal que programaremos será el conocido como el fractal de Malthus 1.

Bien pues como siempre ya saben que el primer paso que realizo es opcional, si quieren pueden seguirlo y si no pues no hay problema todo funcionará normalmente. Lo primero que haré yo será cambiar el color de la Forma en su propiedad color buscamos el color clTeal y lo elegimos. Ahora colocamos un botón sobre la Forma y eso será todo lo que tenemos que hacer sobre la Forma, la cual nos quedará de la siguiente manera:

Bien ahora nos cambiamos a la parte del editor de código y nos vamos al archivo cabecera del programa, es decir al archivo H y en la parte de declaraciones privadas tecleamos las siguientes variables:

private: // User declarations
int maxX, maxY, MaxGen;

Ahora en la parte de las declaraciones públicas escribimos la siguiente definición del método ExtranioConfinador(), que aunque su nombre es igual al método que utilizamos en el fractal pasado su funcionamiento es completamente diferente:

public: // User declarations
__fastcall TForm1(TComponent* Owner);
void TForm1::ExtranioConfinador();

Bueno ahora nos vamos a la Forma y en sus eventos elegimos el llamado OnCreate y le damos doble clic, ahí tecleamos el siguiente código, que nos servirá para que las siguientes variables tomen un valor cada vez que ejecutemos nuestra aplicación:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
MaxGen = 0x00FF;
maxX = this->ClientWidth;
maxY = this->ClientHeight;
}
//---------------------------------------------------------------------------

Enseguida escribimos el método ExtranioConfinador(), el código que necesitamos para generar el efecto del fractal es el que tenemos a continuación:

void TForm1::ExtranioConfinador()
{
int i, j, k, l, Color, Contador, X, Y;
double PobAnt, PobNueva, Razon;
PobNueva = 0.0;
Razon = 2.3;
Color = clBlack;
for( j = 1; j <= 151; j++ )
{
Color++;
if( Color >= clWhite )
Color = clBlue;
Contador = 0;
Razon += 0.01;
PobAnt = 0.01;
for( i = 1; i <= MaxGen; i++ )
{
PobNueva = Razon * ( PobAnt * ( 1 - PobAnt ) );
X = PobAnt * maxX;
Y = maxY - ( PobNueva * maxY );
this->Canvas->Pixels[X][Y] = (TColor)Color;
if ( PobAnt == PobNueva )
Contador++;
else
Contador = 0;
if ( Contador > 10 )
i = MaxGen;
PobAnt = PobNueva;
}
this->Canvas->TextOutA(10, 10, "Flujo Maltusiano");
Sleep(5);
}
}
//---------------------------------------------------------------------------

Finalmente solo queda escribir la llamada al método en el evento OnClic del botón que habíamos colocado sobre la Forma:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
this->Repaint();
ExtranioConfinador();
}
//---------------------------------------------------------------------------

Y así de fácil fue todo chavos ahora compilamos y corremos nuestra aplicación y si hicimos todo correctamente obtendremos un efecto como el siguiente:

Bueno amigos pues ya hemos visto un montón de fractales diferentes pero aun nos quedan unos cuantos más por mostrar, ya que como les había dicho antes este tema es bastante amplio e interesante. Por hoy eso fue todo chavos nos vemos en la siguiente ocasión para continuar con más de este mismo tema y mostrar otro fractal parecido al de hoy conocido como el fractal de Malthus 2, hasta entonces amigos!!.

Fractal De Henon

2012-04-04T17:57:00.001-05:00

Hola de nueva cuenta amigos! Aquí me encuentro otra vez para continuar con más aplicaciones en C++ Builder. En este momento estamos analizando el tema de los fractales y en esta ocasión programaremos uno más el cual es llamado el fractal de Henon.

Para realizar esto lo primero que haremos será cambiar el colo de la Forma a verde (como siempre ya saben que este paso es opcional). Después todo lo que necesitaremos será colocar un botón sobre la Forma. Entonces procedemos con la parte del código, por lo pronto nuestra Forma debe quedar mas o menos así:

Ahora nos vamos al archivo H de nuestra aplicación y en la parte privada declaramos las siguientes variables:

private: // User declarations
int maxX, maxY;
double EscalaX, EscalaY, DespX, DespY;

Luego en la parte pública escribimos la definición del método que utilizaremos para generar el fractal:

public: // User declarations
__fastcall TForm1(TComponent* Owner);
void TForm1::ExtranioConfinador();

Bueno ahora abrimos el evento OnCreate de la Forma y en él escribimos el siguiente código para que las variables maxX y maxY carguen los valores apenas corramos nuestra aplicación:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
maxX=this->ClientWidth;
maxY=this->ClientHeight;
}
//---------------------------------------------------------------------------

Enseguida escribimos el código del método anteriormente definido, es decir, el método ExtranioConfinador(), este es el codigo:

void TForm1::ExtranioConfinador()
{
int a,i,PosX,PosY, Color;
double Xant,Xnuevo,Yant,Ynuevo;
HDC hdc;
Xant = Xnuevo = Yant = Ynuevo = 0;
for(Color=1; Color<=15; Color++)
for(i=1; i<=0x02ff; i++)
{
Sleep(1);
Xnuevo = Yant + 1 - (1.4*Xant *Xant);
Ynuevo = 0.3 * Xant;
PosX = ( Xnuevo * maxX / 3 * EscalaX ) + maxX / 2 + DespX;
PosY = ( Ynuevo * maxY * EscalaY ) + maxY / 2 + DespY;
if(( PosX>=0)&&(PosX<=maxX)&&(PosY>=0)&&(PosY<=maxY))
this->Canvas->Pixels[PosX][PosY]=(TColor)Color;
Xant=Xnuevo;
Yant=Ynuevo;
}
this->Canvas->TextOutA(10,110,"CONFINADOR HENON");
this->Canvas->TextOutA(10,130,EscalaX);
this->Canvas->TextOutA(10,150,EscalaY);
this->Canvas->TextOutA(10,170,DespX);
this->Canvas->TextOutA(10,190,DespY);
}

//---------------------------------------------------------------------------

Bien para terminar solo damos doble clic en el botón que habíamos colocado sobre la Forma y en el evento OnClic que se abre escribimos el código que tenemos a continuación:

void __fastcall TForm1::Button1Click(TObject *Sender)

{

this->Repaint();

EscalaX=1;

EscalaY=1;

DespX=0;

DespY=0;

ExtranioConfinador();

}

//---------------------------------------------------------------------------

Eso es todos chavos ahora solo queda compilar y correr nuestra aplicación y nos generará el efecto de la curva de Henon además nos desplegará en pantalla los valores de la escala en X, la escala en Y, así como los desplazamientos en X y en Y. Nuestra aplicación quedará de la siguiente manera:

Eso es todo por hoy amigos nos vemos en la próxima con un ejemplo más de los diferentes fractales que podemos generar mediante programación, espero que ya se sientan todos unos expertos en el C++ Builder y sino pues no queda de otra que seguir practicando. Hasta la vista amigos!.

Fractal De Mandelbrot

2012-04-03T10:55:00.000-05:00

Hola amigos! En esta ocasión vamos a continuar rápidamente con el tema de los fractales y programaremos otro diferente a los que ya hemos hecho anteriormente, hoy le toca el turno al fractal de Mandelbrot.

Bien pues para comenzar lo primero es que tenemos que pintar la Forma de color (esto es opcional), damos clic en la propiedad Color de la forma y elegimos clNavy. Ahora colocamos un botón sobre la forma y eso es todo lo que necesitamos para comenzar a programar. Nuestra forma debería verse mas o menos de la siguiente manera:

Con la interfaz ya lista comenzamos entonces con la programación del fractal de Mandelbrot. Primero nos vamos a el archivo H y en la parte pública declaramos las siguientes variables que utilizaremos más adelante:

int maxX, maxY, Limite, i, j, Pasos, Terminar;
double PasoX, PasoY, PosX, PosY, OrigX, OrigY, DimX, DimY, IterX, IterY, TempX;

Esto será bastante sencillo y rápido chavos ahora nos cambiamos al archivo .cpp, o nos vamos a la Forma y damos doble clic en el botón para abrir su evento OnClic y ahí escribimos el siguiente código que será el que nos formará el efecto de Mandelbrot:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
maxX = Form1->ClientWidth;
maxY = Form1->ClientHeight;
Limite = 100;
OrigX = -2.0;
OrigY = -1.25;
DimX = 0.5;
DimY = 1.25;
PasoX = ( DimX - OrigX ) / maxX;
PasoY = ( DimY - OrigY ) / maxY;
for ( i = 0; i <= maxX; i++)
for ( j = 0; j <= maxY; j++)
{
PosX = OrigX + i * PasoX;
PosY = OrigY + j * PasoY;
IterX = 0.0;
IterY = 0.0;
Terminar = Pasos = 0;
while ( !Terminar )
{
TempX = ( IterX * IterX ) - ( IterY * IterY ) + PosX;
IterY = 2 * ( IterX * IterY ) + PosY;
IterX = TempX;
Pasos++;
if ( hypot( fabs(IterX), fabs(IterY)) >= 2.0)
Terminar++;
if ( Pasos >= Limite )
Terminar++;
}
if ( Pasos < Limite )
Canvas->Pixels[i][j] = (TColor)Pasos;
}
}
//---------------------------------------------------------------------------

Y pues aunque no lo crean es todo chavos, ahora solo tenemos que compilar nuestra programa y correrlo para ver su funcionamiento y si todo salió bien nuestra aplicación debería verse así:

Y por hoy eso fue todo amigos nos vemos la próxima ocasión en la que programaremos otro fractal más para que sigan viendo las diferentes opciones que tenemos en este amplio tema. Hasta la vista chavos!.

Fractal Del Dragón

2012-04-02T16:33:00.002-05:00

Hola de nueva cuenta amigos! Es hora de continuar practicando con el C++ Builder, en esta ocasión programaremos otro fractal como el de la vez anterior pero este genera un efecto diferente y es conocido como el fractal del dragón.

Bien pues para empezar primero cambiamos el color de la Forma a negro, y colocamos los siguientes componentes:

-1 botón
-1 Edit (con un valor inicial de 2)
-1 Edit (con un valor inicial de 12)
-1 UpDown (con un valor mínimo de 1 y máximo de 10, asociado con el Edit1)
-1 UpDown (con un valor mínimo de 1 y máximo de 13, asociado con el Edit2)

La forma en mi caso queda de la siguiente manera:

Ahora abrimos el archivo H y en la parte privada declaramos las siguientes variables:

private: // User declarations
int Paso, Signo, EjeX[4098], EjeY[4098], x1, y1, x2, y2;

Y en la parte pública declaramos la definición de los métodos que utilizaremos:

public: // User declarations
__fastcall TForm1(TComponent* Owner);
void TForm1::GenerarDragon();

Bueno pues enseguida declaramos el método GenerarDragon(), ahora en el archivo .cpp:

void TForm1::GenerarDragon()
{
int i, j, dx, dy;
j = Paso / 2;
for(i = 1; i <= 4096; i += Paso)
{
dx = EjeX[Paso+i] - EjeX[i];
dy = EjeY[Paso+i] - EjeY[i];
Signo *= -1;
EjeX[i + j] = EjeX[i] + (dx + (dy * Signo)) / Edit1->Text.ToInt();
EjeY[i + j] = EjeY[i] + (dy - (dx * Signo)) / Edit1->Text.ToInt();
this->Canvas->MoveTo(EjeX[i],EjeY[i]);
this->Canvas->LineTo(EjeX[i+j],EjeY[i+j]);
this->Canvas->MoveTo(EjeX[i+j],EjeY[i+j]);
this->Canvas->LineTo(EjeX[i+Paso],EjeY[i+Paso]);
Sleep(1);
}
}
//--------------------------------------------------------------------------

Ahora abrimos el Button1 y escribimos el código que tenemos a continuación:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
Paso = 4096;
Signo = -1;
EjeX[1] = this->ClientWidth / 4;
EjeX[4097] = 3 * this->ClientWidth / 4;
EjeY[1] = EjeY[4097] = 2 * this->ClientHeight / 3;
this->Canvas->Pen->Color = clRed;
this->Canvas->MoveTo(EjeX[1],EjeY[1]);
this->Canvas->LineTo(EjeX[4097],EjeY[4097]);
for(int i = 1; i <= Edit2->Text.ToInt(); i++)
{
this->Repaint();
GenerarDragon();
Paso /= 2;
}
}
//---------------------------------------------------------------------------

Ahora abrimos en evento OnPaint de la Forma y escribimos la siguiente línea:

void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------

Y pues eso es todo chavos ahora solo queda compilar nuestra aplicación y correrla para ver como funciona. Pueden mover los valores de los Edits para ver los diferentes efectos que se forman, el primero afectará la forma que tendrá el fractal al formarse y el segundo es el número de iteraciones que realizará la aplicación para formar el fractal. El resultado final es el siguiente:

Por hoy eso fue todo amigos nos vemos en la siguiente ocasión para seguir con más de este tema de los fractales que es bastante amplio y ay mucha variedad de ellos. Nos vemos chavos!.

Fractal De Newton-Raphson

2012-04-01T17:53:00.000-05:00

Hola a todos amigos!! Después de tanto tiempo de no andar por aquí les pido una disculpa y es hora de que volvamos a seguir con las prácticas de aplicaciones gráficas en C++ Builder. Bueno en esta ocasión empezaremos con le tema de los fractales. Si no sabemos lo que son los fractales podemos seguir el siguiente enlace y nuestra buena amiga doña Wikipedia nos lo dirá:

http://es.wikipedia.org/wiki/Fractal

El fractal que programaremos hoy será el conocido como Newton-Raphson. Lo que haremos hoy será un poco diferente a lo que hacemos regularmente ya que esta vez no utilizaremos la Forma que nos da el C++ Builder sino que llamaremos directo a Windows para que nos cree una al tamaño que nosotros deseemos etc.

Bueno pues empezamos por crear una nueva aplicación en C++ Builder y luego nos vamos al menú "Project" luego al sub-menú "Remove From Project" y en la ventana que se abre seleccionamos la opción "Unit1.cpp" y le damos en OK. Esto nos eliminará la Forma ahora abrimos el menú "View" y después el sub-menú "Project Manager" y en la ventana damos doble clic en "Project1.cpp". Una vez que se nos haya abierto el editor de código borramos todo el código que haya escrito y escribimos todo lo siguiente:

//---------------------------------------------------------------------------
#include <vcl.h>
#pragma hdrstop

//--- Declaración de funciones del programa ------------------------------
int WINAPI WinMain( HINSTANCE, HINSTANCE, LPSTR, int );
LRESULT CALLBACK WndProc( HWND, UINT, WPARAM, LPARAM );
void CrearPaleta(void);

//--- Declaración de variables del programa ------------------------------
char WindowName[] = "Ventana de Windows";
char WindowTitle[] = "Fractal de Newton-Raphson";
BYTE ColorRGB[256][3];

void CrearPaleta(void)
{
int i;
for (i=0; i<256; i++)
{
if (i<64)
{
ColorRGB[i][0] = 192 + i;
ColorRGB[i][1] = 0;
ColorRGB[i][2] = 0;
}
else if ((i>63) && (i<128))
{
ColorRGB[i][0] = 0;
ColorRGB[i][1] = (192 + i)-64;
ColorRGB[i][2] = 0;
}
else if ((i>127)&&(i<192))
{
ColorRGB[i][0] = 0;
ColorRGB[i][1] = 0;
ColorRGB[i][2] = (192 + i)-128;
}
}
}

//=== Función principal WinMain() ========================================
int WINAPI WinMain( HINSTANCE hInstance, HINSTANCE hPrevInstance,
LPSTR lpCmdLine, int nCmdShow )
{
HWND hwnd; // handle a la ventana ppal.
MSG msg; // estructura de mensaje
WNDCLASSEX wcx; // estructura de la ventana
// Definimos la estructura de clase de ventana (campos):
wcx.cbSize = sizeof( WNDCLASSEX ); // tamaño de la estructura
wcx.style = CS_HREDRAW | CS_VREDRAW; // valores más usuales
wcx.lpfnWndProc = WndProc; // función de ventana (Wnd)
wcx.cbClsExtra = 0;
wcx.cbWndExtra = 0; // informaciones extra
wcx.hInstance = hInstance; // instancia actual
// icono, cursor, fondo e icono pequeño de la clase de ventana:
wcx.hIcon = LoadIcon(NULL, IDI_WINLOGO);
wcx.hCursor = LoadCursor(NULL, IDC_ARROW);
wcx.hbrBackground = (HBRUSH) GetStockObject( WHITE_BRUSH );
wcx.hIconSm = LoadIcon(NULL, IDI_WINLOGO);
wcx.lpszMenuName = NULL; // nombre del menú
wcx.lpszClassName = WindowName; // nombre de la ventana
// Registramos la clase de ventana ya preparada:
if( !RegisterClassEx( &wcx ) )
return( FALSE ); // en caso de error, salir
// Creamos la ventana con CreateWindowEx():
hwnd = CreateWindowEx(
WS_EX_OVERLAPPEDWINDOW, // estilo extendido
WindowName, // nombre de la ventana
WindowTitle, // título de la ventana
WS_OVERLAPPEDWINDOW, // estilo de ventana
CW_USEDEFAULT, CW_USEDEFAULT, // Posición (x,y) en pantalla
400, 400, // ancho y alto de la ventana
NULL, NULL, // ventana padre e hija+menú
hInstance, // instancia actual
NULL // no hay más información
);
// Comprobamos la creación de la ventana:
if( !hwnd )
return( FALSE ); // en caso de error, salir
// Hacemos visible la ventana y la actualizamos:
ShowWindow( hwnd, nCmdShow );
UpdateWindow( hwnd );
// Bucle de mensajes, envía los mensajes hacia WndProc
while( GetMessage( &msg, NULL, 0, 0 ) )
{
TranslateMessage( &msg ); // convertimos el mensaje
DispatchMessage( &msg ); // devolvemos el control a w95
}
// devolvemos el valor recibido por PostQuitMessage().
return( msg.wParam );
}

//=== Función del procedimiento de ventana WndProc() =====================
LRESULT CALLBACK WndProc( HWND hwnd, UINT message,
WPARAM wParam, LPARAM lParam )
{
HDC hdc;
PAINTSTRUCT ps;
RECT rect;
BYTE R, G, B;
double deltax, deltay, x, y, tmp, xx, yy, d;
float xmin = -2.0, ymin=-2.0, xmax=2.0, ymax=2.0;
int maxiter = 2048;
int maxcol, maxrow;
int color, row, col, count;
switch( message )
{
// mensaje producido en la creación de la ventana
case WM_CREATE:
break;
//dibuja el fractal de Newton-Raphson
case WM_PAINT:
CrearPaleta();
hdc = BeginPaint( hwnd, &ps );
GetClientRect(hwnd, &rect);
maxcol = rect.right - rect.left ;
maxrow = rect.bottom - rect.top;
deltax = (xmax - xmin)/maxcol;
deltay = (ymax - ymin)/maxrow;
for (col=0; col<=maxcol; col++)
{
for (row=0; row<=maxrow; row++)
{
x = xmin + col * deltax;
y = ymin + row * deltay;
count=0;
while (count<maxiter)
{
xx = x*x;
yy = y*y;
d = 3.0*((xx - yy)*(xx - yy) + 4.0*xx*yy);
if (d == 0.0)
d = 0.000001;
tmp=x;
x = (2.0/3.0)*x + (xx - yy)/d;
y = (2.0/3.0)*y - 2.0*tmp*y/d;
count+=1;
}
if (x>0.0)
color = count%64;
else
{
if ((x<-0.3) && (y>0.0))
color = (count%64) + 64;
else
color = (count%64) + 128;
}
R=ColorRGB[color][0];
G=ColorRGB[color][1];
B=ColorRGB[color][2];
SetPixel(hdc, col, row, RGB(R,G,B));
}
}
EndPaint( hwnd, &ps );
break;
// mensaje producido al cerrar la ventana
case WM_DESTROY:
PostQuitMessage( 0 );
break;
// resto de mensajes, dar una respuesta estándar.
default:
return( DefWindowProc( hwnd, message, wParam, lParam ) );
}
return(0);
}

//=== Fin del archivo ====================================================

Ahora compilamos y corremos nuestra aplicación y obtendremos nuestro fractal resultante:

Y bueno amigos por esta ocasión eso fue todo nos vemos más adelante para continuar y ver un poco más de fractales ya que son muy interesantes. Hasta la próxima!!.

Manipulación Y Manejo De Pixeles De Bitmap

2012-03-05T18:11:00.003-06:00

Hola amigos! En esta ocasión aprenderemos algo muy útil y que nos hará aprender mucho. En nuestra aplicación que realizaremos en esta ocasión aprenderemos como manipular los pixeles de una imágen bitmap, aprenderemos a tomar los pixeles de una imágen personal que cargaremos en el programa y ponerla de cabeza, acostada, cambiar todas las tonalidades por un solo color, y también aprenderemos como hacer zoom a un área en específico de la imágen utilizando la función CopyRect.

Bueno pues comenzamos agregando los componentes que necesitamos en la Forma, los cuales listamos a continuación:

-1 ComboBox
-2 Image (Del mismo tamaño)
-1 Label
-7 Botones
-1 OpenPictureDialog

La Forma debe quedar de la siguiente manera, en mi caso con la imágen del dragón ya cargada en el Image1:

Ahora configuraremos varios de los componentes. El primero de ellos es el Image1, en su propiedad Picture cargamos la imágen de tipo bitmap que deseemos, en mi caso cargo la imágen de un dragón (yo he descargado varias y les recomiendo hacer lo mismo para tener variedad de imágenes y seleccionar otra cuando queramos). Luego en el ComboBox1 en su propiedad Items agregamos los siguientes:

*AND
*OR
*XOR
*NOT

Ahora vamos al archivo H y en la parte de Private declaramos las siguientes variables:

private: // User declarations
int color, left, top, right, bottom;

Y en la parte Public declaramos los métodos Dibujar() y Zoom() que utilizaremos más delante:

public: // User declarations
__fastcall TForm1(TComponent* Owner);
void TForm1::Dibujar();
void TForm1::Zoom();

Bien pues ahora comenzaremos con la codificación. Primero en el evento de creación del TForm1() agregamos la siguiente línea de código para indicar que al correr la aplicación estará seleccionada la primera opción en el ComboBox:

__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
ComboBox1->ItemIndex = 0;
}
//---------------------------------------------------------------------------

Antes de todo abrimos el evento OnCreate de la Forma y escribimos el código siguiente que nos ayudará a reducir el parpadeo:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
Form1->Refresh();
this->DoubleBuffered=true;
}
//---------------------------------------------------------------------------

Después, primero definimos los dos métodos que habíamos declarado anteriormente ya que los utilizaremos más adelante. Primero el método Dibujar():

void TForm1::Dibujar()
{
Refresh();
Form1->Canvas->DrawFocusRect(Rect(left+Image1->Left,top+Image1->Top,right+Image1->Left,bottom+Image1->Top));
}
//---------------------------------------------------------------------------

Después el método Zoom():

void TForm1::Zoom()
{
Graphics::TBitmap *Bitmap;
TRect rect1, rect2;
rect1 = Rect(left,top,right,bottom);
rect2 = Rect(430,50,750,390);
Bitmap=Image1->Picture->Bitmap;
Form1->Canvas->CopyRect(rect2, Bitmap->Canvas, rect1);
}
//---------------------------------------------------------------------------

Ahora escribiremos el botón que dice rojo, el cual dependiendo de la opción que esté seleccionada en el ComboBox realizará una operación de "&", "|", "!" ó "^" con el número hexadecimal "0x0000ff" para cambiar todos los colores del bitmap por tonalidades de color rojo:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
switch(ComboBox1->ItemIndex)
{
case 0:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color&0x0000ff;
}
break;
case 1:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color|0x0000ff;
}
break;
case 2:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color^0x0000ff;
}
break;
case 3:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = ~(TColor)color;
}
break;
}
}
//---------------------------------------------------------------------------

Ahora damos doble clic en el botón con la leyenda "Verde" el cual realizará una operación con el numero hexadecimal "0x00ff00" dependiendo de la opción seleccionada en el ComboBox para cambiar todos los colores del bitmap por tonalidades verdes, escribimos el siguiente código:

void __fastcall TForm1::Button2Click(TObject *Sender)
{
switch(ComboBox1->ItemIndex)
{
case 0:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color&0x00ff00;//(TColor)color&255<<8;
}
break;
case 1:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color|0x00ff00;
}
break;
case 2:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color^0x00ff00;
}
break;
case 3:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = ~(TColor)color;
}
break;
}
}
//---------------------------------------------------------------------------

Ahora damos doble clic en el botón que dice "Azul", el cual hará exactamente lo mismo que los anteriores con la diferencia de que éste cambiará todos los colores por tonalidades azules, el código es el siguiente:

void __fastcall TForm1::Button3Click(TObject *Sender)
{
switch(ComboBox1->ItemIndex)
{
case 0:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color&0xff0000;//(TColor)color&255<<16;
}
break;
case 1:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color|0xff0000;
}
break;
case 2:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = (TColor)color^0xff0000;
}
break;
case 3:
for(int x=0; x<Image1->Width; x++)
for(int y=0; y<Image1->Height; y++)
{
color=Image1->Canvas->Pixels[x][y];
Image2->Canvas->Pixels[x][y] = ~(TColor)color;
}
break;
}
}
//---------------------------------------------------------------------------

Ahora en el botón "CopyBrush" escribimos el código para ejemplificar el funcionamiento de las funciones CopyBrush y CopyRect, el código lo tenemos a continuación:

void __fastcall TForm1::Button13Click(TObject *Sender)
{
Form1->Refresh();
Graphics::TBitmap *Bitmap;
TRect rect1, rect2;
rect1 = Rect(10,10,100,100);
rect2 = Rect(450,111,550,201);//(10,111,100,201);
Bitmap=Image1->Picture->Bitmap;
Form1->Canvas->BrushCopy(rect2, Bitmap, rect1, (TColor)color);
Form1->Canvas->CopyRect(rect2, Bitmap->Canvas, rect1);
}
//---------------------------------------------------------------------------

Enseguida manipularemos los pixeles de la imágen bitmap para invertirla, es decir, la dibujaremos de cabeza, el código se muestra a continuación:

void __fastcall TForm1::Button14Click(TObject *Sender)
{
for(int x=0, x2=Image2->Width; x<Image1->Width; x++, x2--)
for(int y=0, y2=Image2->Height; y<Image1->Height; y++, y2--)
Image2->Canvas->Pixels[x2][y2] = Image1->Canvas->Pixels[x][y];
}
//---------------------------------------------------------------------------

Luego lo que haremos será colocar la imágen de lado, es decir tomaremos los pixeles y dibujaremos la imágen acostada con el siguiente código:

void __fastcall TForm1::Button15Click(TObject *Sender)
{
TRect Rect(0,0,Image2->Width,Image2->Height);
Image2->Canvas->FillRect(Rect);
for(int x=0, x2=Image2->Width; x<Image1->Width; x++, x2--)
for(int y=0, y2=Image2->Height; y<Image1->Height; y++, y2--)
Image2->Canvas->Pixels[y2][x2] = Image1->Canvas->Pixels[x][y];
}
//---------------------------------------------------------------------------

Ahora trabajaremos para realizar el zoom a un área de la imágen, para esto utilizaremos 3 eventos. El primero de los eventos que necesitamos es el evento OnMouseDown de el Image1, en el escribimos el siguiente código:

void __fastcall TForm1::Image1MouseDown(TObject *Sender,
TMouseButton Button, TShiftState Shift, int X, int Y)
{
if(Shift.Contains(ssLeft))
{
left = X;
top = Y;
}
}
//---------------------------------------------------------------------------

Ahora abrimos el evento OnMouseMove de el Image1 y escribimos el código que tenemos a continuación:

void __fastcall TForm1::Image1MouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
if(Shift.Contains(ssLeft))
Image1MouseUp(Sender, mbLeft, Shift, X, Y);
}
//---------------------------------------------------------------------------

El último de los eventos que necesitamos es el OnMouseUp de el Image1, en el cual tecleamos el siguiente código:

void __fastcall TForm1::Image1MouseUp(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
if(Button==mbLeft)
{
right = X;
bottom = Y;
Dibujar();
Zoom();
}
}
//---------------------------------------------------------------------------

Con esto ya podemos dibujar un rectángulo sobre el área sobre la cual queremos realizar el zoom y esta aparecerá con el zoom realizado en la parte derecha de la Forma.

Ahora realizaremos otra tarea aprovechando el evento OnMouseDown del Image1, pero esta vez con la opción del botón clic derecho. Lo que haremos será copiar la imágen del Image1 en el Image2 pero quitando los pixeles del color al que le hayamos dado clic en la imágen original, el código es el siguiente (está debajo del código utilizado para el zoom):

void __fastcall TForm1::Image1MouseDown(TObject *Sender,
TMouseButton Button, TShiftState Shift, int X, int Y)
{
if(Shift.Contains(ssLeft))
{
left = X;
top = Y;
}
if(Shift.Contains(ssRight))
{
Refresh();
TColor color = Image1->Canvas->Pixels[X][Y];
Graphics::TBitmap *Bitmap;
TRect rect1, rect2;
rect1 = Rect(0,0,Image1->Width,Image1->Height);
rect2 = Rect(Image2->Left,Image2->Top,Image2->Left+Image2->Width,Image2->Height+Image2->Top);
Bitmap=Image1->Picture->Bitmap;
Form1->Canvas->BrushCopy(rect2, Bitmap, rect1, (TColor)color);
}
}
//---------------------------------------------------------------------------

Finalmente codificaremos el botón "Cargar Bitmap" para tener la opción de elegir otro bitmap que tengamos en nuestra computadora y poder realizar las mismas acciones que codificamos anteriormente, el código lo tenemos enseguida:

void __fastcall TForm1::Button4Click(TObject *Sender)
{
//Podemos seleccionar un bitmap para cargarlo en la aplicación
Form1->Refresh();
String name;
if(OpenPictureDialog1->Execute())
name = OpenPictureDialog1->FileName;
Image1->Picture->LoadFromFile(name);
}
//---------------------------------------------------------------------------

Y eso es todo chavos, compilamos nuestra aplicación y la corremos para poder probar todas las acciones codificadas, deberíamos tener algo como lo siguiente:

Bueno chavos pues es todo por mi parte, creo que hoy aprendimos muchas cosas nuevas diferentes a las que ya sabíamos anteriormente, yo los espero en la próxima para continuar con más aplicaciones gráficas en C++ Builder. Nos vemos amigos!.

Etiquetas De Formato De HTML con C#

2012-02-29T18:55:00.000-06:00

Hola chavos! Bueno pues en esta ocasión trabajaremos con algo un poco diferente a lo que habitualmente veníamos haciendo. Por esta vez no utilizaremos el lenguaje de programación C++ sino que utilizaremos el ya conocido C#. Supongo que ya todos deberían haber trabajado alguna vez con C# (casi siempre utilizado con la interfaz Microsoft Visual Studio), es relativamente un lenguaje más sencillo que C++ ya que la interfaz de usuario proporciona muchísima ayuda y es muy amigable con el usuario al momento de compilar y corregir errores ya que siempre muestra en donde se encuentran éstos. Ambos lenguajes son muy parecidos el uno al otro así que no nos será muy difícil poder trabajar en ambos.

Nuestra aplicación lo que hará será probar como se vería el cuerpo de una página HTML con diferentes combinaciones de colores de fondo, color de texto, color de los links dentro de la página, color de los links activos y color de los links ya visitados. Los colores los definiremos con el famoso RGB que ya tantas veces hemos utilizado antes en C++. Una vez que hayamos encontrado la combinación de colores que más nos agrade podremos copiar el código de etiquetas para poder copiarlo dentro de un documento HTML para crear nuestra propia página.

La aplicación contendrá muchos componentes en la Forma, enseguida los enlistamos:

-2 GroupBox
-5 RadioButton
-6 Labels o etiquetas
-3 ScrollBar (TrackBar en C++ Builder)
-2 Panel
-13 TextBox (Edit en C++ Builder)
-2 botones

Al igual que siempre pueden crear el diseño como deseen, en mi caso lo realice de la siguiente manera:

Ahora comenzamos con la codificación de los componentes,para ir al código presionamos F7. Ya estando ahí lo primero que haremos será definir algunas variables y métodos que necesitaremos, comenzamos por declarar las siguiente variables globales en el Form1.cs:

private string HexBG, HexText, HexLink, HexALink, HexVLink;

Enseguida definiremos 2 métodos que utilizaremos para los colores, primero para aplicar los colores:

internal void ApplyColor()
{
HexBG = txtBackground.Text;
HexText = txtText.Text;
HexLink = txtLink.Text;
HexALink = txtActiveLink.Text;
HexVLink = txtVisitedLink.Text;
string strRed = Convert.ToString(255 - scrRed.Value);
string strGreen = Convert.ToString(255 - scrGreen.Value);
string strBlue = Convert.ToString(255 - scrBlue.Value);
txtRed.Text = strRed;
txtGreen.Text = strGreen;
txtBlue.Text = strBlue;
pnlPreview.BackColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
string FmtRed = (255 - scrRed.Value).ToString("X");
if (FmtRed.Length == 1)
FmtRed = String.Concat("0", FmtRed);
string FmtGreen = (255 - scrGreen.Value).ToString("X");
if (FmtGreen.Length == 1)
FmtGreen = String.Concat("0", FmtGreen);
string FmtBlue = (255 - scrBlue.Value).ToString("X");
if (FmtBlue.Length == 1)
FmtBlue = String.Concat("0", FmtBlue);
if (rdoBackground.Checked == true)
{
string BG = "#";
BG = String.Concat(BG, FmtRed);
BG = String.Concat(BG, FmtGreen);
BG = String.Concat(BG, FmtBlue);
txtBackground.Text = BG;
pnlBody.BackColor = pnlPreview.BackColor;
txtTextPreview.BackColor = pnlPreview.BackColor;
txtLinkPreview.BackColor = pnlPreview.BackColor;
txtALinkPreview.BackColor = pnlPreview.BackColor;
txtVLinkPreview.BackColor = pnlPreview.BackColor;
HexBG = txtBackground.Text;
}
else if (rdoText.Checked == true)
{
string Txt = "#";
Txt = String.Concat(Txt, FmtRed);
Txt = String.Concat(Txt, FmtGreen);
Txt = String.Concat(Txt, FmtBlue);
txtText.Text = Txt;
txtTextPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexText = txtText.Text;
}
else if (rdoLink.Checked == true)
{
string TL = "#";
TL = String.Concat(TL, FmtRed);
TL = String.Concat(TL, FmtGreen);
TL = String.Concat(TL, FmtBlue);
txtLink.Text = TL;
txtLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexLink = txtLink.Text;
}
else if (rdoActiveLink.Checked == true)
{
string AL = "#";
AL = String.Concat(AL, FmtRed);
AL = String.Concat(AL, FmtGreen);
AL = String.Concat(AL, FmtBlue);
txtActiveLink.Text = AL;
txtALinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexALink = txtActiveLink.Text;
}
else if (rdoVisitedLink.Checked == true)
{
string VL = "#";
VL = String.Concat(VL, FmtRed);
VL = String.Concat(VL, FmtGreen);
VL = String.Concat(VL, FmtBlue);
txtVisitedLink.Text = VL;
txtVLinkPreview.ForeColor=Color.FromArgb(255-scrRed.Value,255-scrGreen.Value,255-scrBlue.Value);
HexVLink = txtVisitedLink.Text;
}
string BD = "<body bgcolor=\"";
BD = String.Concat(BD, HexBG);
BD = String.Concat(BD, "\" text=\"");
BD = String.Concat(BD, HexText);
BD = String.Concat(BD, "\" link=\"");
BD = String.Concat(BD, HexLink);
BD = String.Concat(BD, "\" alink=\"");
BD = String.Concat(BD, HexALink);
BD = String.Concat(BD, "\" vlink=\"");
BD = String.Concat(BD, HexVLink);
BD = String.Concat(BD, "\">");
txtResult.Text = BD;
}

Ahora para saber que opción tenemos seleccionada actualmente, si el fondo, texto, links, etc.:

internal void ClickOption(System.Drawing.Color Clr, String Result)
{
int red, green, blue;
pnlPreview.BackColor = Clr;
red = 255 - pnlPreview.BackColor.R;
green = 255 - pnlPreview.BackColor.G;
blue = 255 - pnlPreview.BackColor.B;
scrRed.Value = red;
scrGreen.Value = green;
scrBlue.Value = blue;
txtRed.Text = red.ToString();
txtGreen.Text = green.ToString();
txtBlue.Text = blue.ToString();
Result = String.Concat(Result, "#");
Result = String.Concat(Result, red.ToString("X"));
Result = String.Concat(Result, green.ToString("X"));
Result = String.Concat(Result, blue.ToString("X"));
}

Ahora sí empezamos con los componentes los primeros serán los ScrollBar, he aquí el primero:

private void scrRed_Scroll(object sender, ScrollEventArgs e)
{
ApplyColor();
}

Como el código de las 3 ScrollBar es el mismo utilizaremos el mismo evento para todos. Para hacer esto seleccionamos el segundo ScrollBar y en la ventana de Propiedades nos vamos a la pestaña Eventos (es donde está la imágen del relámpago) y en el evento Scroll seleccionamos la opción scrRed_Scroll. Realizamos lo mismo con el ScrollBar restante. Luego sigue la codificación de los RadioButton, damos doble clic en el que dice Background y escribimos el siguiente código en el evento:

private void rdoBackground_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
pnlBody.BackColor = BGColor;
ClickOption(pnlBody.BackColor, txtBackground.Text);
HexBG = txtBackground.Text;
}

Ahora seleccionamos el RadioButton con la etiqueta Text:

private void rdoText_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtTextPreview.BackColor = BGColor;
ClickOption(txtTextPreview.ForeColor, txtText.Text);
HexText = txtText.Text;
}

El que sigue es el RadioButton que tiene la etiqueta Link:

private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtALinkPreview.BackColor = BGColor;
ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
HexALink = txtActiveLink.Text;
}

Enseguida damos doble clic en el que está etiquetado como ActiveLink:

private void rdoActiveLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtALinkPreview.BackColor = BGColor;
ClickOption(txtALinkPreview.ForeColor, txtActiveLink.Text);
HexALink = txtActiveLink.Text;
}

Finalmente para terminar con los RadioButton damos doble clic en el que está etiquetado como VisitedLink:

private void rdoVisitedLink_CheckedChanged(object sender, EventArgs e)
{
Color BGColor = pnlBody.BackColor;
txtVLinkPreview.BackColor = BGColor;
ClickOption(txtVLinkPreview.ForeColor, txtVisitedLink.Text);
HexVLink = txtVisitedLink.Text;
}

Para terminar codificaremos los botones, primero escribimos el siguiente código en el botón con el texto Copy:

private void btnCopy_Click(object sender, EventArgs e)
{
txtResult.SelectAll();
txtResult.Copy();
}

Y por último escribimos en el botón Close el código que tenemos a continuación:

private void btnClose_Click(object sender, EventArgs e)
{
Close();
}

Y ahora guardan su aplicación y la corren presionando ctrl+F5 o simplemente F5, el resultado será algo como lo siguiente:

Bueno amigos pues eso fue todo, espero que todo haya salido bien y que la aplicación les sirva para poder utilizarla más adelante en el diseño de alguna página web en HTML que quieran realizar. Por hoy me despido y espero que sigamos en contacto para seguir con más aplicaciones gráficas, la mayoría en C++ pero también algunas más en C#. Nos vemos chavos!.

Manipulación De Colores Con Corrimientos

2012-02-28T18:09:00.001-06:00

Hola chavos! Aquí estoy de nuevo para continuar realizando aplicaciones gráficas con C++ Builder.

Bien pues no se si recuerdan que hace algún tiempo realizamos una aplicación en consola en C++ en la que comprobamos el funcionamiento de los corrimientos de bits. Sino lo recuerdan pues más vale que echen un vistazo unas entradas atrás o a sus aplicaciones guardadas ya que lo utilizaremos para realizar esta aplicación. Nuestra aplicación lo que hará será colorear un PaintBox según el botón que presionemos manipulando los colores por separado y no conjuntamente con el RGB como lo veníamos haciendo anteriormente. Precisamente para poder manipular los colores por separado será para lo que utilizaremos los corrimientos en esta ocasión.

Primeramente prepararemos la Forma, la cual tenemos que cambiar el color a negro (aunque es por gusto, si desean no hacerlo pueden dejarla como esta), cambiando la propiedad color a clBlack. Los componentes que tenemos que tener son los siguientes:

-1 Shape
-1 PaintBox (el cual tenemos que colocar sobre el shape)
-3 botones
-3 Timers

La Forma en mi caso quedo de la siguiente manera (aunque saben que cada quien puede tener su propio diseño):

Bueno pues comenzamos con la programación de los componentes, primeramente lo haremos con el primer botón que contiene la cadena "ROJO", en él colocamos el siguiente código:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer2->Enabled = false;
Timer3->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------

Con el anterior código lo que hacemos es refrescar el PaintBox para volver a pintarlo, así mismo habilitamos el primer Timer y deshabilitamos 2 restantes. Ahora continuamos con el segundo botón que contiene la cadena "VERDE" y escribimos el código que tenemos a continuación:

void __fastcall TForm1::Button2Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer3->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------

Al igual que el botón anterior primero refrescamos el PaintBox para volverlo a pintar y habilitamos el segundo Timer mientras deshabilitamos los otros 2. Luego codificamos el tercer y último botón, él cual contiene la leyenda "AZUL", el código es el siguiente:

void __fastcall TForm1::Button3Click(TObject *Sender)
{
PaintBox1->Refresh();
Timer1->Enabled = false;
Timer2->Enabled = false;
Timer3->Enabled = true;
}
//---------------------------------------------------------------------------

Este último realiza una función similar a los anteriores, refresca el PaintBox y habilita el tercer Timer para deshabilitar los otros 2. Después comenzamos con la codificación de los Timers, a continuación tenemos el Timer1:

void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100) + 155;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------

Este código como vemos lo que hace es dibujar 10,000 pixeles en algún lugar aleatorio dentro del PaintBox. El color lo definimos con números aleatorios entre 0 y 100 y luego le sumamos 155 para asegurarnos de obtener una tonalidad en rojo. Ahora codificamos el Timer2:

void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 8;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------

El código es parecido al anterior ya que igualmente dibujamos pixeles aleatoriamente dentro del PaintBox. Solo que en este botón el color además de definirlo con un número aleatorio y sumarle 155, le realizamos un corrimiento de 8 bits hacia la izquierda, para mover todos los bits hacia la izquierda y de esa manera cambiar todas las tonalidades de rojo a verde. Finalmente codificamos el Timer3:

void __fastcall TForm1::Timer3Timer(TObject *Sender)
{
int color;
randomize();
for(int i=0; i<10000; i++)
{
color = random(100)+155;
color <<= 16;
PaintBox1->Canvas->Pixels[random(PaintBox1->Width)][random(PaintBox1->Height)] = (TColor)color;
}
}
//---------------------------------------------------------------------------

Con este código se realiza una función similar a la anterior, calculando primero un número aleatorio y luego realizandole un corrimiento de 16 bits a la izquierda para asegurarnos de cambiar todos los colores rojos a azules.

Para terminar solo compilamos el programa y lo corremos y observamos el resultado:

Bien amigos pues por hoy es todo espero que hayan aprendido a manipular los colores de manera independiente. Ahora que conocemos ambas maneras de manejar los colores tendremos la oportunidad de elegir que manera queremos utilizar dependiendo de cual necesitemos o cual se nos haga mas sencillo. Yo los espero en la próxima para continuar con las aplicaciones. Hasta la vista amigos!.

Manipulación Y Manejo De Colores

2012-02-26T15:45:00.000-06:00

Hola de nuevo amigos, ya estoy de nueva cuenta aquí para seguir realizando más aplicaciones gráficas en C++ Builder.

Bien pues en esta ocasión haremos una aplicación para mostrar un poco más sobre el manejo de los colores en C++. Será bastante sencillo pero muy importante para más adelante usarlo.

Bueno pues comenzamos como siempre con los componentes que necesitamos colocar en la Forma, los cuales los listamos a continuación:

-3 Labels
-3 TrackBar (con valores de 0 a 255)
-1 Panel
-1 Shape
-3 BitBtn (los cuales son como los botones normales pero a estos les podemos colocar una imágen personalizada en su propiedad Glyph)

La Forma en mi caso queda de la siguiente manera, aunque ustedes pueden acomodar sus componentes como gusten:

Ahora comenzamos con la codificación de los componentes correspondientes. El primero que necesitamos será el TrackBar1, damos clic en él y escribimos el siguiente código:

void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
Panel1->Color=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
//---------------------------------------------------------------------------

Para ahorrar espacio y no escribir tanto código utilizaremos el evento del TrackBar1 para los 2 restantes, ya que para todos el código es el mismo. Lo anterior lo haremos seleccionando uno de los TrackBar que no tienen código, luego en el Object Inspector que se encuentra en la parte inferior izquierda cambiamos a la pestaña Events y en la lista desplegable del evento OnChange seleccionamos la opción TrackBar1Change. Hacemos lo mismo con el último TrackBar.

Ahora damos doble clic en el botón que dice "Rojo", y escribimos el siguiente código:

void __fastcall TForm1::BitBtn1Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(255,0,0);
}
//---------------------------------------------------------------------------

Con lo anterior dibujamos 15,000 puntos de color rojo en un lugar aleatorio dentro del área del Shape. Luego damos doble clic en el botón "Verde" y escribimos el código siguiente:

void __fastcall TForm1::BitBtn2Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
Randomize();
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,255,0);
}
//---------------------------------------------------------------------------

Con esto lo que hacemos es dibujar en posiciones aleatorias 15,000 puntos de color verde dentro del área del Shape. Ahora en el ultimo BitbBtn que dice "Azul", escribimos este código:

void __fastcall TForm1::BitBtn3Click(TObject *Sender)
{
TRect Rect(0,0,Image1->Width,Image1->Height);
Image1->Canvas->FillRect(Rect);
for (int i=0; i<15000; i++)
Image1->Canvas->Pixels[random(Image1->Width)][random(Image1->Height)]=(TColor)RGB(0,0,255);
}
//---------------------------------------------------------------------------

Esto lo que hará sera dibujar 15,000 puntos en algún lugar aleatorio dentro del área del Shape.

Finalmente abrimos el evento OnCreate de la forma y en él escribimos el siguiente código que nos servirá para evitar el parpadeo al momento de repintar los componentes:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
this->DoubleBuffered=true;
Randomize();
}
//---------------------------------------------------------------------------

Ya para terminar compilan y corren su aplicación y el resultado debe ser algo como lo siguiente:

Bueno amigos pues por hoy eso es todo, nos vemos la próxima ocasión para realizar otra aplicación de graficación en C++ Builder. Hasta la próxima chavos.

Pixel En Movimiento

2012-02-25T17:20:00.001-06:00

Hola amigos! Aquí ando de nueva cuenta para seguir mostrándoles ejemplos de aplicaciones gráficas en C++ Builder y así seguir aprendiendo cada vez más cosas nuevas.

Bueno pues en esta ocasión realizaremos una aplicación para crear un pixel y moverlo alrededor del perímetro de la forma, y cada vez que complete la vuelta volverá a hacer los mismo pero cada vez más hacia el centro, formando el llamado efecto serpiente.

Para realizar esta aplicación lo que necesitamos es pintar la forma de color negro cambiando la propiedad Color a clBlack. Por esta vez el único componente que necesitaremos en la forma será un Timer.

Ahora nos vamos al archivo H y en las declaraciones de usuario declaramos lo siguiente:

private: // User declarations
POINTS Puntos[1000];
int inicioX;
int inicioY;
int fin;

Bien, habiendo realizado lo anterior procedemos con la codificación de el único componente que tenemos en la forma, es decir, el Timer, en él escribimos el siguiente código:

void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
if(Puntos[0].x <= ClientWidth && Puntos[0].y == inicioY)
{
Puntos[0].x++;
}
if(Puntos[0].x == ClientWidth - fin)
{
Puntos[0].y++;
}
if(Puntos[0].y == ClientHeight - fin)
{
Puntos[0].x--;
if(Puntos[0].x == inicioY + 2)
{
inicioY = inicioY + 2;
}
}
if(Puntos[0].x == inicioY)
{
Puntos[0].y--;
if(Puntos[0].y == inicioX+2)
{
inicioX = inicioX + 2;
fin = fin + 2;
}
}
Canvas->Pixels[Puntos[0].x][Puntos[0].y] = clYellow;
}
//---------------------------------------------------------------------------

En la línea final del código podemos notar que el color lo tenemos siempre que corramos el programa en amarillo, ustedes pueden cambiar esa parte del código y poner el color que más les guste si así lo desean.

Ahora necesitamos 2 eventos, el primero de ellos es el evento OnCreate de la forma, lo abrimos y colocamos el siguiente código:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
inicioX = 0;
inicioY = 0;
fin = 1;
}
//---------------------------------------------------------------------------

Con este código lo que hacemos es inicializar las variables, ahora el segundo evento que necesitamos es el llamado OnResize, también de la forma, una vez que lo hayamos abierto colocamos el siguiente código en él:

void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------

Con esto redimensionamos todo en caso de que la forma cambie de tamaño.

Y pues ya saben lo que sigue chavos, compilan y corren su aplicación y debería verse de la siguiente manera:

Espero que pueda notarse el efecto del movimiento del pixel en la parte superior e izquierda de la forma, sino es así pues ya verán en su aplicación el efecto que genera al ir simulando el movimiento.

Pues en esta ocasión fue todo amigos, continúen practicando lo que hemos aprendido hasta ahora y nos vemos en la próxima para seguir realizando más aplicaciones en C++ Builder. Nos vemos amigos!

Efecto Spray

2012-02-23T16:43:00.001-06:00

Hola de nuevo amigos! Me alegro de saludarlos y pues en esta ocasión continuaremos con las aplicaciones gráficas en C++ Builder. El programa que realizaremos en esta ocasión será el famoso efecto de spray que puede tomar la brocha en el programa paint de Windows, ya alguna vez debieron de haberlo utilizado.

Pues empezamos con nuestra aplicación y lo primero que necesitamos es cambiar el color de la forma a blanco en su propiedad Color cambiamos el valor por defecto a clWhite. Después colocamos los siguientes componentes en la forma:

-1 GroupBox
-4 etiquetas o Labels
-3 TrackBar
-1 Edit o caja de texto
-1 UpDown

La forma debe quedar de la siguiente manera:

Lo primero que necesitamos es asociar al UpDown con el Edit. Luego configuramos los valores del UpDown en 0 como mínimo y 100 como máximo.

Bien pues en esta aplicación trabajaremos sobre los eventos de la forma, especialmente en 2. El primero de ellos es el evento OnMouseDown de dicha forma, en él escribimos el siguiente código:

void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
for(int N = 0; N < 100; N++)
{
Puntos[N].x = random(Edit1->Text.ToInt()) + X;
Puntos[N].y = random(Edit1->Text.ToInt()) + Y;
Canvas->Pixels[Puntos[N].x][Puntos[N].y]=(TColor)RGB(TrackBar1->Position,TrackBar2->Position,TrackBar3->Position);
}
}
//---------------------------------------------------------------------------

El código anterior nos sirve para dibujar de manera aleatoria los pixeles y simular el efecto spray de la brocha con el color dependiendo de las posiciones de los TrackBar, siendo cada una de éstas uno de los valores del RGB. Ahora abrimos el evento OnMouseMove de la forma y tecleamos el código que tenemos a continuación:

void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
if(Shift.Contains(ssLeft))
{
FormMouseDown(Sender, mbLeft, Shift, X, Y);
}
}
//---------------------------------------------------------------------------

En el evento anterior lo que hacemos es llamar al evento FormMouseMove cada vez que se mueve el cursor del mouse sobre la forma, dibujando los pixeles aleatorios por cada parte de la forma por la que se mueve el mouse.

Ahora compilamos nuestra aplicación y la corremos para observar nuestro resultado:

De ésta manera descubrimos que los efectos que se generan en programas como el paint de Windows no son por obra de magia sino que son efectos que nosotros podemos programar. Y bueno pues por esta ocasión es todo por mi parte, espero que hayamos aprendido un poco más de lo que ya sabíamos y nos vemos en la siguiente ocasión para seguir con más aplicaciones. Hasta luego amigos!

Corrimientos En Consola

2012-02-22T17:05:00.000-06:00

Hola amigos, por esta ocasión tengo un poco de prisa así que haremos otra aplicación sencilla pero que nos servirá para realizar aplicaciones más adelante.

Lo que vamos a ver en esta ocasión serán las operaciones con bits llamadas corrimientos. Se preguntarán ustedes, ¿qué son los corrimientos?. Bueno pues son operaciones a nivel de bits representadas con los operadores "<<" (corrimiento a la izquierda) y ">>" (corrimiento a la derecha). Ambos operadores lo único que hacen es mover los bits del operando de la izquierda el número de posiciones indicadas por el operador de la derecha. Dichos desplazamientos ocurren en la dirección indicada por el mismo operador.

Pues ahora realizaremos una aplicación para mostrar un ejemplo de corrimientos con bits. La diferencia con las aplicaciones pasadas es que esta vez no la realizaremos en el modo visual sino en el modo consola.

Primeramente abrimos el C++ Builder 6 y le damos clic a la opción "File" de la barra de menús, después seleccionamos "Other..." y en la nueva ventana que se abre buscamos la opción "Console Wizard". Al darle clic en "OK" se abrirá otra ventana, en ella seleccionamos la opción C++ y damos "OK".

Ahora tendremos el método main con una linea de código por default, lo primero que tenemos que hacer es borrar dicha línea de código y escribir las siguientes:

int main(int argc, char* argv[])
{
int a=1;
cout<<"Valor de a: "<<a;
a=a<<8;
cout<<"\nValor de a: "<<a;
cin.get();
}
//---------------------------------------------------------------------------

Bueno pues vemos que primero le asignamos a la variable "a" el valor de 1, luego imprimimos en pantalla ese valor, después aplicamos el corrimiento de dicho valor 8 bits a la izquierda e imprimimos de nuevo el valor en pantalla.

Compilamos nuestra aplicación y la corremos y tendremos lo siguiente:

Bueno chavos por hoy es todo, espero que comprendan, la próxima ocasión realizaremos otra aplicación en modo visual de graficación con C++. Hasta la vista amigos!.

Copiar Texto

2012-02-20T16:09:00.000-06:00

Hola chavos! Espero que sigan practicando mucho con el C++ Builder y que ya se consideren todos unos buenos programadores de aplicaciones gráficas en C++.

Pues en esta ocasión mostraremos algo muy sencillo y muy rápido de hacer, esto es bastante simple en comparación con aplicaciones pasadas, pero siempre es bueno mostrar otras maneras diferentes de hacer las cosas. En este aplicación les enseñare 2 distintas maneras de copiar texto, primero de un Edit (o textBox como se le conoce en C#) a un label y después de un Edit a otro Edit.

Para realizar esta aplicación necesitaremos colocar los siguientes componentes en la forma:
-2 botones
-3 cajas de texto (Edit)
- 1 etiqueta (label)

Los podemos acomodar de la siguiente manera:

Bueno pues comenzamos con el código que es bastante sencillo y simple, primero colocamos el siguiente código en el evento clic del primer botón, el cual nos servirá para copiar el texto del primer Edit al label que tenemos:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
char *cad = new char[Edit1->Text.Length()];
strcpy(cad, Edit1->Text.c_str());
Label1->Caption = cad;
}
//---------------------------------------------------------------------------

En el código anterior podemos notar que utilizamos un arreglo de char llamado *cad, que es un puntero. Utilizamos la función strcpy() para poder copiar el texto del Edit en el arreglo de char, finalmente asignamos el arreglo a la propiedad Caption del label para escribirlo en la etiqueta.

Ahora escribimos el código del segundo botón:

void __fastcall TForm1::Button2Click(TObject *Sender)
{
int n = Edit2->Text.ToIntDef(30);
if( n>29 && n<100)
Edit3->Text = Edit2->Text;
}
//---------------------------------------------------------------------------

Bueno pues en este botón lo primero transformamos el texto escrito en el Edit2 en variables enteras y finalmente verificamos si son letras y si esto es así copiamos el texto del Edit2 al Edit3.

Por último la aplicación corriendo debería ser algo como lo siguiente:

Bueno amigos por hoy fue todo, solo realizamos esta simple aplicación pero pues todo nos sirve para algo, así que nos vemos en la próxima. Hasta luego!.

Diseño De Un ScreenSaver

2012-02-19T16:54:00.000-06:00

Hola de nuevo chavos! Es hora de continuar con la creación de aplicaciones de graficación en C++ Builder y para esta ocasión lo que haremos será mostrar como de manera simple se puede crear un protector de pantalla en el cual se irán dibujando de manera aleatoria figuras que tendremos contenidas en archivos bmp, para hacer esto utilizaremos un arreglo de objetos de tipo TBitmap.

Las 10 imágenes bmp que utilizaremos pueden ser diseñadas por uno mismo o pueden ser descargadas de internet como se desee.

Bueno pues para comenzar lo único que necesitamos de componentes en la forma es un Timer:

Una vez echo esto vamos a la propiedad WndowState de la forma y cambiamos su valor por: wsMaximized. Y en la propiedad BorderStyle de la forma elegimos lo siguiente: bsNone.

Ahora declaramos el arreglo en el que tendremos las imágenes que se mostraran en el protector de pantalla, para esto vamos a el archivo H de la forma y declaramos el arreglo, a estas alturas ya deberíamos de saber cómo hacerlo:

class TForm1 : public TForm
{
__published: // IDE-managed Components
TTimer *Timer1;
void __fastcall Timer1Timer(TObject *Sender);
void __fastcall FormCreate(TObject *Sender);
void __fastcall FormKeyPress(TObject *Sender, char &Key);
void __fastcall FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y);
private: // User declarations
Graphics::TBitmap *ImageObject[10];
public: // User declarations
__fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------

El siguiente código lo escribimos en el siguiente evento: __fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner), éste es el pequeño código que se crea cuando iniciamos una nueva aplicación visual en C++ Builder, dentro de él escribimos el código:

__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
ImageObject[0] = new Graphics::TBitmap;
ImageObject[0]->LoadFromFile("Image1.bmp");
ImageObject[0]->Transparent = True;
ImageObject[1] = new Graphics::TBitmap;
ImageObject[1]->LoadFromFile("Image2.bmp");
ImageObject[1]->Transparent = True;
ImageObject[2] = new Graphics::TBitmap;
ImageObject[2]->LoadFromFile("Image3.bmp");
ImageObject[2]->Transparent = True;
ImageObject[3] = new Graphics::TBitmap;
ImageObject[3]->LoadFromFile("Image4.bmp");
ImageObject[3]->Transparent = True;
ImageObject[4] = new Graphics::TBitmap;
ImageObject[4]->LoadFromFile("Image5.bmp");
ImageObject[4]->Transparent = True;
ImageObject[5] = new Graphics::TBitmap;
ImageObject[5]->LoadFromFile("Image6.bmp");
ImageObject[5]->Transparent = True;
ImageObject[6] = new Graphics::TBitmap;
ImageObject[6]->LoadFromFile("Image7.bmp");
ImageObject[6]->Transparent = True;
ImageObject[7] = new Graphics::TBitmap;
ImageObject[7]->LoadFromFile("Image8.bmp");
ImageObject[7]->Transparent = True;
ImageObject[8] = new Graphics::TBitmap;
ImageObject[8]->LoadFromFile("Image9.bmp");
ImageObject[8]->Transparent = True;
ImageObject[9] = new Graphics::TBitmap;
ImageObject[9]->LoadFromFile("Image10.bmp");
ImageObject[9]->Transparent = True;
}
//---------------------------------------------------------------------------

Después viene el código que escribiremos en el evento del Timer que colocamos en la forma:

void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
int x = random(Width-100);
int y = random(Height-150);
Canvas->Draw(x-60, y-60, ImageObject[random(10)]);
}
//---------------------------------------------------------------------------

El código anterior nos sirve para calcular de forma aleatoria el lugar donde se colocara la imágen cuando aparezca en el protector de pantalla.

Luego abrimos el evento OnCreate de la forma y en el escribimos el código para mantener el cursor oculto mientras este activo el protector de pantalla:

void __fastcall TForm1::FormCreate(TObject *Sender)
{
ShowCursor(FALSE);
}
//---------------------------------------------------------------------------

Ahora abrimos el evento OnKeyPress también de la forma para que el protector de pantalla se cierre si presionamos alguna tecla:

void __fastcall TForm1::FormKeyPress(TObject *Sender, char &Key)
{
Close();
}
//---------------------------------------------------------------------------

Finalmente abrimos otro evento de la forma que sería el OnMouseMove en el cual colocamos el código para que cuando se mueva el cursor del mouse se cierre el protector de pantalla:

void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
static int MoveCounter = 0;
if( MoveCounter >= 15 )
Close();
MoveCounter++;
}
//---------------------------------------------------------------------------

Y pues eso es todo, ¿muy fácil verdad? pues lo siguiente es compilar y correr nuestro programa y deberíamos obtener algo como lo siguiente:

Bueno amigos pues por esta ocasión sería todo pero ya saben, nos vemos más adelante para seguir mostrando ejemplos de aplicaciones en C++ Builder. Hasta la próxima chavos!

Objetos Gráficos

2012-02-18T17:43:00.000-06:00

Hola chavos aquí de nuevo saludándolos y comenzando con una nueva aplicación de graficación en C++ Builder. Bueno pues en esta ocasión realizaremos una aplicación para mostrar como dibujar los objetos gráficos más comunes como lo son: rectángulo, elipse, pie, arco, trazo de lineas, entre otros. Además también veremos cómo modificar el color y estilo de la brocha así como el color y estilo de la pluma.

Bueno pues esta aplicación contiene muchos componentes en la forma, así que empezemos por ir colocándolos, tales componentes son los siguientes:

-Un panel con la propiedad Caption en "cadena vacía" y el color clTeal.
-Un label que su propiedad Caption sea "Objeto Gráfico"
-Un ComboBox en el cual su propiedad Texto se la borramos, y en la colección de items escribimos la siguiente lista:
*Línea
*Rectángulo
*Rectángulo Redondeado
*Elipse
*Circulo
*Pie
*Arco
-Otro panel dentro del panel anterior con la propiedad Caption como cadena vacía.
-Un label dentro del segundo panel con la propiedad Caption con la cadena "Brocha"
-Otro label dentro del segundo panel con la palabra "Estilo" en la propiedad Caption
-Un ComboBox también dentro del segundo panel también con la propiedad Texto borrada, y en su lista de items escribimos la siguiente:
*Sólido
*Transparente
*Horizontal
*Vertical
*Diagonal Derecha
*Diagonal Izquierda
*Cuadrícula
*Cuadrícula Diagonal
-Otro label más dentro del segundo panel con el valor "Color" en su propiedad Caption
-Un SpeedButton en el cual colocamos en su propiedad Glyph un archivo bmp que hayamos creado nosotros mismos (lo anterior lo podemos realizar desde el Image Editor, accesible desde el menú Tools del C++ Builder 6)
-Colocamor un tercer panel dentro del panel principal que habíamos colocado al principio al igual que los anteriores con la propiedad Caption vacía.
-Dentro de éste último panel colocamos un label cuya propiedad Caption sea "Pluma"
-Otro label dentro del mismo panel que el anterior con la propiedad Caption "Estilo"
-Un ComboBox dentro del tercer panel con la propiedad Caption vacía y en su lista de ítems agregamos los siguientes elementos:
*Sólido
*Dash
*Dot
*DashDot
*DashDotDot
*Clear
*InsideFrame
-Un label más con la palabra "Color" en su propiedad Caption
-También dentro del tercer panel un SpeedButton con una imágen bmp personalizada en su propiedad Gylph
-Finalmente dentro del panel principal que habíamos puesto al principio colocamos un ColorDialog

Como siempre todos estos componentes pueden ser acomodados de la manera que ustedes quieran pero en mi caso yo los acomode de la manera siguiente:

Enseguida comenzamos con la codificación de los componentes, realmente el código no es tan grande, ya que la mayoría de los componentes que pusimos fueron más que nada para cuestiones de diseño y de buena presentación de la aplicación.

Primeramente colocamos en el primer ComboBox que pusimos el código siguiente, el cual nos servirá para dibujar los objetos gráficos en la forma:

void __fastcall TForm1::ComboBox1Change(TObject *Sender)
{
Repaint();
switch(ComboBox1->ItemIndex)
{
case 0: Canvas->MoveTo(100,100);
Canvas->LineTo(300,200);//Linea
break;
case 1: Canvas->Rectangle(250,100,450,200);//Rectangulo
break;
case 2: Canvas->RoundRect(250,100,450,200,10,10);//Rectangulo Redondeado
break;
case 3: Canvas->Ellipse(250,100,450,200);//Elipse
break;
case 4: Canvas->Ellipse(250,50,450,250);//Circulo
break;
case 5: Canvas->Pie(250,50,450,250,350,50,450,100);//Pie
break;
case 6: Canvas->Arc(250,100,450,200,420,180,350,100);//Arco
break;
}
}
//---------------------------------------------------------------------------

Ahora colocamos el código en el segundo ComboBox que pusimos, este código servirá para cambiar el estilo de la brocha, es decir, del relleno del objeto, y después redibujará automáticamente el objeto gráfico con el nuevo estilo de brocha:

void __fastcall TForm1::ComboBox2Change(TObject *Sender)
{
switch(ComboBox2->ItemIndex)
{
case 0: Canvas->Brush->Style = bsSolid;
break;
case 1: Canvas->Brush->Style = bsClear;
break;
case 2: Canvas->Brush->Style = bsHorizontal;
break;
case 3: Canvas->Brush->Style = bsVertical;
break;
case 4: Canvas->Brush->Style = bsFDiagonal;
break;
case 5: Canvas->Brush->Style = bsBDiagonal;
break;
case 6: Canvas->Brush->Style = bsCross;
break;
case 7: Canvas->Brush->Style = bsDiagCross;
break;
}
ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------

Después colocamos el código que tenemos a continuación en el tercer ComboBox que colocamos, con él podremos cambiar el estilo de la pluma, es decir del contorno de el objeto, para después redibujar automáticamente el objeto gráfico en la forma con el nuevo estilo de pluma:

void __fastcall TForm1::ComboBox3Change(TObject *Sender)
{
switch(ComboBox3->ItemIndex)
{
case 0: Canvas->Pen->Style = psSolid;
break;
case 1: Canvas->Pen->Style = psDash;
break;
case 2: Canvas->Pen->Style = psDot;
break;
case 3: Canvas->Pen->Style = psDashDot;
break;
case 4: Canvas->Pen->Style = psDashDotDot;
break;
case 5: Canvas->Pen->Style = psClear;
break;
case 6: Canvas->Pen->Style = psInsideFrame;
break;
}
ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------

Luego damos doble clic en el primer SpeedButton que colocamos y escribimos el siguiente código, con el cual cambiaremos el color a la brocha y después se redibujará el objeto gráfico con el nuevo color elegido:

void __fastcall TForm1::SpeedButton1Click(TObject *Sender)
{
if(ColorDialog1->Execute())
Canvas->Brush->Color = ColorDialog1->Color;
ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------

Finalmente codificamos el último SpeedButton que colocamos, para esto utilizaremos el siguiente código con el cual cambiaremos el color de la pluma para que al igual que los componentes anteriores se redibuje el objeto gráfico en la forma con el nuevo color de pluma elegido:

void __fastcall TForm1::SpeedButton2Click(TObject *Sender)
{
if(ColorDialog1->Execute())
Canvas->Pen->Color = ColorDialog1->Color;
ComboBox1Change(Sender);
}
//---------------------------------------------------------------------------

Pues ese fue todo el código que necesitamos amigos, ahora compilamos y corremos nuestra aplicación y debe de funcionar de maravilla:

Pues si funcionó su aplicación felicidades chavos!! y si no fue así pues revisen bien para ver que errores pueden haber cometido. Por mi parte esto fue todo por hoy y nos vemos en la siguiente ocasión para continuar con aplicaciones de graficación en el C++ Builder.

Escribir Texto Con Angulo De Rotación (Versión 2)

2012-02-16T19:45:00.000-06:00

Hola amigos!!! Espero que estén de lo mejor y pues es hora de continuar con más aplicaciones de graficación en C++ Builder. Creo que aun recuerdan la aplicación que realizamos la ocasión pasada en la cual escribiamos una cadena de texto en la forma. Bueno pues ahora trabajaremos con esa misma aplicación como base y la modificaremos de manera que el texto gire en su propio eje en el sentido de las manecillas del reloj y en sentido contrario, además de poder girarlo en el ángulo que nosotros deseemos.

Para comenzar con la aplicación debemos modificar la forma de manera que debemos de tener los siguientes componentes:

-2 botones (los mismos que teníamos en la aplicación pasada)
-1 label
-1 TrackBar (con valor mínimo de 0 y máximo de 255)
-2 timers

Los componentes pueden acomodarlos con el diseño que quieran, en este caso yo los acomodé de la siguiente manera:

Ahora empezamos con la codificación de la aplicación, primeramente abrimos el archivo H del programa y declaramos las siguientes variables (ya vimos como y dónde hacerlo en aplicaciones pasadas):

private: // User declarations
int n, n2;

A continuación escribimos el código del botón para cerrar la aplicación, ya lo hemos visto antes muchas veces, y sabemos que es bastante sencillo:

void __fastcall TForm1::Button2Click(TObject *Sender)
{
Close();
}
//---------------------------------------------------------------------------

Enseguida escribimos el código del botón para mostrar texto:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
//Canvas->Font->Color = clBlue;
Canvas->Font->Size = 30; //Tamaño del Font
Canvas->Font->Name = "SimSun";//"Tahoma";//"Times Roman"; //Nombre del
// Font
//Declaramos una variable LOGFONT
LOGFONT lgfont;
GetObject(Canvas->Font->Handle, sizeof(LOGFONT), &lgfont);
//Propiedades que nos permiten modificar la orientación de la salida del Texto
lgfont.lfEscapement = n*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOrientation = n2*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOutPrecision = OUT_TT_ONLY_PRECIS;
//Creamos un font logico con las caracteristicas especificadas en la
//Estructura LOGFONT
//Consultar en la ayuda LOGFONT para conocer su definición
Canvas->Font->Handle = CreateFontIndirect(&lgfont);
SetGraphicsMode(Canvas->Handle, GM_ADVANCED);
String text = "Tec. De La Laguna";
Canvas->TextOut(ClientWidth/2,ClientHeight/2, text); //Dibujamos el Texto
}
//---------------------------------------------------------------------------

Notamos que las modificaciones que tiene respecto a la aplicación pasada es que el ángulo en que está escrito el texto y la orientación ahora tienen unos valores variables, los cuales declaramos en el archivo H.

A continuación tenemos el código del TrackBar:

void __fastcall TForm1::TrackBar1Change(TObject *Sender)
{
n = TrackBar1->Position;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------

Notamos que lo único que realiza el TrackBar es cambiar el valor de la variable n asignandole el valor de la posición que tiene el TrackBar y después mandamos llamar al evento Button1Click(Sender) para mostrar de nuevo el texto pero ahora con el nuevo ángulo del texto.

Ahora escribimos el código de los 2 timers, primero el código del Timer1:

void __fastcall TForm1::Timer1Timer(TObject *Sender)
{
n++;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------

Luego el código del Timer2:

void __fastcall TForm1::Timer2Timer(TObject *Sender)
{
n--;
n2++;
Refresh();
Button1Click(Sender);
}
//---------------------------------------------------------------------------

El código de los Timers lo que hará será girar el texto en sentido de las manecillas del reloj y en el sentido contrario. Los Timers se habilitan y se deshabilitan dando clic o doble clic en la forma, para esto utilizamos el código que tenemos a continuación:

void __fastcall TForm1::FormClick(TObject *Sender)
{
Timer2->Enabled = false;
Timer1->Enabled = true;
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormDblClick(TObject *Sender)
{
Timer1->Enabled = false;
Timer2->Enabled = true;
}
//---------------------------------------------------------------------------

Como podemos ver en el código al dar un clic en la forma deshabilitamos el Timer2 y habilitamos el Timer1 con lo que el texto girará en sentido contrario a las manecillas del reloj. Por el contrario si damos doble clic en la forma deshabilitamos el Timer1 y habilitamos el Timer2 con lo que el texto girará en sentido de las manecillas del reloj.

Compilamos nuestro programa y lo corremos, si hicimos todo de manera correcta nuestra aplicación se verá de la siguiente manera:

El texto podemos moverlo automáticamente desde el TrackBar o automáticamente dando clic o doble clic en la forma.

Y pues eso es todo por hoy chavos, espero que todo haya quedado claro y que hayamos aprendido algo. Nos vemos en la próxima ocasión para realizar una aplicación diferente y seguir aprendiendo cosas nuevas en C++ Builder. Hasta la próxima amigos!.

Escribir Texto Con Angulo De Rotación

2012-02-15T20:38:00.000-06:00

Hola de nuevo chavos!! Espero que estén de lo mejor y preparados para seguir con los ejercicios de graficación en C++ Builder.

Bueno pues en esta ocasión realizaremos algo rápido y simple pero que nos puede llegar a ser útil más adelante en otras aplicaciones. Nuestro ejemplo de hoy se tratará de escribir texto en la forma. Para realizar esto no necesitaremos de muchos componentes así que lo único que haremos será colocar 2 botones en la forma, la cual debería quedar así:

En el primer botón escribiremos el código para dibujar el texto en la forma y el segundo botón solo nos servirá para cerrar la forma.

Empezamos con el código y en el botón de Mostrar Texto escribimos el código que tenemos a continuación:

void __fastcall TForm1::Button1Click(TObject *Sender)
{
//Canvas->Font->Color = clBlue;
Canvas->Font->Size = 30; //Tamaño del Font
Canvas->Font->Name = "SimSun";//"Tahoma";//"Times Roman"; //Nombre del
// Font
//Declaramos una variable LOGFONT
LOGFONT lgfont;
GetObject(Canvas->Font->Handle, sizeof(LOGFONT), &lgfont);
//Propiedades que nos permiten modificar la orientación de la salida del Texto
lgfont.lfEscapement = 45*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOrientation = 45*10;//0;//-900;//45*10; //Angulo *10
lgfont.lfOutPrecision = OUT_TT_ONLY_PRECIS;
//Creamos un font logico con las caracteristicas especificadas en la
//Estructura LOGFONT
//Consultar en la ayuda LOGFONT para conocer su definición
Canvas->Font->Handle = CreateFontIndirect(&lgfont);
SetGraphicsMode(Canvas->Handle, GM_ADVANCED);
String text = "Tec. De La Laguna";
Canvas->TextOut(0,310, text); //Dibujamos el Texto
}
//---------------------------------------------------------------------------

Como vemos en el código podemos modificar el color, el tamaño y el tipo de letra del texto que vamos a escribir en la forma, además podemos elegir que cadena es la que imprimiremos en pantalla.

En el segundo botón lo único que haremos será cerrar la aplicación, por lo tanto el código será el que se muestra a continuación:

void __fastcall TForm1::Button2Click(TObject *Sender)
{
Close();
}
//---------------------------------------------------------------------------

Bueno pues ahora compilamos nuestra aplicación y corremos el programa y al dar clic en el botón con la leyenda "Mostrar Texto" nos tiene que dar algo como lo siguiente:

Bueno amigos pues esta aplicación nos podría servir en un futuro para crear presentaciones de nuestro programa y cosas así. En la próxima práctica que hagamos veremos como mover el texto, es decir que gire automáticamente, así que guarden su aplicación para realizar la siguiente y pues hasta entonces chavos!

Efecto Con Lineas (Versión 2)

2012-02-14T21:40:00.000-06:00

Hola amigos! Pues vamos a continuar con las aplicaciones en C++ Builder. Y pues en esta ocasión será algo tan rápido como la aplicación que realizamos la vez anterior y de hecho como les mencione en el post pasado utilizaremos la aplicación anterior como base para realizar la de ahora. Las modificaciones que le haremos a nuestra aplicación anterior será que ahora el centro del dibujo en lugar de estar en el centro de la forma, estará en el lugar en donde coloquemos el cursor del mouse.

Bueno pues al igual que la ocasión pasada en la forma no tenemos ningún componente ya que solo trabajaremos sobre eventos de la forma.

Bueno pues para ésta aplicación abrimos el archivo H de la aplicación y en la parte de las declaraciones de usuario privadas declaramos 2 enteros, en mi caso los llamé "x" y "y", debe quedar de la siguiente manera:

private: // User declarations
int x, y;

Bueno pues ahora abrimos el evento OnPaint de la forma y colocamos el código que se muestra a continuación:

void __fastcall TForm1::FormPaint(TObject *Sender)
{
int CentroX, CentroY, Contador = 0;
// Líneas con trazo discontinuo
Canvas->Pen->Style = psSolid;//psDot;//psDashDotDot;;//psDashDot;//psDash;
// Calcular el centro del área de dibujo
CentroX = x;
CentroY = y;
// Recorrer toda la anchura del área de dibujo
while (Contador < ClientWidth) {
// Trazando líneas desde el centro
// hasta los bordes superior e inferior
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, 0);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, ClientHeight);
Contador += 10; // Incrementar el contador
}
Contador = 0; // Contador de nuevo a cero
// Para recorrer la altura del área de dibujo
while (Contador < ClientHeight)
{
// Trazando líneas desde el centro
// hasta los bordes izquierdo y derecho
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(0, Contador);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(ClientWidth, Contador);
Contador += 10; // Incrementar el contador
}
Invalidate(); //sirve para el movimiento del centro con el mouse
this->DoubleBuffered=true; //reduce el parpadeo
}
//---------------------------------------------------------------------------

Bueno pues los únicos cambios que tenemos en el código es que al momento de calcular el centro del área de dibujo, en lugar de que sean el centro del ancho y alto de la forma serán unos valores X y Y, que es donde está ubicado el cursor del mouse. Así mismo podemos notar que al final tenemos 2 lineas de código más; la primera línea sirve para refrescar la imágen cuando se mueva el cursor dentro de la forma, y la segunda línea de código nos sirve para reducir notablemente el parpadeo, ya que sin ésta se vería de la imágen parpadearía cada vez que movamos el cursor al estarse redibujando.

Ahora abrimos el evento OnResize de la forma y escribimos lo siguiente:

void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------

Esto nos sirve para redimensionar las lineas trazadas en caso de que la ventana donde está ejecutándose la aplicación sea maximizada o cambiada de tamaño.

Finalmente abrimos el evento OnMouseMove y dentro del evento escribimos el código que a continuación tenemos:

void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
x = X;
y = Y;
}
//---------------------------------------------------------------------------

Con este evento lo que hacemos es obtener la posición del cursor del ratón cuando se mueve por encima de la forma y le asignamos esas posiciones a los valores enteros que antes ya habiamos declarado, después esos valores entero se asignan a el centro del área de dibujo para que se muevan las lineas cada vez que se mueve el cursor.

Ahora finalmente compilamos y corremos nuestra aplicación y debe verse algo por el estilo:

Bueno amigos pues analizen el código y entiendanlo ya que es importante que sepan que es lo que se está haciendo y porqué se esta haciendo, y pues piensen en que otras modificaciones podrían hacerse a la aplicación y traten de hacerlo. Eso es todo por hoy y nos vemos la próxima ocasión para continuar con más aplicaciones en C++ Builder, hasta la próxima amigos!!!.

Efecto Con Lineas

2012-02-13T17:07:00.000-06:00

Hola de nuevo amigos!! Bueno pues es hora de continuar con más aplicaciones en C++ Builder, en esta ocasión realizaremos una aplicación bastante sencilla y muy rápida.

Para este programa no utilizaremos ningún componente aparte de la forma, ya que todo lo que haremos será trazar lineas y aprovechar el escalonamiento que se produce en el trazo de las mismas para obtener un efecto en la salida.

Bueno pues lo primero es después de haber creado una nueva aplicación, abrir el evento OnPaint de la forma y en el escribir el siguiente código:

void __fastcall TForm1::FormPaint(TObject *Sender)
{
int CentroX, CentroY, Contador = 0;
// Líneas con trazo discontinuo
Canvas->Pen->Style = psSolid;//psDot;//psDashDotDot;;//psDashDot;//psDash;
// Calcular el centro del área de dibujo
CentroX = ClientWidth / 2;
CentroY = ClientHeight / 2;
// Recorrer toda la anchura del área de dibujo
while (Contador < ClientWidth) {
// Trazando líneas desde el centro
// hasta los bordes superior e inferior
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, 0);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(Contador, ClientHeight);
Contador += 4; // Incrementar el contador
}
Contador = 0; // Contador de nuevo a cero
// Para recorrer la altura del área de dibujo
while (Contador < ClientHeight)
{
// Trazando líneas desde el centro
// hasta los bordes izquierdo y derecho
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(0, Contador);
Canvas->MoveTo(CentroX, CentroY);
Canvas->LineTo(ClientWidth, Contador);
Contador += 4; // Incrementar el contador
}
}
//---------------------------------------------------------------------------

De esta manera dibujamos las lineas con el efecto que deseamos.

Ahora abrimos el evento OnResize también de la forma y colocamos el código que tenemos a continuación:

void __fastcall TForm1::FormResize(TObject *Sender)
{
Invalidate();
}
//---------------------------------------------------------------------------

Con esto se redimensionan las lineas que dibujamos en la forma en caso de que esta se maximíze o se cambie de tamaño.

Finalmente compilamos y corremos nuestra aplicación y tenemos que tener como resultado algo como lo que enseguida se muestra:

Bueno pues por esta ocasión es todo, ¿verdad que estuvo muy fácil?. Pues así poco a poco iremos aprendiendo cosas más difíciles. Por ultimo guarden la aplicación que realizaron porque la necesitaremos para la próxima ocasión trabajar sobre ella y hacerle unas pequeñas modificaciones para obtener resultados diferentes. Hasta pronto y sigan practicando programación chavos.