Discover the Caliscope!

How would you like to browse paintings in an interactive and yet intuitive way on your phone? The Caliscope is an online very lightweight web app that lets you swipe through dozens of abstract paintings with only a cube… but thanks to the magic of virtualization, this cube can have more than 6 faces!

You might remember that, a few months ago, I collaborated with the abstract painter Cali Rezo on a really neat project: the creation of a 3D virtual studio to make virtual exhibitions in. This project aimed at replacing the usual yearly opening Cali has at her studio and that was sadly prevented by the current Covid-related restrictions. It was a super interesting piece of code to work on and it taught me a lot in terms of browser 3D rendering and Vue app building.

But a downside to this virtual visit is that it is hardly compatible with mobile phones. (Trust me: we’ve tried, and it doesn’t work – mobiles aren’t meant to render 3D studios, and they aren’t meant to have you rotate a camera around with swiping!)

We still wanted to hit the on-mobile audience, so we thought of another app, something way simpler: an online kaleidoscope, a virtual gallery that could exhibit a little over 50 paintings but in a condensed and intuitive way.

Enters the Caliscope. It’s basically a little cube with Cali’s paintings on the sides… except that these paintings keep on changing randomly so as to show you the entire collection. Not completely randomly, however, since you can still “undo” your latest moves to go back to a painting you liked.

To give you a peek, here’s a little demo video we did for the project (16”):

Want to give it a shot? It works both on mobile and computers, and it’s available over here:

https://www.minapecheux.com/caliscope/

Something really cool with this small app is that it only uses native web tech: HTML, CSS and Javascript. Apart from the hammer.js library vendor, it’s all vanilla browser programming. (It is then served by a light Golang server on the VPS.) I enjoyed very much going back to the basics!

Note: because it relies on some modern CSS features such as filters, it might not work on any browser (for example, Internet Explorer or Ecosia seem to have a hard time doing the false-3D rendering tricks…).

I hope you’ll like it – please feel free to react either on this blog post, on Cali’s instagram or on my LinkedIn.

Leave a Reply

Your email address will not be published. Required fields are marked *