Final Project_LC


   For my final project proposal, I want to make a music player for my final project using Unity and Substance Designer. Below is my inspiration as well as my conceptual image which is picked up on Pinterest.  I think this picture brings a quiet and mysterious atmosphere, so my intention is that users can enjoy music quietly in such a relaxing environment. This project is also a challenge for me because I have never used Substance Designer to make materials before, but I have seen some works made by previous students, which is very inspiring and makes me look forward to making excellent materials through this powerful software.


Final showcase:


In my final project, I created five materials totally using Substance designer, which are the texture of the plane, column top, column bottom, rock and character. To interact with the project, players should click each column top to trigger the audio clip( which continues for about 10 to 15 seconds). The skybox(Unity assets), character model(Mixamo), rock models(Unity assets) and petal particle(Unity assets) are all online assets. Some of them were not in my project schedule but were added finally to increase the visual enjoyment. 

  I followed the tutorials on Youtube but adjusted a little bit to keep the harmony rather than completely copy what is taught in videos. I used to meet the lighting problem in Unity, in which the light doesn’t work except for the directional light. Afterwards, I found that this is caused by enormous model sizes. Specifically, if the model is larger than the standard cube too much, many functions will meet problems when run(mine was 100 times larger). For example, once I imported the texture to the model, it looked different from how it looked in the texture ball, which becomes rough and graceless(so the solution is narrowing them down and the light system restores after then).

Full project recording:

Tutorial Link:

column top_the lawn with tiny flowers:


character_ crystal:




Materials(self-made) showcase:

character_ crystal



column top_the lawn with tiny flowers







*The substance designer file of this texture is missing, here is the unity material.

column bottom








Week9 Homework-LC

The tutorial I found is a video that teaching simulates the material of a vase. I haven’t changed much of the techniques taught in the tutorials, but I’ve summed up some experiences during leaning period.

Inspired picture9

Texture I made4

   The production of this material mainly consists of two parts, the first is the golden decorative line, and the second is the basic color of the vase. “Crystal” shape node is suitable for making this pattern. With “edge detect”, you can create decorative lines, while mixing “clouds” or “cells” shape nodes can soften those stiff segmentation lines. I mentioned it because I feel that dividing complex patterns into multiple simple parts and then combining together will make your idea clearer.

Render display

1 2 5

   The second thing I think essential is to focus on the role of “normal map” in material making. In the 3D model, the gold decorative line looks convex, but from the plane, it can be seen that I did not add height. This is because I increased the intensity of the “normal map” to 40. Conversely, when the intensity is 0, the edges appear very flat.


Intensity 407

Intensity 08


 In homework 8, I made two versions of the diorama, one comes with opaque materials and the other is transparent. All objects spread out on a reflective plane and compose an abstract picture. Most of materials I downloaded online are opaque so I need to convert them into transparent ones. Setting the ‘ Surface Type’ to ‘transparent’ and the ‘Blending Mode’ to ‘additive’ can turn the objects transparent and simultaneously maintain the original texture.





Different effect:




Homework 5-LC




 In homework 5, I want to blend the bump generator and the texture mixture that I explored in homework 4. There are two triggers in this project, the first group shows how the image changes from flat to exaggerated bump, and the second group demonstrates the mixture from 0 to 1. The shape deformer is a bar controller, which viewers can drag to change the geometry. The texture blending is a time-based animation but is triggered by a mouse press. 

group 1


group 2



Midterm Assignment-LC





 My project proposal is to make a four-scenes looped audio-reactive video, which conveys the exploration of the reaction between the dynamic elements and the music. 

   Let’s start with the first scene. In this scene, there is a circle in the centre that zooms in and out. Also, there is a torus surrounding it in a 3D Y-axis. Both of them obey the rhythm of the music. I highlight the part that shows how the code controls the movement. For instance, the ellipse size, the torus’s translation direction and the red hue are all bonded to the amplifier, and that caused the audio reaction and constrains the torus from doing the same movement, also the color will gradually show up along with the music. 

   The second scene almost runs in the same way but is controlled by another amplifier. How to set the value of the amplifier is actually one of the difficulties I met in this project. The size of the shape and the distinct pitch will both affect the zoom action. For example, if the shape acts violently in bass part, then it probably being static in treble part because it is over its dynamic range. Therefore, the amplifier is calculated differently in each scene.

  The third scene displays several overlapping rectangles extending to both sides of horizontal directions following the rhythm, and the last scene is a vertical direction stroke-colour switching rectangle animation. The former is still related to an amplifier and the latter is a self-color-convertor based on the time.

4 123



Project Link:

   This is my inspiration artwork so I used to pick this visual look to be my aesthetic reference. However, in order to activate my shader, I modify my project, so that it is not singly focusing on the stroke but also on the color filling. And the shader I modified is an amplifier and phase-bonded gradient color shader.


Artwork Link:



For homework 4, I made a dynamic blending of an animation drawing and a gold texture. I started with the week 4_PixelDisplacement example and toggle the target picture to my own one. This step is not complicated so I explored other examples to look for more possibilities. What I’m surprised about is the several blending methods included in BlendingTextures example. The default method is reaching the two-image transition according to the mouse X position, but I don’t like how awkward it works on my blending project until I find the min() function, which shows a soft perfect mixture effect. I picked this filter effect and merge it into dynamic coding.


Final Effect(gif)



I made a grid composition for the first exercise and added a simple animation that enables dot grids to move vertically or horizontally like a directional conveyor. (click the picture to see animation)

According to the previous exercise in which I practiced coding rectangles, I decided to create a pattern composited with arranged rectangles as well. My method of getting a desirable line is to draw a black rectangle first, then draw a white rectangle to cover the useless area. I want to draw a simple face wearing a bow(the right top corner rec)using rectangles, and what surprised me is that the positive and negative space between these multiple interlaced lines/rectangles makes the pattern more sophisticated. Finally, I added a gradient ornament background to increase the visual of this painting and arranged the curved patterns by module position.


Week2 Homework-LC

Week2 Homework


For the first exercise I mixed a gradient background and a noisy background with a y-axis gradient. I found these two methods online and modified the values depending on my desirable effects, so it can be an x-axis gradient, a y-axis gradient or a module y-axis gradient I post here. After finishing this part I added a circle to the canvas, also you can find the method on The Book of Shaders website and call it yourself. What I found interesting is that changing the mix() values in the terminal mix function is more logical to get changeable results rather than changing the method values. As you see these two backgrounds were mixed by the mix(), and what I did to get variable effects is only adjust the third value by different formulas.
However, it isn’t anything useless if you want to change values in methods. When testing the animation, I found that if you change the circle edge range from all positive values to mixed negative and positive values, the circle will demonstrate the opposite way.

Static shapes 

module y-axis gradient                                     01

Positive Circle/Negative circle and their radians values differences



Animations added by mix()








More Animatins Link