Differences

This shows you the differences between two versions of the page.

--- zoey-lin-destressing-design-process [2023/01/22 01:30] – zoey.lin
+++ zoey-lin-destressing-design-process [2023/01/30 21:26] (current) – zoey.lin
@@ Line 2: / Line 2: @@
 Made by: [[zoey-lin|Zoey]]
+**↓↓↓Table of contents↓↓↓**
+  - [[zoey-lin-destressing-design-process#design_proposal_for_your_destressing_image_project_and_mood_board|design proposal for your destressing image project and Mood Board]]
+  - [[zoey-lin-destressing-design-process#sketches_of_your_destressing_images|sketches of your destressing images]]
+  - [[zoey-lin-destressing-design-process#organize_feedback_from_classmates_on_destressing_images_decide_on_direction_for_prototype|organize feedback from classmates on destressing images, decide on direction for prototype]]
+  - [[zoey-lin-destressing-design-process#first_prototypes_of_destressing_image|first prototypes of destressing image]]
+  - [[zoey-lin-destressing-design-process#organize_feedback_from_classmates_on_second_prototypes_of_destressing_images|organize feedback from classmates on second prototypes of destressing images]]
+  - [[zoey-lin-destressing-design-process#second_prototypes_of_destressing_images|second prototypes of destressing images]]
+  - [[zoey-lin-destressing-design-process#organize_feedback_from_classmates_on_destressing_image_final_version_1|organize feedback from classmates on destressing image, final version 1]]
+  - [[zoey-lin-destressing-design-process#destressing_image_final_version_1|destressing image, final version 1]]
+  - [[zoey-lin-destressing-image|final Destressing Images 02]]
 =====design proposal for your destressing image project and Mood Board=====
 ====Empathize====
@@ Line 25: / Line 37: @@
   - Fenomena langka di tengah pemandangan Aurora Borealis yang spektakuler. (n.d.). BBC News Indonesia. Retrieved 24 November 2022, from https://www.bbc.com/indonesia/vert-tra-61936258
-=====Planning=====
+====Planning====
-====Define====
+===Define===
   - What is the exact problem? How clearly can we state the problem?
       - Every people in the world have a lot of pressure, pressure is also part of your life. Pressure is not bad; some pressure can improve people, but if people have too much pressure, it will affect people's psychology and physiology.
@@ Line 74: / Line 86: @@
           - The image must significantly react to the environment in at least one parameter that is obvious to a careful observer.
           - The image must be based on your own written research report, which includes at least five citations.
+=====sketches of your destressing images=====
+====Destressing images====
+{{:zoey-hydra-svg-1.png?400|}}
+{{:zoey-hydra-svg-2.png?400|}}
+{{:zoey-hydra-svg-3.png?400|}}
+====Svg.js image====
+===1. I put the tree, flower, and sunrise in the image and also I use natural colors like blue. Different kind of the blue===
+<HTML>
+<iframe width="100%" height="500" src="//jsfiddle.net/linzoey/safq672h/67/embedded/result,js,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+</HTML>
+===2. I make some fish inside the sea, I also use the natural color blue and the happy color yellow I try to make this image feel playful===
+<HTML>
+<iframe width="100%" height="500" src="//jsfiddle.net/linzoey/7sbqzge2/58/embedded/result,js,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+</HTML>
+===3. I make many flowers and I use colorful color to make it feel playful===
+<HTML>
+<iframe width="100%" height="500" src="//jsfiddle.net/linzoey/rL9uf8zt/29/embedded/result,js,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
+</HTML>
+====Hydra image====
+===1-2. I make it look like many stars and some meteor to let people make a wish===
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=c3BlZWQlMjAlM0QlMjAwLjUlMEF2b3Jvbm9pKDUwJTJDMC4zJTJDNSklMEElMjAlMjAubW9kdWxhdGVSb3RhdGUobm9pc2UoMSUyQzAuNSUyQzApLmthbGVpZCg1MCkuc2NhbGUoMC41KSUyQzElMkMwKSUwQSUyMCUyMC5tdWx0KG9zYyg1MCUyQy0wLjElMkMwKS5rYWxlaWQoOTApKSUwQSUyMCUyMC5yb3RhdGUoJTIwKCklMjAlM0QlM0UlMjB0aW1lJTI1MzYwJTIwKSUwQSUyMCUyMC5jb2xvcig5JTJDMTAlMkMzKSUwQSUyMCUyMC5vdXQobzAp" width = "100%" height = "500">
+</iframe>
+</HTML>
+===2-2. I make it look like the sun is shining on the sea and the sea is flowing===
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=c3BlZWQlMjAlM0QlMjAwLjMlMEFub2lzZSgpJTBBLmNvbG9yKDAlMkMzJTJDOCklMEEubW9kdWxhdGUobm9pc2UoKCklMjAlM0QlM0UlMjBhLmZmdCU1QjAlNUQqMTApKSUwQS5zY2FsZSgyKSUwQS5sYXllciglMEElMjAlMjBzcmMobzApJTBBJTIwJTIwLm1hc2sob3NjKDEwKS5tb2R1bGF0ZVJvdGF0ZShvc2MoKSUyQzkwJTJDMCkpJTBBJTIwJTIwLnNjYWxlKCgpJTIwJTNEJTNFJTIwMC4wOSoodGltZSUyNTMwKSUyQygpJTIwJTNEJTNFJTIwMC4wOSoodGltZSUyNTMwKSklMEElMjAlMjAubHVtYSgwLjAyJTJDMC4wMyklMEEpJTBBLmJsZW5kKG8wKSUwQS5vdXQobzApJTBBJTBBb3NjKCklMEEubW9kdWxhdGUobm9pc2UoNCUyQzAuMSkpJTBBLmNvbG9yKDElMkMwJTJDNSklMEEub3V0KG8xKSUwQSUwQXNyYyhvMCklMEEubW9kdWxhdGUobzEpJTBBLmxheWVyKCUwQSUyMCUyMHNyYyhvMSklMEElMjAlMjAubWFzayhvMSklMEElMjAlMjAuc2F0dXJhdGUoNyklMEEpJTBBLm1vZHVsYXRlUm90YXRlKG8xKSUwQS5vdXQobzIpJTBBJTBBcmVuZGVyKG8yKSUwQQ%3D%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+===3-2. I make it like the flower it is colorful and soft===
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=b3NjKDUlMkMwLjEpJTBBJTIwJTIwLm1vZHVsYXRlKG5vaXNlKCklMEElMjAlMjAubW9kdWxhdGUobm9pc2UoKS5zY3JvbGxZKDAuNSUyQzAuMSkpKSUwQSUyMCUyMC5ibGVuZChncmFkaWVudCgxKSklMEElMjAlMjAuY29sb3IoMC44MSUyQzAuMDElMkMwLjg1KSUwQSUyMCUyMC5vdXQoKQ%3D%3D" width = "100%" height = "500">
+</iframe>
+</HTML>
+===== organize feedback from classmates on destressing images, decide on direction for prototype =====
+__**Yuna's feedback**__
+I think Zoey should keep is the fish part, the hydra part was pretty good-looking with your fish. The good part of Zoey's sketches is she uses color really well. The flowers and fishes are pretty good, and look relaxed and playful. For letting people feel more relaxed, I think the part of the flowers with hydra looks a little bit heavy. If the background is too heavy, it can't let people feel relaxed. I think if Zoey can improve that part it will be better.
+**__Yiler's feedback__**
+I think this one is the most relaxing one among all three of the sketches. It's detailed but the main color is still outstanding.（hydra1）
+This one is not so relaxing compared to the other two, because it looks like there are some fast movements going on in this picture.（hydra2）
+I think it would be more relaxing if the pictures could have less or slower movement going on, like the first one and the second one of the Hydra sketches.
+__**Steve’s feedback**__
+For Zoey's sketches, I think the work she did in Hydra was really good. Her first Hydra sketch looked like putting a bunch of paint in a bowl and swirling it slightly but not mixing the colors. I also really liked the color combination. I feel like with animation it would be a lot more relaxing. However, I felt like her second Hydra sketch was not as destressing. I felt like there was too much detail and it was a little overwhelming.
+====Sketches 1 (fish)====
+  * <color #ed1c24>*Red word is mean the part I need to change</color>
+  * <color #7092be>*Blue word is mean the path that I can keep</color>
+**SVG**
+  - <color #7092be>The flowers and fishes are pretty good and look relaxed and playful (Yuna)</color>
+  - <color #ed1c24>All the color I use is cold color so I can put some warm color inside. (Lee)</color>
+  - <color #7092be>It looks playful. (Lee)</color>
+**Hydra**
+  - <color #7092be>The hydra part was pretty good-looking with your fishes (Yuna)</color>
+  - <color #7092be>I think this one is the most relaxing one among all three of the sketches (Yiler)</color>
+  - <color #ed1c24>it would be more relaxing if the pictures could have a less or slower movement going on (Yiler)</color>
+  - <color #7092be>The first Hydra sketch looked like putting a bunch of paint in a bowl and swirling it slightly but not mixing the colors, he also really liked the color combination (Steve)</color>
+  - <color #ed1c24>Feel like with animation it would be a lot more relaxing. (Steve)</color>
+====Sketches 2 (forest)====
+**SVG**
+  - <color #ed1c24>Make people feel cold and lonely (Lee)</color>
+  - <color #ed1c24>The color of the tree and the flower are good but not for destressing images. (Lee)</color>
+**Hydra**
+  - <color #ed1c24>it was not as destressing, there was too much detail and it was a little overwhelming (Steve)</color>
+  - <color #ed1c24>This one is not so relaxing compared to the other two, because it looks like there are some fast movements going on in this picture. (Yiler)</color>
+  - <color #ed1c24>it would be more relaxing if the pictures could have less or slower movement going on (Yiler)</color>
+  - <color #ed1c24>Feel like with animation it would be a lot more relaxing. (Steve)</color>
+====Sketches 3 (flower)====
+**SVG**
+  - <color #7092be>The flowers and fishes are pretty good and look relaxed and playful (Yuna)</color>
+  - <color #7092be>Flower one makes people calm and stop thinking (Lee)</color>
+**Hydra**
+  - <color #ed1c24>the flower part with the hydra looks a little bit heavy (Yuna)</color>
+  - <color #ed1c24>Feel like with animation it would be a lot more relaxing. (Steve)</color>
+====Next direction for the fish sketch:====
+  - Put some warm color inside
+  - Make the speed slower
+  - Add animation
+  - Give fish more space
+====Conclusion====
+Sketch 1 is the one that my classmate and I like the most, The color and the shape make people feel relaxed and playful. My next direction is to improve my Sketch 1.
+===== first prototypes of destressing image =====
+==== Image 01 ====
+**When people make loud voices the fish will move**
+{{:zoey-first_prototypes_1.png?600|}}
+<HTML>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/tQHsqIMNdDI?start=4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</HTML>
+===Code===
+<code>
+s0.initScreen()
+src(s0)
+.add(noise(),0.1)
+.modulate(noise(() => a.fft[0]*0.09))
+.scale(1.5)
+.out(o0)
+</code>
+==== Image 02 ====
+**Fish is moving with the wave**
+{{:zoey-first_prototypes_2.png?600|}}
+<HTML>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/JJe9l8D_FIE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</HTML>
+=== Code ===
+<code>
+s0.initScreen()
+src(s0)
+.add(osc(10),0.2)
+.add(noise(1000),0.3)
+.modulateScrollY(osc(20),0.1,0)
+.scrollX(0.5,0.1)
+.scrollY(0.5,0.1)
+.out(o0)
+</code>
+==== Image 03 ====
+**water waves with fish**
+{{:zoey-first_prototypes_3.png?600|}}
+<HTML>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/BlYdFz-wq3k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</HTML>
+===Code===
+<code>
+s0.initScreen()
+src(s0)
+.out(o0)
+speed = 0.3
+noise()
+.scale(2)
+.layer(
+  src(o0)
+  .mask(osc(10,0.1,3).modulateRotate(noise(),90,0))
+  .scale(() => 0.09*(time%30),() => 0.09*(time%30))
+  .luma(0.02,0.03)
+)
+.blend(o0)
+.modulateScrollY(osc(10),0.1,0)
+.out(o1)
+render(o1)
+</code>
+==== Svg.js image ====
+<HTML><iframe width="100%" height="500" src="//jsfiddle.net/linzoey/s9bk30fe/9/embedded/result,js,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></HTML>
+=====organize feedback from classmates on second prototypes of destressing images=====
+__**Yuna**__
+  * For the hydra part, the picture quality is cool and has a kind of retro feeling. (那個畫質很酷，有一種復古DV的感覺
+  * The gradient is also cool and relaxing.
+  * The gradient background let people feel relaxed.
+  * The wave that she has makes people feel relaxed.
+  * The ocean does not only have fish, maybe can add some other things.
+  * The fish look a little bit strange, maybe can make it not that bending.
+__**Yiler**__
+  * The dark blue gradient looks relaxing, and I think the sandpaper effect on the first Hydra prototype looks interesting.
+  * Keep the dark gradient, and the wavy effect in the first prototype.
+  * I think it might be more relaxing if you can change the red gradient on the top of the image because it looks sort of like blood. Also, I think you should make the fishes move because they look like dead fish being flushed away by the wave now.
+__**Steve**__
+  * The coolest thing is the background color in her SVG.js drawing.
+  * The background layout and the background colors are quite useful for destressing.
+  * I think that fish that swims would make it very relaxing or making a mini game out of it would be fun to watch
+=====second prototypes of destressing images=====
+==== prototypes 01 ====
+**The screen move then the mouse move**
+{{:zoey-second-prototypes-001.png?600|}}
+<HTML>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Jl0Ui_GMPX0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</HTML>
+=== Code ===
+<code>
+s0.initScreen()
+src(s0)
+.out(o0)
+src(o0)
+.add(noise(1000),0.1)
+  .modulateScrollY(osc(10),0.1,0)
+  .add(noise(),0.1)
+  .scrollX(() => -mouse.x / width)
+.out(o1)
+render(o1)
+</code>
+=== svg.js prototypes 01 ===
+**I add some cute seaweed and let the fish move**
+<HTML><iframe width="100%" height="500" src="//jsfiddle.net/linzoey/2p4goz70/5/embedded/result,js,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></HTML>
+==== prototypes 02 ====
+{{:zoey-second-prototypes-002.png?600|}}
+=== Code ===
+<code>
+s0.initScreen()
+src(s0)
+.modulateScrollY(osc(10),0.1,0)
+.out(o0)
+speed = 0.3
+osc(o0)
+.scale(2)
+.layer(
+  src(o0)
+  .mask(osc(10,0.1,3).modulateRotate(voronoi(),10,0))
+  .scale(() => 0.09*(time%30),() => 0.09*(time%30))
+  .luma(0.02,0.03)
+)
+.blend(o0)
+.out(o1)
+render(o1)
+</code>
+=== svg.js prototypes 02 ===
+**I make the beach looks more real because I put a different layer on it**
+<HTML><iframe width="100%" height="500" src="//jsfiddle.net/linzoey/nwx12ydp/31/embedded/result,js,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></HTML>
+=====organize feedback from classmates on destressing image, final version 1=====
+__**Yiler**__
+  - Removing the red gradient helped a lot with making it more relaxing.
+  - The seaweeds look nice, but they are stacked together.
+  - I think maybe it would be more relaxing if you make some fishes move in different speed, because it looks like the fishes are dead and they are being flushed away now.
+  - Removing some of the bubbles or animating them might also make it more relaxing.
+  - The one with the yellow gradient on the top is more relaxing than the other one.
+__**Steve**__
+  - First prototype:
+      - The most relaxing things is the moving fish and the background color
+      - I feel like there could be more variation to the swimming fish. I would also like the first to act like a fish in a fish tank now, it is more like fish in a sea.
+  - Second prototype (hydra):
+      - I liked the wave effect. ( I would add a second point but there is nothing else)
+      - To make it better, combine svgjs with hydra and make it so that the seaweed looks better.
+Verdict: I like the animating gone with svgjs better but if hydra could be added, it would be great.
+__**Yuna**__
+  - Prototype 01
+      - The changes in the ocean’s color, this kind of gradient make people feel relaxed.
+      - The wave of the ocean and the speed of the feel relaxing too.
+      - Maybe the seaweed can have curve. a little bit like this picture↓↓↓
+        - {{:students:lovepik-seaweed-png-image_401351890_wh1200.png?100}}
+      - Maybe the fish can also swim back.
+  - Prototype 02
+      - The wave makes this prototype relaxing.
+      - The fish are swimming and the feeling of overlap makes people feel like is more like in the ocean.
+      - The overlap is good, but it looks a little bit messy.
+      - The detail is a little bit too much, maybe make it less detail will be better.
+**Choose from the two prototypes the one that is the most relaxing and explain why you feel so.**
+I personally prefer Prototype 01, and I think this one is the most relaxing one. I think the yellow and blue gradient makes people feel warm, but Prototype 02 makes people feel a little bit cold. Also, Prototype 01 has less detail.
+=====destressing image, final version 1=====
+==== hydra ====
+**Actually, the fish will move but my computer has some problems so I can show out**
+{{:zoey-final_version_01.png?600|}}
+===Code===
+<code>
+s0.initScreen()
+src(s0)
+.add(src(o0),0.1)
+.out(o0)
+src(o0)
+.add(noise(1000),0.1)
+  .modulateScrollY(osc(10),0.1,0)
+  .add(noise(),0.1)
+.out(o1)
+render(o1)
+</code>
+==== svg.js final version 01 ====
+**The fish can move and all the fish swim at different speeds.**<HTML><iframe width="100%" height="500" src="//jsfiddle.net/linzoey/s80yqzbc/10/embedded/result,js,css/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></HTML>
+=====destressing image, final version 2=====
+[[zoey-lin-destressing-image|final Destressing Images 02]]