Author: Tae Nim

Photo-realistic Materials 

Create New Materials with Substance Graphs With Comments and Explanations

My Final Work: Application and Experience

 

 

Materials

Non-Default Skybox

Composition

Emissive Material

Type 1: Adjust the level of smoothness and matallic to create a material which can reflect a photorealistic skybox.

Type 2: Using the shader graph in Unity to create a reflective effect.

Type 1

Type 2

Inspirations or Influences

WebGL Online Link to Play the Final Project

https://play.unity.com/mg/other/webgl-builds-334772

Only PC computer works (Please don’t play with a Mac Computer)

UI of the Game

The final project was based on Homework Week 08 and 09.

MDA Framework

Animated Reflection for Shallow Depth

Deep Depth

VFX Graph Outcome (Failure)

Outcome of Blackhole

For the midterm project, I decided to continue the journey of the Thesis project, which is finding my identity and communicating it with audiences through understanding and sympathizing with the project’s narrative. Consequently, I have decided to create a Magic Mirror, which shows the illusion of transforming people into a flower form based on my aspect of human life. I insist our life is like a seasonal cycle, and we are a tree which blooms our unique flower. Our life cannot always be joyful; the heartbreaking moments will repeatedly come even though we are overcoming ongoing hardships. However, we should not give up; instead, we must go forward because of that moment of happiness when we bloom the flower, even though it may not be eternally alive. If we continue our journey by using this happen moment as a driving force to go through the harsh winter in the self-centred state patiently, there will be a friend, family, or acquaintance who will support and agree with our actions and journey. It is interdependency, and this is how we should live our life. This interaction needs a healthy power dynamic through effective back-and-forth communication.

Based on this narrative structure, I wanted to help societies wear a positive lens through that the present self is beautiful, like a flower, through art. Furthermore, I tried to cause their curiosity for them to think about the intention of creating a connection between the flower and themselves. This activity will help them to leave a comment with their interpretation while they are flashing back to the achieving moment when they bloomed their potential. I hope this becomes a positive influence on their becoming journey.

Design Process: MDA Framework

Aesthetic goal: Expression and Sensation

Theme: Growth

Message: Our current moment of life through the historical journey of hardworking is valuable and beautiful, and we all will have a moment of blooming potential as we live forward.

Dynamic One: 

Magic Mirror View

This is the screen you will see when Magic Mirror is not active. It creates a magical mood by distorting your looks like a colourful fog.

Mechanic: On the shader coding, use the “snoise” function to create a magical illusion of the mirror view of the camera. The cam view will distort and not repeatedly distort so that they can see themselves on the screen, which will give them the idea it is a mirror with some magical movement.

Dynamic Two: 

The Overlapping Illusion of the Author’s Transformation into a Camellia Tree

Mechanic: Through the coding, I have created an interaction where the png image can overlap the current view by using the mix function by reading the mouse position to control the picture’s transparency.

Dynamic Three:

Texturing Mirror View on the Flower Form

Mechanic: When the user clicks the mouse, it will transform into this view where they can apply themselves to the flower for back-and-forth communication. The “If function” needs to use on both javascript and vertex files to upload the object file and apply the camera screen on the top of the form like a texturing job. I did not add any effect because people need to see their faces clearly, which overlaps the form.

 

---

Click Here to Watch the Presentation Video of the Final Work

---

 

I added the physically crafted box to cover the computer screen and glued the hand-made mirror frame so that audiences can have an immersive experience where they can think that they are looking at the magic mirror. However, they still need to control the work dynamics with the laptop’s touchpad, so there are more possibilities that I can still develop the project further. For example, if I used the mouse position and clicking as a mechanic, input actions for output, I think for the next project, I can think of using a depth camera which can read users’ movements or positions to come up with the various dynamic so that I can exclude computer control for fully immersed experiences.

We were assigned to create a bump-mapping shader for the week five homework. As I started the journey, I started with my design process to discover what I wanted to express through the project. My thesis practice has developed from finding and expressing my artist identity through good back-and-forth communication by creating the performative critical play, which also involves my aspect of human life. I had an element that our life has a property of a seasonal cycle. Likewise, I have been using flowers as a symbol. Therefore, displaying the flower objects and colourizing them with the camera as a texture would be interesting. I wanted to create a relationship between objects and the audience for them to investigate my aspect through sympathizing and continuing their journey with their interpretation.

 

As a first step, I was using the code to change the object.

The second stage was to change the texture from picture to camera. While I was mixing the different codes, I encountered some issues, but I found the solution. First, I changed the object’s size because it was hard to see the whole thing. Furthermore, I added the rotate on y value for more various movements.

I tried to change the amplitude by multiplying tan and more numeral values on changes by time and speed of the texture coordinate. Moreover, I also took a further step by using the noise function to change the camera screen more rhythmically.  In the end, this week’s project was successful. I can add more interaction using mouse placement to affect the shape movement on javascript.

Final Work Link

https://editor.p5js.org/AlexNim/sketches/DyjrPvqU6

 

This week was the most challenging and took the longest time out of my weekly home-works because of the new experiments I did with the new medium: p5.js.

For this week, I started my work based on last week’s homework. P5.js combines with html, css, and js, so I wanted to pull up the previous week’s task to continue the journey. Based on the code, I tried to use noise interactively by texturing the picture by reading the mouse position. I loved the ending, but I needed to take this further.

For further steps, I changed the picture to a different one for visibility. Moreover, I also adjusted the coding to create a different shape as a new work of art. In the end, I liked how it turned out since it reminded me of the flower shape, the object of the picture I used. Moreover, it created a connection for delivering the story, so I decided to step further to explain my design intention of the code.

My thesis project is about adding multiple layers for various target audiences for inclusive and clear communication. Therefore, if I said another perspective that shows the design motive, it could give the audience a clearer image of the shader I created.

From the last week’s homework, I wanted to create multiple layers, so I got inspired by the first picture and tried to add the shader. However, I realized I could not apply the shader this way. I learned that there are ways to use texture to the shape, but for this trial, I could not direct the shader by putting “leftBuffer.” or “rightBuffer.” in front of the “shader(shader1);” I even tried multiple times to fix the code in different ways, but I still did not figure out.

For this stage, I tried the new method of creating two canvases. It seemed successful initially because it worked well if I applied the shader on the left side canvas and left the suitable side canvas without the shader but placing the rotating shape. However, the problem occurred when I tried to add a different texture to the right side shape. Even though I directed the two additional shader files for two separate canvases, the shader would only work for one canvas. Furthermore, the shader needed to be successfully applied on the shape I created on java script since two canvases’ coding were colliding and causing a technical issue.

While trying to find a new way to solve the problem, I came up with an idea to use other png pictures to blend two different textures on one screen by reading the mouse position to control the visibility of the photographs. This way is much better than splitting the view by using one canvas. Moreover, the overlapping effect will create a much stronger bond and make a more neutral way of flow and transition that will help audiences to come up with the idea of the design intention that I was trying to express the natural object: a flower, which I tend to use in my project often as a symbol.

Link of the Final Work:

https://editor.p5js.org/AlexNim/sketches/Li950C3D3

 

 

Introduction:

Influenced by Amy Goodchild’s Blog Post 

Before continuing my journey, I was inspired by Amy Goodchild’s blog post, ” How Does it Feel to Make Generative Art?” I agree that the design process is a discovery rather than a creation. Therefore, I have been expressing my homework as a “journey” based on the “Becoming and Being Approach.” I saw the YouTube video by UI/UX designer that new artists tend to think the design process is something that creates a whole new idea, but in fact, good design comes from several trials and discovering the best match and connecting them like a spider with considering previous artist’s historical practices. Likewise, the journey we are stepping toward the future is a discovery since we believe in the potential of finding our custom-made way of becoming one.

Journey Based on the process that Goodchild Took

Based on my previous post, I also started with an idea based on a specific image: a galaxy. After I had set the concepts, I stepped forward, but I “let the process take me wherever it goes.” I used to think it was a failure since it always did not come out as my expedition, but putting Goodchild’s lens, I could look at my whole journey differently; it was the”best-laid plan.”

 

I started my process with the first project for week three, and I decided to use the second background as a background. Even though it was not intentional, the shader surprisingly gave me a magical and surrealist mood. Even though the second picture was part of the process, while re-mapping the work, I decided to use the second picture as a background source. The shader was almost like a creation without a “roadmap,” created under the experiment of combining week one code and noises.

 

For this week, we need to get involved with shape and pattern. Even though I am going with the flow to find a “Happy little Accident” during the journey, I still started with the specific concept and image. When we think about the shape or pattern, we used to think of it as a stylized, repeated, identical, or structured way of expression, but I wanted to portray something different, which is a natural shape and pattern with curvaceous lines and randomness into it since my practices are influences our daily life or seeing which is from the nature. Consequently, the concept of the universe also came from that process. Therefore, I started with the week three practices and changed some coding to the circle. However, it only creates one big middle circle rather than the random pattern and composition of the various circles. Therefore, I needed to find another way to come up with a building design and print by harmonizing the variety of the creation of the circular shape with coding based on the inspiration of the “Balance, Dance, Collaboration” from Goodchild’s blog post.

This is where I started after I went through some office hours before I began the experiments.

vec3 hsb;
hsb[0] = random( vec2(i, 20)); // hue
hsb[1] = 0.9; // saturation
hsb[2] = randomRange(vec2(i, 30), 0.45, 1.0); // brightness

// convert to rgb
vec3 shapeColor = hsb2rgb(hsb);

// mix color where shape == 1.0
// otherwise keep previous color
color = mix( color, shapeColor, c);

First of all, I was trying to change the by applying the colour based on the week three shader example, with putting “float randomRange” before I put those on the “void main().” However, it did not work out because how the example code was created and how my code was created were different. Therefore, this function was not working, but it still gave me a hint that I needed to use the float function to direct the randomness of the colour if I wanted to apply each circle’s colour variously.

After all, I tried to use a different tutorial link: https://www.youtube.com/watch?v=dhuigO4A7RY. In the video, he multiplied the colour: “vec3(.05, .07, 0.8)” on the “float size,” which is placed inside of the “i,” but it did not work. However, this process caused me happy accident of seeing the unexpected result. So I changed the line like, “c += circleBlur(st, vec2(x,y* vec3 (0.5)), size );” this way, surprisingly, it creates the depth by tilting the angle in y value and makes it more like a galaxy-like scene.

However, I realized my code has a difference of having one more line or step that is saying that “color = vec3 (c);,” rather than this c value going directly to the “gl.Fragcolor = vec4 (color,1.0);.” Therefore, I changed the plan to multiply the colour value by the “c” value, and it worked. For the further step, by using the “u_time,” I have decided to add the colour change, but the equations are getting too long, so by following the tutorial, I added one more line: “vec3 colour = sin (vec3 (0.1,0.2,0.4)*u_time)*.5 + .5;,” so that I can simplify the line that direct the information of colour by “color = vec3(c * colour);.”

Nevertheless, I still could not figure out how to randomize each circle. According to the tutorial, he used the “fract” in the ShaderToy, and the book of shaders also uses the “fract” tool, but of course, his and my way of coding was different, so I needed to find another way. Consequently, I tried to change this line: “float size = random(vec2(i, 202))*0.01;,” which looks pretty similar to the bar in that he added the “fract” function in his tutorial, but it did not work. Likewise, I am still curious about how to use the “fract” to change the individual circle’s colour.

In my final steps, I tried adding those circles in the foreground of the shader I worked on in last week’s homework. Based on my previous coding experience, I organized the code to combine multiple coding.

vec3 colour = sin (vec3 (0.1,0.2,0.4)*u_time)*.5 + .5;
vec3 frontc = vec3(c * colour);

vec3 chole = vec3( smoothstep(.7,.75,fract(DF)) );
vec3 gradback = vec3((angle/TWO_PI)+radius*sin(u_time),1,1);

color = chole*RGBcolor(gradback)*frontc;

gl_FragColor = vec4(color,2.0);

However, I did not know how to put the two different values of angle and radius for two additional codings, and it caused them to combine rather than put those two coding in separate layers. However, P5.js can create different layers, so I can investigate and find more ways to solve the issue in the further weeks.

Even though it caused of unexpected ending, I am satisfied with the result because I also made the discovery that Goodchild highlighted. Significantly, the shader creates line movement, and it reminds me of “Time Flies” presented in her blog post since I also think my outcome shows the harmonized rhythms within the dynamic movement. Therefore, this week’s activity was a valuable experience that taught me to see things from a different perspective and accept various discoveries.

 

 

 

For Week two, I am continuing my journey from week one, which is creating a galaxy scene.

I was using week one work as a background, and I tried to add the circular shape so that I could pattern it to look like a star on a galaxy for the next week’s homework.

I thought the background was too simple, so by adding the noise, I wanted to create a free movement rather than a directional and set movement.

However, I still felt that there was more potential that I could go even further, but I was stuck. Therefore, I started again with this code that I got after officer hour.

However, I still felt there was more potential for me to go even further, but I needed help. Therefore, I started again with this code that I got after officer hour.

After all, I tried to add noise and explore even further.

In conclusion, I successfully organised more than week one, which will help me build up the journey I am going on. For week one, if I needed clarification and help to understand the concept while producing the work, I learned about the idea and how creative coding results. Furthermore, I was happy that I manipulated the code and changed the existing code under the specific purpose. However, it still does not look like a galaxy, so there is still more room to explore and go even further.

 

It took me quite a little time to fully understand the GLSL system. However, according to my research, it is a coding system with outcomes based on the input setting without interaction. Therefore, it was fascinating to see different artists’ output, which is their art of pattern, colour, animation, and even more than that has been produced based on their input with the GLSL coding system. Furthermore, I see that it is not limited to geometrical outcomes; I saw many examples which express ocean, jellyfish, view through a car windshield, beach, rain, and many more that would inspire me. Therefore, even though we start with the activity of creating essential gradation and mix functions, as we go forward, there is so much potential we can do with those learnings.

I got inspired by the logo I created, which symbolises the final project. For the logo, I tried to express The Eye of Typhoon to express the stormy situation that the work describes, and at the same time, if we are self-centred and patiently waiting, the storm will end and get stronger through overcoming. Additionally, the three-dimensional metaverse, which expresses my conscious mind, is a space environment, so it would be interesting to create a shader pattern that looks like a storm or galaxy by manipulating the colour and animation.

#1

#2

Three Uniform settings and their working description: I chose only two purposely based on my inspiration.

When I first started coding, I did not quite understand how we could stage RGB colour in writing, so I put some side notes so that I could know as I got going.

#3

In conclusion, I am satisfied with what I got in the end, considering it is my first time using GLSL. I was successful in the way that I created the animation and adjusted the colour gradient to make an design with its intention. Furthermore, I was happy that I stepped further and began animated movements using the Sin function. However, at the same time, I also felt the limitation due to the need for mathematic and scientific knowledge when I was trying to change the existing equation. I needed to understand how the equation produces the outcome in a certain. I understood partially, but since I did not understand fully, I still have more space to upgrade the code by adding more gradients to make it look more natural. The application code also covers the week two learning, so as I am learning more and more, I will find the better answer as I get going.