I WANT TO MIX MUSIC WITH INTERACTION DESIGN AND HEAL PEOPLE!!!
MAY YOU SUCEED !!!
I WANT TO MIX MUSIC WITH INTERACTION DESIGN AND HEAL PEOPLE!!!
MAY YOU SUCEED !!!
Bachelor
Hunan university(HNU) 湖南大学
Industrial design
GPA 3.48/4.0
My school works on pinwall of HNU https://pinwall.cn/users/6665
Graphic Design Intern -- Shanghai , China
Unilever 联合利华上海分公司
New media artist -- Shanghai , China
Fn media Lab 上海器场文化分公司
Researcher for OPPO Gesture Interaction Project
-- Changsha, China
Hunan University & OPPO
Adobe Illustrator | Photoshop | Figma
USER INTERFACE
VSCODE | HTML + CSS
3D MODELLING
Rhinoceros | Keyshot | Blender
CODING
Python | Java
Touchdesigner | Kinect | p5js | Arduino
Calligraphy
Human-computer Interaction
Digital Ar
School-enterprise cooperation projects with Desay SV
Through music interaction and gamification, young people can be moved by audio-visual experience during the journey.
School-enterprise cooperation projects with Honor Of Kings
Combined with the "Meet Hu Xuan" theme skin of Honor Of Kings ’s character Diao Chan(貂蝉)to revive traditional culture.
NUS-HCI Summer Bootcamp of Future Interaction for HUAWEI Smart Glasses < EASY-X >
A multimodal approach for video progress control based on HUAWEI GlASS to make online exercising easier.
System oriented Design theme of SDG
The art healing site in campus soothes the patients' mental healtn.
OTHER WORKS
Web Game
Vapour Mayfly p5js
Pixel web game based on yellow color recognition
New media art
Metaverse DJ Music Scene
Interactive Device
Chinese music scene based on Song Ci 《苏幕遮》
Photo Device for Hermes partyshow in 前滩Tai Koo Li
Internship projects in Fn media lab
Interactive fiction Game
Your Different Journey twine
School-enterprise cooperation projects with Desay SV
In this project , I want to create a healing space, which in a sense amplifies the beauty of life . I also consider about the emotionalisation of music to evoke people’s memory and thus enhancing their identity.Because music can also create memories, shape people's personalities and underlying values. In other words, I do this design for myself and some other young people .I love music and want to do something really chill.I think a youthful cabin design should be chill, fancy, dreamy and romantic. Besides,I ‘d like to establish connection between human to heal each other . Some of the creative thinking about the Audio-visual interaction design is borrowed from some famed games such as < Flowers>,<The Legend of Zelda> and some APPs such as NetEase Cloud Music . I know there is still a lot to be improved .I hope you will enjoy it.
Young people need to seek a sense of identity, freedom, a personal space that allows inner peace and inner core stability especially in a world that is impacted by various values, in the face of questioning from elders and peers.
A self-drive trip is an escape from the usual tired life, but also a dream for the workers in the cubicle . for the faraway places outside the current life , is the breath, is the window, is the dream. Maybe at this time you just need to find the pure land and paradise in the car, self-driving emotional interactive design will accompany your journey, so you can enjoy the music and natural scenery. Let the emotional design car system and music soothe your life.
Brainstorm for ideas in early stage
Even "Full
requires human oversight.
Differentiation and focus on the music
AUDIO VISUAL Visual elements inspired by the projection of the car show
There’s way more freedom than other full autonomous solutions.....
According to Wagener, "Modern affluence in automotives means a car that's super clean in design, super techy with its features, and super integrated with its applications."
——Mercedes-Benz’s Chief Design Officer
Field Survey & Interviews and read blogs online
How can music/nature sounds be used to enhance driving safety and a great travel experience?
What are the pain points in the self-drive scenario?
Self-drive scenario : Road Trip
Problem Findings & possible solution
Emotional design e.g. to kill the boredom during the trip, to provide a more refreshing user experience for different people (couples/families/ friends) in different user scenarios.
Improve user attention / free up a lot of user attention through the voice interaction system.
Pay attention to the information load and the safety of driving,because the HMI interface affects the driver's attention.
Ease the fatigue of young people on self-driving trips through music and gamification techniques.
Allow users to be more autonomous when being emotionally monitored, etc. The future of self-driving cars means that drivers can choose whether to drive conventionally or automatically.
Han Ziying, a senior student
Music preference?
KEY WORDS California ; hiphop ; jazzy beats ; electronic ; chill
Really like the album! Sometimes album covers just touch me as much as the music!!!
How music is a part of your life?
Music is more like a spiritual home for me. Riding or driving without a song on is like a life without fun. It's more of a reflection of my dream or vision about my life . Maybe it's the chill melodies that make me happy, but it's more of an escape from my current life and the desire for the life I want for the future.
What kind of (music) game scenes or ambience do you prefer?
Immersive ....with some chill pop or songs like < Hotel California>.
Conclusion
What’s your ideal car and the function that you expect?
Entertainment Attributes ; Giant screen cinema ; In-car switch online ;
Meta-universe virtual consumer experience
Just like your home on the journet ;
Designing different MODEs ;
Digital ambient lighting ;
Full sensory immersion experience .
Conclusion Emotional
Learn Emotional design from Music products
-20~35
-The younger group, Younger working people, school goers.
“If everything that happens in people's minds could be expressed in words, there would be no music in the world.”
-Family trips (parents and children), young couples, groups of close friends travelling, or solo road trips.
-Who are looking for freedom, are more likely to travel home and abroad.love road trips.
-Don't want to be trapped in a grid of day to day life. Love nature, freedom of time and place on self-drive trips. Don't want to follow a guide either.
Desired needs
Energetic love of exploring the world. Seeking a sense of identity. Convenient and freedom.
In the face of the epidemic, NetEase Cloud App launched 'Operation Light Aid' to deliver the healing power of music to users through the 'Light The Light' song 'LTL' function.
To combine the hardware ecology and enhance the multiple combinations of flash and music play, using music and light to convey hope to users.
The perfect music for your journey, adapting to your surroundings in real-time.
Using only GPS location then receive anonymous information on users s location, time of day, surrounding scenery and even the weather! Then feed all of these data points into SoundTracks app. Based on your personal parameters we generate a completely unique track to listen to while you sit back and enjoy the views.
“Desire for freed
m, warmth, comfort,
fety, cool, individuality.
You are the couple travelling on Wedding Anniversary, planning to make your own memories together in BYRON BAY, a town famous in the world for its waterfront, lighthouses and sunrises.
Find the first star
The wedding...
Music helps us memorize something.
Record and upload our memory.
The vehicle displays a number of nearby flashpoint memories based on your geographical location - starlights or historical information about the surrounding area. When the user arrives at a location, a message pops up showing some of the "starlights" in the user's vicinity, memories left by other users, which the user can choose to enjoy as they approach.
The "Starlight" is a collection of images, music and the ambience of the car from other users who have been there before.
Users can leave their own 'Starlight' memories on the journey, which can be viewed later and shared with subsequent travellers.
"Starlight" contains images, music and the atmosphere of the car, and is a great way to refresh your memory when you experience it again.
Music reflects the change of events, music shapes the experience and the sense of atmosphere.
Different stages of combat / touching different npc's different musical interaction mechanics.This music is only played when the last piece of evidence is found or the last puzzle is solved during the investigation and ends with a short closing phrase (stinger).
If you are chasing starlight, the window HUD can also make this scene of particles/stars floating forward, mapped onto the map in starlight.
And each starlight collected can follow itself as it floats and wanders.
Each untouched starlight is shrouded in a halo that triggers a different pitch (wind chime sound) each time it is touched, and the halo disappears when touched.
When all the starlights are gathered, the Constellation will light up and a victory gong (a complete song).
Gamification map: touching different starlights / what appears when you collect starlights... Also the music will be different.
Audiovisual guidance, such as the yellow grass in Flower's initial level that is different from the rest of the world.When the player manipulates the wind to bond with a Pod, the Pod will expand to form a flower, and when a certain number of flowers are accumulated, the player can pass the level.
Constellation × Electronic Music
Aries - chill trap Winning and independent, unafraid of power, optimistic and aggressive with confidence. Determined to be melodious and free.
Shooter - Future House Passionate, honest, straightforward, loves a challenge, the adventurer of the zodiac and optimistic.
Capricorn - Glitch Rational and calm. Not easy for others to see what kind of person they are. Calm as a god.
Players can choose to experience a range of starlight (the experience of others) ....
Interaction stage
Sound effects/ music interaction
When first discovering starlight
A "swoosh" beeped to indicate the discovery of a star.
The user first selects the constellation they want to follow and the system then generates a random series of stars for the user to follow.
The cue will be a pleasant, light piano. When approaching the destination, the music is accelerated.
When deviating The melody is interspersed with a drum beat
Interface interaction
A "swoosh" beeped to indicate the discovery of a star.
While driving...
Collect starlight to unlock patterns according to the Aries star path . And view the memories of others.
Touching the stars and moving on
Reaching the task: when users follow the prompts to collect all the nearby stars. and share it on social media.
The starlight is randomly given a string of special tracks (tracks) Each time there will be one more beat, usually with an exclusive melody based on the starlight's characteristic label (created by the person who created it), such as sad/pleasant/emotional. (5 or 6 starlights to a unit)
The light effect of the starlight emits a sound effect the moment it disappears. The light effect of walking in the darkness of the night and the humming of the hymn when it collides. (ah~ah~)/The sound of wind chimes.
It will unlock the constellation t in the interface, and a victory song, a harmonious symphony that melds all the tracks of starlight.
Emotional voice assistant interaction /Gesture Touch
Interaction
"Choose the constellation you want to follow"
"Is it time to follow the starlight? Finding the memories of others? "
Navigation guidance
The starlight disappears and becomes part of the hud floating in the car window.
When you deviate from the navigation, the message "You have deviated from the starlight" will be displayed
"You have collected a starlight. Follow the starlight to collect the exclusive map of the constellations~"The navigation will mention the right way to go next in the dialogue sequence, such as "turn left at the next junction" and "keep going".
Emotional Curve
Curious about the function
I'm so happy to have chosen my favourite sign
Weeping and crying over someone else's divine love/friendship Interesting eh
unlock the constellation
"Congratulations, this Quest for the Star Map is over! Do you wish to exit the Arigatou Star Map! "
Prototype Video link :https://www.youtube.com/watch?v=21HmILBczYQ
Navigate to the next star
Prototype Video link :https://www.youtube.com/watch?v=21HmILBczYQ
Incorporates music visualisation zones Emotional voice interaction guide and the feeling of a musical interactive chill (see video)
Audio Visual Area Dynamic effects with everchanging tracks
Emotional voice interaction guide
Modify visual elements that conform to AR-HUD specifications;
Tests for Real vehicles ;
Add Multi-screen and hardware interaction .....etc
The Dunhuang murals have been peeling away over time, eventually turning into a cascade of yellow sand. But the legends of Dunhuang are still waiting to be told. The 'Flying apsaras in Dunhuang' interactive installation is combined with the 'Meet Hu Xuan' themed skin of the Honor Of Kings character, ”貂蝉, ”so that audiences can learn about Dunhuang, walk into the golden sands and feel the resonance and evoke the sand to dance with Hu Xuan.
The only way to bring traditional culture to life is to give it a new lease of life in the present.
Audio-visual interaction (touchdesigner/ unity) Human interaction (kinect gesture change/particle system)
Audio input controls the image of the large screen reality on stage
Screen or projection to create an immersive space
敦煌/王者荣耀elemental background (possibly video), the overlaid with dynamic and interactable particles. Colour fluid flow effects. Tracking the body as it move
Visitor movement triggers changing on screen
The Dunhuang frescoes are fading all the time due to the passage of time, visualising this lamentable scene with a particle flaking effect and adding what our conservation and renewal can do.
Fluid randomly/Flow effect. particle saround the edges falling like quicksand
The particles with pace to the MUSIC.
剪影的飘带
Quicksand-like particles converge and drift towards the silhouette in a collision and become a ribbon around it.
Ribbons flutter
without human
approach the device
Background video: Dunhuang fresco, random fluid effect with particles falling like quicksand around the edges
wave your hands
Background video: Particles converge to <meet huxuan>
Screen interaction: particles in the figure gathered into streamers
Background video: Particles converge to <meet huxuan>
Screen interaction: streamers follow silhouettes and move
Sound interaction: music adjusts pitch and tempo with human gestures or pass by / triggers the 4 tracks of Dunhuang(敦煌)
leave device
Background video: when a person walks away from the device, the particles reunite to form Honor Of Kings (王者荣耀) logo or lines.
The mural gradually flakes off, and Hu Xuan's memory is dissipated like yellow sand (diffusion effect of dynamic Hu dance mural)
Part2
Traveling through the sands of history, your silhouette evokes the resonance of the past and the present (Kinect silhouette interacting with the grains of sand)
Part3
Renewing Dunhuang memories with technology (under the watchful eye of Hu Xuan's dance; interacting with sand particles and dancing with Hu Xuan's floating sleeves)
IOS APP & Smart Glasses
NUS-HCI Summer Bootcamp of Future Interaction for HUAWEI Smart Glasses < EASY-X > Animation Link:https://youtu.be/fAsCziJixjo
A multimodal approach for video progress control based on HUAWEI GlASS to make online exercising easier.
What is the context and the problem we want to solve?
It is inconvenient to control video progress by touching the screen of phone (swiping the screen) while people are doing exercise, since the users’ hands are probably occupied. We want to provide a multimodal approach based on Huawei eyewear glasses to control video progress,where users don’t have to stop moving their bodies temporarily. Users have to stop exercising to control the video which is inconvenient and time-comsuming.
What are the existing solutions and why they are not enough?
What is our proposed solution?
We propose a multimodal approach for video progress control, that creates a comfortable viewing experience with effortless progress control through voice, touch and head motion.
What is the benefit of the proposed solution?
We can conveniently and remotely control our media (the clips) based on movement or simple verbal commands, (allowing the users to simultaneously control the video progress while keeping their hands busy) which guarantee no need to stop the activity we are current doing. Moreover, we can mark and jump to specific part of action (the clip) we are interested in swiftly, (so that when we wish to backtrack,we can easily do so through the mark) so that when we have trouble following the media, we can easily repeat and follow.
Circumstance: Doing yoga, dancing, working out
Pain Points:
Targeted at younger age groups. due to the epidemic
Most of them don't have time to enroll in classes for exercise, follow videos in the office or at home to move their shoulders and necks . It is also useful for people working at home remotely
26 Female who loves exercising very much follow the guidance from the video
Inability to control the progress of the video (rewind, fast forward, clip skip) when dancing or working out with the video
NUS-HCI——Easy X: A multimodal approach for video progress control
Control the video by Voice Interaction
NUS-HCI——Easy X: A multimodal approach for video progress control
Voice Interactive Commands For Glasses stop continue jump resume mark:record base arrive:to record base
Last:Previous move Next: Next action again: repeat the current action over: end (skip to the end) forward: fast forward (10s) back: back fast (10s) work with students of cs major in Zhejiang University
NUS-HCI——Easy X: A multimodal approach for video progress control
Video to express idea and Usertest
https://youtu.be/fAsCziJixjo
APP developed by students of cs major in Zhejiang University
The subsequent stressful reactions caused by the epidemic have made the need for psychological construction among university students more common and more urgent. The site is divided into a new media module for emotional catharsis and a bracelet connected to an app that collects heart rate data to record individual emotional changes. The patterns generated by the data collected from the user are a good reference for the healer. The new media interaction helps patients to improve their depression by cathartically expressing their emotions.
The art healing site in campus soothes the patients' mental health.
When we are caught in an unspeakable emotional dilemma, it becomes a very warm thing to talk to ourselves through artistic creation. The subsequent stressful reactions caused by the epidemic have made the need for psychological construction among university students more common and more urgent. Against this backdrop, art therapy, with its unique and significant advantages in dealing with emotional distress, soothing traumatic experiences and psychological recovery, has once again entered the public eye.
DALY rates for anxiety disorders by age in China, 1990 to 2019
Deaths by suicide in China, by age, 1990 to 2019
Suicide mortality in China has shown a significant decrease between 1990 and 2019, particularly in the 15-49 age group, while there is no significant difference for those aged 50 and above, which can be speculated to be a benign trend due to the intervention of psychotherapy
Field trips
Using Computer Games to Support Mental Health Interventions.
The use of drawing in group counselling can increase self-acceptance, selfsatisfaction and self-esteem and confidence levels.
In-depth knowledge of the school counselling process and the extent of healing.
Junior, Mechanical, Male
Always anxious and insomniac, even after running 10 laps in the playground. Anxious about studies, fear of failing in the examinations, peer pressure.
Thoughts after counselling:
Appointments are very immediate, many students need counselling, but as soon as there is a vacancy, they are informed immediately.
The counsellor was very professional and helped me plan my career, which was very effective.
Junior, Design, Female
Initial psychological consultation: Thoughts after counselling:
Anxiety and insomnia, traumatic family environment, academic stress, habitual self-denial.
The volunteer was very patient and gentle from the phone appointment to the online consultation, taking good care of the visitor's emotions and giving the patient a sense of security. The counselling teacher provided suicide prevention services and patiently analysed the problems.
Senior, Finance, Male
Initial
Transgender, gender identity anxiety. Family, academic, and social stress.
Didn't feel very well identified. Because the counsellor did not feel that I‘m very ill. But in fact there has been an excess of behaviour.
I plan to go back to hospital for further treatment.
Conclusion
Patients want school counselling to be scientific, warm, humanistic and student-oriented, while trying not to add to the burden of teachers and jeopardise their personal lives.
Problem Findings & possible solution
Emotions can be recorded (uploaded to the platform through simple drawing/writing)
Online mental mini-games for easy self-examination (get rid of traditional scales)
How existing counsellors be matched well : students make a request, e.g. gender, or specify a particular counsellor .
Collaborative communication between colleges and universities
Privacy protection involved .
Artistic healing for typical emotional prevention, mostly offline activities
Take advantage of fragmentation time & Reduce the burden on consultants and patients Colour
Pour down effect Paint Daubs
Size
Different colors and patterns represent different moods and are combined into a picture.
Whenever you feel that your emotions can be recorded, choose colours and patterns, add a stroke and collect heart rate based on the Wristband accompanied by a paint movement effect , or you can choose a certain tone or melody.
At the end of the day, there is the option to combine the pieces in a way similar to the ps layer type.
reason for counseling:
Post-counselling feelings:
Virtual media space & physical urban campus space
Immersion space use the impact of media technology, through the multidimensional visual design to convey to the public the joyful emotions, with multimodal visual expression to create visualization with emotional functions .
Device reference : Emotional geometry
Mood Log
heart rate
Wristband
change
Baseline (pleasure)happiness
Thewas used to monitor the patients' emotion, and the 24-hour heart rate information was collected. corresponds to , and rate of corresponds to . We also studied the corresponding to emotions to prepare for further
(intensity) Arousal color theory visualization
Based on color theory, and heart rate, we generate typical patterns.
Data from Wristband.
Ecg signals analyze heart rate changes caused by emotional changes, and then infer emotional changes from heart rate changes.
Based on the Lange model of emotional classification proposed by Russell (1980)
Emotional Catharsis, Communication and Expression
STEP 01 Data detection and collection
STEP 02 from physical data to emotions
STEP 03
Quantification and classification of emotions
Assisted fun painting based on collected data
APP emotion diary function (selfdiagnosis and treatment auxiliary information)
Public site co-creation
Non-patient paintings: yellow, orange light colours weak contrasts pink Patient paintings: red, black, blue (depressed) dark, strong contrast, cyan The middle colour purple is used for the steady state. The baseline pleasantness corresponds to the brightness, the rate of change (intensity) to the hue. The grayer the painting, the more uncertain the patient is represented. Normal baseline, low rate of change Means that the user is in a relaxed mood and that the pattern is rounded and harmonious.
Basic mood divisions: happy, satisfied, content, calm, relaxed, panicked, scared, angry, frustrated, sad, depressed, bored, tired.
Correspondence between pleasure and colour based on the association and interaction between colour and mood
Basic colour selection data
The colour system is based on the heart rate baseline output; the greater the mood swings the sharper the petals of the output flower. The number of petals of the corresponding flower will also increase.
Drawing elements from the heart rate graph, the greater the mood swings, the greater the arousal of the corresponding 2D model, i.e. the greater the rate of change of heart rate, the sharper the graph.
Specific emotions may be very complex, mixed with different emotions at the same time, so we decided to generate several typical graphics after investigation, so that doctors and psychological consultants can see the characteristics of the patient's graphics and the typical graphics for comparison. To judge the mood of the patient and the degree of depression.
User testing, medical experiments with counsellors, doctors, etc. are required
This proposal is only a hypothesis and a possibility We look forward to the future of medical co-creation and more accurate pattern.
The wristband captures a person's position for tactile drawing, which we use processing demo that allow for multiple modes (symmetrical drawing or random scribbling) and custom colours or random colours.
During the drawing process, a 2.5m (height 1.5-1.9,+ jump height 0.2-0.6) high station screen is used to draw, encouraging the user to control the position of the wristband by jumping high and running to draw large areas.
station quickly
Users receive a wristband at the station, which detects heart rate to perform art healing paintings, while a random painting of the day is displayed outside the station screen, so that passers-by will also be interested in the station and receive the wristband to detect emotions, thus achieving a preventive assessment of psychological problems.
After the site interaction, in order to enhance the publicity of the Art Healing site, an exhibition will be displayed on the screen outside the site or around the campus to promote the idea that depression is not an abnormal thing and that mental illness is not terrible, in the hope that this will bring the patient's journey to light in an artistic form and de-stigmatise mental illness.
Symmetrical compositions for painting healing Processing Demo Free Graffiti ZoneImport
We adopt gamification way you can draw your paintings to express your emotion thus feeding eggs and gain incentives. Also , the data can be synchronised with the counsellor to aid the effectiveness of counselling by capturing current emotions through both manual/scanning methods, generating an emotion log and using cognitive therapy to improve thinking misconceptions
In the doctor-patient healing space, the existing system of staff (counsellors, etc.) and equipment are combined in an app, with functions such as appointment booking, community support, assistance with science, online group support, etc.Includes mood albums, my mood timeline, drawing logs.
Healing space for doctors and patients
Pixel web game based on yellow color recognition made by p5js
Game mechanics
Frozen fruit, angel fruit, scoreboard. Use yellow item to control “mayfly”.
Project Link Code & Video:https://pinwall.cn/project/33899
Explore your digital life in the metaverse
Inspiration:
I really love play music such as fancy DJ or midi controll controller that you can mix tracks together to play some songs .So when the “Metarverse Age” comes, how can we play together ?I hope you love it ....
The human body controls the pitch of a track with the right hand and the pitch of a track with the left hand. The higher you lift it upwards, the higher the volume. The horizontal movement of the hands adjusts the tempo of the background track, soothing and slowing down when opening outwards and becoming urgent when leaning inwards. The waveform of the music scene can be made sharp or slow by the external sound values affecting the noise. The higher the external volume. the more rapid the waveform movement.
Project Link Code & Video:https://pinwall.cn/project/40977
https://pinwall.cn/project/30085
Poster
Exhibition live show
DEBUG
Internship
Implementation
Infringement warning for commercial projects
Photo Device for Hermes partyshow in 前滩Tai Koo Li projects in Fn media labhttps://xinyuanjin.itch.io/yourdifferentjourney