Module 2 Formstorming

Weekly Activity Template

Kurtis Lauwereys - Welcome to my module 2 formstorming, and final laser cut map.

Project 2

Module 2

PLACEHOLDER TEXT, put a description here or you will lose grades

Week 6

The first thing I tried was playing with the different colours available for different types of layers. I used the default map style as Steve showed in the tutorial, and then I made the roadways a dark green.

Next I changed the roads to be dark blue so they would have stronger hue contrast, and then I played with the Point of Interest labels. I was pleased to find out there is a decent amount of control over how many labels appear by changing the density slider. This is what I got when I put it at the highest level, Density 5. Your zoom level will change what you can see too, so if you are in the view above and zoom out too far the individual building levels disappear.

Here I discovered Mapbox has interactions and selected a building 'on hover' interaction, changing the colour from the original state to orange. This could be a fun way to point out buildings in an interactive map display. There is also an option for 'on click' which is blue and will be visible in my next image. I highlighed the AA wing in this example because I'm in AA1A right now as I'm working on this.

Here you can see I have added an interactive 'on click' state change, and clicked the AA wing, then hovered over the B wing so show the interaction difference. The AA Wing is now blue because I set the 'on-click' to blue, and the 'on hover' is still orange.

Turns out the 'Place Labels' also have interactive abilities, not just buildings. Here I set the 'on click' interaction to magenta, and the 'on hover' to red for the section called 'Place Labels' at the very bottom of the default map style. You can't see my cursor because Apple automatically hides it in screenshots, but it's right over the red 'Castle Green' label.

I started playing with the styles thinking about London, Ontario, since that was going to be the focus of my project. I played with the detail level by zooming in and out of the downtown core to see what I could capture, and realized I won't be able to get the more intricate details. I think this is okay because I want to focus more on the city as a whole, and not 1 region within the city.

I figured out how the 3D views work finally. I captured the current tallest building in Downtown London called Centro Tower B, completed in December 2024 in contrast to Victoria Park, one of the oldest human controlled regions in London. This park was originally part of a British Garrison during the colonization and expansion of Canada. For more info on that, if you are interested, check out <a href='https://en.wikipedia.org/wiki/Victoria_Park,_London,_Ontario' target='_blank' rel='noopener noreferrer'>this Wikipedia page</a>

I grabbed a photo of Victoria Park in London, and used it with Cartogram to make this style. I used the brassy/gold for the roads to make them pop against the green, which was selected from tones in the trees to define the land and greenspace colours. I used the pale blue sky for the water, and the white of clouds for the place labels. Victoria Park is a prominent meeting space in London to this day, and has a lot of historical importance, so it will is a strong contender to influence the visual style of my map.

I tried using a map background style layer as the bottom most layer and immediately hated it. It took away all of the natural landscape markers like the land and waterways, so it's getting time out until I think of a good use for it, if there is one.

I found how to add different data layers, and started messing with it to find the road network in current day London. While I appreciate the amount of detail I was able to get here, this is overwhelming to look at and feels too messy. I need to slim the data down or simplify the styling.

Here I was looking to see where the highest density of large scale buildings is in the city, and as expected it was right downtown. I can't show it in 1 image because this is as far as I could zoom out before they vanished, but panning around the city does show large buildings in various parts. This specific frame had the most buildings possible to be captured in a single image based on my screen resolution and a square aspect ratio.

This is where I realized if you do the Cartogram photo import to make a style, you get A LOT more layers to play with because of how Mapbox and Cartogram import the colour data from the photo and assign it to layers. I went back to the style and started playing with the layer, trying to get a nice large full capture of London without and labels to mess up the linework.

I found a layer for road tunnels and looked around to see if London had any extensive tunnels, because that would be interesting to show. Turns out, this is most of it, excluding 2 more on the east side I couldn't capture in the square ratio. I made them red to contrast so I could find theme easily. I will not be including these in the final because they don't offer any significant visual impact.

This is weird and kind of cool. This is showing the urban vs rural areas of London and surrounding county. Everything dark green is manicured nature or untouched wild growth, and the white transparency grid is the void where urban expansion has taken root. Blue represents all sources of water.

Here is where I turned the road layer on, to compare it to the urban vs natural regions and see where new development has most recently taken place. The urban vs natural data is slightly out of sync with the roads, making me believe the roads that cross into the green are newer developments that haven't been captured yet.

I discovered there are even more granular levels of what you can control within certain layers. This is a copied version of my Cartogram style, and this time I played with the land use filter and turned cemeteries red. The rest that is green is a mix of wooded area, agriculture, parks, grass land, and sandy regions. I also realized at this point the flat colour background can be very useful for exporting individual layers and isolating them from everything else in the map.

This is where I turned off everything I didn't need for the London map. I kept the roads, water, and land layers visible but disabled all labels, and I'm zoomed out so far buildings are not visible. I will use this version or something very close to export to Illustrator now that I have an idea of what I want my final project to be. This image illustrates the current urban sprawl of London fairly well, while keeping a beautiful colour pallette.

I tried to play with colour scales for elevations, and I REALLY wanted it to be 3D but was unable to make the terrain 3D. The guides online show a way to use MapBox styles that matches Steve's tutorial, but is no longer possible (at least with my free account) as the UI options to select the beginner style with the right dataset is not an option anymore. However this does look pretty cool still. Red is the lowest elevation, set to 2000 meters, and Violet is the highest set to 8000 meters. This is a mountain range along the border of Nepal and China, on the Nepal side.

I FIGURED OUT THE 3D. I found the braincells, I am happy. So the tutorials online were very close to how I made this work, but what I was missing is that with the UI change there is a different label for the field you need to input the heights in. I figured that out just by inputting different numbers in all the height fields until eventually one worked. Not a fast way to solve this, but it worked at least.

I copied my 3D topology style and compressed it massively to see what London's topology looks like in 3D. I set the range from 200 meters to 300 meeters, going up 25 meters at a time. This pointed out to me that London's highest density development and downtown core is in the flat plain where the river splits 3 ways (river isn't visible in this image, didn't know how to make it show up). That makes a lot of sense to me because back when London was founded settlers already knew a bit about city development, so they would have went with the easiest route to build up first and not spend time transforming the landscape to their needs until later as the city expanded.

Here I played with the day cycle and went to look at Toronto, because London didn't have a lot of 3D buildings that stand out as much. I can't tell you why some buildings are much more detailed with lights than others, but I believe it's from the dataset and models imported into the default style. I like how it pulls focus to those buildings and adds visual interest, especially since seeing every building at full detail would give you a lot of 'noise' and it would all blur together with nothing standing out much. I left the labels on to call attention to significant buildings in sight.

I learned how to make a heatmap here, using an imported dataset from NASA. This is a heatmap showing meteorite impacts on the planet, and I zoomed in on The United States because it had a lot of diversity in the heatmap density. I made it slightly transparent at 0.4 opacity, so you can see the labels underneath the heatmap, because the original version was fully opaque and you couldn't read anything under it at all.

I tried to follow one of the Mapbox official tutorials for making 3D buildings, and then took my knowledge from the 3D topology work I did to colour code them... but you can see that didn't go well. The UI of the tutorial documentation is different than the current UI, and the map data is also a lot different, and the lighting extrusion control is completely gone from the UI now. I was able to get extrusions to work, and I got colour coding to work, but The CN tower looks ridiculous because I couldn't control anything beyond the initial footprint shape extrusion. This could be cool to show heights of buildings quickly, but it loses realism with the blocky shapes. The Rogers center in the bottom left is also hilariously shaped. My scale started at 0 meters being red, and went up in increments of 50 meters going from red to magenta.

So I tried another tutorial and yet again it didn't really work because they are out of date with the new UI/dataset options. However I was able to figure this one out on my own fully. This was me controlling the labels. I wanted to see if I could turn off all the labels of a certain type, like all the points of interest, or all the city names, or large scale things like that. I was definitely a bit stressed at the outdated documentation but I found out I can filter the dataset using 'class' as an option, thanks to poking around in the previous photo with the building heights. I set the filter to 'class' and then only selected 'country' which disabled every other label. This gave me a bunch of black dots though, no text labels. I had to then change the data type to 'symbol' because it was set to 'circle'. After that I realized every label went poof, gone to Narnia or something. So I poked around some more and saw the 'text field' section was blank, and had an 'insert data field' section so I gambled and connected it to the 'name' data strings. This worked! We are happy again. Now I was able to change the colour, font type used, etc. so I made it purple with Open Sans Extra Bold font and moved on to the final experimentation.

For my final experiment I made a choropleth map to visualize data of the average temperate in the U.S by county. This was one of the more complex things I did since I had to use an outdated style and dataset, so this is how I did it. First I looked online and found a way to access the old styles using the Mapbox API, thanks to a comment on reddit. That was for a different style than the one I needed to follow the tutorial, so I found the name of the one I need and swapped it in the API and thankfully it worked. Next I found a tileset on Mapbox for the average temps in the U.S, and imported it using 'component' then 'data visualization' and selecting the tileset as my source. That component dropdown DOES NOT EXIST in any of the new UI. It was only there because I imported an older unsupported map and all of its data. This dataset was already prepared so to make it look nice all I had to do was turn off every layer except the water and country boundaries. I also had to disable the land layer because it completely hid the data visualization, so I got rid of the transparent areas the visualization didn't cover by adding a background layer and dragging it to the lowest place. Next I played with the colour style settings of the data to make it look more like a real map I've seen on TV or weather websites, and added in the borders for each county to give a clear distinction between the ones that have a very similar colour. The end. I'm happy with what I've learned about Mapbox so far, but I wished their documentation was up to date. Oh also in this visualization, the data is from NOAA and it's tracking the average temperature change between 1895-2019, purple is going into negative temperature changes, and yellow is going into positive temperature changes.

Week 7

This was my first attempt at bivariate data, using Steve's tutorial. I selected dark blue as the current bike paths, and green for the proposed paths because they fit well with the mostly monochrome pale green colour scheme. I made the width lines very thick to stand out against everything else.

This was when I made the bivariate map to show coyote sightings, encounters, and physical interactions. In the tutorial Steve did it differently, but I wanted to make sightings the least severe so they are small yellow circles. Encounters is ambiguous, but an encounter is definitely scarier than a sighting so it became a medium orange circle. Physical interactions sound the scariest so I made them the biggest and red. Looking back at this after a day I realize the data isn't visually that great. If I redid this I would change the orange and red circles to be smaller, and maybe split the ap into sections so I can zoom in more.

Here I sourced a geojson file showing installations of renewable energy in Toronto, and visualized it into the 6 'districts' of Toronto. Original Toronto is blue, Etobicoke is pink, York is yellow, North York is orange, East York is green, and Scarborough is red.

This happened A LOT. I was tryig to make a heatmap of fire incidents in Hamilton and had the same issue, then I tried with Toronto's data and this happened. I guess the dark joke isn't meant to be visualized.

I finally found a GeoJSON dataset I could use, this time for vehicle accidents leading to a fatality or serious injury in Toronto. I turned it into a heatmap to show the areas of highest incidence as the darker purple, and areas with the least amount of collisions as the lighter yellow colour. I can't zoom out too far or it all vanishes and I don't know how to change that yet, so I did a close up zoom of downtown Toronto with some street names still visible to wayfind where in the city a person is looking.

This is another heatmap, showing meteorite strikes across most of the Middle East. I don't know why Oman is such a high impact area but this map shows it seems to be the prime target for celestial rocks crashing into Earth in that region.

I played with the bicycle data in the tutorial, this time showing it with a different colour scheme. I went with a light purple as the furthest away, and the most recent bike thefts have a deep red to signify recent danger. I'm kind of surprised there aren't more in this dataset, I would have assumed it would be about double for the July-September time span because of summer.

Here I did data driven lines to show the priority of snowplowing services in Edmonton, AB. The highest priority is a dark red, a medium orange is 2nd highest, light yellow is 3rd highest, and a light pale green is the lowest priority. I chose light pale green for it so it would blend more into the background and not pull as much attention, but it's still visible if you look closely.

I went looking for data sources about rent geared to income housing and found this dataset showing all current community housing. I made it into a data driven circle map to show all current RGI housing units across Toronto, with the lighter yellow representing a lower number of units per building, and the darker orange representing a high density of RGI units per building. I like how you can see the densities of where RGI units are built en masse in certain regions of Toronto, compared to other areas where they seem to either not exist at all, or be evenly distributed across the whole area. I could only show the actual building density by using 0.4 sized circles, otherwise they overlapped too much and became blobs. That limitation made me decide to use this as more of an overview map, and then if this were a real project I would have district maps with a higher zoom level and street names to show where in each district the units are located.

I didn't take process screenshots of how I made this, but this was the first laser prep tutorial I did in class as part of the group process work I think in Week 7. I grabbed an image of a cats eye and then used the curvature pen tool in Illustrator to trace over it and make the right eye. I copied it and mirrored it after I was happy to get the left eye. The font is Copperplate, just because it's a favourite of mine.

This is the phone stand, unassembled, that we did as a demo intro to laser cutting in class. I worked in a group of 4 with Emma handling the submission to the laser tech, and then we went and watched for a bit as it was cut out. It was cool to see how it works. When it was done it had some burns around the edges so I sanded it lightly to buff it out, but didn't get a photo before hand.

Here is the final stand assembled. I like it, but I don't love it. If I did this again, I would opt for a deeper etch for the outline of the full eye, and fill in the entire iris with a shallow etch so only the white and the pupil weren't etched, giving it a more dramatic look.

While doing Steve's laser tutorial I focused on London since I'm using London for my final project. This is a rough version of what my final road map will be to show London's expansion between the 1800's up to 2025. I think I will use this as the topmost layer, and have it be detachable so people can remove it to see what is underneath. I'm going to need to edit this in Illustrator to flip the colours, so everything EXCEPT the roads is cut away, and all that is left is the roads, bridges, tunnels, and anything else cars drive on. I might include the airport too but I'm not sure yet. This style is a slightly modified version of Steve's. I disabled some data points I didn't need.

To get an EXACT replica of the viewport and save myself from having the water and roads misaligned, I realized the URL shows your exact coordinates at the very end. I copied the coordinates I used from the prior image and plugged them into this one, and it changed the zoom, X, and Y locations to match up perfectly. Now all I need to do is add a marker in Illustrator that can be used to align the files after they are cut out of wood. I don't now what this form will be yet, or if it will be permanent or temporary. This style is also Steve's, with no modifications because it was great as is.

Here is my artboard preparation for Illustrator. I'm planning on 3, maybe 4 layers and I want it to be larger but not too large that it's hard for me to carry in a wheelchair. Seeing it laid out like this, I'm kind of worried it will be too small to give the story detail I want, so I am reconsidering the size and might do 3 or 4 boards at 12-16 inch squares each instead of this board which is 18 by 18 inches. I will likely have to recruit a friend to carry it for me if I do that. The red lines right now are just guides to divide the artboard, the actual cuts will all have the red lines right up against the edges as needed, and I might give about a half inch buffer on all sides to support it.

So this looks terrible. I did the image trace, but the UI for my Adobe Illustrator is a little different than what Steve's version of Illustrator had. Turns out the simplify toggle in the image trace tool is now on by default with no way to turn it off that I know of, so it kind of breaks my lines. This is a huge issue, and might mean I need to pivot my project to something more zoomed in so I don't get these spaghetti lines. The other option is to try and export the data from a different map tool than Mapbox and see if I can get a full SVG export.

This looks less terrible. Instead of using the black and white lgoo preset I used the lineart preset. It ruined all visual hierarchy of the line weights, but I can manually correct that line by line, even if it takes a long time. At least with this the lines still appear to be in mostly the correct position, even if it's not pixel perfect. I think I need to just accept I'm not going to get something pixel perfect with an image trace, and to not let myself go down the many hours long rabbit hole of trying to achieve pixel perfection. I really don't have time for something like that, I need to just get it done. Time to move on to projection mapping for now.

I learned how to do corner mapping in After Effects. I have not used After Effects yet, as I went for the non AE option at the end of Advanced Conceptual Process class. Honestly this software scares me, I'm not into motion design so I've been avoiding it as the only other time I tried to use it, it was not a great experience.

Okay this is neat. This is already more fun than whatever I tried doing around 8-9 years ago with After Effects. I want to play with these effects more to see what else they can do.

I played with the shatter effect more and trialed some different styles of shattering, and then went back to glass and played with the size of the glass. I learned that you can make the shatter 'tiles' smaller with glass by increasing the 'repetitions' of the 'shape' in the effect. The default was 10.0 and I changed it to 40.0

So I made a mistake somewhere with the 'entrance' wallkey and didn't catch it until right now. After going back into that section I realized the red bounding box was slightly off center, but I'm not sure how I moved it. So when I pasted it over it pasted it centered, but now my masked area isn't aligned correctly. Looking at the wallKeys composition, there is a transform where the anchor point and the position point don't match up perfectly ONLY on the 'entrance' layer, unlike the 'main' and 'side' layers. I think this is the culprit.

Guess I'm kind of smart, because the transform issue I just mentioned was exactly the problem. I adjusted it by copy and pasting the position coordinates from the layers that lined up properly for the original wallKeys composition, and then I deleted the effect out of the final compositions layers and replaced those layers with the adjusted version, and everything looks good now.

I figured out how to mask thanks to Steve. This process was probably the easiest of everything. If I had more time this weekend I would have liked to mask out the glass individually instead of doing the full windows, but that's a more advanced tutorial piece so I'm just trying to get it done and move on. I am enjoying AE more now at least, it doesn't feel as scary.

Honestly I didn't have a lot of time for projection mapping as a whole, I submitted this at 2355HRS so my last image is my video fully rendered to show that I at least completed the full tutorial and learned all the basic steps. Sorry, there was a pretty serious situation at work this weekend so I ended up working a lot later than I normally would Saturday night into Sunday morning and it threw off my entire day. This is just a pic of the Quicktime Player opened with the video paused, and a white background behind it to hide all the other screens I had open for this project.

Spatial Workshop 1

put a description here or you will lose grades<a href='https://www.youtube.com/embed/tgbNymZ7vqY' target='_blank'><p>Project Video Link</p></a>

put a description here or you will lose grades <div class='container'><iframe class='responsive-iframe' src='https://www.youtube.com/embed/tgbNymZ7vqY'></iframe></div>

put a description here or you will lose grades

Spatial Workshop 2

put a description here or you will lose grades <a href='https://www.youtube.com/embed/tgbNymZ7vqY' target='_blank'><p>Project Video Link</p></a>

put a description here or you will lose grades <div class='container'><iframe class='responsive-iframe' src='https://www.youtube.com/embed/tgbNymZ7vqY'></iframe></div>

put a description here or you will lose grades

Project 2

Final Project 2 Design

PLACEHOLDER TEXT, put a description here or you will lose grades

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

Powered by w3.css