Differences

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

--- yuna-wu-destressing-design-process [2023/01/30 03:24] – yuna.wu
+++ yuna-wu-destressing-design-process [2023/01/30 21:54] (current) – [Second Prototypes] yuna.wu
@@ Line 5: / Line 5: @@
   * [[yuna-wu-svgjs|SVG.js studies]]
+List of the Process:
   - [[yuna-wu-destressing-design-process#design_proposal_for_your_destressing_image_project|Design proposal for your destressing image project]]
+  - [[yuna-wu-destressing-design-process#sketches|Sketches]]
+  - [[yuna-wu-destressing-design-process#first_prototypes|First Prototypes]]
+  - [[yuna-wu-destressing-design-process#second_prototypes|Second Prototypes]]
-==== Design proposal for your destressing image project ====
+===== Design proposal for your destressing image project =====
 === Define ===
@@ Line 23: / Line 27: @@
   * Project: Destressing Image Project
-{{::yuna-mood-board.png?400|}}
+{{::yuna-mood-board.png?700|}}
 === References ===
@@ Line 109: / Line 113: @@
   * Client: Teachers, people that need to relax
   * Project: Destressing Image Project
+===== Sketches =====
+=== 💚🌊 ===
+{{::yuna-sketch-001.png?800|}}
+=== ☀️🌷 ===
+{{::yuna-sketch-002.png?800|}}
+=== ☀️🌊 ===
+{{::yuna-sketch-003.png?800|}}
+=== Wave of Ocean🌊 ===
+<code/>
+//wave of ocean
+noise(10, 0.1)
+  .color(0,3,5)
+.modulateScrollY(osc(20),0.3,0)
+  .out(o0)
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=JTJGJTJGd2F2ZSUyMG9mJTIwb2NlYW4lMEFub2lzZSgxMCUyQyUyMDAuMSklMEElMjAlMjAuY29sb3IoMCUyQzMlMkM1KSUwQS5tb2R1bGF0ZVNjcm9sbFkob3NjKDIwKSUyQzAuMyUyQzApJTBBJTIwJTIwLm91dChvMCklMEE%3D" width = "100%" height = "900">
+</iframe>
+</HTML>
+=== Stars⭐️ ===
+<code/>
+// stars
+  voronoi(80,3,10).color(2, 3, 5)
+    .out(o0)
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=JTJGJTJGJTIwc3RhcnMlMEElMjAlMjB2b3Jvbm9pKDgwJTJDMyUyQzEwKS5jb2xvcigyJTJDJTIwMyUyQyUyMDUpJTBBJTIwJTIwJTIwJTIwLm91dChvMCk%3D" width = "100%" height = "900">
+</iframe>
+</HTML>
+=== Flowers🌷 ===
+<code/>
+//flowers
+  voronoi(50,3,5).color(4, 3, 5)
+      .scrollY(0.5,-0.1)
+      .out(o0)
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=JTJGJTJGZmxvd2VycyUwQSUyMCUyMHZvcm9ub2koNTAlMkMzJTJDNSkuY29sb3IoNCUyQyUyMDMlMkMlMjA1KSUwQSUyMCUyMCUyMCUyMCUyMCUyMC5zY3JvbGxZKDAuNSUyQy0wLjEpJTBBJTIwJTIwJTIwJTIwJTIwJTIwLm91dChvMCklMEE%3D" width = "100%" height = "900">
+</iframe>
+</HTML>
+=== Feedback from classmate ===
+[[https://docs.google.com/document/d/1-kV8vt6qhi3ZAEeotE0b6wpXsuLGtCy07PN-tlmZfWI/edit|Click here to see Google Doc. Version]]
+__**Sky / Heart Ocean:**__
+  * The star is pretty but the space between the stars is too close so it may not let people feel relaxed.
+  * The light blue part is the beach but I can not tell that, it looked more like the floor.
+  * A good thing that should be kept for future sketches is the space/galaxy concept. If done well, it could be very relaxing to look at. One thing that I thought made the images less destressing was, the details were too tiny and there too many details I think that made it more stressful.
+__**Flower:**__
+  * The star is pretty but the space between the stars is too close so it may not let people feel relaxed.
+  * The flower one can be better, In flower one the color makes me confused because the color is mostly the same and in the presentation
+  * For the second one, the color of the petals are too close to the color of the sky behind. It is a little bit distracting and hard to focus on.
+__**Wave Ocean:**__
+  * The blue wave is good and relaxing it has a big wave so it will not let people feel dense and tense
+  * The gradient in the third Inkscape sketch looks relaxing, the curly mountain under it is also relaxing.
+__**Conclusion:**__
+  * choose the wave ocean one, and put the hydra wave with it. Also put the Heart Ocean’s Heart inside the wave ocean.
+===== First Prototypes =====
+=== 🐥⛵️🌊 ===
+{{::yuna-final-sketch-01.jpg?800|}}
+=== 🐣🐬🌊 ===
+{{::yuna-final-sketch-02.png?800|}}
+=== 🐬🐢⛵️ ===
+{{::yuna-final-sketch-03.png?800|}}
+=== 🌊 ===
+<code/>
+s0.initScreen()
+src(s0)
+.mask(noise(10, 0.1))
+.modulateScrollY(osc(20), 0.3, 0)
+  .out(o0)
+</code>
+<HTML>
+<iframe
+src = "https://hydra.ojack.xyz/?code=czAuaW5pdFNjcmVlbigpJTBBc3JjKHMwKSUwQS5tYXNrKG5vaXNlKDEwJTJDJTIwMC4xKSklMEEubW9kdWxhdGVTY3JvbGxZKG9zYygyMCklMkMlMjAwLjMlMkMlMjAwKSUwQSUyMCUyMC5vdXQobzAp" width = "100%" height = "900">
+</iframe>
+</HTML>
+{{::yuna-hydra-prototype-wave.png?800|}}
+=== Feedback from classmate ===
+__**Zoey:**__
+  * The one coolest thing that you found in their prototypes
+    * I like prototypes 1 and 3 I think the boat looks cool I like the color and the shape.
+    * The seagull looks cool. I can feel the weather in the picture is warm.
+  * Two things in their prototypes that are useful for helping people to destress that definitely should not be lost or removed
+    * The wave is relaxing, I feel soft and silky.
+    * The gradient sun makes me feel happy and relaxed so I think you can keep that.
+  * Two things that should be changed to make the image more useful for destressing
+    * I think the dolphins and turtles do not make me fill relaxed because they do not have color, they only have color blocks right now. And when I first saw it I didn't know what it that(the turtle one).
+    * The hydra prototype: The only thing I can see now is black and a little blue. and The other thing is I think the wave amplitude moves too big so it feels not relaxing.
+__**Yiler:**__
+  * The gradient in the sky looks good, and the birds made the picture looks deeper and has more layers.
+  * Keep the gradient in the sky and the birds.
+  * I think the color of the ocean should be changed, because it looked a little bit too dark and that looks a little bit unnatural. The animals and boat in the pictures look more realistic than the background, and that looks weird.
+__**Steve:**__
+  * The coolest thing about her drawing is the color of the ocean.
+  * The background colors and different items in the picture could be useful for destressing.
+  * To improve on this, maybe she can add more items in her picture or, she could add some animation to her picture.
+===== Second Prototypes =====
+=== Dark Blue ===
+{{::yuna-second-prototypes-normal.png?800|}}
+=== Light Blue ===
+{{::yuna-second-prototypes-blue.png?800|}}
+=== Purple ===
+{{::yuna-second-prototypes-purple.png?800|}}
+=== Light Bule with Balloon ===
+{{::yuna-second-prototypes-ballon-version.png?800|}}
+=== Wave🌊 ===
+<code/>
+s0.initScreen()
+src(s0)
+.add(noise(10, 0.1), 0.01)
+  //.color(0,3,5)
+.modulateScrollY(osc(20),0.1,0)
+  .out(o0)
+</code>
+{{::yuna-second-prototypes-wave.png?800|}}
+=== Kaleid ===
+<code/>
+s0.initScreen()
+src(s0)
+.add(osc(25,-0.1,0.5))
+.kaleid(30)
+.out(o0)
+</code>
+{{::yuna-second-prototypes-kaleid.png?800|}}
+=== Pixelate ===
+<code/>
+s0.initScreen()
+src(s0)
+  .pixelate(20,20)
+  .out(o0)
+</code>
+{{::yuna-second-prototypes-pixelate.png?800|}}
+=== Feedback from classmate ===
+__**Zoey:**__
+  - For each of the two prototypes:
+    - describe the two most important points that make the prototype relaxing;
+      - The wave is very relaxing it is smooth and soft. The gradient is excellent.
+      - The boat is moving with the wave it looks cool and relaxing.
+    - describe the two most important points that should be changed in order to make it more relaxing;
+      - I think you can let the seagulls move so it will not look like it is dying.
+      - The seagulls look like an “r” and the position of the seagulls is too unanimous.
+      - The boat is moving with the wave sometimes it cooks cool but sometimes it looks deformity.
+  - Choose from the two prototypes the one that is the most relaxing and explain why you feel so.
+    - I think Yuna can keep the first Hydra prototypes, Compare with the other two I think the first Hydra prototype is the most relaxing one.
+__**Yiler:**__
+  - Removing the dolphin made the art style more consistent
+  - The brighter color for the ocean is also relaxing
+  - it might be more relaxing if the black edges on the sides are removed
+  - The hot air balloon is in a different art style, and that looks a little bit weird
+  - Keep the fullscreen one that has the wavy effect and SVG.js image
+__**Steve:**__
+  - First prototype:
+    - I liked the color of the ocean and color of the background.
+    - I feel like the seagulls and the boat could look better.
+  - Second prototype:
+    - I like the wave effect on everything in the ocean and how the boat rocked.
+    - I felt weird when the sun and the sky was also moving like the ocean.
+  - Verdict: The second prototype is more interesting.