Differences

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

--- zoey-lin-destressing-design-process [2023/01/22 03:31] – 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 260: / Line 272: @@
 <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]]