Zhihan Zhang – DIGF-3011-501 (Winter 2023) Shader Art

Final Project-Zhihan Zhang

Video Link of this project: https://youtu.be/4WHOA5U7OSA

My final project was very different from what I had planned, although it did stem from my preconceptions. It takes me about 2-3 days continuing workings to create this scene, and another 2 days for final refinements and adjustments. I do like this vibe and atmosphere.

At the beginning, this scene was planned to be settled on the ground as a tiny natural-styled house in the forest, so when I made the draft scene, the first floor was surrounded by the wall instead of the tree trunks. And I also created the rock/stone shaders for surrounding the pool/spring.

When I searched for the suitable models on TurboSquid, it is hard to find the carved wall to support the second floor. And I tried to insert the shader directly on my drafted squared walls, they looked very rigid and breathless. Therefore I found a trunk-like model, duplicate it with various scales, and made them as the new supportive structures. At this point my basic shapes and plans were clear, I started working on the shaders. Most of my shaders are about trees, grass, rocks that are nature-related stuffs. The cobblestone shader and the trunk shader use the same logic. I created two parts of the objects, and using blend to appropriately combine them together as final shaders, such as cobblestone with the branches, barks with the tiny grass.

Then I started to looking for a better background skybox for better visual effect. But the skyboxes of sky, clouds and nature did not achieve my expectation, until I tried this under sea skybox. It was not the same with my plan but the deep and quiet vibes were so attractive. Especially, the comparatively dark scene could work well with the warm lights in the structure. So I moved the project plan from above ground to under ground and applied some shaders on different models.

Finally, I added the water shader. With the help from professor, I generate three different but similar water shaders for generating flowing animated water through the Unity shader. I added the sine functions to the time of shaders to make the water displaced back and forward. Moreover, I mistakenly created a vertical giant plane. It did not show in the project but it covered part of the environment light. Thus the comparison between the structure lamps’ lights and the ocean background is clearer and deeper with better atmosphere. So I kept it. At the end, I added the background music and a capsule with camera as the player’s perspective, so that I could manipulate the capsule and explore in this tiny scene.

Making this project is my second time to use Unity. I learned a lot from the substance designer and gradually understood the mechanism and functions of the substance shaders. Before this class I was very confused about how to understand, make and apply shaders in Unity, since it was one of my challenges in my previous courses. And I also be more familiar with functions in Unity. One of my biggest challenges is about the animation of the water. The settings of the unity shader in my file is a little bit different and make the main window blank. With the help from professor, I adjusted some of the parameters and then it worked. I did want to make the centre water flow in Normal but it is too hard to achieve this effect, so I had to give up and only animate on the surface flowing effect. Though it is the first try on generating my shaders in SD and creating my own scene in Unity, I’m proud of my final project and enjoy the deep-sea atmosphere. I hope in the future I could try to create the new SD shaders without the help from tutorials link.

And thanks for so many help and replies from professor!

Week 9 Homework

Since the theme of my final work is relative with the natural and forest features, I chose the cobblestones tutorials of substance designers for learning. Since it includes part of the leaves which belongs to another video, I did not include the leaves features in this assignment. %e6%88%aa%e5%b1%8f2023-03-27-%e4%b8%8b%e5%8d%889-57-50 workflow

The process of making cobblestones path could be broken down in to several main parts. The first steps is to create the basic cobblestones shapes by using arc pavement, and flood fill series are helpful on making variations on the patterns, gradients and shapes, which also been used a lot in other steps.

Then we use some textures to generate the edges wear for the textures of cobblestones, and dirt ground. Blend is widely used in the project for changeably and appropriately mixtures between two nodes. Then we could generate the scene that parts of the cobble stones are sink into the dirt ground. I do not do the leaves, so I only make the twigs and also blend them with the dirt ground. An important hint here is that, when we use the tile generators to making abundant random twigs, for natural-like twigs, changing the blend mode in parameters page into Max is helpful on making lively intersecting twigs.

And finally, the most complex part for me is the setting of base colors and cavity for the map. Some questions here come into my mind while making them. If we would like to give different parts of the textures with specific colors, what could we do for splitting colors and distributing them on different part of textures? There is a part that to give specific color to the twigs, we could use mask. There are too many connections happened so these are pretty hard for me to completely understand how it works.

I did not completely follow the tutorials, and I changed some parameters based on my preference and some consideration of my final works. It does take me a long time to carefully follow every single step, or it may cause some missing nodes and effects. But I learn a lot through it! The process is very interesting and organized.

And here is the video link cited of tutorials: https://youtu.be/A1lEgPv8sNM 3d_view

Week8 Homework

For week 8 homework, I chose a blocky photo studio for the skybox from the Polyhaven website, and selected several interesting PBR textures from the FreePBR website. I planned to create some ancient, modern and surreal models as props in this studio scene. However, the first question happened here. I would like to make the white ball glow with an emission effect. But the ball only becomes brighter in color with the check of “emission,” nothing glowing effect shows.

After I did some research and discussed it with the professor and Justine(Thanks a lot!!!) I found that it requires me to check the post-processing in the camera-rendering, selecting the global volume-volume, and create “new” for the profile, and add post-processing effects to the camera by adding volume overrides. The “bloom” and “Vignette” gave great effect for the scene. And here is the helpful link about how to create the post-processing volume: https://learn.unity.com/tutorial/creating-a-global-post-processing-volume-2019-3#

After I finished the steps above, I found the second problem: All my models have no shadows. I discussed with the professor about this problem for a long time and finally found that I made all the models too big for the camera to calculate the shadows. The solution is to make the “scale factor” of the model smaller. Setting it to be about 0.01 is a suitable choice. And the shadows finally show in my scene.

And here is the final scene of my Week 8 Homework. I moved the emissive balls as part of the industrial mushroom-like structure with a modern column and steps. The ancient style is shown on that bronze cup and blocky hemisphere. Unity is complex and challenging for me, but I learn a lot through the process of figuring out various questions and constantly adjusting my work.

%e6%88%aa%e5%b1%8f2023-03-17-%e4%b8%8b%e5%8d%887-27-57

Week5 Homework

Link: https://editor.p5js.org/liach926/sketches/p8TuFlxNd

When I first saw the example, it reminded me of the fluid liquid. So I found an image of a water pattern and planned to make an effect similar to flowing water. I started by using the Perlin Noise in the fragment shader, hoping to bring more ripples and fluctuations. At this point, I was confused about the difference in functions between vertex and fragment shaders.

So I spent a lot of time trying to understand the various definitions and how some of the words are translated and linked between different shaders. For instance, the varying variable could be used between vertex and fragment shaders. Therefore I could set the varying displaceAmtf from the vertex’s displaceAmt and transfer it into the fragment shader. And the vdisplaceAmt could be set into the use of the smoothstep function of color. The “uniform”variables could be used in fragment, vertex and js. And when I transferred the functions from thebookofshaders, it was important to adjust the variables above to match with the other shaders. For example, there will be no

“vec2 st = gl_FragCoord.xy/u_resolution.xy;”

The texCoord will be used instead. Or it may cause some errors.

Midterm Project

Theme: Biopolar Emotions

Link: https://editor.p5js.org/liach926/sketches/POEsdRXM9

Inspiration: The inspiration source and theme are based on the changes in my mood. As a person who is emotionally unstable and easily stimulated, I switch back and forth between anxiety and excitement, indulging and floating in the big wave of emotions. This is what I want to convey through the project.

My music video interactive shader work is divided into two rounds. The first round represents a surface-level mood change. The alternation of dark and light colours represents the emotions of excitement and high and low struggle, respectively. The second round that represents deep-level moods follows the first round of shaders but adds various block objects or modifies more colours, parameter changes, and the shader’s frequency changes.
The difference between the scene and object colour switch represents that sometimes I am in a good state, very excited and happy, with a bright pink and blue background. Still, there are small chaotic pieces of objects (i.e., fragmented emotions) that will quietly hide, and the next second, it switches to immersed in the chaotic mire of all dark colours.

The first and second scenes are two images that are both controlled and generated by noise functions and the displacement amount, making them look like dynamic ocean waves and dancing snowflakes. The sliders are able to control the amount of displacement on the shaders. The objects, such as cylinders, boxes, spheres, toruses and cones, and circles(the weird blue snow in the snow image) represent the existing and frequently changing fragmental emotions floating and sinking in the giant emotions ocean. The Amplitude of music controls some parameters of the shaders, which show a kind of tension and nervousness as if the heart is constantly throbbing with the music’s rhythm.

It is a tough process for me. It took me more than 16 hours to create it. There were a lot of errors and bugs while working. I kept deleting, modifying and trial and error to get rid of all the mistakes and bugs step by step. There were also some changes to the shader that I wanted to try, but I was forced by too many errors and finally deleted them. This project was challenging for me, I’ve never used p5.js before, and it was a valuable experience for me.

Week4 Homework

This week’s assignment is one of the most challenging works for me. I spent about a whole day and still got very confused about a lot of details on it. I’ve tried my best to generate this homework of shader 1.

The background image I chose was a star shot I took myself. Meanwhile, I also liked the texture of PerlinNoise when I was looking at the sample file. At first, I thought its pattern could be changed by adjusting it to create an effect that is similar to water droplets attached to the lens. However, I changed the parameters and functions, but failed to adjust the opacity and colors. Then I changed my mind to make the textures as dispensed as pedals which are moving, showing and disappearing.

Then the second problem stopped my work for an extremely long time: Previously, I would like to use the mouse to control the pedals’ movements. I thought it should be influenced by the codes “readOffset” and “uDisplacement” in the frag code, but nothing could be controlled or influenced by my mouse. Nearly after 2 hours, I found that I forgot to supplement in the Js file about displacement functions and umouseposition. And now, I am still confused about how it works to make the mouse position works.

” var displacement = dist( mouseX, mouseY, width/2, height/2);
var maxDist = dist( 0, 0, width/2, height/2);
displacement = map( displacement, maxDist, 10.0, 10.0, 0.2, true);”

The last problem is that I planned to use it to control the movement frequency of pedals, but it actually influenced the whole background image, though the effect looks good to me that it seems to be the waving reflection of water that flower petals are flying on the lake. I would like to ask if there is any way to just use mouse movement to only control the movement of the patterns above?

https://editor.p5js.org/liach926/full/ndOW7oUQ3

%e6%88%aa%e5%b1%8f2023-02-10-%e4%b8%8b%e5%8d%8811-46-33

Week3-Zhihan Zhang

For my first shader, I had no idea what kind of scenes I wanted to make. My preference was to make a more figurative image, so I looked through the landscape photos I had taken for inspiration, and I was browsing through the links provided.

Then I saw the moon codes. Because I have not had the opportunity to return to my hometown for several years, and there was a saying in my hometown that looking at the moon is a way to miss the family hometown, I associated it with the perspective of looking at the moon through the window. The window could be represented by the inlaid square, just like what I have learnt in class.

I drew the rectangle code functions with a wood-like color. I prefer the changing moon from full moon to eclipse with a slower speed and a better size. So I adjusted, added and deleted codes of the moon to have a softer color and suitable animated movements. The texture of the moon was applied by me to the square window, which made it look more like a wood-made one.

The thing that I fail to change is the sky color for the moon. If I multiply more color on it, the colors of square window or the moon may be changed together into weird colors. I could only keep it in black to make other dominant figures have a better visual effect.

moon2 moon1

Week 2 Homework – Zhihan Zhang

This week we use HSB to generate the figure with various functions and using u_time to animate it. In the process of working on this assignment, it takes me a bunch of time to completely understand the whole functions especially the step and smoothstep function. And at the beginning my codes always show several errors. I solved one of them, which was caused by I forget to ad “.” in the cos/sin function when I multiplied with a fix number. For example, it should be hsb.g = cos(3. * v * u_time) instead of hsb.g = cos(3 * v * u_time).

The animated figure that I created was not what I predicted before I drew the figure. So here is one of the question that I am confused. I tried to create a color A and color B. I would like to mix A and B together with mix function for the hue of hsb, something like hsb.r = mix(colorA, colorB, st.x), but it leaded to a error that “x = :dimension mismatch,” I tried a lot of times to adjust it but failed, so I deleted it and post it here.

I only gave the u_time in the function of hub.g, because I thought my final result figure with u_time in hsb.g is more beautiful than the figure that I put u_time in hsb.r/hsb.b. I also changed the plot line color to make it like the water drops. Therefore, the final animated figure seems to be like changeable dropping rain dropping with special rhythm w ith the flashy light in a dark city.

code

Zhihan Zhang-Homework 1

It is my first time using the book of shaders editors and trying the shader things. Previously in other courses, I only tried to create fixed coloured graphics for geometric figures, so the gradient changing in the shaders editors is attractive. Still, I do struggle in the process of experimenting and adjusting the gradient colors.

Gradient 01

homework-1

In the first colour pattern, I tried st.x/st.y and u_time to create a gradient colour. In the beginning, I tried to directly use u_mouse in colour.r/g/b, but the colour seems to not change by moving the mouse. Therefore I imitate the abs(sin(u_time)) from the default file, and it succeeds. If I only use the st.x in any of the 3 RGB components, it will lead to a horizontal gradient; if it’s the st.y, it will lead to a vertical gradient. If both the st.x and st.y exist, they will create a colour pattern which is a 45-degree gradient. The sin(u_time) here will control the amount of blue that is added t the colour pattern according to time changes.

Gradient 02

homework-2

The second gradient was mixed with two colours. Color A is a c pattern with fixed RGB. Because of the failure of using u_mouse from Gradient 01, I imitate the use of sin(u_time) and write down the sin(u_mouse) in the RGB of Color B, and I’m happy to see that when I move my mouse on the squared gradient colour, it could be changed. Meanwhile, the abs(sin(u_time) in the mix function seems to influence the percentage of Color A and Color B among the final result. Though I’m unsure whether it is the right way to use u_mouse, I love the final effect of changing the gradient with mouse movements and time.