Week 10 Homework

I progressed on my gold shader to include cubemaps and reflections. This was a bit challenging for me. I used GlslViewer to code and compile/render. Some notes:

– I had to use 3D noise instead of 2D noise. This allowed for the flow of the noise to go around the corner of the cube. When using 3D shapes for this shader, up until now I had been using just 2D noise on each face, sort of “cheating”. Now it is a proper flowing 3D noise cube.

– I took away the gold colouring so that only the reflections remained, this caused me to have to really amp the specular value so that you could actually see the reflections

– I would like it if each face of the cube, the noise animated not in any direction but just on the face itself. it’s hard for me to describe. on the top and bottom faces, the noise animates exactly how I want, but on the other sides it sort of “flows” toward an edge. i’d rather it not do this but I couldn’t figure out how

to run this shader, you need glslViewer installed on your machine and then just run this command from within the shaders file folder

glslviewer shader.frag cube.obj -C cubemap.png

View the code and file son gitlab:
https://gitlab.com/nicolevella_ocad/cubemap-shader

screenshot

Midterm – The Time Knife by Ryan Boyd & Joshua Linton

For the mid-term, Joshua Linton & I decided to create a digital mirror that resembled the description of the Time Knife given in the show, The Good Place, which is an extra dimensional concept illustrated as, “a trillion different realities folding onto each other like tiny sheets of metal forming a single blade.”  Our shader explores this concept by taking the webcam capture and turning it into strings of frames stacked on top of each other, phasing at high speed into a void in a sort of sine-like shape, while the scene rotates.  We also decided to create a 3 dimensional reference point to add depth to the scene, which rotates at the speed at which the point of view is rotated in the void, as if the viewer is orbiting this sphere in physical space.  Furthermore, we added interactivity by mapping the x and y position of the mouse, so that when you move your mouse left or right, the scene rotates forward or backward (on top of its own passive rotation), and also increases the speed of the phasing images based on mouse y position.  Finally, we mapped the rotation of the sphere to match the mouse x rotation, and also translated the sphere up and down as well as changed the stroke/fill based on mouse y position.   I created the base webcam capture sketch & grid tiles, mapped the mouse positions and created the push pop sphere while Joshua created the fragment shader that alters the image and ultimately creates the void.  This experiment was an extremely intriguing exploration into metaphysical extra-dimensions in 2d space.

p5 sketch:
https://editor.p5js.org/ryanmackboyd/sketches/WwGKhoyUW

Full screen:

https://editor.p5js.org/ryanmackboyd/full/WwGKhoyUW

mid1 mid2 mid3

Week 10 – Cloaking Shader

For this week’s assignment I focused on only one of the shader graphs and decided to do a reveal shader by creating a unity animation in which the reveal shader was added as a material at a specific point to make it look like some futuristic space ships were coming out of cloaking.  The scene is somewhat cinematic and the project was quite fun.

Video:
https://youtu.be/mgt-zwC1100
w10
w102

week10

Week 10

week10.1 week10.2

The first shader I made is just a psychedelic texture adjuster that fracts and animates different channels from the screen position. The second shader is a camouflage texture that essentially is supposed to take a texture to “model” the initial camouflage off of which is then added on with alpha clipping making the camouflage actually invisible.

Week 3 Homework

week3 week3.1 week3.2 week3.3 week3.4

Since this assignment was built off of week 2’s homework I wanted to keep at least one of them as similar to the previous as possible while following the criteria. So for this assignment I added different uses of the random function to the shapes in the shader, which are also all noisy. For the rectangle I made it grow and shrink while filling with noise, this was the same for the triangle with some property changes. For the circle I made each segment from the 2×2 cells come in one after another in a clockwise motion, while also growing and shrinking. This helped me get some practice messing around with random and noise functions to learn more about their uses.

Week 2 Homework

week2 week2.1 week2.2 week2.3

Originally I was going to make a 5×5 grid which changed to the current 10×10, which in each 2×2 cell was going to have a circle, square, triangle, and gradient. However, while working this changed to having the rectangle in one cell and having a quarter of a circle each of the 2×2 cells to create a whole circle in the middle. Added on, I combined the triangle and gradient together to create the yellow and orange gradient in the top left of each 2×2 cell as well. I like the way it ended up compared to how I was imagining it beforehand, and I also learned about creating gradients with shape functions in a more unique way.

Week 8 – Wolf Evolution & Alien Tech Orbit

For Week 8 I attempted to play with 2 of the sketch prompts.  My first sketch explored the push pop matrix orbits and different variations of scale, rotate, transform, as well as a little bit of sin() based animation.  I feel as if I could continue expanding on this idea but it would require a lot of hours to fine tune and get the math right.  I was inspired by sci fi alien technology that floats, expands and rotates.

For the second sketch, I decided to turn a low poly wolf model that I made into a sort of Pokemon or Digimon where their colours and geometry would change from white to coloured over time and back again, to represent the underlying structure of the wolf going through a supernatural change, (similar to evolution or digivolution as shown in the popular kids series).  This one was a really fun experiment that I enjoyed thoroughly.

 

Torus Orbit

https://editor.p5js.org/ryanmackboyd/sketches/vGIgYZocR

to to2 to3

Wolf Transformation

https://editor.p5js.org/ryanmackboyd/sketches/JYoFwUbKV

wolf1 wolf2 wolf3 wolf4

Final

For my final project, I incorporated my knowledge of shaders gained during this class into one of my past game projects. The project I plan to use is a 2D Unity platformer, for comparison the original game can be played here: https://bakaretsu.itch.io/shanghai-scramble
I made 2 major changes to the project, I added floating particles that hover around the player that indicate their combo score, and I added a dissolve shader that dissolves the player’s sprite when they get hurt. GIFs of the shaders are shown below. There is a post-processing effect applied to the player as well, that results in the bloom that occurs during the dissolve.

particles

dissolve2

 

A playable build of the game for Windows can be downloaded here: https://drive.google.com/drive/folders/1brWm4flKaUf9cZ8z0X9QRmDXeSvDgU8o?usp=sharing