Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
yuna-wu-destressing-design-process [2023/01/30 18:26] yuna.wuyuna-wu-destressing-design-process [2023/01/30 21:54] (current) – [Second Prototypes] yuna.wu
Line 5: Line 5:
   * [[yuna-wu-svgjs|SVG.js studies]]   * [[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#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 === === Define ===
  
Line 110: Line 114:
   * Project: Destressing Image Project   * Project: Destressing Image Project
  
-==== Sketches ====+===== 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.
  
  • yuna-wu-destressing-design-process.1675131994.txt.gz
  • Last modified: 2023/01/30 18:26
  • by yuna.wu