Author: Xiangyu Wang

This assignment is made with a blender, a 3d model software which can carve shapes, paint surfaces, and apply materials to 3d shapes. This assignment includes generated materials by google maps and materials from the website that I downloaded.

 

Demo One

The demo includes the city of Montreal, which is generated by an add-on inside the blender called “Blender GIS”, it is an excellent tool for me to search and scrape information without going to Chrome and connecting to the server manually. However, the city models could be better for generating. Especially the top of the tower was not in a sharp shape it looked just like rectangular; plus, the height of the buildings was not accurate enough; I needed to adjust them again and again. Plus, I watched another tutorial on how to make a city easily: I make the materials glossy with mirror reflection. To make this looks more realistic without worrying about downloading too many materials. It just needed to add a skyscraper picture with clear windows, place it onto the UV editor, and adjust building blocks to building photographs. The final result is not as pretty as I think compared to the tutorial.

Demo Two

Although using Blender GIS as an add-on could be better, I switched from Montreal to Toronto due to denser skyscrapers and buildings. The result could have been more promising than the previous one too. Thus, I decide to change to another method.

The final project

Here is the final project, which I spent a lot of time polishing, even though it didn’t look perfect.
This one is the texture of the cloud of the city.

 

This one is the city’s environment.

This is the material of the roof of the buildings, which was created by google maps

The texture of the building was applied from the texture website, and here is the final result.

Here is the result being rendered.

https://www.youtube.com/watch?v=JjnyapZ_P-g&list=PLXtkbHxe1LJ0hvz0xEioILyv3LdRrsWBn&index=4&t=2s&ab_channel=IanHubert

https://www.youtube.com/watch?v=YNtKnmRXVlo&list=PLXtkbHxe1LJ0hvz0xEioILyv3LdRrsWBn&index=7&t=174s&ab_channel=Nicko16

https://www.youtube.com/watch?v=NW_djQS_N8U&list=PLXtkbHxe1LJ0hvz0xEioILyv3LdRrsWBn&index=8&t=1101s&ab_channel=CGGeek

https://www.textures.com/category/buildings/1926

I want to make a good blender practice assignment to finish my final project. Here is the tutorial that I learned from youtube.

https://www.youtube.com/watch?v=LrEHoaq6QFE&list=PLXtkbHxe1LJ0hvz0xEioILyv3LdRrsWBn&index=4&t=519s&ab_channel=JoeyCarlino

This is the tutorial to teach me how to make every 3D object into a lego texture shape, which was fun by adding a base colour and adding lego geometry into the geometry editor, adding mesh to volume to distribute points in the book, for instance, on issues. And covered the material from the website of the beach balls; I really like the blender’s power; you can add your costume texture to the object even if the materials are not changed.

 

The Beach ball

https://skfb.ly/6ENE8

 

 

So here is my homework that has a concert with randomness and the show I want to make a shader looks really interesting and cool I accidentally made it with different layers and I am also out of full-screen mode.
And the idea of this homework except explore bump mapping with different colours, different bumping levels etc.

The randomness makes me happy to have different results each time.

 

https://editor.p5js.org/misakatytyshuw/full/kDypy23Ug

midterm homework was a very challenging thing to do for my coding experience, in order to understand the meaning of making an exciting music video; I needed to decide on two main focuses: 1. Focusing on the coding mechanism which is making sure I understand how to make the image vibrating with music such as the amplifier. 2. focusing on the variabilities of adding different shaders for one javascript. I chose the second one as the ultimate option for my assignment.

The code has references from Tara B and Ushna Khalid for week 4 assignment.

I edited the street picture via lightroom with a colour wheel to make the vibe of the music. What’s more, I added another loop to extend the slideshow

Here is my final work
I was trying my best to figure out those examples from the class materials, however, they were too complicated or hard to understand, thus I started to look for my classmate’s posts to get inspiration. And I add cos and sin functions to make the animation moves back and forward. Thus I found my inspiration from one of my classmate’s posts. It is very easy to understand and I add a mouse feature with different pictures. The whole concept of the assignment is to mix the animation and the click animation.

The code I used is from my classmate UshnaKhalid

Here are the pictures I used

Here is my idea for this assignment, I want to make a simple grid and also create another shade which is like a circle by using the mix function

The first shader

The second shader

 

 

Here is my experience of the HSB colour space mixed with an animated hue with the time

hsb.r = sin( u_ time*st.× * 1.896 * 2.670) * 0.5 + 0.596; // animate hue with time

hsb.g = sin( u_ time*st.y * 2.328 * 3.510) * 0.500 + 1.820;; // saturation

hsb.b = cos(u_ time*st.y * 1.824 * 2.974). * 0.5 + 0.932;; // brightness

After trying different combinations, especially using multiplied u_time with st has an amazing effect

It was very fun to play it around, unfortunately, my laptop crashed and I lost my code and I cannot save the animations.

Here are some screenshots I have

I don’t have any experience with GLSL coding, and I have no idea how to create a good-looking plate with different colours. I spent quite a long time figuring out the coding; I read some articles and tutorials on the internet which inspired me a lot.

Gradient #1: RGB channels 

This is not too hard to make but it took me a while to understand how to create this kind of image. I set different colours from red green and blue each has different colour properties and I put them into different locations with different densities. For some reason, the red colour looks purple and pink.

 

#2 Mix Gradient 

Basically, the Mix Gradient is to make sure I can mix colours from left to right. I add a u_time to make the colour flows from the lift to the right on the x-axis. I was playing around with this, changing colours and that makes those plate looks different.