A thread to position myself

In this repository, created at the GLAMhack 2023 event, we are creating a digital interactive exhibition installation on slavery for the online platform of the exhibition 'Memories' at the Geneva Ethnography Museum (MEG).

Challenge description

As part of the MEG's upcoming temporary exhibition, 'Memories. Geneva in the Colonial World', the interpretation team and Ivonne Gonzales, has designed a physical participative installation on the topic of slavery. The installation’s aim is to encourage the visitors to move beyond a solely intellectual (and thus distant) understanding of the transatlantic trade and its devasting consequences. Instead, the installation will ask the public to position themselves emotionally and intellectually vis-à-vis this tragic chapter of our common history.

Results

• Web site prototype
• GLAMhack project page
• Sketch made with 🏴‍☠️ P5.js (sketch.js in this repo) - Preview
• Sketch made with 🤖 GPT (GPT_p5.js) - Preview
• Penpot user interface mockup (mockup folder)
• Online form for data collection

Resources

We built this project using the open source P5.js library, using OpenProcessing and OpenAI to accelerate the process.

Our inspirations included:

• Connecting-Dots, a P5.js project by Kamil Wesołowski - some of whose code we reused.
• Force-directed D3 graph (thanks Valerio) - for the Web-native orientation.
• To Me America Is on Instagram by @Lille - for the tangible installation.

A basic sketch of the idea was provided in the challenge:

From this, we made Processing sketches, the "Potato prototypes" as we casually referred to them - on one hand, by reusing open source code, and on the other hand, with prompts to LLMs (ChatGPT and Llama):

Once we had the user interface working more or less how we liked, we created a Gitea project repository, uploaded the codes, and started a Kanban-style Project to prioritize the work in the remaining hours of the hackathon. Thanks to Wikipedia, we found the right formulas for our calculations.

Using the open source Penpot app our team could quickly design the user journey through a series of pop-ups. These give a good idea of how we plan to collect data. Once exported in SVG format (Code property in the inspector to the right), we can connect them to our real application using JavaScript code.

Screenshot of Penpot app

In the meantime, we used the Dribdat platform of the hackathon to share links and collaborate. We also got access to a sandbox server where we could deploy our solution: we installed Wordpress with the Brizy plugin for the main exhibition website, Form Tools for designing the data collection process, TreeQL and phpMyAdmin to manage the resulting database.

We ran out of time to get a proper API developed, but managed to submit the FORM POST data from our visualization to Form Tools. This proof of concept was demonstrated at the end of the GLAMhack event, along with our notes, expressing a strong interest from the group to further support the innovative development of exhibitions at the MEG.

Further work would include refining the design, completing functionality of the interactive application, working on Accessibility and usability of the solution, better supporting touchscreen devices, examining Data Protection and Security of the solution, and further testing and refining the result in an agile way.

Thanks to the OpenGLAM community and the other Hackathon projects, we also have ideas on how to add scientific depth to the exhibition and installation using explorative data techniques. Follow our Issues or contact us to stay tuned.

Team

Emilie Giuachin Erica Iris Oleg

Merci

🦸 Grégoire et 🧑‍🎨 Valerio

License

This work is licensed under CC BY 4.0 International