<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>nemediano &#187; opengl</title>
	<atom:link href="http://www.nemediano.com.mx/tag/opengl/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.nemediano.com.mx</link>
	<description>Reflexiones de un espiritu curioso</description>
	<lastBuildDate>Fri, 28 Oct 2011 19:07:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Programa del copo de Koch en OpenGL</title>
		<link>http://www.nemediano.com.mx/2009/programa-del-copo-de-koch-en-opengl/</link>
		<comments>http://www.nemediano.com.mx/2009/programa-del-copo-de-koch-en-opengl/#comments</comments>
		<pubDate>Tue, 20 Jan 2009 20:54:49 +0000</pubDate>
		<dc:creator>nemediano</dc:creator>
				<category><![CDATA[Computación]]></category>
		<category><![CDATA[Mis demonios]]></category>
		<category><![CDATA[copo]]></category>
		<category><![CDATA[fractal]]></category>
		<category><![CDATA[glut]]></category>
		<category><![CDATA[koch]]></category>
		<category><![CDATA[opengl]]></category>
		<category><![CDATA[programa]]></category>
		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://www.nemediano.com.mx/?p=153</guid>
		<description><![CDATA[El semestre pasado, que me toco dar clase de Graficación por computadora, en la FESA, un amigo mio (que no tomaba clase conmigo) me pidió que le ayudara en una tarea para su clase de Sistemas Dinámicos, como la verdad no tenia mucho tiempo, hice todo lo posible por zafarme, cuando ya no pude, le [...]]]></description>
			<content:encoded><![CDATA[<p>El semestre pasado, que me toco dar clase de Graficación por computadora, en la FESA, un amigo mio (que no tomaba clase conmigo) me pidió que le ayudara en una tarea para su clase de Sistemas Dinámicos, como la verdad no tenia mucho tiempo, hice todo lo posible por zafarme, cuando ya no pude, le pregunte de que se trataba y me dijo que quería hacer un programa gráfico de un fractal, para ilustrar una exposición, que en concreto quería hacer el <a href="http://es.wikipedia.org/wiki/Copo_de_nieve_de_Koch">copo de Koch</a>.</p>
<p><span id="more-153"></span></p>
<p>Al principio me gustó la idea, después de todo, traía fresco lo de la graficada y el programa parecía ser muy sencillo, le dije que solo preparara la recurrencia matemática y que después pasaría a ayudarle, después de una semana pase a verlo y como suele suceder no había hecho nada ni yo ni el, sin embargo el programa resulto ser lo bastante simple para que solo me llevara un par de horas terminarlo.</p>
<p>Pueden descargar el código <a title="Copo koch en OpenGL" href="http://www.nemediano.com.mx/wp-content/uploads/2009/01/copokoch.c">aquí</a>. Y para probar mis últimos dos plugines agregados al blog me decidí a escribir este post. los dos plugines de los que hablo son el <a href="http://wordpress.org/extend/plugins/wp-syntax/">WP-sintax</a> que permite poner código de algún lenguaje de programación en tus post y el <a href="http://gaussianos.com/wp-latex-plugin-para-mostrar-formulas-matematicas-escritas-con-latex-en-wordpress/">WP-LaTeX</a> que agregar una fórmula escrita en LaTeX, (en forma de imagen) a tus post.</p>
<h2>Copo de Koch</h2>
<p>La primeras lineas solo incluyen las dos bibliotecas que vamos a usar, la primera es la <a href="http://es.wikipedia.org/wiki/GLUT">glut estandar</a> para levantar OpenGL y la otra es math.h, para hacer cálculos.</p>
<p>Veamos después de eso que hay:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>6
7
8
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">typedef</span> <span style="color: #993333;">struct</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #993333;">float</span> x<span style="color: #339933;">,</span> y<span style="color: #339933;">,</span> z<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>Punto<span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Con estas lineas definimos un nuevo tipo de dato, lo bautizamos como <strong>Punto</strong> y tiene adentro tres flotantes, para representar coordenadas, aunque el programa es en esencia bidimensional, como el OpenGL trabaja en 3D, me gusta declarar todo como si estuviera dibujando en 3D.</p>
<p>Después se declaran algunas variables globales, y el prototipo de las funciones, las variables globales son:</p>
<ul>
<li><strong>xMax, yMax:</strong> Guardan el tope de las coordenadas del mundo, es decir de donde a donde corre la parte visible de la ventana en X y en Y, con respecto al origen (situada al centro de la ventana)</li>
<li><strong>vertices:</strong> Es un arreglo de tres puntos, que guardara la única información que necesitamos para empezar a generar el copo de nieve, la posición de tres vértices.</li>
<li><strong>numPtos:</strong> Este guarda el número de vértices proporcionados por el usuario, es un contador para poner la siguiente lógica: &#8220;Si ya tienes tres puntos, empieza a hacer el fractal, si tienes menos de tres puntos, continua esperando&#8230;&#8221;</li>
<li><strong>fondo:</strong> Otro entero que guardará la profundidad máxima para hacer el fractal, donde un cero, pinta un triangulo, un uno la estrella de David y así en adelante. Es si lo quieren ver así el numero de veces que se manda a llamar recursivamente el fractal.</li>
</ul>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">int</span> main<span style="color: #009900;">&#40;</span><span style="color: #993333;">int</span> argc<span style="color: #339933;">,</span> <span style="color: #993333;">char</span><span style="color: #339933;">**</span> argv<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
   glutInit<span style="color: #009900;">&#40;</span><span style="color: #339933;">&amp;</span>argc<span style="color: #339933;">,</span> argv<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutInitDisplayMode <span style="color: #009900;">&#40;</span>GLUT_SINGLE <span style="color: #339933;">|</span> GLUT_RGBA<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutInitWindowSize <span style="color: #009900;">&#40;</span><span style="color: #0000dd;">640</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">480</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutInitWindowPosition <span style="color: #009900;">&#40;</span><span style="color: #0000dd;">100</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">105</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutCreateWindow <span style="color: #009900;">&#40;</span>argv<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   inicializar<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
   glutDisplayFunc<span style="color: #009900;">&#40;</span>dibuja<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutReshapeFunc<span style="color: #009900;">&#40;</span>redimensiona<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutKeyboardFunc<span style="color: #009900;">&#40;</span>teclado<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutSpecialFunc<span style="color: #009900;">&#40;</span>tecladoEspecial<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glutMouseFunc<span style="color: #009900;">&#40;</span>raton<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
   glutMainLoop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
   <span style="color: #b1b100;">return</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>La función main, no mucho que decir, es muy estándar en el estilo glut, pone la maquina de estados en el estado adecuado, manda llamar a inicializar, registra cinco funciones de callback y por ultimo manda al loop principal de glut. Utilizo un solo buffer por que no voy a hacer animación, y ocupo el nombre del programa para el titulo de la ventana.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>47
48
49
50
51
52
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">void</span> inicializar <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   glClearColor<span style="color: #009900;">&#40;</span><span style="color:#800080;">0.0f</span><span style="color: #339933;">,</span> <span style="color:#800080;">0.0f</span><span style="color: #339933;">,</span> <span style="color:#800080;">0.0f</span><span style="color: #339933;">,</span> <span style="color:#800080;">0.0f</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glPointSize<span style="color: #009900;">&#40;</span><span style="color:#800080;">5.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   numPtos <span style="color: #339933;">=</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">;</span>
   fondo <span style="color: #339933;">=</span> <span style="color: #0000dd;">1</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>La primer función en ser ejecutada, pone el color del fondo en negro, a los puntos les da tamaño 5, inicializa el contador de puntos y a profundidad.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">void</span> redimensiona <span style="color: #009900;">&#40;</span><span style="color: #993333;">int</span> ancho<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> alto<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   <span style="color: #993333;">float</span> aspect<span style="color: #339933;">;</span>
&nbsp;
   glViewport <span style="color: #009900;">&#40;</span><span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">,</span> ancho<span style="color: #339933;">,</span> alto<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glMatrixMode <span style="color: #009900;">&#40;</span>GL_PROJECTION<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glLoadIdentity <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
   <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>alto <span style="color: #339933;">==</span> <span style="color: #0000dd;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
   	  alto <span style="color: #339933;">=</span> <span style="color: #0000dd;">1</span><span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
&nbsp;
   aspect <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #993333;">float</span><span style="color: #009900;">&#41;</span> ancho <span style="color: #339933;">/</span> <span style="color: #009900;">&#40;</span><span style="color: #993333;">float</span><span style="color: #009900;">&#41;</span> alto<span style="color: #339933;">;</span>
&nbsp;
   <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>ancho <span style="color: #339933;">&lt;=</span> alto<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
   	  glOrtho<span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span>MUNDO<span style="color: #339933;">,</span> MUNDO<span style="color: #339933;">,</span> <span style="color: #339933;">-</span>MUNDO<span style="color: #339933;">/</span>aspect<span style="color: #339933;">,</span> MUNDO<span style="color: #339933;">/</span>aspect<span style="color: #339933;">,</span> <span style="color: #339933;">-</span>MUNDO<span style="color: #339933;">,</span> MUNDO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   	  xMax <span style="color: #339933;">=</span> MUNDO<span style="color: #339933;">;</span>
   	  yMax <span style="color: #339933;">=</span> MUNDO <span style="color: #339933;">/</span> aspect<span style="color: #339933;">;</span>
&nbsp;
   <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
   	  glOrtho<span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span>MUNDO <span style="color: #339933;">*</span> aspect<span style="color: #339933;">,</span> MUNDO <span style="color: #339933;">*</span> aspect<span style="color: #339933;">,</span> <span style="color: #339933;">-</span>MUNDO<span style="color: #339933;">,</span> MUNDO<span style="color: #339933;">,</span> <span style="color: #339933;">-</span>MUNDO<span style="color: #339933;">,</span> MUNDO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   	  xMax <span style="color: #339933;">=</span> MUNDO <span style="color: #339933;">*</span> aspect<span style="color: #339933;">;</span>
   	  yMax <span style="color: #339933;">=</span> MUNDO<span style="color: #339933;">;</span>
   <span style="color: #009900;">&#125;</span>
&nbsp;
   glMatrixMode<span style="color: #009900;">&#40;</span>GL_MODELVIEW<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   glLoadIdentity<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>La función redimensiona, es llamada al inicio del programa, (el estándar de glut así lo indica) y cada vez que hay un evento de resize a la ventana. es una función muy común en estilo glut, lo único raro, quizás es que guarda en variables globales el valor de la máxima coordenada Y y la máxima coordenada X. Por lo demás es muy normal, da una proyección ortogonal, i.e: pone el sistema de referencia.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>82
83
84
85
86
87
88
89
90
91
92
93
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">void</span> teclado <span style="color: #009900;">&#40;</span><span style="color: #993333;">unsigned</span> <span style="color: #993333;">char</span> key<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> cx<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> cy<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #b1b100;">switch</span> <span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">case</span> <span style="color: #0000dd;">27</span><span style="color: #339933;">:</span>
		   exit<span style="color: #009900;">&#40;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">break</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">default</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">break</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	glutPostRedisplay<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>La función teclado es muy simple, si detecta un evento de la tecla &#8220;Esc&#8221;, termina el programa con codigo 0.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">void</span> tecladoEspecial <span style="color: #009900;">&#40;</span><span style="color: #993333;">int</span> key<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> cy<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> cx<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
	<span style="color: #b1b100;">switch</span> <span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">case</span> GLUT_KEY_PAGE_UP<span style="color: #339933;">:</span>
		   fondo<span style="color: #339933;">++;</span>
		<span style="color: #000000; font-weight: bold;">break</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">case</span> GLUT_KEY_PAGE_DOWN<span style="color: #339933;">:</span>
		   <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>fondo <span style="color: #339933;">&gt;</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">&#41;</span> fondo<span style="color: #339933;">--;</span>
		<span style="color: #000000; font-weight: bold;">break</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">default</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">break</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	glutPostRedisplay<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Está función sirve para cachar eventos de las teclas PgUp y PgDn, y en respuesta aumenta el valor de la variable global fondo, es decir hace que el fractal itere mas o menos veces, después de poner el nuevo valor en fondo, avisa a la ventana que necesita volver a dibujarse.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">void</span> raton <span style="color: #009900;">&#40;</span><span style="color: #993333;">int</span> boton<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> estado<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> cx<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> cy<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #993333;">float</span> x<span style="color: #339933;">,</span> y<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #808080; font-style: italic;">/* Calculamos las coordenadas de mundo (relativas) apartir de 
	 * las de ventana (absolutas) */</span>
&nbsp;
	x <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>GLfloat<span style="color: #009900;">&#41;</span>cx <span style="color: #339933;">*</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">*</span> xMax<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> glutGet<span style="color: #009900;">&#40;</span>GLUT_WINDOW_WIDTH<span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> xMax<span style="color: #339933;">;</span>
	y <span style="color: #339933;">=</span> yMax <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>GLfloat<span style="color: #009900;">&#41;</span>cy <span style="color: #339933;">*</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">*</span> yMax<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> glutGet<span style="color: #009900;">&#40;</span>GLUT_WINDOW_HEIGHT<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>boton <span style="color: #339933;">==</span> GLUT_LEFT_BUTTON <span style="color: #339933;">&amp;&amp;</span> estado <span style="color: #339933;">==</span> GLUT_DOWN<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>numPtos <span style="color: #339933;">&lt;</span> <span style="color: #0000dd;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		   vertices<span style="color: #009900;">&#91;</span>numPtos<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">x</span> <span style="color: #339933;">=</span> x<span style="color: #339933;">;</span>
		   vertices<span style="color: #009900;">&#91;</span>numPtos<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">y</span> <span style="color: #339933;">=</span> y<span style="color: #339933;">;</span>
		   vertices<span style="color: #009900;">&#91;</span>numPtos<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">z</span> <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
		   <span style="color: #339933;">++</span>numPtos<span style="color: #339933;">;</span>
	    <span style="color: #009900;">&#125;</span>
	    <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
	       numPtos <span style="color: #339933;">=</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">;</span>
	       vertices<span style="color: #009900;">&#91;</span>numPtos<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">x</span> <span style="color: #339933;">=</span> x<span style="color: #339933;">;</span>
		   vertices<span style="color: #009900;">&#91;</span>numPtos<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">y</span> <span style="color: #339933;">=</span> y<span style="color: #339933;">;</span>
		   vertices<span style="color: #009900;">&#91;</span>numPtos<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">z</span> <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
		   numPtos<span style="color: #339933;">++;</span>
	    <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	glutPostRedisplay<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Este código cacha las acciones del ratón, las lineas 118 y 119, calculan la posicion en x y en y en donde el usuario realizo el click, recordemos que el glut, nos pasa como parámetros dos enteros que representan el pixel en el que se hizo el click, pero para la lógica de nuestro programa lo queremos en coordenadas de mundo.</p>
<p>En las lineas siguientes, se pregunta si el mouse dio click izquierdo de ser así, preguntamos cuantos puntos llevamos, si son menos de tres, seguimos esperando si no que este sea el primero, de esta manera cada cuarto punto se <em>resetea</em>, el estado del programa, así que si después de pintar un fractal queremos pintar otro simplemente damos un nuevo click y ese es el primer punto de un nuevo fractal.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">void</span> dibuja <span style="color: #009900;">&#40;</span><span style="color: #993333;">void</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #993333;">int</span> i<span style="color: #339933;">;</span>
&nbsp;
	glClear<span style="color: #009900;">&#40;</span>GL_COLOR_BUFFER_BIT<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	glMatrixMode<span style="color: #009900;">&#40;</span>GL_MODELVIEW<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	glLoadIdentity<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>numPtos <span style="color: #339933;">!=</span> <span style="color: #0000dd;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	   glColor3f<span style="color: #009900;">&#40;</span><span style="color:#800080;">1.0</span><span style="color: #339933;">,</span> <span style="color:#800080;">1.0</span><span style="color: #339933;">,</span> <span style="color:#800080;">1.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	   glBegin<span style="color: #009900;">&#40;</span>GL_POINTS<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	      <span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #0000dd;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span>numPtos<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	   	     glVertex3f<span style="color: #009900;">&#40;</span>vertices<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">x</span><span style="color: #339933;">,</span> vertices<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">y</span><span style="color: #339933;">,</span> vertices<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #202020;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	      <span style="color: #009900;">&#125;</span>
	   glEnd<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>numPtos <span style="color: #339933;">==</span> <span style="color: #0000dd;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	   glColor3f<span style="color: #009900;">&#40;</span><span style="color:#800080;">1.0</span><span style="color: #339933;">,</span> <span style="color:#800080;">1.0</span><span style="color: #339933;">,</span> <span style="color:#800080;">0.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	   glBegin<span style="color: #009900;">&#40;</span>GL_LINE_STRIP<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	      koch<span style="color: #009900;">&#40;</span>vertices<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> vertices<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	      koch<span style="color: #009900;">&#40;</span>vertices<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> vertices<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	      koch<span style="color: #009900;">&#40;</span>vertices<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> vertices<span style="color: #009900;">&#91;</span><span style="color: #0000dd;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #0000dd;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	   glEnd<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>	
&nbsp;
	glFlush<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Esta función se encarga de dibujar el fractal, primero limpia la pantalla, luego pone el estado de dibujar y pregunta si tenemos algún numero de puntos que no sea tres (por la lógica de la función anterior esto solo puede pasar cuando son menos que tres) de ser así solo pone los puntos que llevamos. En caso contrario se prepara a dibujar el fractal, para esto hace uso de la función auxiliar koch, que da los vértices de una curva de koch, así que para hacer el copo de koch, pinta tres curvas de koch: Una del vértice 0, al vértice 1, otra del vértice 1 al vértice 2 y por ultimo una que cierra el copo del vértice 2 al vértice 0.</p>
<h2>Dibujando la curva de Koch</h2>
<p>Ahora viene la parte mas interesante:  ¿Como se dibuja la curva de Koch?<br />
La función encargada de hacerlo es la función <strong>koch</strong>, pide como argumento dos puntos y un entero, que es el nivel de profundidad en la recursividad del algoritmo, es decir: la primera vez que se llame tendrá valor 0, la segunda vez que se llame tendrá valor 1 y así sucesivamente. Aquí esta el código de la función:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
</pre></td><td class="code"><pre class="c" style="font-family:monospace;"><span style="color: #993333;">void</span> koch <span style="color: #009900;">&#40;</span>Punto p0<span style="color: #339933;">,</span> Punto p1<span style="color: #339933;">,</span> <span style="color: #993333;">int</span> profundidad<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	Punto a<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> p2<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>profundidad <span style="color: #339933;">&lt;</span> fondo<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		a.<span style="color: #202020;">x</span> <span style="color: #339933;">=</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p0.<span style="color: #202020;">x</span> <span style="color: #339933;">+</span> <span style="color:#800080;">1.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p1.<span style="color: #202020;">x</span><span style="color: #339933;">;</span>
		a.<span style="color: #202020;">y</span> <span style="color: #339933;">=</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p0.<span style="color: #202020;">y</span> <span style="color: #339933;">+</span> <span style="color:#800080;">1.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p1.<span style="color: #202020;">y</span><span style="color: #339933;">;</span>
		a.<span style="color: #202020;">z</span> <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
&nbsp;
		b.<span style="color: #202020;">x</span> <span style="color: #339933;">=</span> <span style="color:#800080;">1.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p0.<span style="color: #202020;">x</span> <span style="color: #339933;">+</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p1.<span style="color: #202020;">x</span><span style="color: #339933;">;</span>
		b.<span style="color: #202020;">y</span> <span style="color: #339933;">=</span> <span style="color:#800080;">1.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p0.<span style="color: #202020;">y</span> <span style="color: #339933;">+</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">/</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> p1.<span style="color: #202020;">y</span><span style="color: #339933;">;</span>
		b.<span style="color: #202020;">z</span> <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
&nbsp;
		p2.<span style="color: #202020;">x</span> <span style="color: #339933;">=</span> <span style="color:#800080;">0.5</span> <span style="color: #339933;">*</span> p0.<span style="color: #202020;">x</span> <span style="color: #339933;">+</span> <span style="color:#800080;">0.5</span> <span style="color: #339933;">*</span> p1.<span style="color: #202020;">x</span> <span style="color: #339933;">+</span> a.<span style="color: #202020;">y</span> <span style="color: #339933;">-</span> b.<span style="color: #202020;">y</span><span style="color: #339933;">;</span>
		p2.<span style="color: #202020;">y</span> <span style="color: #339933;">=</span> <span style="color:#800080;">0.5</span> <span style="color: #339933;">*</span> p0.<span style="color: #202020;">y</span> <span style="color: #339933;">+</span> <span style="color:#800080;">0.5</span> <span style="color: #339933;">*</span> p1.<span style="color: #202020;">y</span> <span style="color: #339933;">+</span> b.<span style="color: #202020;">x</span> <span style="color: #339933;">-</span> a.<span style="color: #202020;">x</span><span style="color: #339933;">;</span>
		p2.<span style="color: #202020;">z</span> <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
&nbsp;
		glVertex3f<span style="color: #009900;">&#40;</span>p0.<span style="color: #202020;">x</span><span style="color: #339933;">,</span> p0.<span style="color: #202020;">y</span><span style="color: #339933;">,</span> p0.<span style="color: #202020;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		koch<span style="color: #009900;">&#40;</span>p0<span style="color: #339933;">,</span> a<span style="color: #339933;">,</span> profundidad <span style="color: #339933;">+</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		glVertex3f<span style="color: #009900;">&#40;</span>a.<span style="color: #202020;">x</span><span style="color: #339933;">,</span> a.<span style="color: #202020;">y</span><span style="color: #339933;">,</span> a.<span style="color: #202020;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		koch<span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> p2<span style="color: #339933;">,</span> profundidad <span style="color: #339933;">+</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		glVertex3f<span style="color: #009900;">&#40;</span>p2.<span style="color: #202020;">x</span><span style="color: #339933;">,</span> p2.<span style="color: #202020;">y</span><span style="color: #339933;">,</span> p2.<span style="color: #202020;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		koch<span style="color: #009900;">&#40;</span>p2<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> profundidad <span style="color: #339933;">+</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		glVertex3f<span style="color: #009900;">&#40;</span>b.<span style="color: #202020;">x</span><span style="color: #339933;">,</span> b.<span style="color: #202020;">y</span><span style="color: #339933;">,</span> b.<span style="color: #202020;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		koch<span style="color: #009900;">&#40;</span>b<span style="color: #339933;">,</span> p1<span style="color: #339933;">,</span> profundidad <span style="color: #339933;">+</span> <span style="color: #0000dd;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		glVertex3f<span style="color: #009900;">&#40;</span>p1.<span style="color: #202020;">x</span><span style="color: #339933;">,</span> p1.<span style="color: #202020;">y</span><span style="color: #339933;">,</span> p1.<span style="color: #202020;">z</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span> 
&nbsp;
	<span style="color: #b1b100;">return</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>En la linea 176, se pregunta cuantas veces se ha ejecutado esta función en la recursión, si es mas que lo que vale la variable <strong>fondo</strong>, regresa sin hacer ninguna operación, poniendo fin a la recursión. Sin embargo si aun es menor, se ejecutan los cálculos necesarios (se hace otra iteración) y dentro del procedimiento se llama recursivamente la función koch aumentando el nivel de profundidad.</p>
<p>La lógica de la función koch se explica a continuación:</p>
<p>La idea principal es que como entrada tenemos dos puntos (<strong>p0</strong> y <strong>p1</strong>), los cuales representan un segmento y queremos a partir de ellos calcular tres puntos mas (<strong>a</strong>, <strong>b</strong> y <strong>p2</strong>). Como se ve en la figura:</p>
<div id="attachment_180" class="wp-caption alignnone" style="width: 310px"><a href="http://www.nemediano.com.mx/wp-content/uploads/2009/01/koch1.png"><img src="http://www.nemediano.com.mx/wp-content/uploads/2009/01/koch1-300x62.png" alt="Segmento de recta" title="koch1" width="300" height="62" class="size-medium wp-image-180" /></a><p class="wp-caption-text">Segmento de recta</p></div>
<p>Para calcular cada uno de estos puntos, se hace uso de la ecuación paramétrica de un segmento de recta. Si tenemos dos puntos <strong>p</strong> y <strong>q</strong> entonces la ecuación paramétrica en <strong>t</strong>, del semento de recta entre <strong>p</strong> y <strong>q</strong> es: <img style="border:0px;vertical-align:middle;" src='http://l.wordpress.com/latex.php?latex=s%28t%29+%3D+%281-t%29%5Cvec%7Bp%7D+%2B+t%5Cvec%7Bq%7D&bg=FFFFFF&fg=000000'  alt="s(t) = (1-t)\vec{p} + t\vec{q}" /> con <img style="border:0px;vertical-align:middle;" src='http://l.wordpress.com/latex.php?latex=0+%5Cleq+t+%5Cleq+1&bg=FFFFFF&fg=000000'  alt="0 \leq t \leq 1" /> con esta ecuación podemos calcular fácilmente tanto <strong>a</strong>, como <strong>b</strong>. Sin embargo para calcular <strong>p2</strong> tendremos que hacer algunas cosas mas.</p>
<div id="attachment_181" class="wp-caption alignnone" style="width: 310px"><a href="http://www.nemediano.com.mx/wp-content/uploads/2009/01/koch2.png"><img src="http://www.nemediano.com.mx/wp-content/uploads/2009/01/koch2-300x126.png" alt="Puntos a calcular en el nuevo segmento de koch" title="koch2" width="300" height="126" class="size-medium wp-image-181" /></a><p class="wp-caption-text">Puntos a calcular en el nuevo segmento de koch</p></div>
<p>Primero calculamos el punto medio del segmento, a ese vector hay que sumarle la <em>elevación</em> del nuevo punto, para calcularla necesitamos sumarle un nuevo vector que sea perpendicular al segmento, para esto utilizamos el hecho de que el producto punto de dos vectores perpendiculares entre si, siempre es cero. Así que construimos el vector que va de a a b y de ahí lo volteamos es decir:</p>
<p>Dado un vector:</p>
<p><img style="border:0px;vertical-align:middle;" src='http://l.wordpress.com/latex.php?latex=%5Cleft%28+%5Cbegin%7Barray%7D%7Bc%7D+x++%5C%5C+y+%5Cend%7Barray%7D+%5Cright%29&bg=FFFFFF&fg=000000'  alt="\left( \begin{array}{c} x  \\ y \end{array} \right)" /></p>
<p>Es perpendicular a el vector <strong>v</strong> dado por:</p>
<p><img style="border:0px;vertical-align:middle;" src='http://l.wordpress.com/latex.php?latex=%5Cvec%7Bv%7D+%3D+%5Cleft%28+%5Cbegin%7Barray%7D%7Bc%7D+-y+%5C%5C+x+%5Cend%7Barray%7D+%5Cright%29&bg=FFFFFF&fg=000000'  alt="\vec{v} = \left( \begin{array}{c} -y \\ x \end{array} \right)" /></p>
<p>Por lo que podemos encontrar el punto <strong>p2</strong> de la siguiente manera:</p>
<p><img style="border:0px;vertical-align:middle;" src='http://l.wordpress.com/latex.php?latex=%5Cvec%7Bp_2%7D+%3D+%5Cdfrac%7B1%7D%7B2%7D%5Cvec%7Bp_0%7D+%2B+%5Cdfrac%7B1%7D%7B2%7D%5Cvec%7Bp_1%7D+%2B+%5Cleft%28+%5Cbegin%7Barray%7D%7Bc%7D+a_%7By%7D-b_%7By%7D+%5C%5C+b_%7Bx%7D-a_%7Bx%7D+%5Cend%7Barray%7D+%5Cright%29&bg=FFFFFF&fg=000000'  alt="\vec{p_2} = \dfrac{1}{2}\vec{p_0} + \dfrac{1}{2}\vec{p_1} + \left( \begin{array}{c} a_{y}-b_{y} \\ b_{x}-a_{x} \end{array} \right)" /></p>
<p>Recordemos que el vector que va de <strong>a</strong> a <strong>b</strong> se puede ver como <strong>b-a</strong>.</p>
<h2>Descargas</h2>
<ul>
<li><a title="Copo koch en OpenGL" href="http://www.nemediano.com.mx/wp-content/uploads/2009/01/copokoch.c">Código fuente el programa</a></li>
<li><a href="http://www.nemediano.com.mx/wp-content/uploads/2009/01/copo-de-koch.exe">Ejecutable de win32</a></li>
</ul>
<p>¿Por que solo pongo el ejecutable para Windows, si yo siempre uso GNU/Linux?, por que los usuarios del lado luminoso de la fuerza les conviene mas compilar el fuente, que al cabo es solo uno, recuerden que deberán tener instalado OpenGL y glut.</p>
<h2>Pantallazos</h2>
<div class="ngg-galleryoverview" id="ngg-gallery-12-153">

	<!-- Slideshow link -->
	<div class="slideshowlink">
		<a class="slideshowlink" href="http://www.nemediano.com.mx/2009/programa-del-copo-de-koch-en-opengl/?show=slide">
			[Show as slideshow]		</a>
	</div>

	
	<!-- Thumbnails -->
		
	<div id="ngg-image-87" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/Pantallazo-.-copoKoch-1.png" title="Un copo de Koch, chueco por la forma en que se crearon sus vértices iniciales" class="thickbox" rel="set_12" >
								<img title="Pantallazo-.-copoKoch-1.png" alt="Pantallazo-.-copoKoch-1.png" src="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/thumbs/thumbs_Pantallazo-.-copoKoch-1.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-88" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/Pantallazo-.-copoKoch-2.png" title="Un anticopo de koch simétrico, en el programa se produce dando los click en sentido contrario a las manecillas del reloj" class="thickbox" rel="set_12" >
								<img title="Pantallazo-.-copoKoch-2.png" alt="Pantallazo-.-copoKoch-2.png" src="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/thumbs/thumbs_Pantallazo-.-copoKoch-2.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-89" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/Pantallazo-.-copoKoch-3.png" title="Una instancias un poco rara del copo de Koch, es en realidad un anticopo de Koch" class="thickbox" rel="set_12" >
								<img title="Pantallazo-.-copoKoch-3.png" alt="Pantallazo-.-copoKoch-3.png" src="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/thumbs/thumbs_Pantallazo-.-copoKoch-3.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-90" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/Pantallazo-.-copoKoch-4.png" title="Una instancia con solo tres iteraciones del copo de Koch" class="thickbox" rel="set_12" >
								<img title="Pantallazo-.-copoKoch-4.png" alt="Pantallazo-.-copoKoch-4.png" src="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/thumbs/thumbs_Pantallazo-.-copoKoch-4.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 		
	<div id="ngg-image-91" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/Pantallazo-.-copoKoch.png" title="Una instancia con cinco iteraciones del copo de Koch" class="thickbox" rel="set_12" >
								<img title="Pantallazo-.-copoKoch.png" alt="Pantallazo-.-copoKoch.png" src="http://www.nemediano.com.mx/wp-content/gallery/kochopengl/thumbs/thumbs_Pantallazo-.-copoKoch.png" width="100" height="75" />
							</a>
		</div>
	</div>
	
		
 	 	
	<!-- Pagination -->
 	<div class='ngg-clear'></div>
 	
</div>

<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.nemediano.com.mx%2F2009%2Fprograma-del-copo-de-koch-en-opengl%2F&amp;t=Programa%20del%20copo%20de%20Koch%20en%20OpenGL" id="facebook_share_icon_153" style="font-size:11px; line-height:13px; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; text-decoration:none;"><img src="http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif" alt="Share on Facebook" /></a>
	<script type="text/javascript">
	<!--
	var button = document.getElementById('facebook_share_link_153') || document.getElementById('facebook_share_icon_153') || document.getElementById('facebook_share_both_153') || document.getElementById('facebook_share_button_153');
	if (button) {
		button.onclick = function(e) {
			var url = this.href.replace(/share\.php/, 'sharer.php');
			window.open(url,'sharer','toolbar=0,status=0,width=626,height=436');
			return false;
		}
	
		if (button.id === 'facebook_share_button_153') {
			button.onmouseover = function(){
				this.style.color='#fff';
				this.style.borderColor = '#295582';
				this.style.backgroundColor = '#3b5998';
			}
			button.onmouseout = function(){
				this.style.color = '#3b5998';
				this.style.borderColor = '#d8dfea';
				this.style.backgroundColor = '#fff';
			}
		}
	}
	-->
	</script>
	]]></content:encoded>
			<wfw:commentRss>http://www.nemediano.com.mx/2009/programa-del-copo-de-koch-en-opengl/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Utilizando Geany para hacer codigo de C y C++</title>
		<link>http://www.nemediano.com.mx/2007/utilizando-geany-para-hacer-codigo-de-c-y-c/</link>
		<comments>http://www.nemediano.com.mx/2007/utilizando-geany-para-hacer-codigo-de-c-y-c/#comments</comments>
		<pubDate>Sat, 22 Sep 2007 01:53:45 +0000</pubDate>
		<dc:creator>nemediano</dc:creator>
				<category><![CDATA[Computación]]></category>
		<category><![CDATA[Mis demonios]]></category>
		<category><![CDATA[Recetario de Ubuntu]]></category>
		<category><![CDATA[c]]></category>
		<category><![CDATA[geany]]></category>
		<category><![CDATA[Ide]]></category>
		<category><![CDATA[opengl]]></category>

		<guid isPermaLink="false">http://nemediano.wordpress.com/2007/09/22/utilizando-geany-para-hacer-codigo-de-c-y-c/</guid>
		<description><![CDATA[Un editor que a mi me gusta mucho usar para escribir mis programas de C, que comúnmente llevan OpenGL es Geany, se trata de un editor muy ligero y sencillo de usar, esta escrito en GTK, por lo que corre independientemente de cualquier manejador de ventanas que estemos usando (ya sea Gnome, Xfce, o KDE), [...]]]></description>
			<content:encoded><![CDATA[<p>Un editor que a mi me gusta mucho usar para escribir mis programas de C, que comúnmente llevan OpenGL es <a title="Pagina oficial de Geany" href="http://geany.uvena.de/" target="_blank">Geany</a>, se trata de un editor muy ligero y sencillo de usar, esta escrito en GTK, por lo que corre independientemente de cualquier manejador de ventanas que estemos usando (ya sea Gnome, Xfce, o KDE), es un editor, no un IDE, por esto me refiero a que nonos va a hacer proyectos, ni nada de eso, solo nos va a dejar editar el texto.</p>
<p><span id="more-29"></span></p>
<p>Instalar Geany, no debe de dar mayor problema, pues se encuentra en los repositorios oficiales de Ubuntu, lo podemos hacer via apt-get, o synaptic, o incluso se encuentra disponible en agregar o quitar programas bajo la categoría de desarrollo, si su sistema esta en español (el Ubuntu), geany también vendrá en español.</p>
<p>Bueno, por que querría yo usar un editor de texto aparte de gedit? Pues por que geany me da ciertas ventajas que no me da por ejemplo gedit, al escribir código, estoy hablando a que nos da mas ventajas que el simple sintax highlight</p>
<p><a title="Una pantalla de Geany en accion" href="http://www.nemediano.com.mx/wp-content/uploads/2007/09/pantalla_geany.png"><img src="http://nemediano.files.wordpress.com/2007/09/pantalla_geany.thumbnail.png" alt="Una pantalla de Geany en accion" /></a></p>
<p>Pues aquí viene lo bonito del asunto, si queremos usar Geany para escribir código de OpenGL  y glut en Ubuntu, y ya sabemos hacer nuestros propios makefiles, como lo explique en el <a title="El post donde explico como hace makefiles" href="http://nemediano.wordpress.com/2007/09/01/como-hacer-makefiles-para-programar-en-opengl-y-glut/" target="_blank">post anterior</a>.</p>
<p>Ahora podemos usar todo esto a nuestro favor para tener un entorno de desarrollo muy amigable, para empezar guardemos todos nuestros archivos fuentes y makefile en una sola carpeta luego iniciamos geany.</p>
<p>Ahora suponemos que en nuestro makefile, define cierto nombre para el ejecutable por ejemplo &#8220;Modelo3D&#8221;, y que definimos un make all, de defualt, y que también pusimos un &#8220;make destroy&#8221;, que elimina los objetos y el ejecutable.</p>
<p>Pues abrimos Geany, de ahí abrimos todos nuestros archivos fuentes,  Archivo -&gt; abrir y luego nos vamos al menú que dice: <strong>construir</strong></p>
<p>En la ultima opción se encuentra  <strong>Selecciona Inclusiones y Argumentos</strong>, al entrar a esta opción vemos una ventana como esta:</p>
<p><a title="Seleccion de argumentos en Geany" href="http://www.nemediano.com.mx/wp-content/uploads/2007/09/pantallazo-selecciona-incluciones-y-argumentos.png"><img src="http://nemediano.files.wordpress.com/2007/09/pantallazo-selecciona-incluciones-y-argumentos.thumbnail.png" alt="Seleccion de argumentos en Geany" /></a><br />
Ahora vemos que Geany ya ha dado valores de default, pues sabe que estamos escribiendo código en C, por que abrimos un archivo .c, sin embargo como nosotros ya hicimos nuestro propio makefile, la vamos a cambiar esas opciones, para que llame a nuestro make.</p>
<p>Lo que tenga escrito en la primer caja de  de compilar es lo que se va a ejecutar, cuando apretemos el botón de compilar, ahora nosotros queremos que antes de compilar elimine todos los objetos y el ejecutable, y luego intente compilar todo, es decir queremos que ejecute &#8220;make destroy&#8221; y luego &#8220;make all&#8221;, y como esta instrucción se va a mandar al shell tal como la escribimos podemos escribir:<br />
<code>make destroy; make</code><br />
Ahora lo que escribamos en argumentso para el programa, es lo que ejecuta cuando presionamos el boton de ejecutar, así que podemos poner ahi ./nombre_de_ejecutable o para nuestro ejemplo:<br />
<code>./modelo3D</code><br />
<a title="Como queda la configuracion al final" href="http://www.nemediano.com.mx/wp-content/uploads/2007/09/pantallazo-selecciona-incluciones-y-argumentos-1.png"><img src="http://nemediano.files.wordpress.com/2007/09/pantallazo-selecciona-incluciones-y-argumentos-1.thumbnail.png" alt="Como queda la configuracion al final" /></a></p>
<p>Y listo, ahora podemos programar cómodamente en Geany, usando glut y OpenGL, cada que queramos compilar, solo presionamos el botón de compilar y al ejecutar el botón de ejecutar.</p>
<p>Algunas observaciones</p>
<ul>
<li>Geany es muy ligero y tiene la enorme ventaja que no hace archivos de proyecto, o de configuración, esto es una ventaja para programas pequeños.</li>
<li>La ventaja de tener total control de los argumentos con nuestro propio makefile.</li>
<li>También se puede importar código muy fácil, ya que geany, nos da lo mínimo, para poder escribir entre Windows y GNU/Linux, es decir nos deja cambiar el carácter de terminación de linea de los archivos fuentes y la codificación de caracteres, la codificación de GNU/Linux y en particular de Ubuntu es UTF8, la codificación en Windows es depende del idioma en que lo tengamos, pero seguro aparece en el menú de geany. La terminación de linea en Windows es CRLF y en GNU/Linux es LF.</li>
<li>Tenemos las opciones que mas comúnmente se usan al programar en un Editor muy ligero y que no para instalar no necesitamos traer montones de librerías como en los casos de editores mas poderosos.</li>
</ul>
<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.nemediano.com.mx%2F2007%2Futilizando-geany-para-hacer-codigo-de-c-y-c%2F&amp;t=Utilizando%20Geany%20para%20hacer%20codigo%20de%20C%20y%20C%2B%2B" id="facebook_share_icon_29" style="font-size:11px; line-height:13px; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; text-decoration:none;"><img src="http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif" alt="Share on Facebook" /></a>
	<script type="text/javascript">
	<!--
	var button = document.getElementById('facebook_share_link_29') || document.getElementById('facebook_share_icon_29') || document.getElementById('facebook_share_both_29') || document.getElementById('facebook_share_button_29');
	if (button) {
		button.onclick = function(e) {
			var url = this.href.replace(/share\.php/, 'sharer.php');
			window.open(url,'sharer','toolbar=0,status=0,width=626,height=436');
			return false;
		}
	
		if (button.id === 'facebook_share_button_29') {
			button.onmouseover = function(){
				this.style.color='#fff';
				this.style.borderColor = '#295582';
				this.style.backgroundColor = '#3b5998';
			}
			button.onmouseout = function(){
				this.style.color = '#3b5998';
				this.style.borderColor = '#d8dfea';
				this.style.backgroundColor = '#fff';
			}
		}
	}
	-->
	</script>
	]]></content:encoded>
			<wfw:commentRss>http://www.nemediano.com.mx/2007/utilizando-geany-para-hacer-codigo-de-c-y-c/feed/</wfw:commentRss>
		<slash:comments>46</slash:comments>
		</item>
		<item>
		<title>Como hacer Makefiles para programar en OpenGL y glut</title>
		<link>http://www.nemediano.com.mx/2007/como-hacer-makefiles-para-programar-en-opengl-y-glut/</link>
		<comments>http://www.nemediano.com.mx/2007/como-hacer-makefiles-para-programar-en-opengl-y-glut/#comments</comments>
		<pubDate>Sat, 01 Sep 2007 15:37:22 +0000</pubDate>
		<dc:creator>nemediano</dc:creator>
				<category><![CDATA[Computación]]></category>
		<category><![CDATA[Mis demonios]]></category>
		<category><![CDATA[Recetario de Ubuntu]]></category>
		<category><![CDATA[c]]></category>
		<category><![CDATA[geany]]></category>
		<category><![CDATA[glut]]></category>
		<category><![CDATA[makefile]]></category>
		<category><![CDATA[opengl]]></category>
		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://nemediano.wordpress.com/2007/09/01/como-hacer-makefiles-para-programar-en-opengl-y-glut/</guid>
		<description><![CDATA[Bueno en el post pasado aprendimos como instalar el compilador y las librerías(bibliotecas para los puristas del idioma) en Ubuntu, para poder hacer nuestros propios programas de OpeGL y glut. Supongo que si estas leyendo esto es que todavía no sabes muy bien como programar en OpenGL y probablemente quieres un entorno de desarrollo medio [...]]]></description>
			<content:encoded><![CDATA[<p>Bueno en el post pasado aprendimos como instalar el compilador y las librerías(bibliotecas para los puristas del idioma) en Ubuntu, para poder hacer nuestros propios programas de OpeGL y glut. Supongo que si estas leyendo esto es que todavía no sabes muy bien como programar en OpenGL y probablemente quieres un entorno de desarrollo medio amigable para hacer todo el show de codifico, intento compilar, corrijo errores, va de nuevo.Lo mas recomendable para hacer esto es construir un makefile (por eso en el post pasado instalamos el paquete build-essentials).<span id="more-21"></span></p>
<p>El makefile es un archivo de texto plano, que usa la herramienta make, dicho archivo debe ser escrito por el desarrollador y dice como se compila el programa que escribió. Usualmente los makefiles son complejos y contienen un montón de reglas, sin embargo nosotros <strong>nos vamos a limitar a tres</strong>: una para compilar, una para limpiar y otra para reconstruir.</p>
<p>Así que abrimos nuestro editor de texto plano favoritos y construimos un archivo que tenga por nombre makefile (el nombre es muy importante).</p>
<p>Si nuestro programa solo va tener un archivo fuente esta sera nuestra plantilla:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="make" style="font-family:monospace;">LIBDIR <span style="color: #004400;">=</span> <span style="color: #004400;">-</span>L<span style="color: #004400;">/</span>usr<span style="color: #004400;">/</span>X11R6<span style="color: #004400;">/</span>lib
CC <span style="color: #004400;">=</span> gcc
CFLAGS <span style="color: #004400;">=</span> <span style="color: #004400;">-</span>Wall
LIBRARIES <span style="color: #004400;">=</span> <span style="color: #004400;">-</span>lglut <span style="color: #004400;">-</span>lGL <span style="color: #004400;">-</span>lGLU <span style="color: #004400;">-</span>lm
ejecutable<span style="color: #004400;">:</span> fuente<span style="color: #004400;">.</span>c
	<span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CC</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CFLAGS</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">-</span>o <span style="color: #000088; font-weight: bold;">$@</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">LIBDIR</span><span style="color: #004400;">&#41;</span> <span style="color: #000088; font-weight: bold;">$?</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">LIBRARIES</span><span style="color: #004400;">&#41;</span>
destroy<span style="color: #004400;">:</span>
	rm <span style="color: #004400;">-</span>f <span style="color: #004400;">*.</span>o ejecutable
clean<span style="color: #004400;">:</span>
	rm <span style="color: #004400;">-</span>f <span style="color: #004400;">*.</span>o</pre></td></tr></table></div>

<p>En donde <em>ejecutable</em> es el nombre que queremos que tenga nuestro archivo ejecutable y <em>fuente</em> es el nombre de nuestro <strong>único</strong> archivo fuente.</p>
<p>Analizando un poco vemos que el makefile define unas variables en las primeras lineas, y luego define unas reglas, las reglas siempre son de la forma:</p>
<p>[objetivo]: [dependencia]<br />
[comandos]</p>
<p>Donde <em>objetivo</em> es el nombre de la operación que queremos hacer, <em>dependencia</em> es todo lo que necesitamos para llevarla a acabo y <em>comandos</em> es lo que debemos hacer para llevar a cabo la operación.</p>
<p>Las reglas que defino son <em>ejecutable</em> que sirve para hacer el ejecutable, <em>clean</em> que sirve para borrar todos los los archivos intermedios que hace el compilador (por ejemplo los .o) y <em>destroy</em> que borra todo lo que hace el compilador y nos deja listos para intentar compilar de nuevo (por ejemplo en nuestro periodo de ensayo error).</p>
<p>Se observa que uso gcc como compilador, por que el lenguaje C es usualmente nuestro default, si piensan programar en c++, cambien gcc por g++. Tambien fijense que entra las librerías mando a GL a GLU y a glut, que es por que queremos hacer un programa de OpenGL con glut, pero además mando un misterioso -lm, estas son as demás librerías de default de C, por ejemplo si en nuestro programa queremos usar funciones definidas en math.h.</p>
<p>Si queremos hacer un programa con mas de un código fuente esta es otra plantilla:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre></td><td class="code"><pre class="make" style="font-family:monospace;">LIBDIR <span style="color: #004400;">=</span> <span style="color: #004400;">-</span>L<span style="color: #004400;">/</span>usr<span style="color: #004400;">/</span>X11R6<span style="color: #004400;">/</span>lib
CC <span style="color: #004400;">=</span> gcc
CFLAGS <span style="color: #004400;">=</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">COMPILERFLAGS</span><span style="color: #004400;">&#41;</span>
LIBRARIES <span style="color: #004400;">=</span> <span style="color: #004400;">-</span>lglut <span style="color: #004400;">-</span>lGL <span style="color: #004400;">-</span>lGLU <span style="color: #004400;">-</span>lm
OBJ <span style="color: #004400;">=</span> fuente1<span style="color: #004400;">.</span>o fuente2<span style="color: #004400;">.</span>o fuente3<span style="color: #004400;">.</span>o fuente4<span style="color: #004400;">.</span>o
BIN <span style="color: #004400;">=</span> ejecutable
&nbsp;
all<span style="color: #004400;">:</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">BIN</span><span style="color: #004400;">&#41;</span>
<span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">BIN</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">:</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">OBJ</span><span style="color: #004400;">&#41;</span>
	<span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CC</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CFLAGS</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">-</span>o <span style="color: #000088; font-weight: bold;">$@</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">LIBDIR</span><span style="color: #004400;">&#41;</span> <span style="color: #000088; font-weight: bold;">$?</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">LIBRARIES</span><span style="color: #004400;">&#41;</span>
&nbsp;
fuente1<span style="color: #004400;">.</span>o<span style="color: #004400;">:</span> fuente1<span style="color: #004400;">.</span>c
	<span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CC</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">-</span>c fuente1<span style="color: #004400;">.</span>c <span style="color: #004400;">-</span>o fuente1<span style="color: #004400;">.</span>o <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CFLAGS</span><span style="color: #004400;">&#41;</span>
&nbsp;
fuente2<span style="color: #004400;">.</span>o<span style="color: #004400;">:</span> fuente2<span style="color: #004400;">.</span>c
	<span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CC</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">-</span>c fuente2<span style="color: #004400;">.</span>c <span style="color: #004400;">-</span>o fuente2<span style="color: #004400;">.</span>o <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CFLAGS</span><span style="color: #004400;">&#41;</span>
&nbsp;
fuente3<span style="color: #004400;">.</span>o<span style="color: #004400;">:</span> fuente3<span style="color: #004400;">.</span>c
	<span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CC</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">-</span>c fuente3<span style="color: #004400;">.</span>c <span style="color: #004400;">-</span>o fuente3<span style="color: #004400;">.</span>o <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CFLAGS</span><span style="color: #004400;">&#41;</span>
&nbsp;
fuente4<span style="color: #004400;">.</span>o<span style="color: #004400;">:</span> fuente4<span style="color: #004400;">.</span>c
	<span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CC</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">-</span>c fuente4<span style="color: #004400;">.</span>c <span style="color: #004400;">-</span>o fuente4<span style="color: #004400;">.</span>o <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">CFLAGS</span><span style="color: #004400;">&#41;</span>
&nbsp;
destroy<span style="color: #004400;">:</span>
	rm <span style="color: #004400;">-</span>f <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">OBJ</span><span style="color: #004400;">&#41;</span> <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">BIN</span><span style="color: #004400;">&#41;</span>
clean<span style="color: #004400;">:</span>
	rm <span style="color: #004400;">-</span>f <span style="color: #004400;">$</span><span style="color: #004400;">&#40;</span><span style="color: #000088;">OBJ</span><span style="color: #004400;">&#41;</span></pre></td></tr></table></div>

<p>En donde <em>fuente1</em>, &#8230; <em>fuentei</em>, son todos los archivos fuentes que componen el programa y <em>ejecutable</em> es el nombre del ejecutable.</p>
<h2><strong>Ahora lo importante:</strong></h2>
<p>Es ampliamente recomendado tener una carpeta donde guardar todo lo referente a nuestro programa y solo eso, es decir mi fuente y mi makefile deben estar en una carpeta para ellos solos (esto para facilitar su transporte) y que no se vayan a volar algo sin querer al escribir una regla mal del make XD<br />
Para compilar nuestro programa simplemente escribimos en la linea de comandos &#8220;make&#8221;: (obviamente debemos estar parados en el directorio donde esta todo):</p>
<pre>$make</pre>
<p>Si nuestro programa compilo correctamente genero el archio ejecutable, <span style="text-decoration: underline;">pero si tuvimos errores, veremos los errores y warnings en la shell</span> y debemos de hacer los siguiente:<br />
ejecutar <strong>make destroy</strong>, para limpiar toda al basura generada por la compilación fallida, corregir nuestro fuente y luego volver a intentar compilar.</p>
<pre>$make destroy<strong> </strong></pre>
<h2>Algunas observaciones:</h2>
<ul>
<li>Estos makefiles son solo recomendaciones y de hecho no siguen las reglas GNU de los makefiles, para aprender mas de eso pueden visitar: http://www.gnu.org/software/make/</li>
<li>Para escribir este post me base en la guia publicada por el area de linux de la fesa, quizas si le dan un ojo les quede mas claro http://www.acatlan.unam.mx/linux/graficacion/compilalinux.html</li>
<li>Si nuestro fuente tiene cabeceras por ejemplo cabecera.h, estas no necesitan ser compiladas y por lo tanto no se ponen en el make, basta que en el fuente sean usadas #include, Siempre que la cabecera no tenga código en C, si no mas bien declaraciones de estructuras y variables globales (que es como debe ser).</li>
</ul>
<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.nemediano.com.mx%2F2007%2Fcomo-hacer-makefiles-para-programar-en-opengl-y-glut%2F&amp;t=Como%20hacer%20Makefiles%20para%20programar%20en%20OpenGL%20y%20glut" id="facebook_share_icon_21" style="font-size:11px; line-height:13px; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; text-decoration:none;"><img src="http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif" alt="Share on Facebook" /></a>
	<script type="text/javascript">
	<!--
	var button = document.getElementById('facebook_share_link_21') || document.getElementById('facebook_share_icon_21') || document.getElementById('facebook_share_both_21') || document.getElementById('facebook_share_button_21');
	if (button) {
		button.onclick = function(e) {
			var url = this.href.replace(/share\.php/, 'sharer.php');
			window.open(url,'sharer','toolbar=0,status=0,width=626,height=436');
			return false;
		}
	
		if (button.id === 'facebook_share_button_21') {
			button.onmouseover = function(){
				this.style.color='#fff';
				this.style.borderColor = '#295582';
				this.style.backgroundColor = '#3b5998';
			}
			button.onmouseout = function(){
				this.style.color = '#3b5998';
				this.style.borderColor = '#d8dfea';
				this.style.backgroundColor = '#fff';
			}
		}
	}
	-->
	</script>
	]]></content:encoded>
			<wfw:commentRss>http://www.nemediano.com.mx/2007/como-hacer-makefiles-para-programar-en-opengl-y-glut/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Instalando las librerias de OpenGL y glut en Ubuntu</title>
		<link>http://www.nemediano.com.mx/2007/instalando-las-librerias-de-opengl-y-glut-en-ubuntu/</link>
		<comments>http://www.nemediano.com.mx/2007/instalando-las-librerias-de-opengl-y-glut-en-ubuntu/#comments</comments>
		<pubDate>Mon, 27 Aug 2007 03:38:43 +0000</pubDate>
		<dc:creator>nemediano</dc:creator>
				<category><![CDATA[Computación]]></category>
		<category><![CDATA[Mis demonios]]></category>
		<category><![CDATA[Recetario de Ubuntu]]></category>
		<category><![CDATA[glut]]></category>
		<category><![CDATA[instalar]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[opengl]]></category>
		<category><![CDATA[programar]]></category>

		<guid isPermaLink="false">http://nemediano.wordpress.com/2007/08/27/instalando-las-librerias-de-opengl-y-glut-en-ubuntu/</guid>
		<description><![CDATA[Pues desde hace tiempo quería reescribir este how to, sucede que estoy actualmente escribiendo mi tesis y para ello necesitaba poder compilar programas básicos de OpenGL. Una de las cosas que quería lograr era escribir mi tesis 100% con Software libre, ya tenia experiencia trabajando con OpenGL y glut, en distribuciones Red Hat-like (por ejemplo [...]]]></description>
			<content:encoded><![CDATA[<p>Pues desde hace tiempo quería reescribir este how to, sucede que estoy actualmente escribiendo mi <a title="Calli" href="https://calli.cie.unam.mx/projects/modelo3d/" target="_blank">tesis</a> y para ello necesitaba poder compilar programas básicos de <a title="OpenGL" href="http://www.opengl.org/" target="_blank">OpenGL</a>. Una de las cosas que quería lograr era escribir mi tesis 100% con Software libre, ya tenia experiencia trabajando con OpenGL y <a title="glut en OpenGL" href="http://www.opengl.org/resources/libraries/glut/" target="_blank">glut</a>, en distribuciones Red Hat-like (por ejemplo <a title="Red Hat en Wikipedia" href="http://es.wikipedia.org/wiki/Red_Hat_Linux" target="_blank">Red Hat</a>, <a title="Fedora project" href="http://fedoraproject.org//" target="_blank">Fedora</a>, <a title="WhiteBox" href="http://www.whiteboxlinux.org/" target="_blank">WhiteBox</a> y <a title="Linux Mandrivia" href="http://www.mandriva.com/" target="_blank">Mandrivia</a>) y sabia con rpms como instalarme las librerías necesarias, sin embargo cuando cambie a distribuciones Debian-like (ahora uso <a title="Ubuntu" href="http://www.ubuntu.com/" target="_blank">Ubuntu</a>) no sabia como lograr mi cometido, asi que después de investigarlo un poco me dí a la tarea de escribir este How-to.</p>
<p style="margin-bottom:0;"><span id="more-20"></span> <!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<h2>Paso 1</h2>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<h2>Instalar el compilador de C.</h2>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">Una de las cosas que mas me sorprendió es que Ubuntu, no viene con el compilador de C, en su instalación de default (hasta ahora es el único Gnu/Linux donde me ha pasado esto), así que tienes que instalarlo desde los repositorios.</p>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--> En Ubuntu solo es cuestión de instalarte los paquetes ya sea vía apt-get o via synaptic lo que te acomode mejor, al caso debes de instalar los siguientes paquetes:</p>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<ul>
<li>build-essential</li>
<li>g++</li>
<li>g77</li>
<li>gcc</li>
<li>make</li>
</ul>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">Estos paquetes no vienen solos, es decir probablemente necesites descargar muchos paquetes mas para satisfacer las dependencias de estos, sin embargo dado que tanto synaptic como apt-get, pueden satisfacer sus dependencia de manera automática solo debemos indicarle estos paquetes. tanto de gcc, como de g++ y g77, hay varias versiones de los paquetes, sin embargo el paquete sin números siempre es un paquete con la versión mas actual.</p>
<p style="margin-bottom:0;">En resumen lo único que un usuario novato debe de teclear es:</p>
<pre> 	<!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	-->$sudo apt-get install build-essential g++ g77 gcc make</pre>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<h2>Paso 1.5 Probamos la instalación del compilador de C</h2>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">En nuestro editor de textos plano favorito tecleamos un programa de C, básico por ejemplo un clásico hola mundo: <a title="hello.c" href="http://www.nemediano.com.mx/wp-content/uploads/2007/08/hello.c">hello.c</a> Lo guardamos por ejemplo con el nombre de hello.c y vamos a compilarlo.</p>
<p style="margin-bottom:0;">Con la siguiente instrucción:</p>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<pre>$gcc hello.c -o hello</pre>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">Podemos observa que la sintaxis para compilar un programa en C, es la siguiente:</p>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<pre>$gcc [archivo fuente.c] -o [nombre de mi ejeculable]</pre>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">En realidad el gcc es mucho mas completo, un tutorial de como compilar programas con C lo puedes encontrar <a title="Tutorial de gcc" href="http://iie.fing.edu.uy/~vagonbar/gcc-make/gcc.htm" target="_blank">aqui</a>.</p>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<h2>2 Instalamos las librerias necesarias para OpenGL</h2>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">Ahora necesitaremos instalar los siguientes paquetes:</p>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--> freeglut3 freeglut3-dbg freeglut3-dev ftgl-dev gle-doc glut-doc glutg3 glutg3-dev libglu1-mesa libglu1-mesa-dev libgl1-mesa libgl1-mesa-dev libgl1-mesa-dri libglut3 libglut3-dev mesa-common-dev mesa-demos mesa-swrast-source mesa-utils</p>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">No se cuales sean los esenciales, yo siempre he instalado con todos, pero se que así funciona, muchos de ellos son dependencias, así que no igual lo único que debes de tener en cuenta es tratar de instalar freeglut-dev.</p>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">Importante: Si piensas tener tu computadora con Aceleración Gráfica (por ejemplo para tener <a title="Beryl" href="http://beryl-project.org/" target="_blank">Beryl</a>), es decir instalar los drivers propietarios de ATI o de nVidia, debes hacerlo antes de hacer esta instalación, se pueden tener ambas funcionando pero poner el driver gráfico debe ser anterior a la instalación de OpenGL. De la contrario nuestros programas de OpenGL no tendrán aceleración</p>
<p style="margin-bottom:0;">Para saber si nuestra computadora tiene o no aceleración Gráfica puedes ejecutar el comando <strong>glxinfo</strong> y ver la salida, en el renglón donde dice <strong>direct rendering</strong>: un <em>“Yes”</em>, significa que tenemos Aceleración gráfica. Una forma de filtrarlo es:</p>
<pre> 	<!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--> $glxinfo | grep rendering</pre>
<p>Por supuesto que tener o no 	Aceleración Gráfica es totalmente dependiente de tu 	hardware. Por lo que no se puede escribir una guía general, 	sin embargo hay muchísima información en la red sobre 	esto, mi experiencia es que si tu computadora tiene tarjeta de vídeo 	Intel o nVidia, no debes tener ningún problema, las ATI, en 	cambio debes de investigar un poco antes de hacerlas funcionar.</p>
<h2>2.5Probar la instalación de OpenGL y glut</h2>
<p style="margin-bottom:0;"><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<p style="margin-bottom:0;">Nos tecleamos un programa sencillo de glut y OpenGL, por ejemplo este: <a title="ventana.c" href="http://www.nemediano.com.mx/wp-content/uploads/2007/08/ventana.c">ventana.c</a></p>
<p style="margin-bottom:0;">Y ahora vamos intentar la compilación:</p>
<pre>$gcc ventana.c -o ventana -lglut</pre>
<p>Y debemos ver una ventana negra.<br />
Si en al linea de comandos ven un warning que dice algo así como:</p>
<pre>libGL warning: 3D driver claims to not support visual 0x5b</pre>
<p>Pero la ejecución de el programa continua, no deben de preocuparse, este warning solo significa que no esta correctamente configurado su driver de la tarjeta de vídeo, pero es algo que <strong>no</strong> debe de afectar sus programas escritos en OpenGL, mas que en el performance, y no es un problema de su programa si no del driver de la computadora.</p>
<p>Obviamente el caso ideal es tener tanto el OpenGL como la aceleración gráfica funcionando al mismo tiempo, si ya tenían la aceleración gráfica y siguen este método no deben de tener ningún problema y ni siquiera les debe marcar ese molesto warning.</p>
<p>Usuarios de Red Hat y similares la receta es la misma, solo que deberán de tratar de instalar el <a title="Rpms de free glut" href="http://rpm.pbone.net/index.php3?stat=3&amp;search=freeglut-devel&amp;srodzaj=3" target="_blank">freeglut-devel***.rpm</a>, donde *** usualmente son la distribución, la arquitectura y versión del paquete, se recomienda que instalen el paquete que viene en sus discos, usualmente este paquete tiene muchas dependencias, así que la ayuda de un gestor de paquetes como yump o synaptic sin duda les ayudara.</p>
<p>En un post posterior hablare de como tener un IDE funcional que nos de mas ayuda a compilar programas de OpenGL en Linux, en particular en Ubuntu la idea es que el final de mi serie de post del tema se pueda tener un entorno de programación cómodo y funcional en Ubuntu, como para que puedan con ayuda de algún libro como el libro rojo autoaprender a programar con OpenGL</p>
<p><!-- 		@page { size: 21cm 29.7cm; margin: 2cm } 		P { margin-bottom: 0.21cm } 	--></p>
<a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.nemediano.com.mx%2F2007%2Finstalando-las-librerias-de-opengl-y-glut-en-ubuntu%2F&amp;t=Instalando%20las%20librerias%20de%20OpenGL%20y%20glut%20en%20Ubuntu" id="facebook_share_icon_20" style="font-size:11px; line-height:13px; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; text-decoration:none;"><img src="http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif" alt="Share on Facebook" /></a>
	<script type="text/javascript">
	<!--
	var button = document.getElementById('facebook_share_link_20') || document.getElementById('facebook_share_icon_20') || document.getElementById('facebook_share_both_20') || document.getElementById('facebook_share_button_20');
	if (button) {
		button.onclick = function(e) {
			var url = this.href.replace(/share\.php/, 'sharer.php');
			window.open(url,'sharer','toolbar=0,status=0,width=626,height=436');
			return false;
		}
	
		if (button.id === 'facebook_share_button_20') {
			button.onmouseover = function(){
				this.style.color='#fff';
				this.style.borderColor = '#295582';
				this.style.backgroundColor = '#3b5998';
			}
			button.onmouseout = function(){
				this.style.color = '#3b5998';
				this.style.borderColor = '#d8dfea';
				this.style.backgroundColor = '#fff';
			}
		}
	}
	-->
	</script>
	]]></content:encoded>
			<wfw:commentRss>http://www.nemediano.com.mx/2007/instalando-las-librerias-de-opengl-y-glut-en-ubuntu/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
	</channel>
</rss>

