Author: Aimee Chen

Hi! We are Aimee and Doris.

If you want to play around with our Mushroom Garden ↓

>>> itch.io

>>> Video Walkthrough (in VR)

Inspiration & Ideation

For this Assignment, we plan to build a VR gallery to display our models in a Mushroom Forest. The render of materials will be anime style, which is inspired by Doris’ pro shader presentation research. The anime stylized render is inspired by Genshin Impact. We used the real-world object, mushrooms but render it in the anime style. 

For this project, we used Maya and a blender for modeling. Substance Designer, Shader Graph, and Substance Painter for the shader, Unity for building the overall environment. 

Concept

The overall environment uses a yellow tone. We wanted to emphasize the impact of desertification of land, desert encroachment, and deforestation. The flower flake shape and the bottle are rendered with plastic material, which advocates for everyone to protect the environment and reduce the use of plastic or throw it on the land. 

 

Learn from the Project…

Actually, this is the first time using Unity to finish a project for Doris, and we learned a lot from this project. Not only how to make shader graphs or materials in Unity, and also how to generate a shader in Substance Designer. In the process of making them, the most important thing is to learn how to switch thinking ways. I started to think about how to form a series of patterns from simple shapes, and also how to bring my drawing skill into the shader.

Codes

Crystal ↓

Grasssbase ↓

Ground↓

 

Grass (Shader Graph in Unity) ↓

Flower Sculpture↓

Environment Setting (URP) ↓

Hi,

For this week’s exercise, I planned to do the shader for a mushroom, but my Ds keeps crashing when I was editing the normal map. So eventually I made a shader from my last week’s cracked ice cube. (Tutorial: https://www.youtube.com/watch?v=kpITuZi2YK8)

Normal Map: Shape Splatter for pattern and mask > Histogram Scan creating randomized dots and use Distance parameter to increase each dot’s distance for the cracked shape > Auto Levels to enhance the contrast of the cracks > Edge Detect for outlining the cracks > Flood Fill + Flood Fill to Gradient for coloring and shapes > Blur for a smooth look. But the image that generates by the Edge Detect parameter is not perfect, there are some small dots there still. (even though I did maximize the distance)

 

Roughness Compare: Metal 006 Roughness (left) – Cracked Roughness [Downloaded] (right)

Thanks for reading!

Hi!

For this week’s homework, I experiment with the basic unity 3D objects, a cube, and a sphere. So I imported an HDR sphere (png) as a skybox (created a new material) as the environment. And other two new materials for these two objects. Then match the material with corresponding pictures. For the cracked ice material, I set the smoothness to the max and we can see its reflection in the surrounding environment (from the picture shown above). By contrast, the snow frosty one has a very rough surface. Unfortunately, I didn’t figure out how to show the cracked surface of the cube, it looks very flat for now.

This was a very basic attempt. And here is a screen recording of adjusting around the smooth level to have different views >> https://youtu.be/1Hdjf-KhNbU

Thanks for reading.

 

Practice #1
Practice #2

Hi! For this week’s practice, I’ve tried 3D objects in p5 for the first time. So I started up with basic geos. I applied fill()/noFill()/stroke()  for trying out different shapes/outlines with colors. I also used translate(p5.Vector.fromAngle to make them move around the space. For the second practice, I uploaded two png/jpg. with bird’s feather. “feather2” works much better than “feather”. It might be because the feather shapes and colors are highly contrasted on the surrounding inner/outer feather.

Thank you.

Link to project: Shapes, Colors, and Time

Edited by: Aimee Chen + Doris Gao

  

Hi! For this project, Doris and I experiment with the animation using the basic color palette. We select our colors from Photoshop first. Our animation starts from the color change of rectangle blocks (divide canvas by rows using floor() function). Then we used noise for the second one, as the wave is descending out of the canvas, we introduce the third animation. The colored rectangles move in from the right to the left and as time (we change the time for frequency) goes by, it eventually becomes a dynamic color gradient animation, which is really interesting. In the following animating we used mod() to make the time loop between two fixed values (using float t = mod( uTime, 100.) +100.;）so we have the audio wave-like animation. The last frag is a mix of five animations using an if-else statement for setting up the time range (timer is in the frag file but other timers are in the js file. We used noise input and distance(), step() for varying animation effects, and mix() for the colors.

I focus more on adjusting the time duration and the canvas. We had the issue presenting the canvas using gl_FragCoord.xy/u_resolution.xy;. It was very unstable. After the discussion with the professor, we found that using vTexcoord which relates the pixel on the screen to the position in the canvas. We also had a hard time getting the timer works for switching the animations. Then we found that in the javascript sheet, we didn’t give the correct value to uTime so it’s always 0. To assign the value, we need to have the statement: let seconds = millis()/1000.

For this midterm assignment we encountered many issues but we also fix most of them. We’ve acquired the basic knowledge of color, shape-changing, and setting up a different section for canvas and time slot.

Thank you.

Week 04 Color Harmony (Interactive) > Code

For this week’s assignment, I’ve tested around with my last week’s code for this week to make it a mouse interactive one. the grid set up is different from last which I just multiple the st unit rather than used tile(). And set up radius use smoothstep() for the gradient edges. This week I created a mouse interactive one, which is different than last week which changes as time value changes. There are still many aspects or other functions that can be explored here. I will keep experimenting with more of them. Thank you.

 

Revised Version: https://editor.p5js.org/Rresw3ly/sketches/VQL0ofjqu

 

Gradient #1 Code

Gradient #2 Code

Hi! I’ve experimented with the rectangle outline code for this week’s homework for gradient 1. Use borders to create the overall outline with rectangles, and use mix() to create the gradient color look. I also tried the displacement of two rectangles to create different looks (as shown).

For the second gradient, I edit the example from the book of shaders and play around with the color and scales [5*5, using tile()]. I also applied the u_time uniform variable to make it rotate over time [using rotate2D()].

Thank you.

Gradient #1 (smoothstep / mix / u_mouse.y) >>> Code

Gradient #2 (hsb-rgb/distance/dot/fract) >>> Code

Hi!

For this gradient exercise, I’ve experimented with a mix() function for two-color gradients and using sin/cos/tan, etc to change the u_time value. For the first exercise, I also used u_mouse.x  to make it interactive. The movement speed of the mouse will affect the smoothness of color change. For the second gradient exercise, I edit the in-class example to explore different color & time values and used the dot() [img.1]to replace distance() [img.2&3]. The saturation keeps changing over time (as shown in picture). This was a fun experience, and I would continue exploring other variables or applying more new functions. Thanks!