Portfolio for UCL DFPI by 王子赫

PORTFOLIO

Human

Design

Fabrication

Selected Works 2022-2023 Zihe Wang wzh100375094@gmail.com +86 18246342089

Society

Landscape

Interaction

CONTENTS

01 Emotion Canvas Exploring Emotional Responses in VR-EEG Driven Art Creation VR Scene & Emotion System

02 Embrace Thinking A pneumatic device based on EEG to provide emotional relief Embodied Interaction & Emotion Classification

03 Composable Module Body-friendly urban furniture design Non-planar 3DPrint

04 Hierarchy Interlacing City Research on factors influencing the vitality of Tianjin’s historical districts Urban Data & Image Segmentation

05 Tag Talk Design of VR graffiti social APP based on urban demand expression research Machine Learning & VR Social Platform Design

Emotion Canvas | VR Scene & Emotion System Exploring Emotional Responses in VR-EEG Driven Art Creation [Instructor] Han Tu [Duration] 7.2023 - 11.2023 [Group work] Zihe Wang, Hansen Xie, Qingyun Liu, Mingyang Sun [Role] 80% User test 100% Scanning and modeling 50% VR product design 100% Data cleaning & analysis Group conceptual design [Tool] Unity, Metashape, Sidequest, Mind monitor Art therapy is a form of psychotherapy, mainly for patients who have suffered mental injuries or have psychological difficulties. It improves the physical, mental, and emotional well-being of participants through the creative process of art. This research aims to explore the impact of three emotions at different stages of art creation or in different creation contents through virtual reality (VR), electroencephalography (EEG), and questionnaire surveys. Our research created a platform providing different creation options for people with different needs based on the experimental results. First, we extracted elements of an ancient Chinese painting, and scanned the related historical buildings to generate digital models in VR. The creative options of painting background and scanned buildings were put in VR with different styles and contexts. Second, 12 testees completed different creation options in the order of planning, creating, and sharing. Finally, more effective style and context combinations were summarized for relaxation, focus or communicative state. This platform lowers the threshold for art therapy and allows people with mental distress to tailor solutions themselves to meet spiritual needs.

RESEARCH BACKGROUND Research Process

Emotion Problems Global mental health needs are surging due to social disparities, pandemic impacts, and modern stressors, with 40% of American adults facing mental challenges and over 275 million people globally suffering from anxiety or depression.

Planning

Style

Context

Ancient painting

Natural

Creating

Model

Move

Sharing

Rotate

Delete

Review

Review and share your own scene created Realistic

Anxiety

Distraction

Comment

Browse shared Comment and scenes published communicate with by others friends

Urban

Loneliness

Scanning & Photogrammetry

Art Trerapy Challenges

EEG Monitor 3 Reference Sensors

Art therapy, a form of psychotherapy that primarily employs various forms of art as a means of communication, is well-regarded for its efficacy in facilitating the articulation and therapeutic processing of multifaceted emotional states. Nonetheless, it encounters specific challenges:

2 SmartSense Conductive Rubber Ear Sensors

Online Sharing Platform Review

2 Forehead Sensors Alpha: 8Hz-12Hz

Type here...

Rising Trend Relaxed

Beta: 12Hz-40Hz

Steady

Comment

Focused

Media Selection Hard to select mediums aligning with emotional needs

Emotion Measurement Hard to measure emotional changes

VR-EEG Platform

Comments

Theta: 4-8Hz

Emotion Expression Need guidance to express emotions

Rising Trend Type here...

Communicative

Test Environment

This research integrates EEG with VR art therapy, aiming to fill existing gaps in the traditional art creation process. EEG's non-invasive brain activity monitoring offers real-time emotional insights, offering a novel dimension to art therapy.

EEG Headset

VR Headset VR View Recording

Planning Personalized choices in VR Based on Individual Preferences

Creating EEG’s monitoring to understand emotional changes

Sharing VR social platform for sharing and emotion expressions

Testee 1 Testees all scored negative in the positive and negative emotion tests.

CONTEXT AND MODEL COLLECTION Study Process

Nature + Urban

Scanning and Photogrammetry

Nature

Urban

Scanned from Panmen Scenic Area

Context Categorization

Aerial Photography

Context Collection

DJI Mini 3 Pro Metashape a4: Urban

a3: Nature + Urban Typical Episode Extraction

a2: Nature

5000 Photos Ruiguang Tower Pan City Gate

Pavilion Furniture

a4: Urban

a2: Nature

a3: Nature + Urban

Ruiguang Tower

Sirui Hall

8 Models

Landscape

Sirui Hall Bridge

Ancient Building Identification

24.86 Hectares

Pan City Gate

Pavilion

Bridge

Furniture

Landscape

Sculpture

Model Collection

Point Cloud

b1: Scanning and Model Generation

Model Wireframe

b2: Model Stylization

Model Confidence

Combination

Realistic Combination

Ancient Painting Combination

a1b1: Empty Context + Realistic Model

a2b1: Nature Context + Realistic Model

a3b1: Nature & Urban Context + Realistic Model

a4b2: Urban Context + Stylized Model

a1b2: Empty Context + Stylized Model

a2b2: Nature Context + Stylized Model

a3b2: Nature & Urban Context + Stylized Model

a4b1: Urban Context + Realistic Model

Model Texture

DESIGN STUDY Planning Research Question 1: What brainwave dominate the initial planning ？

Research Question 2: What style and context combinations are more effective for relaxation, focus or communicative state ？

Collect EEG data on wandering and planning. Compare the average value of α, β and θ of resting state, and integrate questionnaire data.

Creating

Sharing

Research Question 3: How do the emotions change During different states of the creating process in a specific scene?

Research Question 4: Does the process of reviewing, selecting favorite scenes, and sharing contribute to therapeutic outcomes?

Contrast brainwave data with screen recordings to assess brainwaves during creating operations.

Collect EEG data during reviewing and favorite scenechoosing process.

Summarize and categorize changes in brainwaves corresponding to different operations.

Compare the average value of α, β and θ of 30s resting state, integrating questionnaires.

Large objects manipulation

Objects selection

Figures and landscape elements placement

β wave changed significantly in planning 1, suggesting an enhancement of focused state. Three scenes most effective for each brainwave are categorized in planning 2, which is also supported by subjective evaluation from questionnaires, and a3b2 is chosen as a sample scene for creating process.

A noticeable increase in β waves occurs during the selection and manipulation of large objects, indicating heightened focus, while placing figures and trees shows steady brainwave fluctuations. The final review phase shows a decrease in β waves, suggesting relaxation.

Increases in β waves during review and scene selection indicate heightened focus. The sharing phase shows increased θ and α waves, suggesting a relaxed and communicative state.

Research Question 5: Do testees experience positive emotion changes after the entire design process? Planning 1: Planning in Mind

Planning 2: Planning for Style and Context Selection

Creating: Wander, place, move, rotate, delete, select

Sharing: Reviewing, favorite scene choosing, sharing

α β θ

TEST RESULTS PLANNING I

PLANNING II

Grow rates of average values :

Choose mood-enhancing combinations:

Judging from the results, most people will increase the average beta wave after the planning I stage, and it can be seen that they will be more focused.

a1b0

Relaxed

a1b1

a2b1

Focused

Communicative

a1b0ʼ

Relaxed

Communicative

a1b2

Relaxed

a1b2

Focused

Communicative

Relaxed

Focused

Communicative

Focused

a3b2

a2b0

Relaxed

a2b1

Focused

Communicative

a2b0ʼ

Communicative

Relaxed

a3b2

a2b2

Communicative

Focused

a2b1 Communicative

Focused

a3b0

Relaxed

a3b1

a1b1

Communicative

Relaxed

Focused

Relaxed

Testee 8

Selecting 3 most eﬀective scenes of each emotion:

The selected scenes were compared vertically according to diﬀerent emotions, then select 3 most eﬀective scenes for mood enhancement for each emotion. Among them, the beta wave normalized result of a3b2 is 68%, which is the highest.

Testee 7

Testee 6

Testee 5

Testee 4

Relaxed

Testee 3

Testee 2

Questionnaires:

Normalized values’ extent:

Focused

Testee 1

The EEG data and questionnaire data of 16 scenes were averaged and then normalized. Compare the normalized results of 8 scenes and their blank scenes. The results show that a2b2 and a3b1 have less positive eﬀects on emotions than their blank scene, and the other scenes are better than their blank scenes

Focused

Communicative

Focused

a3b0ʼ

Testee 10

Communicative

Focused

Communicative

a4b0

Relaxed

a4b1

Relaxed

Focused

a4b1

Testee 11

Relaxed

a3b2

Relaxed

Communicative

Focused

Communicative

Focused

Testee 12

a4b0ʼ

Rest

Planning

Rest

a4b2

Communicative

Focused

Communicative

a3b2

a1b1

Relaxed

Beta average data

Beta original trend

Relaxed

Communicative

Testee 9

Focused

TEST RESULTS Creating: Space Construction Chose a3b2 as the sample scene for creating: All α, β and θ waves show a gradual upward trend in fluctuations, with β waves increasing the most, meaning that the users become more and more focused.

VR-EEG ART CREATION PLATFORM

Embrace Thinking | Embodied Interaction & Emotion Classification A pneumatic device based on EEG to provide emotional relief [Instructor] Wei Zhao [Duration] 9.2023 - 12.2023 [Groupl work] Zihe Wang, Vickrey Yang, Erik Zhang, Xizhe Zhu, Vanessa Yang [Role] 100% Theoretical research 100% Product design 100% Hardware design and testing experiments 50% Auxiliary research on basic code of affective computing, 100% Physical production of software and hardware [Tool] Python(colab), Arduino IDE , Pycharm, Mind monitor, Muse lab

In cities, especially developed cities, more and more people, from children to the elderly, are suffering from urban autism. Different reasons cause them to suffer from long-term loneliness and mental depression. Some elderly people even buy inflatable dolls to try to relieve their loneliness in their old age. So we try to start with human emotions and physical objects. Try making an interactive robot that uses the soothing action of hugging to comfort people. In the research, we first designed an Arduino-driven breathing robot prototype, which can have different breathing frequencies and softness and hardness. At the same time, EEG, emotional stimulation videos, and emotion classification codes were used to test 10 subjects. Later, the test results will be used as instruction standards to issue optimal instructions to the breathing robot to achieve interactive effects. At the same time, it can be realized with mobile APP to provide a variety of remote control functions.

BACKRGOUND | USER PATH ANALYSIS & METHODOLOGY City Loneliness

Nature Deficiency

Prototype Design Exterior

Internet Addiction

EEG Monitor

Breathe Simulation

Size Psychological health

Physiological issues

Outward Mr.Xiao|23 age

Stuﬀed toys are sometimes regarded as "transitional items" that accompany many people as they grow up, making it easy for everyone to accept them.

ARDUINO

Inflator

Suction

Use Arduino to control two air pumps acting on the experimental balloon, one Inflator and one Suction. Use code to control its alternate work to achieve a breathing-like eﬀect

Evocation Of Emotion

10 Testees Mr.Zhao|28 age

Trial balloon

Experiment Design Experiment Process

Ms.Zhang|57 age

The size of the pillow is about the size of the chest makes people want to hug it.

Use music videos in the DEAP data set (Database for Emotion Analysis using Physiological Signals), and its eﬀect has been widely verified in academia.

Evocation process

Evocation of Emotion Retest Breathing Feedback

A 2-second screen 5-second displaying to inform the baseline recording tastees of their progress.

Selecte 10 of the 40 videos as stimulus videos to streamline the experimental process

Mr.Li|19 age

1-minute display of the music video.

5-second Calm down

EEG Import

EEG Data Import

Mr.Liu|45 age

Buﬀer

Classification

OSC Data

Visualization & Debugging

Parse & Process

Mind Monitor

Muselab

Test Result

Mr.Li|25 age

Emotion Classification

DEPRESSION

ANXIETY

IRRITABILITY

COGNITIVE DECLINE

SOCIAL PHOBIA

MENTAL FATIGUE

COMPULSIVE

LESS INTEREST

POOR APPETITE

POOR SLEEP

METABOLISM

EYESTRAIN

STRESS RESPONSE

HYPER TENSION

HEART

Negative symptoms of users The beginning of the journey - A HUG Social Emotional Regulation Simulates physical contact in human interactions and provides comfort and emotional support to a certain extent. This may promote social connection, reduce anxiety, and improve mood and emotional regulation.

Neuroreflex When the human body faces some stimuli, our nervous system will undergo some passive changes, which can make us feel better.

Human body reaction Vibration Space feeling

Modern

15times/min Angry

Tense

Skin feeling

Muscle relaxation

Frustrated Depressed

Excited

Neutral

Soft

Happy

Valence Content Relaxed

Low Tired

This classifier can still achieve high recognition accuracy even if it uses very few EEG electrodes.

Delighted

High

Bored

Calm

The Arousal-Valence Model

Interaction Design Interactive Program EEG collection

Temperature

Reference Channel

Angry

F. M. Garcia-Moreno, M. Bermudez-Edo, M. J. Rodríguez-Fórtiz and J. L. Garrido, "A CNN-LSTM Deep Learning Classifier for Motor Imagery EEG Detection Using a Low-invasive and Low-Cost BCI Headband," 2020 16th International Conference on Intelligent Environments (IE), Madrid, Spain, 2020, pp.

15times/min

Hard

Hormones Related To Hugging

Visual experience

Frequency

Soft

IMMUNITY

These megacities bring people opportunity, money, and legend. But under the bustling lights are lonely people. They endure silently but don't know how to relieve their discomfort. Day after day, year after year until they leave. Maybe they could use a hug at this time.

Tired

Muse electrode locations by 10-20International Standards

Tense

Positive

Bored

Arousal

CNN-LSTM Deep Learning Classifier

20times/min

25times/min

Emotion Model

Emotion Classification Model

Summarize the results of 10 people to get the best breathing feedback version for each negative emotion improvement Ms. Zheng|16 age

Python-muse

Negative

Mingming|10 age

OSC Data

Cortisol

Dopamine

It plays an important role in stress stress and regulating body metabolism.

It is thought to be associated with pleasure, satisfaction and positive emotions, and may have positive emotional effects on body.

Epinephrine

Oxytocin

Influence heart rate, constrict blood vessels, etc. to increase cardiac output and raise blood pressure.

Known as the "love hormone," it helps strengthen social bonds, increases trust, promotes bonding behaviors.

More Application

Emotion classification

Choose the best breathing feedback version

Emotion optimization

Frequency

Interactive feedback

Give instructions

Using the mobile APP to connect to the breathing robot, users can not only see their emotional state and changes during use, but also give hug through remote control to send concern to another person.

Emotion statistic

Measure emotion

Embrace at once

Elasticity

Trigger Interaction

Select character Myself

Others

PROTOTYPE DESIGN | CIRCUIT PART & MECHANICAL PART Switches

Pumps

The prototype is activated by an air pump and a three-way solenoid valve. It consists of mechanical part and circuit part. The mechanical part includes two air pumps, a three-way solenoid valve, and a prototype of the robot's appearance, including an experimental balloon and an air column membrane that makes the outer skin more skin-friendly. The circuit part has an arduino R3 and an expansion board. Through code control, the breathing eﬀect is achieved by inhaling, exhaling and stopping time in between.

Breathable liner

①

②

③

Breathe Controllor

⑧

⑨

Breathe Code for (int index = 0; index < 5; index++) servo_8.write(180); servo_9.write(0); servo_10.write(0); delay(3000);

⑤

⑥

⑦

void setup() { servo_8.attach(8); servo_9.attach(9); servo_10.attach(10);

④

servo_8.write(0); servo_9.write(0); servo_10.write(180); delay(300);

servo_8.write(0); servo_9.write(180); servo_10.write(180); delay(3000);

①: Air column membrane ②: Experimental balloon ③: Pump ④: Three-way solenoid valve ⑤: Power supply ⑥: PWM digital switch ⑦: Pipe ⑧: Dupont line ⑨: Expanding board ⑩: Arduino R3

⑩

APPLICATION PROCESS OF BREATHING ROBOT Flowcharts EEG data collection

Self-emotion soothing

Emotion classification

Trigger hardware interaction

User feedback

Make instructions based on experimental results

Backend data statistics

Testee 2: Vickrey

Mind monitor

Muse II Feedback

EEG signal preprocessing

Output EEG classification results through CNN

Muse II

Muse lab

Emotional awareness and soothing others’ emotions

EEG data visualization

Online hug command

Emotional prediction

User feedback

Emotion Visaulisation

Stimulus videos

20 times/minute Mind monitor Breath Frequency High Tense

Excited

Angry

Delighted Happy

Frustrated Soft

Hard

Neutral

Inflation amount

Content

Depressed Bored

Relaxed Tired

Calm Low

When we give a higher breathing rate, the testee's mood will be more arousal.When we give more inflationamount, the testee will be more Valence.

Prototype

Prototype Design | Mechanical Part & Circuit Part The prototype is activated by an air pump and a three-way solenoid valve. It consists of mechanical part and circuit part. The mechanical part includes two air pumps, a three-way solenoid valve, and a prototype of the robot's appearance, including an experimental balloon and an air column membrane that makes the outer skin more skin-friendly. The circuit part has an arduino R3 and an expansion board. Through code control, the breathing eﬀect is achieved by inhaling, exhaling and stopping time in between.

Composable Module | Non-planar 3D Print Body-friendly urban furniture design [Instructor] Yiqing [Duration] 8.2023 - 11.2023 [Individual work] Zihe Wang [Tool] Grasshopper, Rhino

Clay is a sustainable material but has not yet been used on a large scale for urban construction. However, compared with conventional plastics and wood, its recyclable and low-carbon characteristics are more suitable for global climate needs, and it is also a potential material in 3D printing. Starting from the most basic urban furniture in the city, seats. Individual printing modules are assembled and varied to break through the size limitations of desktop printers and create spatially meaningful entities. Starting from people's behavioral performance outdoors, we explore the non-planar curves of people's different postures, to create a sustainable entity that can be freely combined to meet different physical needs.

FORM GENERATION| CURVE EXTRACTION Half-sitting

The most common sitting temporary posture, usually with only part of the body leaning on it.

Full-Sitting A posture when people are much relaxed, almost all of the buttocks of the body will be in contact with the seat.

Modules

Each posture also has a corresponding curved surface based on the curve. Combine these surfaces. Two basic modules are created. This single module or module combination can meet the curves of these four postures

Module 1

Plan

Facede

Side Facede

Module 2

Plan

Facede

Side Facede

Module Combination In the combination of plane and elevation, different combinations can not only meet people's posture curves, but also meet the simultaneous social use of multiple people or the simultaneous use of strangers.

Lying Down People with physiological needs or want to relax more will lie down, which body curve is the most undulating.

Combination 1

Form 1

Form 2

Combination 2

Form 1

Form 2

Combination 3

Form 1

Form 2

Combination 4

Form 1

Form 2

Leaning

People sometimes sit on the ground or grass, leaning against a hard backrest.

STRUCTURE ANALYSIS

3D PRINTING PROCESS

The modules are open to people to create any desired combination, it is important to make it easier for different people to move these modules. So the modules are hollowed out to reduce material usage and achieve lightweight while it have enough pressure resistance to facilitate people's use.

Force_flow

Displacement

Iso_line

Princ.moment_line

Princ.stress_1

Use grasshopper to create a non-planar printing path, a transition from planar to non-planar.

Princ.stress_2

Utilization

! !!

! !

!! !

! !

! ! !!

! !

!! !

! !! !

! ! !

! ! ! !

! !

! ! ! !

! !

! ! !

! !

!!!

! !! ! !!! !!! !

Hierarchy Interlacing City | Urban data & Image Segmentation !

Research on factors influencing the vitality of Tianjin’s historical districts

! !

! ! ! ! ! !

! !

! !! ! ! ! ! !!

!! !! !

!! !

! !

! ! !

! !

! ! ! ! !

! !! !

! !

[Duration]

! ! !

! !!! !

!! !

Han Tu

! ! !! ! !

! !

[Instructor]

! ! ! !

!! !

! !

! !!

! !

! ! ! !

! !

! ! !

! !! !

! !

7.2023 - 12.2023

! !

[Individual work] !

! !

Zihe Wang

!!! !

! !

!! !

! !!

! !

! ! !

! !

People's diverse activities in public spaces are often accompanied by complex inner needs for the public space environment, and the built environment elements involved in each need may overlap with each other. The design and construction of public spaces should satisfy people's inner needs and enhance the ! vitality of public spaces.

! ! ! ! !!

! ! !

! !

!!!

This research divides the public's needs for the public space environment into five levels, satisfaction, pleasure, comfort, safety, and accessibility. Summarize the corresponding three levels of urban vitality in! fluencing factors. Taking 14 historical districts in Tianjin as research objects, measured and quantitatively ! ! analyzed the influencing factors and vitality, and proposed design suggestions for improving vitality ! based on the results. !

! ! ! !

! !! While people's behavioral activities are affected by the elements of the built environment, the inner ! ! ! !! ! ! stimulation of!!!the! surrounding environment will subjectively produce psychological needs for the environment. Based on the well-known "Maslow's Hierarchy of Needs Theory", M. Alfonso (2005) proposed a ! hierarchical model of people's needs for pedestrian public space environments. From low to high, they ! !! ! ! are pleasure, !comfort, safety, and accessibility. feasibility and feasibility. !

Python(colab), ArcGIS, Pycharm, Space Syntax, Kepler, SPSS ! !

! !

!! ! !

[Tool]!

! ! ! !

! !

! ! !

! !

! ! ! !!!

! !

! ! !

Heat Map In Tianjin History Districts | POI In Tianjin

! !

RESEARCH BACKGROUND | DEMOND HIERARCHY & METHODOLOGY

“We need a good street view.”

“I need to see some pleasant green.”

Comfort

“We need more space to walk.”

“I need some rest.”

“We need a better environment”

“We need to enjoy our surroundings”

District Scale

Street Scale

Human Scale

Impact factors at the district level, involving the structural environmental characteristics of districtsʼ surrounding.

Factors aﬀecting the built environment of public space, involving the main interfaces outside the buildings

The micro-environmental facility factors within including open seating facilities, recreational facilities, etc.

Pedestrian Accessibility Road network density Street texture District spatial structure Green rate POI kernel density POI types

“Oh, we need safe driving!”

Seg_Cars Seg_Buildings Seg_Sidewalks Seg_Road

Seg_Plant Seg_Water

Land use indensity

Spatial Data Analysis

Human Scale

Segmentation

Crawl data

“We need to cross the road safely.”

Seg_Sky

Cleanin Facilities

Bus stops and route density

！

Safety

Perceptual

Guidance Facilities

Pleasure

Morphological

Temporal

Function

Safety Facilities

“We need to meet all needs here”

Visual

Seating Facilities

“We need to be able to buy anything.”

Social

Sports Facilities

“We need outdoor sports.”

Satisfy

Pleasure

Landscape Sketch

Satisfy

Comfort

Interface Openness

Large Scale

Safety

Spatial Proportions

Medium Scale

Accessbility

Interface Beauty

Human Scale

Damond hierarchy

Six Key Dimensions Of Urban Design

Demond Hierarchy Of Public Space

Neighborhood Neighborhood Transportation Texture Accessibility Function

Based on Maslow's need theory, people's five needs show diﬀerent behavioral manifestations at three spatial scales.

Baidu API

“We need safe travel protection” Baidu POI Buildings Road Networks Bus Stops Intersections, green spaces

On-site research, visiting every historical district, taking photos and recording various urban furniture related to human scale.

0° 270°

14 Districts

90°

CNN

POOL

180°

Accessbility

“I just need to get over!”

“Oh, we need to solve this big trap”

“I just need to get to my destination”

People's diverse activities often require complex environments, which are related to urban space and are aﬀected by many factors in the city. Here I take the 14 most typical neighborhoods in Tianjin as the research objects. Explore the mpact of spatial factors on human behavioral needs Human Activities:

Excel

GIS System

Manual Calculation

Line Density Kernel Density Euclidean Distance Ordinary Density

Bus stops density Street texture POI types

POI Shopping

Land use indensity

4 Direction

Space Syntax

CONV CONV

API Key Depthmap

CONV

Request URL (Mumbai_SVI. CSV)

CONV

UPSAMPLE

POI kernel density Green rate Pedestrian Accessibility Road network density

Interview and record citizensʼ opinions on the use of urban furniture. Compare the same urban furniture in diﬀerent forms to find a better choice.

CONV

District Spatial Structure

2239x4=8956

Hotel Sports ground Food

Vitality

Service

Data Analysis

Attraction

Factors

Baidu Map API

POI in One District:

Pycharm <meta http-equiv="Content-Type" content="text/html; charset=utf-8”/> <meta name="viewport"content="initial-scale=1.0，user-scalable=no”/> <script type="text/javascript" src="http://api,map.baidu,com/api?v=2,0&ak=XXXXXXX"x/script> <script type-"text/javascript" src="http://api,map.baidu,com/library/Heatmap/2,0/src/Heatmap min.js"x/script>

Arc GIS

Kepler

Calculate Data

Data Visualization

Factors

Vitality

Factors

Significance Analysis

Regression Analysis

Correlation Analysis

Delete abnormal factors and data.

Find out the impact of factors on vitality

Analyze correlations between factors to guide design

14 Historic District in Tianjin 10

Design Suggestion 2 8

Safety

Comfort

Pleasure

Sytisfy

Public Transport Optimization

Road Safety Improvement

Elastic Space

Ecological optimization

Improve Cultural Attributes

Optimization Of Sidewalks

Safety Facilities Upgrades

Building Facade Optimization

Intelligent Urban Furniture

Sports Facility Upgrades

···

Accessiblity

···

14 5 46 3

···

DISTRICT SCALE | VITALITY & IMPACT FACTORS Weekday district heat map

Transportation accessibility

Density (/km²) 0-15 15-30 30-45 45-60 60-75

Density (m/m²)

Choice (m)

Bus stops and route density

Road network density

Pedestrian Accessibility

Small districts 4 and 6 have the highest density. District 11 is large but has the lowest density of bus stops.

Most districts fluctuates around 0.02. Only district 10 has a much lower road network density than the average.

Most blocks fluctuates around 30, but districts 10, 11, and 12 next to each other are very high.

0-0.01 0.01-0.02 0.02-0.03 0.03-0.04 0.04-0.05

0-30 30-60 60-90 90-120 120-150

Neighborhood texture >400 320-400 240-320 160-240 80-160 0-80

Weekend district heat map Density (/km²)

Rate

Integration (m) 0.0-0.3 0.3-0.6 0.6-0.9 0.9-1.2 1.2-1.5

0-50 50-100 100-150 150-200 200-250

Street texture

District spatial structure

Each district has diﬀerences and irregularities and may have little impact on vitality.

Districts 3 and 5 are much higher than the average, while district 10 is much lower than the average.

0.0-0.2 0.2-0.3 0.3-0.4 >0.4 Parks

Green rate There is little diﬀerence in the green space rate among various districts, and there is no pattern.

Neighborhood function

>400 320-400 240-320 160-240 80-160 0-80

Crawl the thermal value of diﬀerent time periods on a certain weekday and weekend in Tianjin on Baidu Map, sum andvisualize these data. Calculate the average value of hot spots in each block as the thermal value

Density (/km²) 0-15 15-30 30-45 45-60

Types values

Plot Ratio

0-4 5-8 9-12 13-16

POI

<0.8 0.8-1.2 1.2-1.6 1.6-2.0 >2.0

POI

POI kernel density

POI types

Land development indensity

District 11 is much higher than that of other blocks, while that of district 9 is very low

The types in districts 1 and 14 are the highest, but the area of district 14 is too large and has little reference significance.

Most districts have same intensity, only district 5 has a very high development intensity.

STREET AND HUMAN SCALE | SEGMANTATION & FIELD RESEARCH Street condition

Urban furniture

Seg data

Street view 0%

50%

Street condition 100%

District 4 District 8

District 13

District 1

District 10

District 3

District 11

District 12

District 6

District 14

100%

District 2

District 9

50%

District 5

District 7

Segmanted

Street view

Urban furniture

CONCLUSION | DATA ANALYSIS & DESIGN SUGGESTION Significance Analysis

Accessibility

Regression Analysis

Road network density

Seg_Street light

District spatial structure

Green rate

Seg_Sidewalk

Bus stops density

Seg_Seat

Street texture

Bus stops density

Building density

Seg_Building

Plot ratio

Building density

Pedestrian Accessibility

Plot ratio

POI kernel density

POI types

Street texture

Seg_Sky

Seg_Sighboard

Seg_Road

Road network density

Seg_Building

Seg_Fence

Seg_Sidewalk

Pedestrian Accessibility

Seg_Water

Seg_Cars

Seg_Trees

Seg_Water

Seg_Fence

Green rate

Seg_Seat

POI types

Seg_Sighboard

Seg_Sky

Seg_Street light

Seg_Road -2

District scale Convenient transformation

Human scale Humanized ficilities

Safety

-0.4

It can be seen that the data of each impact factor are relatively stable and similar, but there are a few abnormal data in some factors will aﬀect the data quality, so the abnormal data will be removed in subsequent analysis.

District scale Continous path

0.4

Factors greater than zero are positively correlated with vitality and have a positive eﬀect. On the contrary, factors less than zero have a negative eﬀect In addition, factors greater than plus or minus 0.4 have a significant impact on vitality.

Street scale Accessible crossing

Human scale More street light

Human scale Secuity barrier

Comfort

Correlation Analysis According to the correlationship, it can indirectly improve larger scale factors by improving related small scale factors to improv vitality. Seg_Sidewalk

District spatial structure

Bus stops density

Plot ratio Building density

Seg_Sighboard

Seg_Sky

Seg_Street light POI kernel density

Seg_Seat

0.02

0.91

0.37

0.4

0.96

0.78

0.34

0.39

0.57

0.68

0.03

0.6

0.08

0.34

0.46

0.06

0.97

0.49

0.61

0.03

0.76

0.04

0.78

0.34

0.82

0.65

0.01

0.99

0.01

0.23

0.16

0.32

0.38

0.07

0.03

0.78

0.01

0.91

0.55

0.7

0.66

0.02

0.9

0.02

0.19

0.39

0.28

0.59 0.04

0.02

Seg_Sky

0.96

0.32

0.88

0.38

0.66

0.86

0.08

0.15

0.28

0.26 0.56

POI types

0.99

0.41

0.55

0.91

0.48

0.18

0.54

0.06

0.21

0.04 0.28

0.08

0.31

0.81

0.66

0.62

0.01

0.48

0.88

0.34

0.9

0.26 0.74

0.32

0.57

0.17

0.7

0.01

0.26

0.03

0.22

0.49

0.18

0.12 0.01

0.13

0.17

0.05

0.11

0.59

0.01

0.17

0.09

0.45

0.2

0.13

0.11 0.02

0.06

0.2

0.03

0.35

0.23

0.25

0.81

0.63

0.1

0.07

0.23

0.08 0.47

0.02

0.17 0.04

0.01

0.18

0.05

0.59

0.98

0.21

0.13

0.4

0.01

0.53

0.07 0.41

0.15

0.51

0.37 0.86

0.69

0.41

0.98

0.29

0.49

0.93

0.78

0.96

0.12

0.89 0.42

0.12

0.15

0.01 0.01

0.01

0.12

0.76

0.03

0.44

0.03

0.26

0.23

0.77

0.11

0.89

0.07 0.02

0.09

0.1

0.48

0.02

0.73

0.04

0.84

0.25

0.19

0.16

0.65

0.09

0.87

0.59

0.82

0.44 0.69

0.20

0.87

0.55 0.47

0.28

0.06

0.83

0.09

Seg_Fence Seg_Trees Seg_Cars

Street scale Smooth walking system

Human scale Elastic space

Human scale Unified building facade

Pleasure

Seg_Water Seg_Sidewalk Seg_Building Seg_Road

POI kernel density Pedestrian Accessibility

Street scale Ecological corridor

Plot ratio

Human scale LED screen

Human scale Smart urban fuiniture

Satisfy

Building density Street texture Bus stops density Green rate District spatial structure

0.25 Road network density

e ur ct tru ls tia pa ts ric st Di te ra n ity ee ns Gr de ps to ss Bu re xtu te et y re sit St en gd in ild Bu y ilit tio ib ra ss ce ot Pl Ac n ria st y de sit Pe en ld ne er Ik PO es yp It PO y Sk g_ Se ad Ro g_ g Se in ild Bu g_ Se lk wa de Si g_ Se er at W g_ Se rs Ca g_ Se s ee Tr g_ Se e nc Fe g_ Se at Se d g_ ar Se bo gh Si ht g_ lig Se et re St g_ Se

POI types

Seg_Sighboard

0.43

Human scale Community signboard

District scale Culture theme gallery

District scale Water-proof runway

Tag Talk | Machine Learning & VR Social Platform Design Design of VR graffiti social APP based on urban demand expression research [Instructor] Han Tu [Duration] 9.2023 - 12.2023 [Groupl work] Zihe Wang, Lingxuan Gao, Jue Wang, Jinhua Zhang [Role] 100% City data crawing and visualization 50% Questionaire 50% Image classification 70% Data analysis 50% UI design Group conceptual design [Tool] Python(colab), ArcGIS , Kepler, Figma

Cities are complex and vast ecosystems with diverse voices and needs. Urban graffiti, which seemingly simple creations can carry citizens’ emotions, desires, and needs. I try to understand citizens’ emotional experiences and expressions of needs in urban space while paying attention to potential conflicts between city managers and citizens. Therefore, I try to delve into the graffiti culture of Lower Manhattan to decode the hidden urban voices in these artworks and explore the relationship between the needs provided by urban architecture and the actual needs of citizens. I distributed 300 questionnaires and expanded the graffiti dataset to 2,000 images, I trained a model for graffiti recognition and classification. The resulting graffiti map, generated through predictive modeling, provided insights into local people's cognitive needs, reflecting their perceptions of the city and its surrounding environment. However, my research also revealed a practical problem: in real life, there are always some obstacles to citizens expressing their needs. To this end, I proposed and designed an online real-life graffiti APP. Through virtual reality technology, people can do electronic graffiti in the virtual city, and at the same time, they can evaluate the satisfaction of urban buildings. This not only provides citizens with a new platform for expression but also allows for graffiti evaluation. This app not only solves the constraints in reality, but also allows people to participate more freely and directly in urban construction, making the city more democratic and inclusive, and allowing the city to better reflect the real voices and opinions of citizens.

BACKGROUND Urban managers and urban users have diﬀerent starting points for graﬀiti. But they both want to obtain a city which could meets their personal needs. So how to balance these two groups ?

City Manager

City User

Create a better urban environment

Express self-attitude

I understand the importance of art in our lives, but graffiti is not the best way to express it. Not only does it ruin the aesthetics of our neighborhoods, but it also increases the cost of cleaning and restoration, which ultimately affects the environment we all share.

I like to express my views or attitudes towards a trending topic through graffiti. Walking on the street, I feel happy when I see a beautiful piece of graffiti. I think graffiti can change my perception of the place

The Result of What Perception Can Graﬀiti Provide? Provide Physiological Needs

Provide Safty Needs

Provide Social Needs

The Result of What Perception Can Graﬀiti Provide?

Provide Esteemv Needs

Provide Self-actualization Needs

Provide Physiological Needs

Provide Safty Needs

Provide Social Needs

Provide Esteemv Needs

Provide Self-actualization Needs

100%

V IV

75%

III

50%

A place providing esteem needs

Anti-authoritarianism Anti-discrimination

Perception Providing Physiological Needs

A place providing self-actualization needs

Art & Culture

Perception Providing Safty Needs

Community Unity

Environment

Perception Providing Social Needs

Hunger

Poverty

Perception Providing Esteem Needs

# 1091

War

Street Life

Perception Providing Self-actualization Needs

Graﬀiti

Graﬀiti Graﬀiti

# 1091

Violence

# 1083

# 1082

# 1081

# 1073

# 1072

# 1071

# 1064

# 1063

# 1062

# 1061

# 1052

# 1051

# 1044

# 1043

# 1042

# 1041

# 1035

# 1034

# 1033

# 1032

# 1031

# 1027

# 1026

# 1025

# 1024

# 1023

# 1022

# 1021

# 1014

# 1013

# 1012

# 1011

# 1004

# 1003

# 1002

Water Point

University

Vegetable Garden

Townhall

Supermarket

Restaurant

Residential

Rescue Station

Research Institute

Prison

Power Supply Station

Park

A place providing safty A place providing social needs needs

Police Oﬀice

Oﬀice

Nursing Home

Library

Kindergarten

Gym

Hosipital

Gas Station

Game Hall

Fire Station

Factory

Exhibition

Courthouse

Concert hall

Cafe

Clinic

Arts Centre

Bus Station

Amusement Park

A place providing physiological needs

# 1001

25%

Graﬀiti Graﬀiti Graffiti

RESEARCH | METHODOLOGY Detection

TAG TALK APPLICATION DESIGN

Building data scraping and visualization

Open Street Map

Urban

Detection Training Model:YOLO V4

Dividing&Scraping GSV Photos

Detection Result

S*S grid on input

Sustenance, Transportation, Healthcare, Facilities, amenity=marketplace, building=hospital, building=toilets, Emergency

Safty Needs

Public Service, Accomodation, building=fire_station, amenity=refugee_site, building=government

Social Needs

building=civic, building=public, Sports, Leisure, Shop, Entertainment, art&Culture

Esteem Needs

Education, amenity=childcare, building=college, building=kindergarten, building=museum, building=school, building=university, Tourism

Self-actualization Needs

amenity=arts_centre, amenity=exhibition_centre, amenity=research_institute, Office, building=office

Understanding the city from the perspective

Bounding boxes +confidence

Physiological Needs

Final detections

The YOLO V4 algorithm is utilized to predict the bounding box and The number of graffiti in each zone was detected seperately, with a total number of 1,852. category probabilities of graffiti in street scenes by using a neural network.

The perception of needs provided by urban

The perception of needs expressed by

mismatch

Citizen Participation

Building data scraping

Designers and managers can better design and manage cities by understanding how citizens perceive them through TagTalk.

Citizens can upload their own graﬀiti creations on TagTalk to express their views and attitudes towards the city or society.

from shapely.geometry.polygon import Polygon polygon = wkt.loads('POLYGON ((-74.013649 40.744001, -73.9712804706 40.7264951221, -73.9770995953 40.7103875342, -73.9976840418 40.7083287743, -74.0130558404 40.699562449, -74.0198142252 40.7058254511, -74.013649 40.744001))') G = ox.graph_from_polygon(polygon, network_type='walk')

Graffiti Dataset&Labeling We believe that these 11 graffiti themes express the different levels of needs in the graffiti artists' hearts, so we have classified them into the five levels of Maslow's hierarchy of needs. Additionally, because it is difficult to identify the meaning of some Tag graffiti, we have categorized them as 'meaningless'.

Raw Data

Citizen

Data Feedback

Research site scope in Lower Manhattan

Classification

Classification Training Model:ResNet-50

Designer + Manager

Python (Google Colab) Class probability map

Scraping 12 districts in the lower Manhattan with Google Street View API.

Building POI

Predicting Classification

provide needs

design and manage

Building provision needs classification

TagTalk An AR platform for citizen participation in graﬀiti creation

Amenity

Create a TagTalk Account

Confusion Matrix

300 × 300px

Community Data conv1

Interactive Experience

7×7，64，stride 2

ResNet-50 Model

Feature Extraction

3×3 max pool，stride 2

1×1，64 3×3，64

1×1，128 3×3，128

1×1，256 3×3，256

1×1，512 3×3，512

1×1，256

1×1，512

1×1，2048

conv2

conv3

conv4

conv5

Building POI & Amenity

Comments

Graﬀiti Creation

Augmented Reality

Users rate the community based on their feelings and like other users’ comments.

Users can express self-attitude towards the community through graﬀiti

Through AR, users can visually experience graﬀiti in the city

buildings_inside_area = ox.geometries_from_polygon(polygon, tags={"amenity":["amenity":[ "courthouse","fire_station","police","ranger_station","post_office","townhall","prison","refugee_ site"],"building":["apartments","barracks","bungalow","cabin","detached","dormitory","house"," houseboat","residential","semidetached_house","static_caravan","stilt_house","terrace","tree_ house","ufire_station","static_caravan","stilt_house","terrace","tree_house","government"]}) buildings_inside_area.to_csv('buildings.csv')

Average pool

Fc, 1000

Battery Battery Park CityPark City

Classification Result Meaningless

755

Physiological Needs

132

Safty Needs

180

Social Needs

446

Esteem Needs

198

Self-actualization Needs

133

ArcGIS

RESEARCH | ANALYSIS BY DISTRICTS RESEARCH | ANALYSIS BY DISTRICTS

Output Model

Needsspace:185 provide space:185 Needs provide

The larger the value of demand five, it indicates that people need more space that can provide demand five.

Two Bridges Two Bridges

Graﬀiti:1 Graﬀiti:1

Needsspace:266 provide space:266 Needs provide

needs provides space I Physiological II SafetyIIINeeds III SocialIVNeeds IV EsteemV Needs V Self-Actualization Needs Urban needsUrban provides space I Physiological Needs II Needs Safety Needs Social Needs Esteem Needs Self-Actualization Needs needs perception I Physiological II SafetyIIINeeds III SocialIVNeeds IV EsteemV Needs V Self-Actualization Needs Meaningless Graﬀiti needsGraﬀiti perception I Physiological Needs II Needs Safety Needs Social Needs Esteem Needs Self-Actualization Needs Meaningless

Tribica Data classification based Needs on districts provide space:557

Graﬀiti:59Graﬀiti:59

Designer + Manager

Tribica

SOHO SOHO

Graﬀiti:155 Graﬀiti:155

Needs provide space:557

Needsspace:726 provide space:726 Needs provide

Graﬀiti:228 Graﬀiti:228

Designers increase the corresponding space in the community based on the data from graﬀiti.

Building Map + Graffiti Map

V IV III II I

V IV III II I 300

250

V IV III II I

V IV III II I 300 150 250 100 200 200

150 50

100 0

50 50

0 100

50 150

100 250 150 300 200 200

250

300

250

12 districts in Lower Manhattan

300 150 250 100 200 200

150 50

100 0

50 50

0 100

50 150

100 250 150 300 200 200

250

300

Greenwich District

V IV III II I

V IV III II I 300

250

300 150 250 100 200 200

150 50

100 0

50 50

0 100

50 150

100 250 150 300 200 200

250

300

A Better Urban Space

V IV III II I

V IV III II I 300

250

300 150 250 100 200 200

150 50

100 0

50 50

0 100

50 150

100 250 150 300 200 200

250

300

RESEARCH | GRAFFITI CLASSIFICATION RESUILT Poverty

Hunger

Streetlife

War

Environment

Safty Needs

Physiological Needs