Week 9

screen-shot-2022-04-12-at-2-55-46-pmTutorial 1: https://youtu.be/mHK-TqhXtmc

Tutorial 2: https://youtu.be/NfqNYxD1UsM

I chose this fabric tutorial for this week’s assignment.

I mainly followed tutorial 1 for the heightmap and texture. The instructor explained what each node is for, and how they work together. The tutorial breaks down into parts, from creating the main weaving pattern to adding details such as hairs and fuzzballs. They are not complex but simple nodes combined together and formed interesting results. I think the most difficult part is not observation in real life, but knowing which function to use and how to combine them to get the closest result.


I followed tutorial 2 for the final blend layout, I learned how to modify material defaults and ambient occlusion to alter the 3D view. I used a simple gradient for the albedo output.


Week 8


It is fun to explore different functions in Unity.I mostly used metal materials. I also experimented with concert, rock, and other materials during the process. The models are from https://www.turbosquid.com/, and the materials are from https://ambientcg.com/.

I separated the model in Maya so I could add material to each part. I tried to use cubemap and panoramic shader to change the skybox background, yet the image kept repeating itself in all dimensions. I also tried the procedural shader, it works well with low poly scenes, but not for realistic objects and materials. Eventually I used a free asset from the asset store for the skybox image.

Week 7

Push Pop Orbit: https://editor.p5js.org/tong.lu2002/sketches/fmoNq0cm4


The sun and the Earth are stand-alone objects, only the moon is appended to the Earth. I used multiple rotation methods on the sun, and lowered the details to show edges. The moon’s orbit is affected by the Earth’s orbit, and their own rotations or spins are isolated.

I struggled a lot with the moon’s orbit when writing this sketch, I could not separate it from the Earth’s rotation. The solution is very simple, I added a push pop command for the rotation, so it won’t affect the orbit revolution.

Bumpmap: https://editor.p5js.org/tong.lu2002/sketches/AJEBZLP3sscreen-shot-2022-04-01-at-11-43-27-am

The 5mb upload limit of p5.js only allows simple meshes. I changed the scale and the rotation values of this mesh in the .js file, so it can fit in the canvas. The texture became not obvious on this mesh, so I increased the slider value to alter the dislaceAmt value.

I tried several models, some of them are too large to upload and some showed collapsed faces during displacement. The original pivot point of the heart mesh is at the bottom of the shape, so I centred the pivot inside Maya to have a natural rotation.



Team Member: Zoey Lu, Sara Hosseini

Links: https://editor.p5js.org/tong.lu2002/sketches/hzsI-Nh82

The main goal of this project is to have multiple scenes of audio visualization and use the amplitude to control the elements in the scene. The .js file comprises four main components: change scene functions, draw scene functions, music amplitude functions, and other side functions (ex. fullscreen). We used the AnimationWithScenes file from the lecture as the framework, and adapted attributes from AudioPlaybackWithAmplitude into it. Then we add scenes into the framework. The first part is the global variables, they are values that can not be reset. The second part is the change scene functions, where all the scenes are organized into draw’Scenename’() functions. The third part is the preload function, where the song, shader, and font are loaded before starting the sketch. The fourth part is the setup function, where variables and arrays are given a stable value, so they can be involved in the later calculation and not be reset. The fifth part is the draw function, besides assigning dynamic values to the variables, there is also an 80-sec loop that displays the scenes. The last part is where all draw scene functions are located. 

We started with interesting examples in p5.js reference for each scene, such as particles (https://p5js.org/examples/simulate-particles.html) and analyze (https://p5js.org/reference/#/p5.FFT/analyze). Then we built the scene in a separate sketch file since it is easier to test than the whole change scene framework. When we get a satisfying result, we import the scene back to the main framework. During this process, we found that our code can be more simplified, which is very helpful and make the entire structure organized and clear. Then we make sure the change scene function is working correctly and alter a few numbers to make the final result fit into the framework. We had a lot of creative decisions along the way. The first draft of the scenes is very basic. As we got more comfortable with p5.js, we started to add more elements to the scenes. For example, scene2 (third scene) originally only had soundwaves. As we were testing it in the main framework, we began to add the dots and the cube into the functions.

The most challenging part has to be placing the elements properly on the canvas. We spent a lot of time debugging and trying with different numbers. Testing the scenes and the shaders also required a lot of time as our code became lengthy. One small change of variables and break the entire sketch. We felt a sense of accomplishment when we saw the shaders we made in The Book of Shaders Editor are applied to the scenes, it gave us a lot of confidence to keep exploring new possibilities. There are still unsolved problems, such as the canvas now only can switch between fullscreen and full window (windowWidth x windowHeight), rather than a fullscreen and limited size (ie. 800×600). Overall, we really like the final result.

For this midterm project, I worked together with Sara Hosseini. She had a wonderful idea about audio visualization, and chose the song Frozen – Madonna vs Sickick. We found that we had similar interests and goals for this project, and we decided to collaborate. I learned a little bit about javascript in the last semester year, so I took the job of building the scenes and shaders, then integrating them into the framework. For the first scene, I used the particle example from p5.js to imitate the galaxy. I made a gradient shader to simulate the shift in light. For the second scene, I used lyrics from the song combined with falling particles as snow. Yet sadly the text can not be affected by the shader, only the color of the snow can be changed. For the third scene, I used resetShader() function to isolate an object from the sound spectrum. I also added randomly generated dots when the amplitude is higher than 0.20. The last scene is a simple audio visualization, yet it is interesting to see the sound waves on canvas. It is much more difficult to make shaders in p5.js, since they are no longer displayed on a large screen but a small element (ie. rect or circle). Sara gave me a lot of motivation and inspiration. We worked really well along the way, and I hope that we can work together again in future assignments.

Week 4


I think this week’s material is the most difficult. When color and code both are logically challenging, I can feel my brain begins to hurt.

This week covers a lot of color shaders, I tried to understand each line of code. I went through the shaders along with the lecture to see how they function and played around with the attributes to get a new result.


Week 3

1Shader 1

I spend a lot of time going over the textbook and example shaders, trying to figure out the logic. It is still very confusing after studying it, but at least I can make some simple shaders with what I learned. I changed some attributes such as shape/location/radius/color, so they can change based on time or mouse position.


2Shader 2

For this one, I spend a lot of time debugging why it won’t detect even and odd cells. Turns out it is a simple mistake with the createGrid function. I had a lot of fun adding different patterns. I think I start to get a sense of how shader language works.

WeeK 2

screenshot-2022-02-25-091904Gradient #1

For the first gradient, I explored how repeating sinuous waves affect the color mix. I’m getting familiar with the shader language and trig. I also experimented with other methods such as mouse interaction and smoothstep to control the blending.



Gradient #2

For this one, I studied some examples in the Book of Shaders. I used the HSB file and played around with different shaping functions. It is animated by time, and the wave size can be controled by mouse. I also added sin() into the disctance calculation, so the central circle can move across the canvas.

Overall, I had a lot of failed attempts, but it is also very satisfying when it finally worked.