Hello

Welcome to this world, I'll be your guide, as you see, I am the curator.

In 2020 a virus broke our routines, it stopped gatherings, and it prevented the Werkschau. In this trying times, a fearsome group of Digital Ideations students took those pieces and said NO. I have been tasked (well, asked nicely) to take those pieces and forge a place where we present our work.

This museum represents part of what Digital Ideation is, it represents who the Bubbles are, and it shows their finest works. It further challenges what a website is, how the third Dimension can be accessed and combined with content on a two-dimensional surface.

Philosophy and Principle

The quest begins with breaking down the original Werkschau and figuring out which aspects could be used in this project and how others could be changed. The 3D world aims to create a place to explore. The 2D map and project pages, on the other hand, want to leverage the strengths of the print medium to present information comfortably and legibly.

Although this project is at its core serious and will do its best to present everyone's work as good as possible, it is also a project that tries to reflect the 2020 Bachelor Students (aka Bubbles). The museum's character has been chosen, although not solely, a form that the Bubbles could identify themselves with.

Design and Structure

I had to make an exhibition, but to do that, I first had to figure out what an exhibition is. With my mentor, Lea Schaffer, I went on a quest to do just that. This included figuring out a floor plan, a map, and a guide but also the importance of certain information that needed to be provided.

As a result, the floor plans represent the three specializations of Digital Ideation. UX, Web, and Game. As none of the projects truly belong in one of those but rather a mix of them. Digital Ideation also distinguishes between designers and programmers; however, the student's final projects utilized too many skills as a separation in these two wouldn't make sense.

Light

Light is arguably the most crucial aspect when presenting artwork. In this Black Box, nothing exists without deliberate creation. The light tries to be subtle but also does not try to emulate the real world. One light at the top, one at the bottom, but infinitely far away. This results in a light that appears to have shadows but doesn't.

Retro Look

The Museum has a distinctly retro look, and it certainly is part of the theme chosen from the Bubbles, but its reasoning goes further than that. In the early days, this look established itself based on the availability of computer resources that limited many aspects, like polygons, lighting, and post-processing. Although computers have evolved tremendously since then, these considerations still apply today, especially on the web.

Technical Implementation

Well, it took more than every tool I had on my belt to create this project. From a stateless RESTful API written with express.js on Node to the server-side rendering of Vue.js, eventually to shaders and quaternions. However, some of my highlights are these:

CMS The content management system would allow the independent creation and update of all the projects. More precisely, it will enable the presenter to log themself in and position their model within the 3D world and modify it. It also means that all the articles and content can be changed on the website itself, allowing uploading images and files and integrating third-party content.

SEO Or Search Engine Optimisation is essential to allow Google and other search tools to find the content on this page. It also enables apps like Twitter and Whatsapp to provide preview content of what people would find on this page.

Security Well, it's pretty cool.

Speed This website is not small; in fact, it's huge. However, you (should) be able to view it without any problem. The secret behind are nifty systems that control the loading order and execution of various aspects of this page. The whole page can scale quickly, as this independence lies at the core of the architecture.

2D but also 3D
Creating a 2D website is relatively simple, creating a 3D world, although not as easy, has been done a few times. However, seamlessly transitioning between those needed a new system. The system needs to be able to identify the position in the 3D world and the 2D screen space and enable and disable the various controls mechanics like scrolling and the WASD keys. The camera needs to move to the correct location. A unique concern was that on the first load of the page, to show the page to the user as fast as possible, all the parts of the page load independent from one another and in a custom order. If one a user loads the museum, the order focuses on loading the museum first; however, if the user loads a project page, it will be loaded first and the museum later.