Interactive Portfolio

For this week’s assignment, we were tasked with working with DOM (document object model) elements in the p5 library, such as buttons and sliders, and a variety of functions intended for their presentation and control.

Given that the bulk of what I’ve done for this class so far has been abstract in nature—weird geometries, experimentation with color, delightful but nonsensical interactions, and so on—I wanted to make something a little more grounded this week, even something functional or utilitarian.

It could be considered ironic then that my first designs were pretty directly inspired by Gerhard Richter’s abstract “strip paintings” (pictured below), which were digitally produced using image editing software.

Gerhard Richter’s

Online portfolios are almost uniformly minimalist in style. While minimalism is often both highly appropriate for and becoming of these portfolios, I feel that the maximalism exemplified in a work such as Richter’s presents a refreshing, and viable, alternative to the black-text-on-white-background portfolio standard.

Adapting Richter’s design in code was fairly simple, and I arrived at several close approximations pretty quickly. All it involves is a for loop, a line, and randomized values for stroke weight (between 2 and 8) and color (R, G, and G values randomized from 0 and 255).


Pictured right is my adaption of Richter’s work. Every time the sketch is loaded, the design appears slightly different, owing to the randomization of color and proportion.

I showed several people this early design, and despite the relative simplicity of its code, they seemed entranced by the subtle variations produced by reloading the page on which the sketch appeared. So, rather than using this design as a static background for a portfolio, I decided to implement an interactive element that would allow users to more seamlessly cycle through the random animations. I did this by writing a button that would redraw the sketch anew whenever pressed.

Here is the result:

Now all that remains to be done is to build the portfolio.

As this is only a prototype, I’m limiting myself to just a handful of work examples—nine pieces of writing from the last year or so. I pulled images relevant to these pieces and arranged them in three rows of three, loading them in HTML and styling them in CSS, all within the p5 web editor.

I made several versions—one with horizontal stripes arranged in a tight knit, a few with stripes that formed a looser knit, and though which the background was visible. (The looser knit is the result of a slight disparity between the increment in the for loop and the randomized stroke weight of the lines.)

Looser knit, through which background is visible
Tight Knit











Ultimately, I decided in favor of looser knit, particularly one that incorporates some random white/negative space between the stripes, as this imparts a greater sense of lightness to the whole thing.

I imported a still image of the portfolio into Adobe Photoshop, where I created a grid to help me arrange the various jpegs more evenly.


Here is the finished (as of yet, anyway) product.



Leave a Reply

Your email address will not be published.