Introduction on Visual Computinghttps://oscaralvarezrodriguez.github.io/Computacion-Visual/Recent content in Introduction on Visual ComputingHugo -- gohugo.ioen-usCreating a New Themehttps://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/creating-a-new-theme/Sun, 28 Sep 2014 00:00:00 +0000https://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/creating-a-new-theme/Introduction # This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I&rsquo;ll explain how Hugo uses templates and how you can organize your templates to create a theme. I won&rsquo;t cover using CSS to style your theme. We&rsquo;ll start with creating a new site with a very basic template.Migrate to Hugo from Jekyllhttps://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/migrate-from-jekyll/Mon, 10 Mar 2014 00:00:00 +0000https://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/migrate-from-jekyll/Move static content to static # Jekyll has a rule that any directory not starting with _ will be copied as-is to the _site output. Hugo keeps all static content under static. You should therefore move it all there. With Jekyll, something that looked like ▾ &lt;root&gt;/ ▾ images/ logo.png should become ▾ &lt;root&gt;/ ▾ static/ ▾ images/ logo.png Additionally, you&rsquo;ll want any files that should reside at the root (such as CNAME) to be moved to static.(Hu)go Template Primerhttps://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/goisforlovers/Wed, 02 Apr 2014 00:00:00 +0000https://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/goisforlovers/Hugo uses the excellent Go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in Go templates. This document is a brief primer on using Go templates.Getting Started with Hugohttps://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/hugoisforlovers/Wed, 02 Apr 2014 00:00:00 +0000https://oscaralvarezrodriguez.github.io/Computacion-Visual/posts/hugoisforlovers/Step 1. Install Hugo # Go to Hugo releases and download the appropriate version for your OS and architecture. Save it somewhere specific as we will be using it in the next step. More complete instructions are available at Install Hugo Step 2. Build the Docs # Hugo has its own example site which happens to also be the documentation site you are reading right now. Follow the following steps:<link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/buttons/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/buttons/</guid><description>Buttons # Buttons are styled links that can lead to local page or external link. Example # {{&lt; button relref=&#34;/&#34; [class=&#34;...&#34;] &gt;}}Get Home{{&lt; /button &gt;}} {{&lt; button href=&#34;https://github.com/alex-shpak/hugo-book&#34; &gt;}}Contribute{{&lt; /button &gt;}} Get Home Contribute</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/columns/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/columns/</guid><description>Columns # Columns help organize shorter pieces of content horizontally for readability. {{&lt; columns &gt;}} &lt;!-- begin columns block --&gt; # Left Content Lorem markdownum insigne... &lt;---&gt; &lt;!-- magic separator, between columns --&gt; # Mid Content Lorem markdownum insigne... &lt;---&gt; &lt;!-- magic separator, between columns --&gt; # Right Content Lorem markdownum insigne... {{&lt; /columns &gt;}} Example # Left Content # Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter!</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/details/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/details/</guid><description>Details # Details shortcode is a helper for details html5 element. It is going to replace expand shortcode. Example # {{&lt; details &#34;Title&#34; [open] &gt;}} ## Markdown content Lorem markdownum insigne... {{&lt; /details &gt;}} {{&lt; details title=&#34;Title&#34; open=true &gt;}} ## Markdown content Lorem markdownum insigne... {{&lt; /details &gt;}} Title Markdown content # Lorem markdownum insigne&hellip;</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/expand/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/expand/</guid><description>Expand # Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it. Example # Default # {{&lt; expand &gt;}} ## Markdown content Lorem markdownum insigne... {{&lt; /expand &gt;}} Expand ↕ Markdown content Lorem markdownum insigne&hellip; With Custom Label # {{&lt; expand &#34;Custom Label&#34; &#34;...&#34; &gt;}} ## Markdown content Lorem markdownum insigne.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/GP-VIsual/Nicolas/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/GP-VIsual/Nicolas/</guid><description>Espacio de Nicolas # Ilusión óptica - El efecto Troxler # El efecto Troxler fue primero identificado por el físico suizo Ignaz Paul Vital Troxler en 1804. Este efecto ocurre cuando uno se fija en un punto particular por un corto periodo de tiempo y al hacer esto, un estímulo invariable alejado del punto de fijación se va a ir difuminando y desapareciendo. Este efecto ha sido atribuido a la adaptación de las neuronas encargadas de percibir estímulos en el sistema visual y el sistema sensorial en general.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/GP-VIsual/Oscar/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/GP-VIsual/Oscar/</guid><description>Espacio de oscar # Primer tarea # Ilusión óptica - Conexión diagonal de los puntos de intersección # Son líneas fugazmente ilusorias que conectan en diagonal los puntos de intersección de los polígonos de las estrellas. &ldquo;Nunca se ha demostrado que los rayos ilusorios atraviesen el fondo de un diseño&rdquo;, dijo Karlovich a Live Science. &ldquo;Todas las demás ilusiones que implican líneas ilusorias se limitan a los diseños de cuadrícula&rdquo;.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/GP-VIsual/Valentina/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/GP-VIsual/Valentina/</guid><description>Ilusión Óptica de Hering # Fue propuesta por el fisiólogo Ewald Hering en 1861. Es una ilusión óptica que confunde el cerebro respecto a lineas rectas que parecen curvarse sobre radiales negros que tienen al fondo. La distorción aparente se produce por el diseño radial del fondo, ya que estimula la perpectiva y crea una falsa impresión de profundidad. Se atribuye a la forma en que el cerebro humano no cuenta con la suficiente capacidad para procesar información, por lo tanto se ve forzado a tomar atajos, como la ilusiones ópticas.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/hints/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/hints/</guid><description>Hints # Hint shortcode can be used as hint/alerts/notification block. There are 3 colors to choose: info, warning and danger. {{&lt; hint [info|warning|danger] &gt;}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{&lt; /hint &gt;}} Example # Markdown content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa Markdown content</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Indagacion/Algoritmo/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Indagacion/Algoritmo/</guid><description>TAREA 2 - Indagación sobre método de Iluminación Global # Radiosidad (Gráficos computacionales) # 1. Explicación del algoritmos de radiosidad # Para la implementación de algoritmos de radiosidad se consideran todos los puntos y objetos de la escena y la luz que llega a cada uno, de ahí que se tomen como luces potenciales con luz propia (luz directa) o proveniente de otros objetos (luz indirecta). También es una aplicación del método de los elementos finitos para resolver la ecuación de renderizado, extendido hasta calcular la interacción de reflexión difusa entre objetos de una escena, simulando transferencia de luz.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Indagacion/Contextualizacion/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Indagacion/Contextualizacion/</guid><description>TAREA 2 - Indagación sobre método de Iluminación Global # Radiosidad (Gráficos computacionales) # Contextualización # En gráficos de computadora 3d, la radiosidad es la aplicación del método de elemento finito para resolver la ecuación de rasterización para escenas con superficies que reflejan luz de manera difusa. A diferencia de otros métodos de rasterización que utilizan algoritmos Monte Carlo (como path tracing), donde se manejan todo tipos de caminos de luz, la radiosidad típica solo cuenta los caminos que dejan una fuente de luz y son reflejados de manera difusa algún número de veces antes de golpear el ojo.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Indagacion/Ejemplo/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Indagacion/Ejemplo/</guid><description>TAREA 2 - Indagación sobre método de Iluminación Global # Radiosidad (Gráficos computacionales) # NOTA: La información presentada aqui es un supuesto de donde puede ser aplicado el algoritmo de Radiosidad, esto debido a que no se encontró de manera explicita una aplicación. # # En las otras dos secciones se ha hablado en general de la iluminación global y la Radiosidad tanto de su algoritmo como de sus implicaciones además de un poco de historia.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/katex/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/katex/</guid><description>KaTeX # KaTeX shortcode let you render math typesetting in markdown document. See KaTeX Example # {{&lt; katex [display] [class=&#34;text-center&#34;] &gt;}} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {{&lt; /katex &gt;}} \[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\] Display Mode Example # Here is some inline example: \(\pi(x)\) , rendered in the same line. And below is display example, having display: block \[f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\] Text continues here.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/mermaid/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/mermaid/</guid><description>Mermaid Chart # MermaidJS is library for generating svg charts and diagrams from text. Override Mermaid Initialization Config To override the initialization config for Mermaid, create a mermaid.json file in your assets folder! Example # {{&lt; mermaid [class=&#34;text-center&#34;]&gt;}} stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --&gt; State2 note left of State2 : This is the note to the left.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/p5/div/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/p5/div/</guid><description>p5 div shortcodes embed p5.js code within a div element. There are two p5 div shortcodes: p5-div and p5-instance-div. p5-div # {{&lt; p5-div ver=&#34;1.4.0&#34; sketch=&#34;/path/to/sketch.js&#34; lib1=&#34;https://cdntolib1/lib1.js&#34; &gt;}} All parameters are optional but sketch. Default values are shown in the above snippet but for libs*. Up to lib5 libs may be specified. Scintillating grid # Look at this and also this among many more references there are. p5-div markdown {{&lt; p5-div sketch=&#34;/vc/sketches/scintillating.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/p5/iframe/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/p5/iframe/</guid><description>p5 iframe shortcodes embed p5.js code within an iframe element. There are two p5 iframe shortcodes: p5-iframe and p5-global-iframe. p5-iframe # {{&lt; p5-iframe ver=&#34;1.4.0&#34; sketch=&#34;/path/to/sketch.js&#34; lib1=&#34;https://cdntolib1/lib1.js&#34; width=&#34;800&#34; height=&#34;600&#34; &gt;}} All parameters are optional but sketch. Default values are shown in the above snippet but for libs*. Up to lib5 libs may be specified. Color relativity # Look at this brief explanation about what color relativity is. p5-iframe markdown {{&lt; p5-iframe sketch=&#34;/vc/sketches/colors.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Rasterizacion/Contextualizacion/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Rasterizacion/Contextualizacion/</guid><description>TAREA 2 - Implementación de un algoritmo de rasterización # Contextualizacion - Rasterización de circulos # Este es un algoritmo de muestreo que se efectúa en un dominio discreto, se usa para determinar los puntos necesarios para rasterizar un círculo aprovechando también la simetría del mismo. Un ejemplo de ciento cincuenta círculos concéntricos dibujados con el algoritmo de círculo de punto medio.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Rasterizacion/Ejemplo/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Rasterizacion/Ejemplo/</guid><description>TAREA 2 - Implementación de un algoritmo de rasterización # Rasterización de circulos # Ejemplo de en donde puede aplicarse algún algoritmo de rasterización de circulos. # Antes de observar los ejemplos lea las primeras dos partes Contextualización e Implementación que permite la compresión más a fondo de por qué seria efectivo aplicar la rasterización de circulos principalmente en videojuegos antiguos de pixel art (hay que tener en cuenta que en cada frame del video juego se debe redibujar y calcular los objetos)</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Rasterizacion/Implementaci%C3%B3n/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Rasterizacion/Implementaci%C3%B3n/</guid><description>TAREA 2 - Implementación de un algoritmo de rasterización # Rasterización de circulos # Implementación - Algoritmo de Rasterización de Circulo de Bresenham # let x, y, r, d, xc, yc,vr,vx,vy; let i = 0; let grids = 30; let scalFact; vr = 6; vx = 10; vy = 10; function setup() { createCanvas(600, 600); scalFact = width / grids; } function getRandomArbitrary(min, max) { return Math.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/tabs/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/tabs/</guid><description>Tabs # Tabs let you organize content by context, for example installation instructions for each supported platform. {{&lt; tabs &#34;uniqueid&#34; &gt;}} {{&lt; tab &#34;MacOS&#34; &gt;}} # MacOS Content {{&lt; /tab &gt;}} {{&lt; tab &#34;Linux&#34; &gt;}} # Linux Content {{&lt; /tab &gt;}} {{&lt; tab &#34;Windows&#34; &gt;}} # Windows Content {{&lt; /tab &gt;}} {{&lt; /tabs &gt;}} Example # MacOS MacOS # This is tab MacOS content. Lorem markdownum insigne. Olympo signis Delphis!</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Fotomosaico-Hardware/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Fotomosaico-Hardware/</guid><description>Taller Final # Fotomosaico - Hardware # En el campo de las imágenes y la fotografía, un fotomosaico es una imagen usualmente una fotografía que ha sido dividida en secciones rectangulares (usualmente del mismo tamaño), tal como es compuesto un mosaico tradicional, con la característica de que cada elemento del mosaico es reemplazado por otra fotografía con colores promedios apropiados al elemento de la imagen original. Cuando es vista en detalle, los píxeles individuales se ven como la imagen principal, sin embargo al verla como un todo, es posible apreciar que la imagen está compuesta por cientos de miles de imágenes.</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Fotomosaicos/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Fotomosaicos/</guid><description>Espacio de oscar # Primer tarea # Ilusión óptica - Conexión diagonal de los puntos de intersección #</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Interfaz/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Interfaz/</guid><description>Interfaz # let input; let img; function setup() { input = createFileInput(handleFile); input.position(20, 20); } function draw() { background(255); if (img) { image(img, 0, 0, width, height); } } function handleFile(file) { print(file); if (file.type === &#39;image&#39;) { img = createImg(file.data, &#39;&#39;); img.hide(); } else { img = null; } } "</description></item><item><title/><link>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Webcrawler/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://oscaralvarezrodriguez.github.io/Computacion-Visual/docs/shortcodes/Taller-final/Webcrawler/</guid><description>WebCrawler # package crawer; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.UnsupportedEncodingException; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection; import java.net.URLEncoder; import org.jsoup.Connection; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; public class meizi { /** * Download the picture to the specified directory * * @param filePath File path * @param imgUrl Picture URL */ public static void downImages(String filePath, String imgUrl) { // If the specified folder does not exist, create it first File dir = new File(filePath); if (!</description></item></channel></rss>