Module 2 Formstorming

Weekly Activity Template

Sarah Al-Fkeih — Laser Engraving of Toronto’s Cycling Network Map Using Mapbox + Adobe Illustrator

Project 2

Module 2

For Activity 1, I explored open data from Ontario GeoHub and Toronto Open Data, uploading various JSON datasets such as coyote sightings, public washrooms, and fish culture operations into Mapbox Studio. I experimented with different layer types (circle, line, fill) and adjusted radius, thickness, blur, and opacity to visualize the data in multiple ways. I also explored the Mapbox Standard settings to change the overall map color and style, testing how visual customization affects readability. Lastly, I practiced publishing my maps, gaining a clearer understanding of how open data can be represented and shared through spatial design tools.

Activity 1

This screenshot shows the Ontario Data Catalogue, a site that provides public datasets from the Government of Ontario. I used it to find and download data related to infrastructure, environment, and public services, which I later uploaded into Mapbox Studio to test and visualize spatial data. This was an experiment to get familiar with Mapbox Studio and how to visualize uploaded JSON data. I adjusted the data layer to display as circles and reduced the opacity to show where data points were more concentrated. This helped me understand how to represent density across areas, following the Module 2 tutorials that reference on bivariate mapping and improving how spatial data is visually communicated. This screenshot shows the coyote sightings dataset from the tutorial in Steve’s Module 2 asset folder. Following his walkthrough, I uploaded the JSON data into Mapbox Studio and experimented with adjusting the color, size, and shape of the data points. This exercise helped me understand how to import external data and customize its visual presentation within Mapbox. For this test, I uploaded my own JSON dataset from the Ontario Open Data Hub to see how personal data sources could be integrated into Mapbox Studio. The dataset represented fish culture operation areas across all of Ontario, rather than just one region. This helped me understand how to upload and visualize province-wide data and experiment with how it appears on a larger geographic scale. This screenshot shows the Oakville cycling routes dataset from Steve’s tutorial asset folder. I followed along with the video instructions to upload the data into Mapbox Studio and experimented with adjusting the stroke width of the lines to see how it affected visibility and map readability. This helped me understand how line data can be styled to clearly represent route networks. This experiment focused on changing the Mapbox Standard style settings to explore how map colors affect readability and visual tone. After deleting the Oakville cycling data, I adjusted elements like greenspace, water, and road colors to make the map appear more vibrant and less muted. In earlier versions of Mapbox, Steve mentioned a feature called Mapbox Cartogram, which allowed importing image color palettes for map styling, but this tool is no longer available. Using the same custom color scheme, I reuploaded the fish culture operation JSON data from the Ontario Open Data Hub and zoomed out to view the entire province. This step helped me get a clearer sense of spatial distribution across Ontario and improved my understanding of how to manage and visualize large-scale datasets in Mapbox Studio as I became more comfortable with the tool. In this step, I deleted my previous datasets and searched for new open data using the Toronto Open Data website. I chose to work with the public washroom facilities dataset and uploaded it into Mapbox Studio. This experiment was part of exploring how to find and visualize city-specific open data, focusing on resources relevant to Toronto, which I knew from the beginning was the city I wanted to laser-engrave. In this step, I experimented with adjusting the color and opacity of the public washroom facilities dataset in Mapbox Studio. I tested different transparency levels where some points appeared sheer and others more bold. I wasn’t completely sure if these differences represented the number of washroom stalls or another variable, but the process helped me better understand how data visualization settings can affect how information is interpreted. For this map, I chose to keep a purple color scheme inspired by the bivariate map examples from Steve’s tutorial. I adjusted the land, water, and road colors to create a consistent tone across the visualization. This helped me develop a clearer sense of visual hierarchy and understand how color choices can guide how viewers interpret spatial data. In this step, I experimented with color combinations to plan how my final laser-engraved map might look. I imagined the water areas being a light blue, the base map matching the natural wood color, and the data lines engraved in black or dark grey. This helped me visualize how digital color contrasts could translate into material tones for engraving. Here, I adjusted the radius of the circles in the fish culture operation dataset to test how changing their size would affect visibility and spacing. I wanted to see if increasing the radius would make the data points appear less scattered and create a clearer visual grouping across the map. This shows the initial Mapbox style setup I started with. I explored different base options like Standard, Faded, and Monochrome, but decided to use Monochrome mode later on so that when exporting the map to Adobe Illustrator, the lines and shapes could be easily image traced for laser engraving preparation. In this part, I learned how to manually upload data and add new layers in Mapbox Studio. Since the platform was updated in October, many of the tools and steps from Steve’s Module 2 tutorials were outdated. I had to rely on external research to understand the new layout and workflow, realizing that layers now need to be manually added and managed instead of being automatically available for editing. Here, I explored the Ontario GeoHub website to find usable data for my laser-engraved map project. After reviewing different datasets, I decided to focus on cycling routes because of Toronto’s strong cycling culture and my own interest in biking around the city. I thought it would be meaningful to engrave data that I could personally use for navigation or reference in the future. This screenshot shows me exploring the Government of Canada’s Open Data Portal, where I was reviewing available datasets in different formats such as CSV, ESRI REST, and GeoJSON. I was comparing environmental data sources like wetlands and natural environment records to understand how different file types could be imported and visualized in Mapbox Studio. I sourced the cycling network data from the City of Toronto Open Data Portal. The specific dataset—the city’s bikeways network including cycle-tracks, lanes, multi-use trails and signed routes—can be downloaded in GeoJSON or other formats here: https://data.urbandatacentre.ca/catalogue/city-toronto-cycling-network? Using this dataset, I uploaded the JSON/GeoJSON file into Mapbox Studio and began my experimentation for the laser-engraved map project. This part was confusing because I initially thought these buttons were where I could edit the color scheme of the map. I spent time trying to figure out what custom, background, and sky layers meant before realizing through research that color adjustments were actually found under the Mapbox Standard settings instead. It was a small challenge in learning how the updated interface worked. Here, I attempted to publish my map style just like Steve did in his tutorial. I wanted to see how the publishing feature worked in Mapbox Studio and how it saved the visual changes I made. This step helped me understand the difference between a draft style and a live published version of the map. Here, I finally discovered where the main customization settings were located. This section allowed me to adjust details like the basemap, color theme, lighting preset, and typography, which helped me understand how to control the overall look of my map instead of just editing layers individually. Here, I imported my exported map into Adobe Illustrator and used Image Trace to prepare it for laser engraving. This was part of my experimentation process for after Activity 1 and Activity 2, showing how I tested different map outlines and line thicknesses. This specific version wasn’t the final one I printed, as my test engraving at the Fab Lab showed the lines were too thin, so I planned to adjust and refine it later. Here, I furthur refined my Toronto Cycling Network Map by adding text and layout details in Adobe Illustrator. I included a title, location, and project credit to make it look more professional and ready for presentation. During my test laser engraving, I noticed the text appeared too small, so I planned to increase the font size in the final version to improve readability once engraved on wood. This photo was taken during our class visit to the laser engraving lab with Steve. I captured a close-up shot of the laser machine. It shows the interior of the printer. Here, I experimented with the text layout and typography that I planned to include in my final layered laser-engraved map design. I tested different font sizes, placements, and hierarchy to see how readable and balanced the text would look once engraved on wood. This stage helped me ensure that the engraved labels and titles would stand out clearly and visually complement the map’s design without overpowering it. This image compares my initial text layout (left) with the finalized version (right) that I completed after receiving feedback from the FABLab technician. The technician guided me on how to properly adjust the text for laser engraving clarity, including stroke thickness, line weight, and color coding for different engraving depths. This process helped ensure that my Toronto Cycling Network Map text would engrave cleanly and remain legible once printed on wood.

Activity 2

This was part of a tutorial Steve uploaded to introduce projection mapping for Project 2. I followed along using the assets from the folder he provided. Here, I imported the SSU building image and began setting it up inside After Effects to start understanding how projection mapping works. In this step, I was adjusting the Corner Pin effect to match the perspective of the building. It helped me understand how to align flat images to look realistic in 3D space, which was important for the projection mapping setup. This part of the tutorial focused on adding a “shatter” or broken glass effect to the wall. I followed Steve’s instructions and used the shape and force tools to control how the wall appeared to break apart. Here, I was experimenting with how the glass would break and scatter. I adjusted the lighting and depth to make the shatter look more dynamic and natural, following the tutorial’s next steps. I then applied the shatter animation directly onto the building to make it look like the wall was breaking open. This helped me understand how effects could interact with 3D surfaces. For the final step in the tutorial, I added the Sheridan logo and IXD Club logo to appear after the shatter animation finished. This created a reveal effect at the end of the projection. Our class was divided into groups to test laser printing for the first time using birch wood. We were given a shared template that one group member had to send to the Fab Lab. I chose a “Happy Halloween” design to match the season and added a random vector from Adobe Stock for decoration. This shows all the designs my group created for the laser test. Each student made their own small engraving layout that was later printed together on the same birch board. Here, I used Mapbox to prepare the cycling network data for Toronto, which I planned to engrave for my final project. I switched the map to monochrome and turned off all unnecessary layers such as labels, text, and roads to keep only the core data. I changed the water color to black and the land color to white in Mapbox. This contrast helped me later when importing the PNG file into Illustrator for image tracing. This image shows my Mapbox color adjustments in progress. I was finalizing the greenspace and water colors to make the layers ready for Illustrator conversion. This shows the exported road line layer from Mapbox. I isolated the network of roads by adjusting line thickness and contrast so Illustrator could trace them clearly for engraving. Here, I imported four separate PNG files into Illustrator: water, greenspace, cycling network, and roads. Each layer represented different map data I planned to engrave together as a multi-layered design. This shows me tracing each PNG into vector paths and cleaning the details to prepare them for laser engraving. I refined the shapes and organized them before sending the final version to the Fab Lab. After feedback from the Fab Lab technician, I realized the greenspace shapes were too small and scattered. I deleted fine details that could burn unevenly or appear messy when engraved. This step ensured the file was laser-safe and clean. This was from one of Steve’s tutorials introducing projection mapping using TouchDesigner. We were asked to download an asset folder and follow the tutorial step-by-step. Here, I loaded the building texture image (SSU) into the project and connected it to the network to start the setup. At this stage, I connected the texture to the projection window. The tutorial showed how to align the image properly on the surface and preview how light would react when projected onto a 3D space. Here, I fine-tuned the mapped area using Kantan Mapper. The highlighted shapes represent the building’s windows and walls. This step was mainly to understand how projection mapping can be used to simulate light on real-world architecture. This photo shows my text layout tests for the Toronto Cycling Network Map project. I tried multiple text placements and font sizes before finalizing the one I would engrave for the laser-cut map. In this test, the top label was engraved at a power level of 11 and the bottom at 14. I thought they looked similar, but the Fab Lab technician explained that 11 was less burnt and would be easier to sand later. The technician mentioned that my original map design was too detailed for the laser to cut cleanly. To demonstrate, she ran a few short test cuts of selected areas. We agreed that it would make useful process documentation for my project. This image shows my finalized engraved cover for the Toronto Cycling Network Map. I decided to build it as a layered piece but hadn’t glued the layers yet, allowing me to check the fit and depth first. This is a closer angle of the engraving that highlights the burn marks, fine line work, and contrast produced by the laser. It captures how the wood surface reacted to different engraving depths. Here, I laid out all the layers of my project to show how they would stack together. Each panel represents different map data — roads, greenspace, and cycling paths — to form the full Toronto layout once assembled. This photo shows one of my earlier test sections. Some of the thinner road lines broke during the cutting process, so we used painter’s tape to hold the pieces together temporarily for safety and to keep the test intact.

Spatial Workshop 1

This image shows the main yellow entrance doors leading into the Sheridan Trafalgar Design Wing. The bold yellow color makes the entrance highly visible and welcoming, functioning as both a branding element and a practical navigation cue. The accessibility button is clearly placed, signaling inclusive design considerations for mobility needs. Through the glass, you can see the interior hallway, lockers, signage, and the continuation of yellow trim, reinforcing the visual identity of the building. The entrance acts as a transitional space where students shift from outdoor movement into an academic environment. This photo captures the interior of Sheridan’s gallery space, featuring a curated collection of framed artworks displayed along clean white walls. The open floor plan and polished concrete flooring create a neutral environment that places full attention on the artwork. The exposed ceiling, lighting tracks, and large air duct emphasize an industrial aesthetic, contrasting with the historical and traditional style of many of the framed pieces. The space encourages slow movement and contemplation, as visitors can navigate around angled partition walls and view the art from multiple perspectives. Overall, this gallery showcases how spatial layout, lighting, and material choices work together to shape the experience of observing artwork. This outdoor courtyard space features a mix of natural elements and handmade seating, creating a small but expressive gathering area on campus. The bare tree at the center becomes the focal point, surrounded by a bed of red fallen leaves that add a striking contrast against the gravel ground. A concrete bench and a custom bench made from repurposed materials—specifically painted wooden planks and a snowboard—introduce a playful, student-made character to the space. The rough textures of the stone, gravel, and brick walls contrast with the smooth, colorful patterns of the snowboard bench. Despite being tucked between buildings, the space feels open and calm, offering a quiet spot for resting or creative reflection.

Spatial Workshop 2

This sketch visualizes an outdoor event concept called the Sheridan Hive Festival. The idea is inspired by community markets like the Mississauga Bread & Honey Festival, but reimagined specifically for Sheridan’s campus. The drawing shows booth-style tables where students and visitors could purchase honey-based products, handmade items, or bee-inspired crafts. The banner placed prominently at the top (“Sheridan Hive Festival”) helps establish the atmosphere of a lively, student-focused campus event. A combination of small tables, simple structures, and greenery suggests an accessible and casual gathering space. This sketch highlights the potential for Sheridan to bring students together through an interactive and nature-focused event celebrating the campus bee hives. This sketch builds on the idea of Sheridan’s beehives but adds a technological, playful twist using Makey Makey. The concept imagines flowers wired with Makey Makey sensors so that when a bee lands on a flower, it triggers sound. Each flower connects to a small control board, creating a “bee symphony” effect as the bees move naturally from flower to flower. The sketch shows several flowers wired individually, emphasizing the interactive aspect. This idea ties directly to first-year IxD experiences using Makey Makey and brings together technology, environment, and sound in a way that feels whimsical and immersive. It encourages students to explore how natural behaviors can generate digital outputs. This final sketch expands both earlier ideas into a much larger Bee Market setup. It presents a more developed spatial environment with tents, booths, pathways, trees, and hive structures. The concept combines the honey-product festival with the Makey Makey sound-interaction idea, creating a multi-activity community experience. Inside the market, visitors could explore various booths, walk through interactive zones, and experience sound elements triggered by bees. The pathway visually guides visitors through the market, and the inclusion of the “Bee Market” banner reinforces the celebratory theme. This sketch aims to represent a fully realized concept—something that is both functional and imaginative, blending environmental awareness, interaction design, and Sheridan’s real campus ecosystem.

Project 2

Final Project 2 Design

A laser-engraved reflection on learning to cycle, belonging, and navigating Toronto’s creative landscape.

My final design is a multi-layered laser-engraved map of Toronto’s cycling network, created by exporting cycling-route data from Mapbox and translating it into vector layers suitable for fabrication. The piece is constructed from multiple sheets of birchwood, each representing a different type of spatial information: the base layer holds painted water features, the mid-layer shows Toronto’s landmass, and the top layer features the cycling routes engraved and cut with high precision. I hand-painted the water in blue and finished the cycling network in a warm brown tone to give the map a sense of depth, contrast, and clarity. This project is deeply personal to me. I grew up in Saudi Arabia, where cycling—especially for women—was culturally discouraged and largely inaccessible. I never had the opportunity to learn as a child. When I moved to Canada at sixteen, I taught myself how to ride a bike through persistence and daily practice. After weeks of bruises, frustration, and determination, cycling became a new form of freedom for me. Today, it’s my favourite mode of transportation, especially in good weather. Choosing Toronto as the focus felt natural. Toronto represents creativity, individuality, and a welcoming culture that contrasts strongly with where I grew up. It’s a city where I feel free to express who I am—through fashion, makeup, and my identity as a designer. I also regularly cycle in Toronto using public rental bikes, and I’ve always felt that the existing navigation apps don’t fully capture the logic of bike routes. By engraving the cycling network physically, I created a map that highlights the exact infrastructure cyclists rely on but is often hidden or simplified in digital maps. The final engraved piece captures both the technical precision of laser fabrication and the emotional significance of cycling in my personal story. It represents my relationship with Toronto, movement, and belonging, while demonstrating the material craftsmanship and spatial thinking required in DESN 27425.
×

Powered by w3.css