Joycelyn Wong – Final Project: the unexistent room

For my final project, I wanted to create a surreal room that is full of natural elements. This is inspired by the Ghibli movie castle in the sky and 3d room on Pinterest. I think it would be interesting to see the paradoxical combination of technology with nature. This room would be used as a guide for my graphic design work therefore some of my posters are present in the room.  

To create a surreal atmosphere, I used a dissolving shader to create unrealistic floating spheres that act as light sources. I also didn’t use regular materials such as cloth, leather, or wood to apply to my furniture. I used crystal for computer screens, glass for the chair, grass for the floor, and cloud texture for the sofa. Even though it is surreal, I tried to make all the materials look realistic to create an illusion that this might be seen in the real world to enhance the paradox. 

During the process of making, I have encountered many obstacles, for instance, the water shader would not work applying on the wall as it calculates the water depth based on objects underneath it. In this case, I needed to find an alternative shader instead of insisting on it. Otherwise, I would adjust the shader graph and achieve my expectation, for example, adjusting the vertex of the grass (at first when I tried to apply animation following the tutorial, the grass’s vertex would be so away from the center and become invisible). I also had to figure out everything from scratch since HDRP is kind of different from URP.  

Overall, I really enjoyed this project since I got a chance to explore the possibilities of Unity and substance designers.  

screen-shot-2022-04-29-at-7-33-49-pm

screen-shot-2022-04-29-at-7-33-45-pm screen-shot-2022-04-29-at-7-33-59-pm

Joycelyn week 9 hw

In the first part of this week’s homework, I experimented with Perlin noise,  tilted shapes, grunge map, blend, wrap, and gradient map to create this colorful metallic texture. I boosted the heightmap with a different liquid map to make a watery texture. In my opinion, the final result resonates a bit with the cyberpunk art style.

screen-shot-2022-04-17-at-7-19-39-pm

In the second part, I followed the tutorial and create a lava-like texture. Although there are obstacles to work with the heightmap such as the distribution of the tessellation, I solved them by using a cylinder or hi-res plane to display texture instead of low-res plane.

screen-shot-2022-04-17-at-7-18-14-pm

Joycelyn week 8 unity

In this week’s homework, I explored the PBR material websites https://ambientcg.com/ and the 3d model website https://free3d.com/ to build my scene. I experimented with the tiles and gravel materials. For the tiles, it was pretty straightforward and easy to adjust the values. However, when it came to gravel, it was quite confusing as the displacement map was not quite compatible with the height map (as I could not find the displacement map option ). I tried the dx11 tessellation unity extension but it was not working too. Therefore, I toned up the metallic value and create a new texture out of the original PBR gravel texture.

screen-shot-2022-04-03-at-1-18-15-am

Joycelyn Wong – week 7 hw

screenshot-2022-03-19-at-11-55-37-pm

https://editor.p5js.org/jowongg/sketches/WLQ3Tnb-8

During building 3d geometries in p5.js, I tried to create space by scaling up as well as rotating a square to mimick a room space and add a change of perspective. I also placed a square surround on two floating rotating spheres and torus to create an eerie atmosphere.

screenshot-2022-03-19-at-11-54-08-pm

https://editor.p5js.org/jowongg/sketches/EzqLNyt1v

In bumpmapping, I explored displacement with step function, which created a laggy and pixelated distortion on my image. The distortion only appears when the slider value is between 0 and 1. For the image itself, I tone up the exposure and vibrance to make the color more defined and distinct to maximize the bumpmapping effect.

Joycelyn Wong – Midterm assignment

Link: https://editor.p5js.org/jowongg/full/pfnocqp2f

For the midterm assignment, I decided to develop multiply mirror shaders based on the shader’s knowledge I have learnt in class including hsb color, time, shape function, grid, layers, and color theory.  

In the first mirror shader, I incorporated the negative color and the hsb circular wave from week 2 homework to create a pinkish pixelated effect on the live video. Animation was also applied to gradually reduce the size of the cells to establish the effect of pixelating. 

screenshot-2022-03-19-at-6-45-31-pm

In the second mirror shader, I wanted some effects like frosted glasses. I experimented with distance function to distort the live video with a vague circular effect. There are two layers of the shader, one is a grid of distorted live video, and the other is a full-size distorted live video in which the color is divided by the grid one. It surprisingly created a bubbly cyan glass effect. Animation was applied to reduce the size of the cells to gradually present a clear reflection of the live video. 

screenshot-2022-03-19-at-6-38-46-pm

In the third mirror shader, I applied the light-dark contrast theory from week 4. I used time and fract() to allow random rows or cells to have the darkest brightness among the grid. The grid is formed by negative color live video with a pair of tertiary colors – dark purple and bright pink. I added a full-size live video in the background to add some visual variety.  

screenshot-2022-03-19-at-6-45-28-pm

In the fourth mirror shader, I used snoise to distort the live video. I added an animated rectangle in the middle to allow the interaction between static animation and live video. 

screenshot-2022-03-19-at-6-38-57-pm

Throughout the assignment, there were obstacles such as not knowing how to work with color in p5.js and the code did not work as expected. Fortunately, I was able to solve it in the midterm workshop period and develop unexpected code into surprises.  

Week 4 Color Harmony

screenshot-2022-03-05-at-11-40-05-pmscreenshot-2022-03-05-at-11-39-42-pm

In this week’s homework, I tried to experiment with triad color, complementary color, and contrast of saturation in my two shaders. I didn’t have a clear goal on aesthetics or outcome but decided to follow the flow of the code and see what comes along, where the contrast of saturation shader surprised me. I expected a pair of complementary colors on the shader but due to the gradual change of situation, it ends up with a bunch of colors – multiple pairs of complementary colors. With u_time, it creates different combinations of complementary colors.

For the triad color, I tried to apply it to my pattern work from last week and combine u_time to change different combinations of triad color.

 

Week 3 Homework

screenshot-2022-02-27-at-5-22-23-pmscreenshot-2022-02-27-at-7-43-49-pm

For week 3 homework, I am still trying to get a hang of the grid theory and logic, and therefore these are pretty simple compositions. While creating these gradients, I found out that the order of codes is critical for example if I coded a line before a function, the line would not work but worked after coding it after the function.

Week 2 Homework

screenshot-2022-02-15-at-8-59-12-pmscreenshot-2022-02-15-at-8-57-23-pm

Through creating the above shaders, I have obtained some logic behind the codes and functions. For example, I finally realize that the color is represented with numbers (yes my brain is not math enough to comprehend) and therefore visualize and make sense of the functions. It was interesting to see how code and math can actually create art. It is like meshing two unrelated areas of studies together.  Sometimes a small mistake in codes could be surprising too. By just doing these exercises, I could notice that this medium owns huge possibilities to explore the combination of mechanical and human aesthetics.