Art x Hack

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

TL;DR

When I heard of this challenge and read “gallery” my brain instantly thought of art galleries instead of the traditional internet image gallery. This is why I decided to actually build a 3D art gallery with art work that means something to me, and Netlify CDN to make it technically feasible.

What I Built

I built a 3D art gallery with Three.js, React, Tailwind, and of course Netlify CDN. The code can be found on Github

For the art, I picked special pieces that mean something to me. Some of them introduced me to a new kind of art, some are from my friends, and some I simply find funny.

The best way to experience it is to try it out here or watch the demo below:

Demo

Check it out here

Screenshots

The initial view:

After clicking on a frame with the description and save button:

After clicking on save:

Platform Primitives

There are two ways I integrated the Netlify CDN. In the display of the art works and the way they are downloaded:

Frames

Instead of downloading all the images and resizing them manually to fit the golden ratio frames (1:1.61), I used Netlify CDN to dynamically fetch them from their original source and resize them on the fly.

To achieve that, I simply wrote a wrapper function for the URLs of the displayed art works:

const netlifyCDN = (url) =>
  `https://the-virtual-gallery.netlify.app/.netlify/images?url=${url}&h=1610&w=1000&fit=cover`;

netlifyCDN("https://meine.rs/photography/img/Train%20Station.webp")

There are 3 reasons why using the Netlify CDN makes sense here:

1. I don't want to overload the servers where the source images are and need some sort of caching
2. I would rather not download the images and manipulate them myself
3. Changing the displayed images is as easy as changing the remote URL!

Download

One of the main goals was showing others some of my favorite art pieces and making it easy for them to also enjoy it. That's why I added a download function:

The download function allows anyone to download the images in their preferred format. To make it even easier, I added some presets for common layouts, such as 4k Desktop or iPhone 13 wallpaper sizes.

When you click download I simply set the w, h, fit, and fm parameters to set the width, height, fit and format:

const url = new URL(currentImage.url);
url.searchParams.set("w", width);
url.searchParams.set("h", height);
url.searchParams.set("fit", fit);
url.searchParams.set("fm", imageType);

const a = document.createElement("a");
a.href = url.toString();
a.download = "art";
a.target = "_blank";
a.download = "art";
a.click();
a.remove();

I then create an invisible a tag with the Netlify CDN as href attribute and click on it automagically. Tada, your optimized and formatted image is getting downloaded!

Credits / Inspiration

I've not been the first one to build something like this, these projects inspired and helped me bootstrap everything:

• The awesome VR mansion gallery by adrianlines, with some hilarious portraits and awesome interactivity:
• Luca's Three.js gallery

Reflection

For me, creativity is random. I cannot force being creative and it usually comes at the weirdest times through some weird situation. While I cant force creativity, I can create space for serendipity (lucky accidents) to happen. And for me personally, this happens through stuff I do outside of coding.

So my appeal to you is: Go out! Go visit an art museum, even if you usually don't care for art. If you already like art, maybe go to a weird improv theater or to an open day of any institution or company in your area.

I hope inspiration will come to you!

Cheers,
Jonas