ArcelorMittal Logo designed by me, 2020. I extracted the capital letter A for Typography Practice: Grid-based Alphabet.
Procedual incremention of diagonal lines within grids, drafted in Adobe Illustrator. The highlighted blue lines refer to the original ArcelorMittal logo speci昀椀cation: with two units lower than standard and one units aligned to the left.
Grid-based alphabet and Letterform Variation
By doing this typography practice, the original type design becomes standardized with more consistency of visual characteristics. I enjoy the process of procedual deduction and creating iterations of letter A.
Apply the effect [Offset Path] for two instances, in the second instance, use three different joining methods: Round,Miter,and Bevel.This compound unit then can be arranged and adjusted to form part of a letter shape.
Development log:
Apply the effect [Offset Path] for two instances, with 昀椀rst attempt to enlarge the shapes;the second reversely de昀氀ate to create a joined visual, in this example,a water drop shape was developed from two separate circles. This compound unit then can be arranged and adjusted to form part of a letter shape.
Grid-based alphabet
Design own grid-based typeface
The Turing Pattern Typefont by Dandelion Design Lab inspire me to explore how to generate similar typeface by using effects in Adobe Illustrator.
Letter F from generated pattern
Front Orthographic View in Wireframe mode, before and after the [Array] effect.
Development log:
Apply the effect [Array] for two count, when X equals 0m, the duplicated torus is positioned on top of the original,when X is set to 1m, the duplication expands from the centre,creating resemblance of the threads outside of screw shank.
Development log:
Adjust material for render, I increase metallic feature and applied roughness to resemble a metal screw. The Sheen is set to a cool tone tint with appropriate weight to further visualize the sharpness and re昀氀ective feature of metal.The centre is set to a darker color clarify the structure.
Model an Object 1/2 Process
-Use basic geometry [Torus] with modi昀椀ers [Array][Mirror][Screw] in Blender to model Philips Round Head Screw.
-Assign separate metallic material for parts and render.
Development log:
The base shape of screw head is formed through an UV sphere, which has a front facing circular distributed faces. Delete and replace by [Grid Fill] faces, then extrude inward an selection of faces to form the pattern on screw head.
[Extrude Region] function in Blender
Model an Artefact 2/2 Process
-Using [Grid Fill] to replace the circular faces on sphere to grids -Extrude selction of faces inward to create the pattern on screw head
Sample an image 昀椀le as texture. I use this function to change appearance of the environment background and the plane surface underneath the screw.
Environment Background
Customization in Blender
I downloaded the environment background (HDRI Files) from PolyHaven for 昀椀nal rendering.
Shade smooth function
Render result: Philips Round Head Screw
[Modi昀椀er] function in Blender
This modi昀椀er is similar to [Path昀椀nder] in Adobe Illustrator, only it is in 3D. I see this is applicable for future projects, to set the generated noise volume within a selected area.
Geometry Nodes and Extras
Geometry node in Blender links a noise texture/pattern to a geometric volume.The scale of noise and resolution of the geometry volume are adjustable, and produced varies results.
Encountered problems:
Material application don’t work after geometry nodes setup,they override UV coordinates.
Project Statement:
Speculation: Human as part of machine.
This project explores concept of more-than-human, in a future setting, for the site-speci昀椀c design of London Canary Wharf DLR Station.
Inspired by the experience of tube arriving in high speed, bring in a gust of wind into station, the environmental design surrounds this experience by adapt the original glass shell to a lower tunnel structure resembling wind tunnel. The contrast in scale between potential passenger and the station;the material choice of large iron plates,collectively contributes to the speculation of Human as part of machine.
The work昀氀ow incorporates Arti昀椀cial Intelligence,by feeding a selection of data, and let machine generate visual prediction of the station base on model’s input and designated text prompt.
Future Station
Keyword: Climate Crisis, Ad- vance of AI, Role of Station, Concept of ‘more-thanhuman’.
Bibliography: “Parallel Tracks”,Lynne Korby,1997.
Visual reference:
Particle Accelerator
Mapping Canary Wharf Docklands, London /ArcGIS(Geographic Information System) Software
Generated map with layers of data imported from ArcGIS Online Library
Measure the area of Canary Wharf DLR Station for modelling reference
On-Site Observation
The Canary Wharf DLR station is [above ground] and its [three tracks feature platforms on both sides].
The [glass shelter] over train platforms is a shell-like structure, the visibility of its layers and branches inspires me to explore [exoskeleton] structure.
Building blocks of Canary Wharf DLR, ArcGIS Online Scene Viewer. This photo highlights the station and its surrounding buildings.
Experimentation of Station Appearance /Create a sweep surface with rail
curves
Generate Sweep Rail Render Result
Prototype 1
Use vector drawing generated from [Adobe Illustrator] as [rail curve],raise [sweep surface] in [Rhino].
Research
The idea of using sweep surface for station design is inspired by Richard Serra’s iron sculptures -- large scale distorted plates, creating immersive spatial experience for audience.
Iron Sculptures, Richard Serra
Functionality and User Experience on Ventilation within Station
/Targeting increasing climate crisis
Station Prediction /Stable Diffusion v1.4.ckpt in Comfy UI
/Img2Img Function
Creating an alternative image from uploaded image, base on text description
The generated image show a more dramaticaly lowered tunnel structure than original Canary Wharf DLR Station, maximize the visual effect of depth of 昀椀eld.
* [Streamline design] of tube head decrease [wind pressure], operate at higher speed.
* LED light strip signals arrival of train. The light is powered by wind-energy, generated when train enters station and activates the fan.
Platform 1 Environment & Experience
Prototype 2
Tracks with giant wind engine/wind tunnel in station
Decision Making: I adapted my development plan from using software to simulate manually, to incorporate [Comfy UI (Arti昀椀cial Intelligence Engine)] into work昀氀ow. I think The prediction AI make would be more commprehensive,for its database include knowledge from various 昀椀elds.
Documentation：
Arrival of tube at Canary Wharf Station
Prompt: Canary Wharf DLR Station has a giant wind tunnel Size: 512x512
Station Prediction /by Stable Diffusion v1.4.ckpt
I edit the AI generated image in Photoshop to trace the outline.
Canary Wharf Station has a giant wind tunnel with LED Light Strip along tracks.
Bevel and overlap multiple spheres to form intricate inner structure
Station Speculation: Tracks within an exoskeleton iron structure.
Blender/Viewport/ Block Out the station levels by adding planes.
Shopping mall’s gate entrance on both sides of station
Separate the face/Mirror/Move
Extrude inward along lines to form tracks (3 tracks accessible from both direction)
Installed Substance 3D Plugin for material render
Extrude inward along lines Scene Speculation /Add Details
Station Outcome
/
Refer to ArcGIS SceneViewer measurement, the station measures 280m in length. The speculated station has a higher height and more levels. The original glass shelter is replaced with iron material for futuristic appearance.
Scene Outcome
/Setting: early morning, empty, futuristic station in iron shell
I blurred the background and positioned point lights to lit the entrance of the station for this atmospheric render.
Open Studio Showcase /
Platform 2 Information & System
Project Statement:
Redesign the user interface of Polysomnography (PSG) Sleep monitoring device, with multiple channels such as Electroencephalography (EEG), capture and display brain activity in waveform; to convert a subconscious activity, sleeping,to quantitative data.
The redesigned interface features an additional screen besides the standard datagraph, exhibiting and simultaneously recording real-time footage of monitored person.
This project explores the concept of becoming spectator of one’s own event and how interface design affects user’s awareness.
Bibliography:
Polysomnography (PSG) from PhysioNet-Sleep-EDF Dataset: https://physionet.org/content/sleepedf/1.0.0/
Medical device reference: https://www.medicalexpo. com
Research: Polysomnography (PSG) Sleep monitoring device manufactured by SOMNOmedics, on Medicalexpo.com
Electroencephalography (EEG), record an electrogram of the spontaneous electrical activity of the brain.
Mindmap
In this mindmap I investigate elements in User Interface and its relation with other concepts.
Status switch on interface indicates signal on/off, is connected to electrical engineering;
Buttons and surface need to be adapted ergonomically to user behaviour of holding and pressing the interface.
Disassemble Interface /Controller and Buttons
I disassembled a mobile game controller and the mode selection/zoom part from a vintage camera and noticed how they are similar in appearance yet distinct by entertainment/informative characteristic, from integration of different button/dial behaviour.
Example of Interfaces: Reference
Research /Maxmsp
I look into how Maxmsp map out an external controller. & move around the compartments and parts behind a Graphic User Interface(GUI).
Notes: -patcher -live object - gamepad - output_messages(route and buttons) - print dumpout - event log shows actions in max console (inlet-receive messages from outside a patcher) -unpack-messages-comment -jsui - javascript user interface an graphics -button -route -slider -value -lcd-display graphics
Xbox Controller, Mapped out in Maxmsp
Prototype /PSG Display
Three clips generated by Mixamo
let the program play different video 昀椀le according to the PSG indicator
Polysomnography (PSG) from PhysioNet-Sleep-EDF Dataset
Mixamo generated rigged animated posture relate to sleeping.
Interface Proposal
With Maxmsp algorithm in mind,I map out the data and displays connection.
User can activate the interface by interactive button and alter the state by adjustable dial.
Main Display
-On/Off Switch
-Record/Real-time
PSG Graph Display (in sync with the Main Display)
-Pause/Play Button
-Potentiometer as adjustable dial: Increase in value to a threshold alters the display video
Inventory and Parts
Mixamo model rig to a laying Animation
Ardi Display for UNO R3 240x330 Resolution 2 inch Display Board
Conclusion
Re昀氀ection:
Throughout Unit 7, I encountered challenge in making prediction about future station, required by E&E brief. I feel discomfort in the uncertainty of having a probable outcome, within many possibilities. My design approach is more of a logically progression base on certified information, which lead to the best appropriate solution. I had to utilize and 昀椀lter various information, with AI integration, to speculate the scene. It is a new workflow for me and at last I’m content with the 昀椀nal outcome.
I have been interested in explore hardware(electrical components/display) from start of the term, and therefore very much enjoyed the Interface Brief, as it naturally incorporates this aspect. However I feel I could have achieved more.
I see the need to improve my time management and have more communication with tutor and peers to maximize the learning process.
