Week9-Ziqi Guo

During this week’s exploration, I made some practice on creating materials and paintings using Substance Designer.

  1. In the first one, followed by the in-class tutorial, I made an “earth” texture.

I think I was impressed when I found that the material could be bumped. However, rather than making them as a random texture, I found that I could apply the bump to make the object as earth’s face. It might also be cool if I can create flowed “sea” on the earth. I later applied the flowing effect on my final assignment by having textures in substance designer and the motion effect using time node in shader graph in unity. week9-2

2. I later tried the beginner series tutorials and made some interesting patterns with geometrical shapes.

When I followed the series of tutorials, I found that node-based coding is way more attractive to me compared with conventional coding. Because all I needed to do is to understand the parameters behind each node, I don’t need to remember how to write the code. It is also way easier to debug. Because when I used the typed code, I need to pay attention to the spelling, the typos etc. Moreover, even though I haven’t tried to use code to create the complexed geometries, I know that each different geometries need different codes. However, when I use the node-based code, I only need to change the number of the angle, it is really similar to photoshop. There are a lot different patterns being created faster than I expected using substance designer, so I think I will use that to create my own textures.

week9-1

week9-3

3. I finally made my virtual fabric and apply them to a 3D model.

I choose this tutorial because I was impressed with how it made the detailed fabric. This made me believe that I might in the future create a wearing object for the metaverse. I like how the tutorial creates two different textures with the same geometry. The overlapped tiger’s texture is like in different fabrics, both matte and reflective. I also love the way where the tutorial took a lot of analysis on how to refine these details, as well as how it compares different results. To make an object, it is not enough to only have the right color and shape (models). It is also important to pay intention to their fabrics.

week9

citation: https://substance3d.adobe.com/tutorials/courses/First-Steps-with-Substance-3D-Designer/youtube-VyFgpitTsYg

 

Week8HW-Ziqi Guo

 

In this weekly assignment, I tried different models/objects with different PBR materials. I found photorealistic PBR textures from https://freepbr.com/materials/worn-blue-burlap-pbr-material/

The texture of the background is from the web: https://ambientcg.com/view?id=OutdoorHDRI020

fa1dd08fc119df7e0d698cc95731fbf 0dc9c3ef3e4fe49de1b6ec00e8fe433 e2d22114712afe718cb4cf3475334eb

Week7 HW

Prctice1

In this week I explored different 3D objects in p5.js. I learnt how to manipulate their shapes, moves, and textures. As a result, I created toruses with colors and a slider, one box with texts.

ab3afa52a04e7f5aec2ce2ea83b794a 6aeb86f81abafff415574c36c588bba

PRCTICE2

I used some images that I created during the midterm, I found that things worked better in grids instead of gradients, especially when there’s a clear contract color. The gradient did not work so well, especially when there is a gradual change.

4f3c3b1d14d7dc7fa6fb1b71014968f ca4dafa9e94c252c9a0e490bfe3a51f aa665ae788c240293ce1bbf52e2687a b70b73f4343c60cafba868bb2ba7c26 07e1737af61625ff9f9e6a8b4def769

Code2

Code1

Midterm Grouowork (Ziqi Guo)

Final Work in P5.js

Notes to the random code practice on notion & study notes

shaderatr-process

shaderatr-process-1

shaderatr-process-3 shaderatr-process-2

shaderatr-process-4

Links to Works Cited

https://glitch.com/@kcconch 

https://glitch.com/@kcconch/p-5-js-shaders 

https://editor.p5js.org/ziqigg126/sketches/2hQAWgBap 

https://glitch.com/edit/#!/lime-living-bambiraptor?path=uniforms.frag%3A77%3A1

https://editor.p5js.org/ziqigg126/sketches/O2_x4FqLh 

https://thebookofshaders.com/ 

Nice Color Tools: 

https://www.sessions.edu/color-calculator/ 

https://imagecolorpicker.com/

 

week4 HW-Ziqi Guo

This is the first time when I used code to make a three-color mix. I used color RO, Y and BG. Initially I thought that I need to reduce the number that I had claimed to make them being 3 instead of 12. I later discovered in the following lecture that i may not need to do that. I can just call each number of color when I need it.

b62e033710e490ceeb3cbf37f8769d0

I later tried to replace color in a 5*5 grid, this time I took the color from the square instead of triangle.

622b76796ece13b1aafc9643e1f0ab3

I then tried to make the four colors on a set of circles and add some dynamic motion.

2af2955b5c599417baf62e6fd5cdaf5 edb4af55cd7ab9adb536974f2e8bb0d 21be272b1d1334158c801118e34cf04ec3bd69f2fa2fc05e6983c19d726c40

Video: https://youtu.be/qRlKJfVgu7M

Code:

https://gist.github.com/Grace-pc/05c7e72fa8bcdba7f130f29f20ad849a

https://gist.github.com/Grace-pc/77e6231b03ab8d6874bd693ca77204e7

https://gist.github.com/Grace-pc/7fe837756dc41754594ae830d0ab0cf0

 

Week3 HW-Ziqi

  1. In this homework I explored how to make a gradient and blur circles with color changing along with the hand m oving.The Updated Code for Week3

    video: https://youtu.be/JrE_Mb3LAdE

    ae0d52d5d8a172c3caaa61db450088c

95167b35f815f9c38669ce857def7a9

12d6757e38ce34c2714fe05b0a910ab

2.

  • HW2In this homework I tried to make a dynamic sets of cells. I tried to change the shape of each cell and make them as new. I also used a variant called “change” to modify different motions.

    The updated code

    video: https://youtu.be/4ZPOBLIhLBA

2bba330ae5236cb932e220cc9f8081f e5fef3870d6bb5da3c52d06dc02f874 3fea2a418a1db935a4ae7fe550ab6f0

Week2HW from Ziqi

2c667869444f5f0f2a63d722415d6c8

  • Gradient #1: In this activity I tried to use one gradient and two different colors as variables. I used mix() to be the main function and I also created some interaction within it to control blending. 

Video: https://youtu.be/nU34qZ46VqU

Code: https://gist.github.com/Grace-pc/7bb15be76eeced1a86265144d0df789a

 

8b925efadec8cca6051d0fc56686e8977cb52148557bb14db5959634456b7f fd69469f8bd85250182207281173294a66cae10017d68c88f8b5e46a4fa57c

  • Gradient #2: In this exercise I used HSB, sin() function, fract() and mouseXY to create an floating, interactive wave. 

video: https://youtu.be/yXH6-dOHh84

Code: https://gist.github.com/Grace-pc/2ea8de1e48a6d431570e2e479f2e4fa2