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 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

Week 5 Homework

For this week’s assignment I worked with Joshua Linton, and we decided to both port a shader from previous weeks as well as choose one of the remaining options.  While porting the shader, Joshua was having trouble with getting his shader to work, and we discovered the only issue was the fact that while loading the shader, the vert had to come before the frag.

Ported Shader from Last Week:
https://editor.p5js.org/ryanmackboyd/sketches/q2fBsppHg

Afterwards, Joshua chose to create a displacement shader using an image of text that turned out to be something really interesting.  I chose to play with a live video shader, iterating on the Video Paint example through the use of its wobbled offset but instead creating a grid that grew its cells based on the mouse’s y axis and pixelated based on the mouse’s x axis.  The result was a very cool experiment that I call Mirror of Fragments.

Mirror of Fragments:
https://editor.p5js.org/ryanmackboyd/sketches/beBWXEB4b

week5

week52

week53

Through this process I learned the importance of keeping variables consistent between fragment shaders and javascript, so that you can pass information along through the setUniform command.  I also learned that you could map the mouse separately on two axis by creating 2 floats in the fragment shader and then attaching them to the mapped mouseX and mouseY respectively.  Overall this was an enjoyable collaboration between Joshua and I.

 

Week 3 Homework

This week I iterated on last week’s submission by adding rotation to the 6 circles as well as incorporating noise into the background and outer egg.  The process of getting the circles to spin around the central axis while staying aligned with each other was quite a challenge, but after receiving some math help, I learned how PI can be used to offset the starting position of rotation.

This is the result:

https://youtu.be/3Q8RBxinVxo

seeeedpic seeeedpic2

seedcode seedcode2 seedcode3 seedcode4

Week 2 Homework

seed seed2

For week 2 I experimented with creating circles and combining them with colours and animation to explore what is called sacred geometry in this glyph commonly referred to as the seed of life.  At first I just wanted to create 7 interlocking circles that all met in the center, but as I brought in the colours and overlapped them in a clockwise fashion, I realized overlapping them with transparent white circles would bring attention to some unique relationships in this shape, so I decided to create a static circle around the inner seed, while using another pulsing circle that expanded close to the perimeter of the shape.  Finally I encapsulated the whole shape in a slowly pulsating egg.  The actual process of getting everything perfect in composition and getting the animation timed the way I wanted was a painstaking and time consuming endeavour, but it was valuable in teaching me what variables within u_time animations would affect the outcome, to either pulse at a certain time or the span of the transformation over time.

seedcode seedcode2

Week 1 Homework

seafoam-gradient

For Week 1 Homework, the first shader I created is an RBG gradient called Seafoam Gradient. I love the range of colour in this one because it reminds me of the view of a horizon looking straight into the sea on a sunny day.

seafoamgcode

The second I attempted to create 3 different colours using HSB coordinates rather than RGB.  My attempt resulted in what I call Chrome Reflection, as it reminds me of the reflection of light hitting some chrome finish on a sports car.

chromeref\

chromcode3

Finally I decided to explore animation and shaping functions by creating this rudimentary water ripple that moves with u_time.

ripples

ripplecode1 ripplecode2

Through the process of creating these three shaders, I learned that a lot of variables can be adjusted from a quintessential line of code, and finding the cornerstone of the code is essential in manipulating the shader. What I found exciting was the use of u_time and all the ways it can be applied in the texture coordinates to produce unique results or animations. I struggled with correctly placing things like U_mouse or u_time in a way that matters or in the way I want them to matter. I also didn’t understand the significance of conditionals in shaders, as there seems to be no condition other than when you put in true, which makes it seem like commenting the code would have the same effect.