From b4ff59037879218c7928d300bc23b1633b333cbc Mon Sep 17 00:00:00 2001 From: Coco Kneer <32113955+JiaoMaMa@users.noreply.github.com> Date: Mon, 23 Sep 2024 19:53:50 -0400 Subject: [PATCH 1/3] Update README.md --- README.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1a7646c7..18807ac8 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,69 @@ -# [Project 1: Noise](https://github.com/CIS-566-Fall-2022/hw01-fireball-base) +# [Project 1: Fireball](https://github.com/CIS-566-Fall-2022/hw01-fireball-base) + +## Christine Kneer + +For this assignment, I created a procedural fireball inspired by Sawada Tsunayoshi’s Dying Will flame ability from the anime *Katekyo Hitman Reborn!* series. + +

+ +

+ +## Vertex Shader Breakdown +The Dying Will Flame has a distinctive shape characterized by two triangles extending outward from the body of the flame. To replicate this iconic shape, the fireball was divided into a top half and a bottom half, each treated differently to achieve the desired effect. + +**Top Half:** + +

+ +

+ +- **Triangle Wave**: The iconic triangular shape is created using a triangle wave applied to the vertices. To make them more spread out, I rotated the vertices outward additionally. +- **Distortion**: The vertices are further distorted using a combination of sine and cosine waves of varying magnitudes, giving the flame a more dynamic and natural appearance. +- **Fine Detail**: Finally, a small amount of Fractional Brownian Motion (fBm) noise is applied to add finer details to the flame, enhancing its complexity. + +**Bottom Half:** + +

+ +

+ +- **Base Shape**: The bottom half maintains a general spherical shape, but with a slight taper towards a point at the center. +- **Radius Adjustment**: The radius is adjusted using a linear interpolation (lerp) based on the absolute value of the x-coordinate, creating the tapered effect. +- **Distortion and Noise**: Similar to the top half, sine and cosine waves of varying magnitudes are applied for a more flame-like appearance, followed by fBm noise for additional detail. + +**Bringing It Together:** + + +

+ +

+ +- **Smooth Transition**: To ensure a seamless transition between the top and bottom halves of the flame, the radii from both halves are interpolated (lerped) in the middle part of the sphere, resulting in a smooth and cohesive flame shape. +- **Animation**: Distortion are animated using the time variable. + +## Fragment Shader Breakdown + +- **Diffuse Color**: A vertical gradient is applied to the fireball, blending from u_LowerColor at the bottom to u_UpperColor at the top. + +

+ +

+ +- **Perlin Noise for Flame Details**: I wanted more dynamics for my fireball, so I added random spots to the fireball’s surface.These spots are animated over time and appear where the noise value exceeds a set threshold. + +

+ +

+ + +- **Lighting Effects**: Instead of a PBR approach, I wanted more of a 2D, manga-looking appearance, so I chose to use some variation of **toon shading**. The shader applies toon shading by quantizing the light intensity into distinct bands, giving the flame a cartoon-like appearance with sharp transitions. Meanwhile, I added rim lighting, emphasizing its silhouette. Finally, I adjusted the alpha value to create a slight transparency towards the edges of the flame. + +

+ +

+ +## Background +I also created a sun background that pulses together with the fireball, whose color is a relatively simple gradient of red, orange, and yellow based on uv. ## Objective From 8370844c29645c448f241792540809f118062cdc Mon Sep 17 00:00:00 2001 From: Coco Kneer <32113955+JiaoMaMa@users.noreply.github.com> Date: Mon, 23 Sep 2024 21:07:41 -0400 Subject: [PATCH 2/3] Update README.md --- README.md | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 18807ac8..2f57a277 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,20 @@ For this assignment, I created a procedural fireball inspired by Sawada Tsunayoshi’s Dying Will flame ability from the anime *Katekyo Hitman Reborn!* series.

- +

+

+ +        + +

+ + ## Vertex Shader Breakdown The Dying Will Flame has a distinctive shape characterized by two triangles extending outward from the body of the flame. To replicate this iconic shape, the fireball was divided into a top half and a bottom half, each treated differently to achieve the desired effect. -**Top Half:** +### **Top Half**

@@ -21,7 +28,7 @@ The Dying Will Flame has a distinctive shape characterized by two triangles exte - **Distortion**: The vertices are further distorted using a combination of sine and cosine waves of varying magnitudes, giving the flame a more dynamic and natural appearance. - **Fine Detail**: Finally, a small amount of Fractional Brownian Motion (fBm) noise is applied to add finer details to the flame, enhancing its complexity. -**Bottom Half:** +### **Bottom Half**

@@ -31,8 +38,7 @@ The Dying Will Flame has a distinctive shape characterized by two triangles exte - **Radius Adjustment**: The radius is adjusted using a linear interpolation (lerp) based on the absolute value of the x-coordinate, creating the tapered effect. - **Distortion and Noise**: Similar to the top half, sine and cosine waves of varying magnitudes are applied for a more flame-like appearance, followed by fBm noise for additional detail. -**Bringing It Together:** - +### **Bringing It Together**

@@ -43,27 +49,35 @@ The Dying Will Flame has a distinctive shape characterized by two triangles exte ## Fragment Shader Breakdown -- **Diffuse Color**: A vertical gradient is applied to the fireball, blending from u_LowerColor at the bottom to u_UpperColor at the top. +### **Diffuse Color** +A vertical gradient is applied to the fireball, blending from u_LowerColor at the bottom to u_UpperColor at the top.

-- **Perlin Noise for Flame Details**: I wanted more dynamics for my fireball, so I added random spots to the fireball’s surface.These spots are animated over time and appear where the noise value exceeds a set threshold. +### **Perlin Noise for Flame Details** +I wanted more dynamics for my fireball, so I added random spots to the fireball’s surface.These spots are animated over time and appear where the noise value exceeds a set threshold.

-- **Lighting Effects**: Instead of a PBR approach, I wanted more of a 2D, manga-looking appearance, so I chose to use some variation of **toon shading**. The shader applies toon shading by quantizing the light intensity into distinct bands, giving the flame a cartoon-like appearance with sharp transitions. Meanwhile, I added rim lighting, emphasizing its silhouette. Finally, I adjusted the alpha value to create a slight transparency towards the edges of the flame. +### **Lighting Effects** +Instead of a PBR approach, I wanted more of a 2D, manga-looking appearance, so I chose to use some variation of **toon shading**. The shader applies toon shading by quantizing the light intensity into distinct bands, giving the flame a cartoon-like appearance with sharp transitions. Meanwhile, I added rim lighting, emphasizing its silhouette. Finally, I adjusted the alpha value to create a slight transparency towards the edges of the flame.

## Background -I also created a sun background that pulses together with the fireball, whose color is a relatively simple gradient of red, orange, and yellow based on uv. +I also created an animated sun background that pulses together with the fireball, whose color is a relatively simple gradient (with sin waves) of red, orange, and yellow based on uv. + +

+ +

+ ## Objective From d73f71d40eea804c6be9f57a8ddf276d3ef2478a Mon Sep 17 00:00:00 2001 From: Coco Kneer <32113955+JiaoMaMa@users.noreply.github.com> Date: Mon, 23 Sep 2024 21:09:48 -0400 Subject: [PATCH 3/3] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 2f57a277..25c71336 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ ## Christine Kneer +Live Demo link: https://jiaomama.github.io/hw01-fireball/ + For this assignment, I created a procedural fireball inspired by Sawada Tsunayoshi’s Dying Will flame ability from the anime *Katekyo Hitman Reborn!* series.