128kb Museum

Who I am

My name is Bruno Alexandre da Cruz Costa and I am a software development engineer with a huge passion for museums. As a media designer, I intend to further develop my scenography and museology skills to become a ‘museum designer’. My aim is to combine my current skills and knowledge to create more engaging exhibitions.

Idea & Process

This project is a combination of all my comrades project. I created a virtual museum with React Three Fiber with the purpose to display and show the GIFs created by my classmates during the 128kb workshop done with Tim Rodenbroeker.
I created a room with walls dedicated to each designer with 4 GIFs displayed : 2 on both sides.
The whole disposition is generated automatically and the last easter egg is a beautiful starry sky 🙂

Gallery

Videos

My favorite code

My favorite part of the project is the disposition of the elements, I used basic but interesting maths to generate automatically the displays and the walls in the museum:

const SIZE: [number, number, number] = [10, 5, 2];
const COLUMNS = 2;
const SPACING_X = 4; // Horizontal spacing between GIFs
const MAX_GIFS = 4;

const halfSpacingX = ((COLUMNS - 1) * SPACING_X) / 2;

const isBackSide = index >= 2;
const localIndex = index % 2;

const sideOffset = isBackSide ? -SIZE[2] / 2 - 0.1 : SIZE[2] / 2 + 0.1;
const col = localIndex;

const displayPosition: [number, number, number] = [
   position[0] - halfSpacingX + col * SPACING_X,
   position[1],
   position[2] + sideOffset,
];

const gifRotation: [number, number, number] = isBackSide ? [0, Math.PI, 0] : [0, 0, 0];

return (
   <GifDisplay
     key={gif.id}
     gif={gif}
     position={displayPosition}
     rotation={gifRotation}
     isBackSide={isBackSide}
     onEnter={onEnter}
     onExit={onExit}
    />

Find me on…

• Website
• Github
• Instagram