Welcome to Engineering at MAD. A space for creative tech, with words directly from our engineers.

May: Finishing Touches

Almost there! In the last post on the data visualization app, I’ll focus on three things: adding generative sculptures, improving the performance on Flask side and creating a start and loading page.

Veera's Internship, Week 12: Planning for the Final Weeks

As we think there is more to explore, we have decided to continue with the project in May. This opens up possibilities, like introducing new generative objects.

Veera's Internship, Week 11: Different Room Types

I started the week by deciding and sketching three different room types: a pastel room, room with neutral colors and room with dark interior. I also decided that each room has a sculpture.

Veera's Internship, Week 10: Materials and Classes

This week meant a lot of progress for the project. I will focus on two things that gave me direction: richer use of materials and introduction of classes.

Veera's Internship, Week 9: Arranging Furniture

This week, I spent time planning a function that could be used to position objects in the room. For example, I might want to place two cubes around a plant, but they should never overlap with the plant or each other.

Veera's Internship, Week 8: Drawing Board

Now that we had a nice app architecture, it was time to sketch the room interiors further. I really enjoyed going back to prototyping on paper, just like I did throughout my studies at Goldsmiths:

Veera's Internship, Week 7: Restructuring the Project

It was time to switch to use Three.js with npm in my project. In general, what kind of architecture would the data viz app need? Instead of having our usual shader workshop, we took the time to plan the project structure.

Veera's Internship, Week 6: Blended Approach

In our shader sessions we decided to move from 3D primitives to imported 3D models. For this task, Three.js provides a bunch of different loaders.

Veera's Internship, Week 5: Back to Inspiration Images

Before diving deeper into 3D shapes and deformations, Nikolai recommended me to go back to visual planning regarding the textures and the feeling I wanted to express in the app. By doing so, we would know the exact tools we would need to learn.

Veera's Internship, Week 4: From 2D to 3D

After studying shaders and buffers, it was time to choose a 3D library to work with. I decided to go with Three.js due to its large variety of examples.

Veera's Internship, Week 3: Diving Into Shaders

I had previously used some vertex and fragment shaders in openFrameworks. However, in this project I wanted the shaders to communicate with data in a web app. Firstly, I learned how to affect shader uniforms on the Javascript side.

Veera's Internship, Week 2: Refining the MVP

Last week I was able to build a simple Flask template with some NLP functions and a separate Three.js scene. This week I wanted to explore the possibilities further. What kind of visuals would be realistic with Twitter data and this setup?

Veera's Internship, Week 1: Intern's Greetings!

How to visualize a crowded mind that results from extensive screen time? That is the topic I will research in my own software project during my internship at MAD. This blog follows the project step-by-step. Let's start!

Granular Rendering with Custom Elements

Modern frontend rendering best-practices come at a cost. Can we do better? Let's look at how we used Preact together with Custom Elements to achieve more granular rendering on the new MAD website.

Tools for Remote Collaboration

We're lucky to have tools available that have made collaborating from home for the last year much more bearable. Let's look at two tools that might be a little less well-known and that we've come to rely on.