By Yiler Huang

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.

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.

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.

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)

Make images that could be displayed on screens and interactive.

1. Make people de-stressed.
2. Interactive.
3. Could be shown in different public places.

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.

1. SVG.js (Main images)
2. Hydra (Effects and interaction)
3. Websocket (Sending data from Arduino to Hydra)
4. Arduino IDE (Connect circuits with computers)

1. 1 and 2 look like ocean and beach
2. They all have soft edged, and playful shapes
3. They all include blueish colors
4. Natural colors

1. They all don't include fractals (sort of, maybe the spiral rotation in the middle counts(?))
2. The code doesn't detect changes in SVG.js and put the new things in the canvas

1. They are abstract, this might affect how relaxing it is from different audiences' point of view

1. Images don't include fractals
2. Hydra doesn't read the new SVG element added

Try to make the code detect if the SVG elements are changed

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

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