Welcome to Hex House:


Paintings of paintings, where your browser is the canvas.

Scroll for the Houses. Click here for process notes.

A project from Robbie Boccelli.

test

"Blue Cloud"

Mark Rothko

"Provincetown Window"

Helen Frankenthaler

"Abstract Painting"

Ad Reinhardt

The above paintings are paintings, pixelated & rendered by your browser. The browser and its engine is the canvas.

Each painting is made into a mosaic by splitting a source image into evenly sized squares and finding the average color of each.

The hexadecimal color value for each of these squares is then hand-pulled & transformed into an HTML element on the webpage. The format of the HTML is such so that your browser renders an image left-to-right, top-to-bottom, acting as a virtual printer.

Because the document consists of only fundamental HTML elements & no images — it is accessible from most any browser, machine, or internet speed.

The size of your browser is the size of the canvas. I encourage you to interact with them. You may resize your browser to find your preferred aspect ratio, you may guess the original aspect ratio before checking the source images linked below, & you may hover over the paintings to see a visualization of each component.

Rules for recreation & display:
1. The canvas & housing website must contain only HTML & CSS.
2. The hexadecimal values must be gathered manually.
3. The canvas & housing website must contain no images.
4. All color units must receive their own individual div regardless of repeating values.


Stats:
13,404 — Lines of HTML
29,332 — Lines of CSS
12,650 — Unique color units
919kB — Total size of website deliverables.

Special thanks:
Neil Simbulan, Chris Van Hoof, & Gray Leonard
for their patience, expertise, & inspiration.


Source Images:
Mark Rothko, Helen Frankenthaler, Ad Reinhardt


Hex House

A project from Robbie Boccelli