Programming as a Lifestyle

Random dots

Visual effect obtained by overlaying two identical plains of randomly placed dots, and then rotating and translating one of them.

Dragon curve

A dragon curve fractal created using a Lindenmayer System algorithm. It's a system that iterates on string replacement based on a set of rules and an initial state. It's translated into an illustration with turtle graphics.

Technical documentation page

A mockup of a technical documentation page, with placeholder information obtained from the ReactJS docs.

Rotating squares

A visual effect obtained by rotating increasingly big squares. Each square gets a slightly different speed of rotation to obtain the effect.

Fractal tree

A fractal tree generated using a recursive function that enables the user to set depth, angle and length freely.

Geometric pattern

Parametric straight lines that produce the illusion of curvature with their intersections.

Mandelbrot set

It's a set of complex numbers c for which a recursive function does not diverge, i.e., remains bounded in absolute value (2). The visualization assigns a color per pixel based on the amount of iterations it took to get to a value bigger than 2.

Pendulum wave

Visual effect obtained by simulating simple pendular motion with the Cosine function.

Choropleth Map

Part of an incursion into D3.js. A chart that maps data into geographical polygons and displays magnitude with color.

Conway's Game of Life

Zero-player game (meaning it's development is determined by its initial state) dominated by a set of rules that can be boiled down to three: any cell with two or three neighbours survives, any dead cell with three live neighbours becomes a live cell and any other cells die or stay dead in the next generation.

Letter counter

An app created out of curiosity as to the frequency distribution of letters in English versus Spanish. It takes input text and generates a histogram.

Javascript Calculator

Basic calculator emulated with Javascript and React.

Product landing page

Product landing page that features cards, pricing and about info.

Sierpinski triangle

Procedurally generates the famous Sierpinski triangle fractal by using a Lidenmayer system (string replacement and turtle graphics).

Wikipedia viewer

One of my earlier projects for a coding bootcamp. It interacts with the Wikipedia API and displays a series of responses to the user, and then offers links to the articles. It can also lead to a random article.

Heat Map

A map that showcases magnitude as a third dimension by using color steps, with the other two being different time steps.

Polar rose

A flower animation produced with an increasing value in the polar rose equation. It produces the effect using polar coordinates and the Cosine function.

Fractal plant

A fractal plant made using a Lindermayer System algorithm. It's a system that iterates on string replacement based on a set of rules and an initial state. It's translated into an illustration with turtle graphics.

Tribute page

One of my very first coding projects: a simple tribute page dedicated to Fernando del Paso. Created as a project for a coding bootcamp.

Weather app

A simple app that gets the user's location and fetches and displays weather data from the Dark Sky API.

Quadratic Koch Island

Quadratic Koch Island generated using a Lindenmayer system.

Bar Chart

Part of an incursion into D3.js. Simple bar chart.

Trying to sleep

A simple project in itself: a line that grows to a randomly selected point in the screen each frame. Still, it's one of my favorites because it encapsulates my insomnia experience quite well. Thus, its name.

Collatz Conjecture

A visualization of the Collatz Conjecture for all numbers between 2 and 10,000.

Snake

A rendition of the classic game 'Snake' together with a little incursion into pixel art for creating the little mouse.

Pomodoro-like clock

A clock that allows you to keep track of work versus rest sessions in accordance to the Pomodoro method proposed by Francesco Cirillo.

Survey form

Sample survey form with a wide selection of entry-types and form control.

Purple rain

An animation of purple rain, in honor of Prince's song. It served as a test in the concept of a simulated third dimension in 2D animation.

Gravity

A very simplistic parametric simulation of gravity towards a center point using particles and vectors.

Markdown previewer

A simple previewer that allows you to parse Github-flavored markdown in real time.

Circle animation

Part of a study of trigonometric functions and polar coordinates, this animation generates a regular polygon by joining a single dot's projection accross several evenly-separated lines.

Particle connections

Random moving particles that connect to each other based on proximity.

Geometric flower

Symmetric geometric pattern that resembles a flower, produced with straight lines.

Drum machine

Basic drum machine with keyboard functionality.

Pong

A crude implementation of the classic game Pong, with a second player that automatically follows the ball.

Fireworks (particle study)

Fireworks simulated using particles, vectors, and applying forces.

Scatter Plot

Part of an incursion into D3.js. Simple scatter plot with a third dimension added by using colors.

Random quotes

A random quotes app that allows you to tweet. Created as a coding bootcamp project.

Exercise tracker

Small full-stack exercise tracker, complete with a server and DB for storing users and logs.

Sine and Cosine

Part of a study on trigonometric functions and polar coordinates, this animation shows how the Sine and Cosine functions relate to the projections of a dot following a circumference.

Shy particles

Particles simulated using vectors and applying forces. They are repelled by mouse (or touch) movement over the canvas.

How I use programming

All