{"id":157,"date":"2024-06-08T21:03:29","date_gmt":"2024-06-08T21:03:29","guid":{"rendered":"https:\/\/santiagomarquezsolis.com\/?p=157"},"modified":"2026-04-20T14:59:43","modified_gmt":"2026-04-20T14:59:43","slug":"explorando-la-programacion-creativa-con-rust-y-ggez-efecto-fuego","status":"publish","type":"post","link":"https:\/\/santiagomarquezsolis.com\/index.php\/2024\/06\/08\/explorando-la-programacion-creativa-con-rust-y-ggez-efecto-fuego\/","title":{"rendered":"Explorando la Programaci\u00f3n Creativa con Rust y ggez. Efecto Fuego."},"content":{"rendered":"<p>Hoy vengo con algo un poco diferente, y es que desde que Rust se ha convertido en uno de los lenguajes moda y uno de mis favoritos para trabajar con Blockchain, me he preguntado, si no ser\u00eda una buena idea usarlo para hacer algo de programaci\u00f3n creativa, del estilo de la Demoscene que se hac\u00eda en los tiempos del Spectrum o de los ordenador de 16 bits. Por ejemplo, una de las demos m\u00e1s famosas, fue la de \u00abPanic\u00bb del grupo FutureCrew, que sacaba un enorme partido a las m\u00e1quinas de aquel entonces. Creo que podemos decir, sin lugar a equivocarnos, que la programaci\u00f3n creativa es una disciplina emocionante que combina la programaci\u00f3n con la expresi\u00f3n art\u00edstica. En este art\u00edculo, te mostrar\u00e9 c\u00f3mo puedes usar Rust, un lenguaje conocido por su rendimiento y seguridad, junto con la biblioteca <code>ggez<\/code> para crear proyectos de programaci\u00f3n creativa.<\/p>\n<p>La programaci\u00f3n creativa es una forma de programaci\u00f3n en la que el objetivo principal es crear algo expresivo en lugar de funcional. Es una intersecci\u00f3n entre el arte digital y el c\u00f3digo, donde el resultado suele ser una experiencia visual, auditiva o interactiva art\u00edstica. La programaci\u00f3n creativa se utiliza ampliamente en diversas \u00e1reas, incluyendo el arte digital, el dise\u00f1o, la educaci\u00f3n y el entretenimiento.<\/p>\n<h3>Aspectos Clave de la Programaci\u00f3n Creativa<\/h3>\n<ul>\n<li><strong>Expresi\u00f3n<\/strong>: El enfoque principal est\u00e1 en la expresi\u00f3n art\u00edstica y la creatividad, en lugar de resolver problemas pr\u00e1cticos.<\/li>\n<li><strong>Exploraci\u00f3n<\/strong>: Implica explorar los l\u00edmites del c\u00f3digo y experimentar con diferentes t\u00e9cnicas para lograr resultados \u00fanicos.<\/li>\n<li><strong>Interactividad<\/strong>: Muchos proyectos de programaci\u00f3n creativa son interactivos, permitiendo a los usuarios interactuar con la obra de arte de manera din\u00e1mica.<\/li>\n<li><strong>Innovaci\u00f3n<\/strong>: La programaci\u00f3n creativa a menudo empuja los l\u00edmites de la tecnolog\u00eda, llevando a usos innovadores y poco convencionales del c\u00f3digo.<\/li>\n<\/ul>\n<h2>\u00bfPor Qu\u00e9 Usar Rust y ggez?<\/h2>\n<p>Rust es un lenguaje de programaci\u00f3n de sistemas conocido por su rendimiento, seguridad y concurrencia. Es una excelente opci\u00f3n para la programaci\u00f3n creativa debido a su velocidad y fiabilidad, que son cruciales para renderizar gr\u00e1ficos complejos y manejar interacciones en tiempo real. La biblioteca <code>ggez<\/code> es un framework ligero para el desarrollo de juegos en Rust que proporciona las herramientas necesarias para gr\u00e1ficos, audio, manejo de entrada y m\u00e1s, lo que lo hace ideal para proyectos de programaci\u00f3n creativa.<\/p>\n<h2>Primer Ejemplo: Simulaci\u00f3n de Fuego<\/h2>\n<p>Uno de los proyectos que abordaremos en esta serie es una simulaci\u00f3n de fuego, para mi es un cl\u00e1sico, dado que siempre lo uso como un mi particular \u00abHola Mundo\u00bb, de hecho pod\u00e9is ver un art\u00edculo muy antiguo m\u00edo (<a href=\"https:\/\/tizenspain.wordpress.com\/2013\/06\/24\/tizen-esta-que-arde-o-como-hacer-un-efecto-fuego-en-tizen-nativo\/\">clic aqu\u00ed<\/a>), programandolo para el sistema operativo Tizen de Samsung. Este proyecto demostrar\u00e1 c\u00f3mo crear un efecto de fuego din\u00e1mico y realista utilizando sistemas de part\u00edculas y gradientes de color.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-158 aligncenter\" src=\"https:\/\/santiagomarquezsolis.com\/wp-content\/uploads\/2024\/06\/fire-screenshot.png\" alt=\"\" width=\"345\" height=\"367\" srcset=\"https:\/\/santiagomarquezsolis.com\/wp-content\/uploads\/2024\/06\/fire-screenshot.png 492w, https:\/\/santiagomarquezsolis.com\/wp-content\/uploads\/2024\/06\/fire-screenshot-282x300.png 282w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>A continuaci\u00f3n, se explica brevemente c\u00f3mo funciona, como ver\u00e9is es un ejemplo muy bueno para practicar el uso de arrays de un modo un poco m\u00e1s divertido y original que el cl\u00e1sico ejemplo de sacar frutas o personas ;-):<\/p>\n<h3>L\u00f3gica de la Simulaci\u00f3n de Fuego<\/h3>\n<ol>\n<li><strong>Paleta de Fuego<\/strong>: Se utiliza una paleta de colores predefinida para representar diferentes intensidades de fuego, desde colores oscuros (baja intensidad) hasta colores brillantes (alta intensidad).<\/li>\n<li><strong>Array de Fuego<\/strong>: Un array 1D de valores <code>u8<\/code> almacena las intensidades del fuego para cada p\u00edxel en una cuadr\u00edcula 2D.<\/li>\n<li><strong>Inicializaci\u00f3n<\/strong>: El array de fuego se inicializa con ceros, y la fila inferior del array se establece con la intensidad m\u00e1xima para crear la fuente del fuego.<\/li>\n<li><strong>Propagaci\u00f3n<\/strong>: La intensidad del fuego de cada p\u00edxel se actualiza en funci\u00f3n del p\u00edxel directamente debajo de \u00e9l. Se resta un valor de decaimiento aleatorio para simular el enfriamiento del fuego a medida que asciende.<\/li>\n<li><strong>Renderizado<\/strong>: Cada p\u00edxel se dibuja como un rect\u00e1ngulo en la pantalla, con su color determinado por su valor de intensidad de la paleta de fuego.<\/li>\n<\/ol>\n<h3>T\u00e9cnicas Utilizadas<\/h3>\n<p><strong>1. Basada en Cuadr\u00edcula<\/strong>: El efecto de fuego se simula en una cuadr\u00edcula 2D donde el estado de cada p\u00edxel est\u00e1 influenciado por sus vecinos.<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li style=\"text-align: left;\"><strong>Cuadr\u00edcula 2D<\/strong>: Imagina una cuadr\u00edcula de p\u00edxeles donde cada p\u00edxel puede tener un valor de intensidad de fuego que va desde 0 (sin fuego) hasta 36 (fuego m\u00e1ximo).<\/li>\n<li style=\"text-align: left;\"><strong>Inicializaci\u00f3n<\/strong>: La fila inferior de la cuadr\u00edcula se inicializa con la m\u00e1xima intensidad de fuego (36). Esto representa la fuente del fuego.<\/li>\n<li style=\"text-align: left;\"><strong>Propagaci\u00f3n<\/strong>: Para cada p\u00edxel en la cuadr\u00edcula, se calcula su nueva intensidad de fuego basada en el p\u00edxel directamente debajo de \u00e9l. La intensidad del p\u00edxel superior se reduce por un valor de decaimiento aleatorio para simular el enfriamiento natural del fuego a medida que asciende.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h4>Ejemplo Gr\u00e1fico<\/h4>\n<p>Supongamos que tenemos una cuadr\u00edcula de 5&#215;5 p\u00edxeles para simplificar el ejemplo. Aqu\u00ed est\u00e1 la cuadr\u00edcula inicial con la fila inferior establecida en 36:<\/p>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<p>Durante la propagaci\u00f3n, cada p\u00edxel actualizar\u00e1 su intensidad basada en el p\u00edxel directamente debajo de \u00e9l, restando un valor de decaimiento aleatorio (por ejemplo, entre 0 y 2).<\/p>\n<h5>Paso 1: Propagaci\u00f3n Inicial<\/h5>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[35, 35, 34, 34, 35]  &lt;-- (36 - random decay)\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h5>Paso 2: Propagaci\u00f3n Siguiente<\/h5>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[34, 34, 32, 32, 34]  &lt;-- (35 - random decay)\r\n[35, 35, 34, 34, 35]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h5>Paso 3: Propagaci\u00f3n Continua<\/h5>\n<pre>[ 0,  0,  0,  0,  0]\r\n[32, 32, 30, 30, 32]  &lt;-- (34 - random decay)\r\n[34, 34, 32, 32, 34]\r\n[35, 35, 34, 34, 35]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h4>Visualizaci\u00f3n Gr\u00e1fica<\/h4>\n<p>Aqu\u00ed tienes una representaci\u00f3n gr\u00e1fica de c\u00f3mo se propaga la intensidad del fuego en una cuadr\u00edcula 2D. La primera imagen muestra la cuadr\u00edcula inicial, y las siguientes muestran c\u00f3mo se propaga el fuego hacia arriba.<\/p>\n<h4>Cuadr\u00edcula Inicial<\/h4>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h4>Propagaci\u00f3n Paso 1<\/h4>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[35, 35, 34, 34, 35]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h4>Propagaci\u00f3n Paso 2<\/h4>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[34, 34, 32, 32, 34]\r\n[35, 35, 34, 34, 35]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h4>Propagaci\u00f3n Paso 3<\/h4>\n<pre>[ 0,  0,  0,  0,  0]\r\n[32, 32, 30, 30, 32]\r\n[34, 34, 32, 32, 34]\r\n[35, 35, 34, 34, 35]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<p>Espero que esta explicaci\u00f3n y el ejemplo gr\u00e1fico te ayuden a entender mejor el concepto de propagaci\u00f3n basada en cuadr\u00edcula en la simulaci\u00f3n de fuego.<\/p>\n<p><strong>2. Decaimiento Aleatorio<\/strong>: Se utiliza un valor de decaimiento aleatorio para simular el enfriamiento natural del fuego a medida que asciende, agregando variabilidad y realismo al efecto.<\/p>\n<ol>\n<li><strong>Valor de Decaimiento<\/strong>: Para cada p\u00edxel, se genera un valor de decaimiento aleatorio, generalmente entre 0 y 2. Este valor representa cu\u00e1nto se reducir\u00e1 la intensidad del fuego en ese p\u00edxel.<\/li>\n<li><strong>Actualizaci\u00f3n de la Intensidad<\/strong>: La intensidad del fuego del p\u00edxel superior se actualiza restando el valor de decaimiento aleatorio de la intensidad del p\u00edxel directamente debajo de \u00e9l.<\/li>\n<li><strong>Variabilidad y Realismo<\/strong>: Al utilizar un valor de decaimiento aleatorio, se introduce variabilidad en la propagaci\u00f3n del fuego, haciendo que el efecto sea m\u00e1s realista y din\u00e1mico. En la naturaleza, el fuego no se propaga de manera uniforme, y esta t\u00e9cnica ayuda a simular ese comportamiento.<\/li>\n<\/ol>\n<h4>Ejemplo de Decaimiento Aleatorio<\/h4>\n<p>Supongamos que tenemos una cuadr\u00edcula de 5&#215;5 p\u00edxeles con la siguiente intensidad inicial en la fila inferior:<\/p>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<p>Durante la propagaci\u00f3n, cada p\u00edxel actualizar\u00e1 su intensidad basada en el p\u00edxel directamente debajo de \u00e9l, restando un valor de decaimiento aleatorio (por ejemplo, entre 0 y 2).<\/p>\n<h4>Paso 1: Propagaci\u00f3n Inicial<\/h4>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[35, 35, 34, 34, 35]  &lt;-- (36 - decaimiento aleatorio)\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h4>Paso 2: Propagaci\u00f3n Siguiente<\/h4>\n<pre>[ 0,  0,  0,  0,  0]\r\n[ 0,  0,  0,  0,  0]\r\n[34, 34, 32, 32, 34]  &lt;-- (35 - decaimiento aleatorio)\r\n[35, 35, 34, 34, 35]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<h4>Paso 3: Propagaci\u00f3n Continua<\/h4>\n<pre>[ 0,  0,  0,  0,  0]\r\n[32, 32, 30, 30, 32]  &lt;-- (34 - decaimiento aleatorio)\r\n[34, 34, 32, 32, 34]\r\n[35, 35, 34, 34, 35]\r\n[36, 36, 36, 36, 36]\r\n<\/pre>\n<p>En cada paso, el valor de decaimiento aleatorio ayuda a simular el enfriamiento y la variabilidad del fuego a medida que asciende por la cuadr\u00edcula.<\/p>\n<p><strong>3. Paleta de Colores<\/strong>: Una paleta de colores cuidadosamente elegida proporciona un gradiente suave de colores fr\u00edos a calientes, mejorando el atractivo visual del fuego, por lo que aqu\u00ed puedes jugar con los valores del array de colores, para crear un efecto fuego m\u00e1s tradicional o bien tirando a colores verdosos o azulados.<\/p>\n<h2>Otros Proyectos e Ideas<\/h2>\n<p>Adem\u00e1s de la simulaci\u00f3n de fuego, exploraremos otros proyectos de programaci\u00f3n creativa, incluyendo:<\/p>\n<ol>\n<li><strong>Sistemas de Part\u00edculas<\/strong>: Creaci\u00f3n de patrones y animaciones fascinantes utilizando part\u00edculas con diversos comportamientos e interacciones.<\/li>\n<li><strong>Arte Generativo<\/strong>: Exploraci\u00f3n de t\u00e9cnicas de generaci\u00f3n de arte algor\u00edtmico para crear dise\u00f1os intrincados y hermosos.<\/li>\n<li><strong>Visualizaciones Interactivas<\/strong>: Desarrollo de arte visual interactivo que responda a las entradas del usuario en tiempo real.<\/li>\n<li><strong>Generaci\u00f3n de Fractales<\/strong>: Implementaci\u00f3n de algoritmos fractales para generar patrones complejos y auto-similares.<\/li>\n<li><strong>Visualizaciones de Sonido<\/strong>: Visualizaci\u00f3n de datos de audio de formas creativas para producir gr\u00e1ficos audio-reactivos impresionantes.<\/li>\n<li><strong>Simulaciones F\u00edsicas<\/strong>: Simulaci\u00f3n de fen\u00f3menos f\u00edsicos como la din\u00e1mica de fluidos, la gravedad y las colisiones con fines art\u00edsticos.<\/li>\n<\/ol>\n<p>La programaci\u00f3n creativa es una forma emocionante de combinar la programaci\u00f3n con la expresi\u00f3n art\u00edstica. Usando Rust y <code>ggez<\/code>, podemos crear proyectos visualmente impresionantes y altamente interactivos. Espero que esta serie de proyectos te inspire a explorar y experimentar con la programaci\u00f3n creativa en Rust.<\/p>\n<p>Os dejo el enlace al codigo completo en mi repositorio de Github desde <a href=\"https:\/\/github.com\/santiagomarquezsolis-me\/rust-creative-coding\/tree\/main\/fire_simulation\">aqu\u00ed<\/a>.<\/p>\n<p>\u00a1Mantente atento a futuros proyectos y sigue creando!<\/p>\n<hr \/>\n<p>\u00a1Gracias por leer! Si tienes alguna pregunta o sugerencia, no dudes en dejar un comentario. \u00a1Feliz codificaci\u00f3n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hoy vengo con algo un poco diferente, y es que desde que Rust se ha convertido en uno de los lenguajes moda y uno de mis favoritos para trabajar con Blockchain, me he preguntado, si no ser\u00eda una buena idea usarlo para hacer algo de programaci\u00f3n creativa, del estilo de la Demoscene que se hac\u00eda [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,67],"tags":[68,70,71,69],"class_list":["post-157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-creative-coding","tag-creative-coding","tag-fire-effect","tag-pixel-art","tag-rust"],"jetpack_featured_media_url":"https:\/\/santiagomarquezsolis.com\/wp-content\/uploads\/2024\/06\/creative-coding-e1717880599957.webp","_links":{"self":[{"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/posts\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":8,"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/posts\/157\/revisions\/168"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/media\/159"}],"wp:attachment":[{"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santiagomarquezsolis.com\/index.php\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}