<?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; programa</title>
	<atom:link href="http://www.nemediano.com.mx/tag/programa/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.nemediano.com.mx</link>
	<description>Reflexiones de un espiritu curioso</description>
	<lastBuildDate>Fri, 16 Jul 2010 22:07:36 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</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>4</slash:comments>
		</item>
	</channel>
</rss>
