Metacompass
An interactive installation guides users through a landscape showcasing the FUTURES Foundation’s featured photography.
This installation aims to amplify the Foundation’s mission: to foster an ecosystem that encourages and nurtures connections among emerging artists worldwide. It aims to underscore the power of photography as a means to bridge diverse perspectives and realities, creating new opportunities for photographers and the public alike.
By using a phone as a compass, users can navigate within the artists’ photographs, immersing themselves in the world of contemporary photography.
Video
Metacompass Installation
The map
By using a grid and connecting it to real-world map coordinates we transform the known map concept into a new form that is cutting-edge and intriguing for a curious visitors to explore.
The map and the movement of the images
For the animation on the screen, we wanted to create a pop-up illusion where the pictures increased in size slowly and have full opacity when they are overlapped by the cross, but be small and at half opacity when far from the cross. To do so, we created a function called checkOverlapCross().
function checkOverlapCross() {
.
.
.
gallery.animate(
{
transform: `translate(${panX}px, ${panY}px)`,
},
{
duration: 4000,
fill: "forwards",
easing: "ease",
}
);
const radius = 125,
maxScale = 2,
blocks = document.querySelectorAll(".block");
blocks.forEach((block) => {
const blockRect = block.getBoundingClientRect();
(block.cx = blockRect.left + blockRect.width / 2 + window.scrollX),
(block.cy = blockRect.top + blockRect.height / 2 + window.scrollY);
block.tween = gsap
.to(block, { scale: maxScale, ease: "power1.in", paused: true })
.progress(1)
.progress(0);
.
.
.
if (overlaps) {
block.style.zIndex = 5;
block.style.opacity = 100;
} else {
block.style.zIndex = "";
block.style.opacity = "";
}
});
let i = blocks.length,
dx,
dy,
block;
while (i--) {
block = blocks[i];
dx = (block.cx - crossX) ** 2;
dy = (block.cy - crossY) ** 2;
let distance = Math.sqrt(dx + dy);
if (distance > radius) {
gsap.to(block, { scale: 1, ease: "power1.inOut", duration: 0.5 });
} else {
let progress = Math.max(0, 1 - distance / radius);
block.tween.progress(progress);
}
}
}Movement of the map
The compass
Visitors will get the power to explore the featured work of Futures by using smartphone compass. By moving the phone to different angles users will be able to browse and select desired pictures from the map. We believe this interaction will be immersive, easy to use and will get all the visitors connected with the installation.
The Compass UI
The map moves according to the movement of the compass
To be able to use the phone to control the screen, we first had to connect to a database to allow real time updating and receiving of information. With the connection established, we could retrieve the device orientation and use this information to control the movements on screen.
The information we need includes the x, y, alpha, beta and gamma from the device orientation and as we needed to check constantly if the buttons are clicked on the phone, we also had to update whether they were pressed.
document.addEventListener("DOMContentLoaded", async () => {
database
.channel(tableName)
.on(
"postgres_changes",
{ event: "*", schema: "public", table: tableName },
(payload) => {
handleInserts(payload.new);
}
)
.subscribe();
let { data, error } = await database.from(tableName).select("*");
handleInserts(data[0]);
});
Metacompass database
On the phone, we wanted to show a compass that would move according to the rotation of the phone. To do so, we used the information from device orientation and mapped it to the movement of the indicator and the cross on the compass.
// movement of the indicator
var rotation_degrees = event.alpha;
var indicator = document.getElementById("indicator");
indicator.style.transform = `rotate(${rotation_degrees}deg)`;
// movement of the cross
const beta = event.beta;
const maxMovement = 50;
const clampedBeta = Math.max(-90, Math.min(90, beta));
const movement = (clampedBeta / 90) * maxMovement;
const cross = document.querySelector(".cross");
cross.style.transform = `translateY(${movement}px)`;We also had functions getInfo() and goBack() that were opposite functions that are called whenever the different buttons were pressed. It also calls another function showLocation() which uses the carouselIndex() pulled from the client side to display the specific location and artists in that area.
function getInfo() {
document.getElementById("newButtonId").style.display = "none";
document.getElementById("instructions").style.display = "none";
document.getElSementById("goBackButton").style.display = "block";
showLocation(carouselnumber);
let smallfont = document.getElementById("Header1");
smallfont.style.fontSize = "15px";
}By selecting an image, users can discover the name of the artists and their nationalities. In this case as well, by moving the phone, the user can scroll through the images of various artists belonging to that specific nation.
Images showcase
On the screen, the information pulled from the phone would affect the movement seen on the screen and when the button is clicked while hovering over images, it would open a carousel of images to display the images in a larger size as well as the location and artists’ names.
If the condition is met and the button is clicked, we then check which blocks were overlapped and group them according to locations. When the function openCarousel() is called, which opens up an overlay over the map to show the images in a location.
document.addEventListener("DOMContentLoaded", () => {
gallery.addEventListener("click", function (e) {
if (document.getElementById("overlay").style.display == "none") {
const numberOfChildBlocks = 42;
for (let i = 1; i <= numberOfChildBlocks; i++) {
((index) => {
const block = document.querySelector(`.block:nth-child(${index})`);
if (overlaps) {
if (index === 1) {
carouselIndex = 1;
carouselCountry = "Denmark";
countryCoordinates = "56.2639° N, 9.5018° E";
}
.
.
.
else if (index === 41 || index === 42) {
carouselIndex = 16;
carouselCountry = "Slovenia";
countryCoordinates = "46.1512° N, 14.9955° E";
}
openCarousel(carouselIndex, carouselCountry, countryCoordinates);
}
})(i);
}
}
});