Author: Lily Cen

Proposal:

   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: https://youtu.be/jIv003CTy-A

Tutorial Link:

column top_the lawn with tiny flowers:https://youtu.be/srW8hk85uQ4

character_ crystal:https://youtu.be/M0McqKrcezg

plane&rock_glacier：https://youtu.be/guHMAbI7mUI

 

Materials(self-made) showcase:

character_ crystal

column top_the lawn with tiny flowers

 

plane&rock_glacier

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

column bottom

 

 

 

 

 

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 picture

Texture I made

   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

   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.

Plane

Intensity 40

Intensity 0

 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.

Diorama:

Material:

Different effect:

Parameter:

 

Materials:

Link:https://editor.p5js.org/leejaneee/sketches/NhgrLwClp

 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

 

 

 

 

 

 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.

 

 

Project Link:https://editor.p5js.org/leejaneee/sketches/quQKJq78M

   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:https://www.instagram.com/p/CoaTmZXOZMS/

Option#1

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.

See pdf

shader-art-exercise1-google-docs