Module 2 Formstorming

Weekly Activity Template

Ho Yi Chloe Tang

Project 2

Module 2

I experimented with Mapbox - a software tool used for developing digital real-time map content. For Workshop 1, I teamed up with a classmate to locate and document examples of interesting spaces and their uses throughout the campus.

Activity 1

Picture taken for Workshop 1. Located near Service Hub in B-Wing. Picture taken for Workshop 1. Located outside H-Wing. Picture taken for Workshop 1. Located outside a classroom at H-Wing. Picture taken for Workshop 1. Located in the hallways of H-Wing. Picture taken for Workshop 1. Located near Service Hub in B-Wing. Testing color scheme. Selected custom colors from a meme picture. Testing color scheme. Selected custom colors from a meme picture. Testing color scheme. Selected custom colors from a bluebell picture. Testing color scheme. Selected light colors from a book cover I made. Testing color scheme. Selected custom colors from a bakery picture. Testing out colors and filters on the original map in Photoshop. Finished the color scheme and uploaded it into the color theme in Mapbox. Hid away other buildings and labels, the pedestrian path seems unnecessary. Final look after removing all the place/road labels. View on the Mapbox Standard. The interface here is different from the tutorials. Comparison of the current and pending map. I provided a link that leads to the published page. <a href='https://api.mapbox.com/styles/v1/ctang9608/cmgsditm8002i01qm9ppudn5i.html?title=view&access_token=pk.eyJ1IjoiY3Rhbmc5NjA4IiwiYSI6ImNtZ3NibzJ0ajJoaGYydHBxZ3c4NmZ4NmIifQ.2S0YPxZY5mzOtvmScayGdQ&zoomwheel=true&fresh=true#3.29/34.36/-170.24' target='_blank'><p>Preview Link</p></a> Experimenting with custom layer that provides active sources for your map. This one looks kinda terrible. Added road lines from the custom layer. Looks good but I don't think details are needed. Colored the background using Depth. Experiment again with different color schemes in Photoshop. Looks good but can't see which is which when the colors are too similar. Another experiment and I realise same colors of different shades don't always look good. Dawn. Tried another variation of the original map. Daylight. Tried another variation of the original map. Dusk. Tried another variation of the original map.

Activity 2

Learned how to use data visulization in Mapbox. Learned how to choose, input and show data I want. Learned how to adjust line width and colors to make the data visible to the eye. Learning about data-driven-circles. Process of adjusting sizes and palette to make all categories visible. End result of adjusting sizes and palette to make all categories visible. Deleting columns of data in Excel so it can be applicable in Mapbox. Used 2025 data of bicycle theft from HRPS Crime map. Deleted categories that has so little data that it didn't matter. Using the outline of a bag I previously made. Adjusting and adding details onto the template I was given. Adjusting road network on Mapbox. Hiding and changing colors of different layers. Exporting picture as a transparent background png. Using Image Trace in Illustrator. After clicking on Expand to outline everything on the image. Copy and paste onto the template. Adjusting/scaling down the map to fit onto the container. Using corner pin on the side, Main and entrance in Adobe After Effects. Inserting the shatter effect. Applying the shatter effect onto Main. Finished applying the effect on all surfaces. Inserting the logos underneath the shatter effect layer so that they appear as a suprise. Creating preComp. Precomposing layers places them in a new composition, which replaces the layers in the original composition. Using Pen Tool to outline all spaces I need to subtract. Finished tutorial after subtracting all the windows and doors of the building.

Spatial Workshop 1

This picture is taken at B-Wing across Tim Hortons. Their primary use is to showcase the final projects of Interior Design students at Sheridan. The slanted tiles on the floor makes you gravitate towards the works, and it goes the same for the ceiling as they’re situated to be close to the wall. The style is more minimalistic, muted in colour to avoid outshining the display. This picture is taken at H-Wing outside a classroom. Their primary use is for providing shade/shelter. Its style is unique as the lines are structured in a way to create an organic shape that looks like as an awning. This picture is taken at H-Wing outside a classroom. Their primary use is for decoration, and for students to feel more energized with the splash of colour and unity showed on the wall. The building’s walls are built with concrete (brutalism), and having added materials like wood and paint, put together into a brick wall can bring a sense of stability and strength which inspires passersby.

Spatial Workshop 2

This concept focuses on showcasing student work using extended screens and representing interior design through varied materials applied across different tiles. This concept uses projection mapping on the top and border of the showcase, includes QR codes for additional information on student projects, and adds illuminated counters with accompanying text. This concept introduces interactive elements where users can draw on a screen and see their illustrations projected onto the display surface, with potential floor projection mapping that reacts to movement.

Project 2

Final Project 2 Design

A colourful projection covers the building with shifting waves and glowing circular textures.

In this project, I explored 3D spatial design through projection mapping in Adobe After Effects, using the SSU building as the template for visual experimentation. My goal was to transform a familiar space into an immersive experience with vibrant lines and shapes that mimic sound waves or energy pulses. Guided by principles of space, colour, rhythm, movement, and scale, I used each element to enhance depth and visual impact. <div class='container'> <iframe class='responsive-iframe' src='https://youtube.com/embed/JMQJfsMQPIc'> </iframe> </div>
×

Powered by w3.css