===== Destressing Images Design Process ===== By [[yiler-huang| Yiler Huang]] ==== Proposal and Moodboard ==== === Empathize === In the society nowadays, people are stressed. After interviewing people, it is reasonable to believe that some of the stress of people come from public places. This is because some public places are crowded, noisy, ugly, and sometimes a little bit scary. Some people also don't like advertisements and TVs in public spaces, because the content might be annoying. Therefore, the goal is to create de-stressing images, so we could help people to destress. In order to do that, some researches and considerations are required. === Define === We could find out that people are stressed from some researches done by other people through surveys. After that, we could put them on the screens in CIT, the screens in our classroom, or upload them on YouTube as videos. From our research, we could see that there are some factors that are more relaxing than other factors in an image. The images might be more relaxing if they have blue in the color, nature, fractal shapes, or playful or humorous shape. Some people don't like the content on the screens in public areas, like news, stock market, or annoying ads. Therefore it would be a big help if we could solve the problem by putting the de-stressing images onto the screens. === Ideate === For making the images, I think we can recreate real pictures (for example: recreating the image of a beach in computer graphics) in computer graphics in SVG.js. After drawing them in SVG.js, we could add some factors like blue, fractals, nature, or rounded shapes into the design. The images will also be interactive, which interacts with microphone, mouse moves, and real life circuit devices. Let's say if there is a wavy effect on the image. When the user moves the mouse around, the wave gets bigger or smaller depends where the mouse is. The wave will also get bigger if the surrounding is loud. For the circuit part, we could connect a button to the computer to toggle different kind of effects. Like wavy, rotate, pixelate etc.The tools we will be using are Hydra, SVG.js, Websocket, and Arduino IDE. I will use SVG.js to make computer graphic image of nature (like trees, ocean, woods etc.), and use Hydra to let user interact with the image and add effect that will respond to mouse position and sound. I will also use Websocket and Arduino IDE to connect the button to the computer, so people can change different kind of effects by pressing the button. When mouse hovers on the images, the strength of the effects will change slightly. If the volume of the surrounding sound is loud, the strength of the effect will also change. Some of them interact with lower pitch, and some of them interact with higher pitch. This is because I think it would be interesting if this image could also interact with musics. The color of the effect will change with the color in the environment. === A simple example === When the cursor moves left on the images, the strength of the effect gets slightly stronger. When the environment is loud, the strength of the effect gets stronger. (The actual images won't be this crazy, this is just a simple example) === Requirement === Make images that could be displayed on screens and interactive. === Goal === - Make people de-stressed. - Interactive. - Could be shown in different public places. === Description === The images we make have to be de-stressing, and help people who are stressed. The images will be shown on screens in different public areas, involving the elderly home we visited and maybe CIT. The images will respond to mouse moves, button press, and sound volume of surrounding. The mouse move and volume will change the strength of the effect, and the button is used to switch between different effects. === Dependencies === - SVG.js (Main images) - Hydra (Effects and interaction) - Websocket (Sending data from Arduino to Hydra) - Arduino IDE (Connect circuits with computers) === Mood board === {{:yiler-destressing-mood-board.png?1980|}} ==== Sketches ==== {{:yiler-destressing-sketch-1.png?590|}}{{:yiler-destressing-sketch-2.png?590|}}{{:yiler-destressing-sketch-3.png?590|}} === Advantages and Disadvantages === **Advantages** - 1 and 2 look like ocean and beach - They all have soft edged, and playful shapes - They all include blueish colors - Natural colors **Disadvantages** - They all don't include fractals (sort of, maybe the spiral rotation in the middle counts(?)) - The code doesn't detect changes in SVG.js and put the new things in the canvas **Others** - They are abstract, this might affect how relaxing it is from different audiences' point of view **Problems** - Images don't include fractals - Hydra doesn't read the new SVG element added === Solution === Try to make the code detect if the SVG elements are changed === Steps === Define the original SVG element as an object -> detect if it is changed in every certain amount of time -> update the canvas if it is changed ==== First feedbacks ==== - The shapes in the second sketch are too dense, and the black part is not so relaxing - This one should be fixed first, because all three people have this kind of feeling. - The soft, liquid shapes look relaxing - Two people have this kind of feeling, it might be important if we want to make people relaxed - The color scheme for sketch 3 is dazzling, the pink is abrupt - This one is important, because I forgot that red-related color might not be that relaxing - The color scheme for sketch 1 is relaxing - Only one person has this kind of feeling, but this could still be important *The order represent the importance, the smaller the number the more important it is === Next direction === - less black spot - less dense - keep the shapes and lines soft - avoid using the color scheme of sketch 3 - use the color scheme of sketch1 *The order represent the importance, the smaller the number the more important it is === conclusion === People think the color scheme and effects of sketch 1 are relaxing, sketch 1 would be the best direction to go with so far. ==== First Prototypes ==== === 1 === This one is the improved version based on the sketch, I made it less dense and more wavy based on the feedbacks. {{:yiler-dstressing-prototype-1.png?800|}} === 2 === When making this one, I was messing around with different effects because I ran out of ideas. I found out that it is relaxing to see shapes popping out and fade away, I also tried to make it not so dense. {{:yiler-dstressing-prototype-2.png?800|}} === 3 === I tried to add some green in this one, and I found out that it is fun to look at the shape changing in the middle. I made it wavy and not so dense based on the feedbacks. {{:yiler-dstressing-prototype-3.png?800|}} === Summary === For all three prototypes, I tried to avoid including black spots in the picture, too dense, and made them slow and wavy. I also tried some different colors that I felt relaxed while looking at. I tried to keep the lines soft and I used more color of my sketch 1. ==== Second Feedbacks ==== === Yuna === - Color scheme of the first one looks cool, and the water texture looks cool - Keep the texture, color, and circle for the first one - Background of the third one is too dark - The circle of the third one causes dizzy === Steve === - Water-like hydra animation is cool - Watery animation and color are good - Add some interactions and change the animations might make it more relaxing === Zoey === - Color palette is good - First one is relaxing because it looks soft and wavy - The green in the third one looks dirty - It is better to add some darker color in the second one ==== Second Prototypes ==== === 1 === I added some interactions with circuits. The modulate effects gets stronger gradually as the pressure sensor is pressed harder. {{:yiler-destressing-prototype-2-1.png?800|}} {{:yiler-destressing-prototype-2-2.png?800|}} {{:yiler-destressing-prototype-2-3.png?800|}} === 2 === This one also works with the pressure sensor. The effect gets stronger when it is pressed. The third picture is cool because it looks sort of like a art of Van Gogh. {{:yiler-destressing-prototype-2-2-1.png?800|}} {{:yiler-destressing-prototype-2-2-2.png?800|}} {{:yiler-destressing-prototype-2-2-3.png?800|}} ==== Final Version 1 ==== ==== Finished Version ==== ==== Image References For the Moodboard ==== https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.belizeadventure.ca%2Fgreat-blue-hole%2F&psig=AOvVaw3ftHdVGAK9vVdMecGfBVAT&ust=1669079881730000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCKCt1Z2NvvsCFQAAAAAdAAAAABAJ https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.wallpaperbetter.com%2Fes%2Fsearch%3Fq%3Dclaro%2Bcuerpo%2Bde%2Bagua&psig=AOvVaw2eHykxMG2mP3RZK1Ya4buP&ust=1669079944189000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCKj8wbuNvvsCFQAAAAAdAAAAABAN https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.istockphoto.com%2Fphotos%2Fpond-aerial-view&psig=AOvVaw3vCFthtu4I-t9_7rasfSQA&ust=1669080154448000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCPDRgt2OvvsCFQAAAAAdAAAAABAD https://artfulmath.com/fractal-patterns-in-nature/ https://www.istockphoto.com/photo/conch-close-up-gm833762780-135591579