Final Assignmwnr – Weiqi Wu & Ziqi Guo

Flower Shop from the Fairy Tale

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181543

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181615

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181733

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181821

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181908

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-181948

Video: https://youtu.be/52fw-Wfxk6I

Inspiration

shader-art-final-presentation

Our inspiration for this project is from some creative scenes. The first inspiration is from the music video of a K-pop girl group, which is Aespa. The video shows a lot of bright and shiny elements including illuminated plants and objects from nature. The other inspiration is from a series of paintings related to mystery forests created by the Chinese illustrator called MaoYong Liu, where she created a lot of immersive mysterious corners within a forest. We were inspired by the combination of plants and lights, so we finally decided to set a scene as a magical flower store from the fairy tale. 

Concept

shader-art-final-presentation-1

For creating a magical flower shop, we set our goals of exploring natural textures and bright colours. We would like to use as many functions as we can for a better experience of the new tools we learnt (substance designer and shader graph) as we found that node coding is a tool which is exciting to learn. With the creative coding, we wanted to create something which is different from what we did with p5.js and see if we can make some innovations from it.

Asset

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-183922

We got the assets online and downloaded them. We first get rid of all of the original textures. And then created our own texture and animation. 

TEXTUre design

Weiqi Wu is responsible for the texture design in substance designer. Weiqi had created six textures in substance design. They are tree bark texture, crystal texture, metal plate texture, leafy pond texture, stylized water texture, random texture, and one simple texture.

Tree Bark Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184409

Crystal Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184700

Metal Plate Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184621

Leafy Pond Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184846

Stylized Water Texture

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-29-184820

Others Textures

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-27-110128 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-27-104651

Shader & Motion design

Ziqi Guo is responsible for the shader graph and motion design. And Ziqi had created six shaders, which are the glowing shader effect, emission shader effect, two force field shader effects,  and dissolve shader effect.

shader-art-final-presentation-2

shader-art-final-presentation-3

shader-art-final-presentation-4

note: the commands of the code on shader graph were done using sticky notes and because we created different colours and effects with mainly five types of functions, the comments of the coding were only shown in these shader graphs: 
- dissolve2; flower3; force3; forcefield1; glowlight;   
  hologram1
- You can find them in the shader file :)

Colour Theories

Colour theories had been implemented into our scene. We chose the colour that fits the concept and theme first, and then we found the triadic, analogous, complementary combination of them.

shader-art-final-presentation-6 shader-art-final-presentation-5

What did we learn by doing this project?

  • The importance of shader

This is the first time for us to learn how to apply our shaders on models in a scene. We realized how important it is to design the shader and detailed textures. The shader created a huge difference. In P5.js when we do the type coding, we used to pay more attention to creating graphical shaders and thinking about how to make the shader’s patterns identical, but now we are applying them to the real scene, so they have more storytelling use. 

  • Understand how to use both substance designer and shader graph in Unity

node-based coding is like a life savour by making our work more effective and powerful. It encouraged us to think about having our own shaders in our later work. we cannot imagine how complex that will be by having only the conventional programming. Now we are more confident at creating shaders becasue we will not be so worried about forgetting how to type the program vocabulary. 

  • Details have a great effect

both substance designer and shader graph would require a lot of details on the final effect. with node-based coding, it is way more efficient to change those details and have them under control. 

  • The choice of colour is important

We know that we will use the macaroon colour series at the beginning but we found that with the colour theories, we could create different combinations of different colours more easily. The application of colour theory in space also helped us better understand the different results having different theories. 

Week9 HW – Weiqi Wu

Shader week9

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-24-055203

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-24-060052

For the week9 homework, I decided to learn how to create photo-realistic wood material. I am always interested in how people could have so realistic models in the scene, so I found a tree bark tutorial online and follow the tutorial step by step. The tutorial explains each step of what it is for and what people could do to adjust it.

One problem that I faced during the learning section is that I could not get the same result although I am following the tutorial. And I found out that the reason would be some little details that I missed. And I am really impressed by how these little details could make the whole thing change. Also, it helps me to understand how to organize all these nodes. Moreover, by learning it step by step, I get a sense of how the texture is created layer by layer, or from one part to another part. And we could blend them together to create the style of what we want it to look like.

Below are some screenshots of the process that show how the texture changed after each section.

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-22-170411 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-22-170456 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-22-172749 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-22-173125 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-24-042642 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-24-051605 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-24-052504 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-24-055044

Tutorial video

Week8 HW – Weiqi Wu

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-15-051456

In this week’s assignment, I tried to use various PBR materials. The materials were downloaded from the Internet, imported and created as the material shaders in Unity. Also, I used the online free 3D asset to make the scene looks more dynamic. Adding the balls around. Moreover, I play around with various parameters to see the different effects.

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-15-051220 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-15-051322 %e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-15-051456

Week7 HW – Weiqi Wu

Shader #1

screen-shot-2022-04-10-at-4-40-10-pm screen-shot-2022-04-10-at-4-40-44-pm screen-shot-2022-04-10-at-4-42-10-pm

In shader 1, I experiment with the push() and pop() function. And I also experiment with rotate(), translate(), and scale(). I used a sphere, torus, cone, and box. I arranged to rotate() before translate(), which creates the animation that rotates around the center point. I would like to implement it with colours, so I add a gradient background.

CODE

Shader #2

1031540 screen-shot-2022-04-10-at-6-43-31-pm screen-shot-2022-04-10-at-6-43-44-pm

img_0342 screen-shot-2022-04-10-at-6-59-07-pm screen-shot-2022-04-10-at-6-58-48-pm

img_0343 screen-shot-2022-04-10-at-6-58-27-pm screen-shot-2022-04-10-at-6-58-13-pm

For shader 2, I used an image found online, and then create another two effects, which are blush and mosaic. Also, I adjusted some parameters that make the bump mapping effect show up the way that I want. I would like to see what are the impact of using different filters on an image. And according to the result, we could see that the original image creates a more sharp bump mapping effect. And the brush one shows more noise in the effect. And the mosaic one creates an extended rectangle look when doing the bump mapping effect. I found it really interesting that various effects will show a completely different result.

CODE

Midterm Assignment – Weiqi Wu

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-04-140355%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-04-140259%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-04-140318%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-04-140332%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-04-140436%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-04-140344

blog

P5.js code link

In this assignment, we would like to create a music video with various shaders. We would like to let the shaders interact with music that allows randomness happened, instead of setting up how the shader will change by ourselves. Most of our inspirations are from Casey Conchinha’s works on the website Glitch. Also, we learned a lot from the examples on the website Book of Shader. Moreover, we are interested in John Whitney’s examples provided in the lecture. The way he plays with geometrics inspired us a lot.

Inspired by all these examples and artworks, we decided to use geometric shapes, lines, and grids as the base; adding some other parameters to create the music video. Since we are a group of two, according to the assignment requirement, we need to be more complex, with features, and variations. Therefore, we decided to involve as many visual concepts as we can. For example, we could mix two concepts together to create a more special effect. 

We start by learning the shaders from our inspiration pieces, and understand how it achieves those effects. And then we start to consider how to utilize these effects. There are three steps in our creative process. First, we discussed and decided which concepts we would like to explore and use in our assignment. And at the end, we decided to include shape, randomness, noise, colour contrast, colour harmony, animation (u_time), grid, and gradient. Second, we started to see how we could incorporate the knowledge from the examples and inspirations into our works. Thus, we decided what concepts we would like to use in one shader, and then see what we could add to a basic shader. And we tried a few things to see what could be merged together and create an interesting and looking-good effect. Third, we add music and u_time to allow the animation and interaction with music. While adding the function that allows the shader animate with music, we played around with it to see what interaction will create the most beautiful effect. And we use the if function with the amplitude function to allow variation effects while the music change. Last but not least, we add colours to all the shaders to make them look more consistent and have the harmony/contrast of colours. 

COLLABORATION

I am in a group with Ziqi Guo, and we work together to finish the coding. We separate the work into two parts so that we could create work with our own interests. But we will both base it on the elements of shape and interaction. I used randomness, colour harmony/colour contrast, shape, grid, and animation; Ziqi explored randomness, noise, colour harmony/colour contrast, and geometrics. After we did our own shaders, we put them together on the p5.js website. And we edit the shader.js file together to combine all the shader effects together. We choose the colours for each shader together to achieve visual consistency, as well as the time for each shader.  During the process of making, we discussed all the details and solve all the problems together. Moreover, we will give suggestions to each other for the shader work so that the shader could be more refined.

Process

%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be-2022-04-04-144101

This is the screenshots of my process and some experiments of some shaders and colors.

References

https://glitch.com/@kcconch 

https://glitch.com/@kcconch/p-5-js-shaders 

https://editor.p5js.org/ziqigg126/sketches/2hQAWgBap 

https://glitch.com/edit/#!/lime-living-bambiraptor?path=uniforms.frag%3A77%3A1

https://editor.p5js.org/ziqigg126/sketches/O2_x4FqLh 

https://thebookofshaders.com/ 

Color: 

https://www.sessions.edu/color-calculator/ 

https://imagecolorpicker.com/

Week4 HW – Weiqi Wu

Week4 Exercise

week4_exercise

During the process of the exercise, I decided to create a color palette that include all of the colors of the color wheel. However, how to make it look good and organized is one of the biggest problems. After some experiment, I decided to use the Complementary Contrast of Itten’s contrasts. And I pair the color using the 2-color chord method (“diad”). And then listed them from left to right in the order that starting from yellow. For the grid structure, I used a 6 x 6 grid. During the process, I found that the opposing color is really interesting. And I had never tried to use so many opposing colo at that same time. I think the result turns out well that the colors are well organized and look comfortable for people.

CODE

Week3 – Weiqi Wu

Shader #1

week3_shader1

In Shader1, I decided to have multiple circles. However, I would like to add more colors and make it more special. Thus, I used smoothstep() function to make the circles blurry. Also, I created several circles that could fill the whole canvas. For the color of the circle, I use the technique that I learned in gradient shader that allows the circle has gradient colors.

CODE

Shader#2

week3-shader2_2

week3-shader2_1

In Shader 2, I tried to experiment with different functions. I deleted the original rectangle and line function, using the dot function. Because I think it would help me to better experiment with various effects since it will be more simple. I learned from other examples and using the rotate function in the code, which allows the dot to move in a different direction. Although the code is not complex, I spent a lot of time figuring out each line of code to see what they do in the code. I found it really fun.

VIDEO

CODE

Weiqi Wu – Week 2 Homework

Gradient#1

While making Gradient #1, I understand how to use mix() to blend the colors. During the making process, I was trying to find other forms to do the color blending. Looking at the book of shader, I found out that the “shape” chapter, it introduces how to use shading function to create various shapes other than a straight line. Therefore, I learned how to use code to calculate the radius and angles of each pixel and use the function to change the radius of a circle. And the outcome will be the below images.

%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20220225150538

Code

Gradient#2

While making Gradient #2, I learned that there is a way to turn HSB color into RGB color setting, which will be more convenient for me to make. And I tried a lot of time changing the setting and mouse interaction, as well as the shading function to adjust the original coding. I played with sin(), as well as u_time, and mouse XY. I found it really fun to have interaction between the shader and people.

Video       Code