Programming as a Lifestyle

Scatter Plot

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

Javascript Calculator

Basic calculator emulated with Javascript and React.

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.

Geometric flower

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

Random quotes

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

Particle connections

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

Random dots

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

Exercise tracker

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

Markdown previewer

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

Pendulum wave

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

Snake

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

Weather app

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

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.

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.

Product landing page

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

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.

Pong

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

Fractal tree

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

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.

Technical documentation page

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

Bar Chart

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

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.

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.

Fireworks (particle study)

Fireworks simulated using particles, vectors, and applying forces.

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.

Shy particles

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

Gravity

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

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.

Rotating squares

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

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.

Collatz Conjecture

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

Heat Map

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

Quadratic Koch Island

Quadratic Koch Island generated using a Lindenmayer system.

Choropleth Map

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

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.

Survey form

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

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.

Drum machine

Basic drum machine with keyboard functionality.

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.

How I use programming

All