Homework3-LC

I made a grid composition for the first exercise and added a simple animation that enables dot grids to move vertically or horizontally like a directional conveyor. (click the picture to see animation)

011
According to the previous exercise in which I practiced coding rectangles, I decided to create a pattern composited with arranged rectangles as well. My method of getting a desirable line is to draw a black rectangle first, then draw a white rectangle to cover the useless area. I want to draw a simple face wearing a bow(the right top corner rec)using rectangles, and what surprised me is that the positive and negative space between these multiple interlaced lines/rectangles makes the pattern more sophisticated. Finally, I added a gradient ornament background to increase the visual of this painting and arranged the curved patterns by module position.

02

Week 3 Agalia Christofi

 

untitledshader5untitleduntitled

 

When I started off making these shaders I had a huge mental block. The grids and repeating patterns was a real difficulty for me that I will definitely need to take time to absorb and revisit. For now, I opted for simpler designs in order to try and get a grasp of the concept first. To get over my mental block, I tried applying some of these new concepts to the ones from last week as I thought it would be an interesting addition.

A lot of what I did was testing randomization, moving st.x/y around and scaling / translating the various shapes to create something new. I also used fract for the first time which I thought was super cool. Going forwards, I was unable to do overlaps of whole patterns and use loops to spawn shapes; this is something I hope to figure out eventually.  Also, the tiling and curving of patterns was a bit too much for me to understand.

Adding these shapes was an amazing addition that allowed me to go in the direction that I was hoping to at the beginning of the semester.

Week 3 Homework – Ethan Day

 

I call this shader the Magical Book (pun intended)

https://media.giphy.com/media/PvqG4gO8IUU2vROjXC/giphy.gif

screenshot_20230204_121941 screenshot_20230204_122012 screenshot_20230204_121948 screenshot_20230204_121957

This page turning pattern first came to fruition when I was playing around with the 200 rectangle for loop example, and seeing if I could swap it out to be circles and create a rain pattern. After I successfully did this, I tried playing around with movement, and ended up using sin and time to make the shapes move together. Since none of them moved individually, they all ended up moving together in a wave and it looked like a page. I decided to create another ‘page’ using new colour values and using cos for movement instead of sin, and another one with inverse sin. This created 3 pages moving on their own trajectories, like independent pages magically turning on their own.

I used hsb converted values for the page colours, and regular rgb values for the middle circle colours. 

 

I also animated the circle gradients using altered shaping functions to make sure they’re always at different colours, using sin, inverse sin, and half inverse sin. 

 

I had in mind being able to make a series of circles in a linear pattern going down the middle using a for loop, but this didn’t work out so I just manually placed the circles. I wanted to create sort of a seam down the middle of the ‘book’. I also tried to create this seam using the line example and the segment function, however this didn’t work out either due to other shapes being blocked when I tried to implement the line I had created in another editor tab. 

 

(line I wanted to include)

screenshot_20230203_111242

I wanted to capitalize on how seemingly 3D the page effect looked when a group of object is oscillating due to a sin shaping function. The pieces moving together while spread apart had some moving faster than others on one side, giving the illusion that it is turning like a page when in reality the speeds of the different shapes are just speeding up and slowing down at very specific intervals.

I chose the color pallette of magenta and blue because it gives off a very soothing and pleasing neon effect, that looks like arcane magic or sugar candy. The book looks like it is casting a spell since those shades of blue and magenta are common in fantastical media like games or magic shows. I made sure to make the different pages have unique yet similar patterns, staying within the established magic particle theme. The different particle effects feel like they belong because there’s a thick one, a thin one, and one in between.

I wish I could have used the for loop properly to get the right amount of circles going down the middle, or even used the line shape properly. However I’m happy with the effect I came out with after substituting some of the failed concepts I tried to implement.

 

 

Week3-Zhihan Zhang

For my first shader, I had no idea what kind of scenes I wanted to make. My preference was to make a more figurative image, so I looked through the landscape photos I had taken for inspiration, and I was browsing through the links provided.

Then I saw the moon codes. Because I have not had the opportunity to return to my hometown for several years, and there was a saying in my hometown that looking at the moon is a way to miss the family hometown, I associated it with the perspective of looking at the moon through the window. The window could be represented by the inlaid square, just like what I have learnt in class.

I drew the rectangle code functions with a wood-like color. I prefer the changing moon from full moon to eclipse with a slower speed and a better size. So I adjusted, added and deleted codes of the moon to have a softer color and suitable animated movements. The texture of the moon was applied by me to the square window, which made it look more like a wood-made one.

The thing that I fail to change is the sky color for the moon.  If I multiply more color on it, the colors of square window or the moon may be changed together into weird colors. I could only keep it in black to make other dominant figures have a better visual effect.

 

moon2 moon1

Week 3 – Tyler Jorge

This week I spent a lot of time experimenting with different shapes and patterns.

I didnt really know exactly what I wanted to create, but after messing around for a while I decided to work with circles.

 

Shader #1

screenshot-2023-02-03-153909

The first shader I made was super simple, and consists of circles just layered on top of each other with their brightness values consecutively lowered.

 

screenshot-2023-02-03-154045

After adding a tiling function, scaling this up created some pretty interesting effects!

screenshot-2023-02-03-154109

screenshot-2023-02-03-154132

screenshot-2023-02-03-154158

 

 

Shader #2

screenshot-2023-02-03-153850

After playing around with the scaling for quite a while, I landed on something that I thought was quite interesting. The circles eventually layered themselves on top of each other to create a super unique effect that changes based on the size of the image.

Here is the exact same image, just slightly larger:

screenshot-2023-02-03-153850

And even bigger:

screenshot-2023-02-03-153850

One more…:

screenshot-2023-02-03-153850(This was my final result)

 

screenshot-2023-02-03-154354

Turning this number up to something ridiculous yielded a very interesting result:

screenshot-2023-02-03-154326

 

 

 

 

 

 

Week 3 Homework

So far out of all the homework weeks this was by far my favorite. I don’t know why but I just loved to work with the shapes ! Experimenting with lines, triangles, squares, etc, was just a fun experience and I’ve learnt a lot.

Shader #1

wordpress-pic-1

For this one I really wanted to have a rainbow type of shader. With this I decided to make a bunch of lines behind 2 black triangles. I am really happy with how it turned out, but there is one problem, for the shader is incredibly… heavy? It causes my BookofShaders web page to lag. I believe it’s due to the sheer amount of lines though, for there are many. That aside, I like how it turned out, and yeah!

Shader #2

For this one I wished to do something more with layers and overlapping under an animation. Therefore I decided to go with Triangles and Squares. Per each tile there’s a moving triangle that covers a bunch of smaller squares, also shaped in a triangle.

The process goes: White checkered triangle with just a white triangle, a black triangle falls, revealing a black checkered triangle against a regular black triangle, then it’ll come back up, briefly showing just a black and white triangle, then it restarts the process.

wordpress-pic-2

Week 3 Shaders – Tara Brown

I didn’t really have a goal for this shader I just knew that I wanted to work with rectangles. I got some really weird and strange results out of the first few trials and then I ended up adding in some previous code that I used in my other animation shaders.

This was the starting point where I changed the colours and positions of the rectangles.

af553f0a7869cb79f404b09e599c1845

I liked the colours and the rough placement but It could be stranger!

b4056c4f029db8961f18189f926538df

This is when the mixing of rbg chanels for different lines and shapes came in! I reeeeally like the effect here and I could’ve stopped but nah that’s boring of me. I wanted to then add the squiggle border and some animation to it. At first I wanted just the edges of the rectangles to wiggle but something unexpected happened.

11c624f8a6a0294c7bc9409b0fe34d03-1

After adjusting variables and adding more code from previous shaders, I eventually landed on this. While I’m sure if I sat with it long enough that I could work out the original border idea I had but I think this effect that I achieved it way cooler so I took it and ran with it.

https://gyazo.com/ac537940100cc14070d4330ad0ff8d1b

Luke D’Alfonsi – Homework Week 3

Homework Week 3

Exercise #1: SDF Shapes

 

ezgif-com-gif-maker-9

For shader 1 I began with the homework file layers  2, from this file I experimented with changing the already written rectangle shape with one from the SDF shapes resources. From this point I began messing around with adding variables in different places and ended up with a really intriguing animation that looked like an eye closing.  When my shader was in this stage I was trying to figure out how to add a sort of iris shape in the middle of the closing eye this lead  to me writing two shapes into a single mix function which generated a super trippy effect. After that I added some more complexity to the shader and came up with a super weird sort of  fractal animation which cycles through multiple patterns when interacted with the mouse.

 

The code for this shader can be seen below with comments!

// Author: Luke
// Title: fractals – Homework Week 3 (exercise one)
// Course: ShaderArt (DIGF-3011, Winter 2022)

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// by Iñigo Quiles (IQ)
// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
6.0)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.0), rgb, c.y);
}

// by Jeremy Rotsztain
// st: canvas position
// pos: rectangle position
// size: rectangle width/height

//lukey-> added two new shapes to replace the homework file’s shape –> Layer_II
//https://iquilezles.org/articles/distfunctions2d/ – Bobbly Cross – exact (https://www.shadertoy.com/view/NssXWM)

//Regular Hexagon – exact

float sdHexagon( in vec2 p, in float r )
{
const vec3 k = vec3(-0.866025404,0.5,0.577350269);
p = abs(p);
p -= 2.0*min(dot(k.xy,p),0.0)*k.xy;
p -= vec2(clamp(p.x, -k.z*r, k.z*r), r);
return length(p)*sign(p.y);
}

float sdBlobbyCross( in vec2 pos, float he )
{
pos = abs(pos);
pos = vec2(abs(pos.x-pos.y),1.0-pos.x-pos.y)/sqrt(2.0);

float p = (he-pos.y-0.25/he)/(6.0*he);
float q = pos.x/(he*he*16.0);
float h = q*q – p*p*p;

float x;
if( h>0.0 ) { float r = sqrt(h); x = pow(q+r,1.0/3.0)-pow(abs(q-r),1.0/3.0)*sign(r-q); }
else { float r = sqrt(p); x = 2.0*r*cos(acos(q/(p*r))/3.0); }
x = min(x,sqrt(2.0)/2.0);

vec2 z = vec2(x,he*(1.0-2.0*x*x)) – pos;
return length(z) * sign(z.y);
}
float drawRectangle(vec2 st, vec2 pos, vec2 size){

float result = 1.0;

vec2 border = (1.0-size)/2.;

st = st – pos + vec2(0.5);

result = step( border.x, st.x);
result *= step( border.x, 1.0-st.x);
result *= step( border.y, st.y);
result *= step( border.y, 1.-st.y);

return result;
}

// by Patricio Gonzalez-Vivo
// from The Book of Shaders

float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}

// by Jeremy Rotsztain
// slightly more useful random
// min: minimum value
// max: maximum value

float randomRange( vec2 st, float min, float max){

float r = random( st);
float range = max-min;
return r * range + min;
}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.);

// draw 200 shapes/layers

for( int i=0; i<200; i++){

// pick a random position
// use the for loop index to change the random seed
// use the same x value for each random
// use a different y value for each time random is called in the loop
// so that the results are the same

vec2 pos;
pos.x = random( vec2(i, 0));
pos.y = random( vec2(i, 10));

// calculate a rectangle 0.2 x 0.x
// Lukey –> changed the shape from drawrectangle to blobby cross from the source cited previously in the script.

float shape = sdBlobbyCross( st – pos, 0.0+ u_mouse.x/u_resolution.x*u_mouse.y/u_resolution.y);
//lukey–>added secondary shape which when mixed created a super trippy effect
float shape2 = sdHexagon( st – pos, 0.1+ u_mouse.x/u_resolution.x);
// random hue, high saturation & random brightness
vec3 hsb;
hsb[0] = random( vec2(i, 20)); // hue
hsb[1] = 0.916; // saturation
hsb[2] = randomRange(vec2(i, 30), 0.45, 1.0); // brightness

// convert to rgb
vec3 shapeColor = hsb2rgb(hsb);

// mix color where shape == 1.0
// otherwise keep previous color
//lukey–> added extra color mix and adjusted the previous one to use the new shapes i experimented with dividing and multiplying the shapes within one mix function it created a crazy effect that goes through multiple unique patterns when the mouse is moved on the canvas

color = mix( color, shapeColor, shape/shape2);
color = mix(color, shapeColor, shape2*shape);
}

gl_FragColor = vec4(color,1.0);
}

Exercise #2: Pattern

screenshot-2023-02-03-111816

I struggled to get something I liked with this exercise and ended up tweaking the previous shader to focus on one of the patterns it cycled through. I chose to focus on this specific pattern because it reminded me of Angela Johal‘s vibrant geometry which was included in the assignment page. Though I think this is a  lot more chaotic than the work from Angela I think that it reflects my creative work a lot more.
The code for the shader can be seen below with added comments!

// Author: Luke
// Title: Fractal Pattern – Homework Week 3 (exercise Two)
// Course: ShaderArt (DIGF-3011, Winter 2022)

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// by Iñigo Quiles (IQ)
// https://www.shadertoy.com/view/MsS3Wc

vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
6.0)-3.0)-1.0,
0.0,
1.0 );
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.0), rgb, c.y);
}

// by Jeremy Rotsztain
// st: canvas position
// pos: rectangle position
// size: rectangle width/height

//lukey-> added two new shapes to replace the homework file’s shape –> Layer_II
//https://iquilezles.org/articles/distfunctions2d/ – Bobbly Cross – exact (https://www.shadertoy.com/view/NssXWM)

//Regular Hexagon – exact

float sdHexagon( in vec2 p, in float r )
{
const vec3 k = vec3(-0.866025404,0.5,0.577350269);
p = abs(p);
p -= 2.0*min(dot(k.xy,p),0.0)*k.xy;
p -= vec2(clamp(p.x, -k.z*r, k.z*r), r);
return length(p)*sign(p.y);
}

float sdBlobbyCross( in vec2 pos, float he )
{
pos = abs(pos);
pos = vec2(abs(pos.x-pos.y),1.0-pos.x-pos.y)/sqrt(2.0);

float p = (he-pos.y-0.25/he)/(6.0*he);
float q = pos.x/(he*he*16.0);
float h = q*q – p*p*p;

float x;
if( h>0.0 ) { float r = sqrt(h); x = pow(q+r,1.0/3.0)-pow(abs(q-r),1.0/3.0)*sign(r-q); }
else { float r = sqrt(p); x = 2.0*r*cos(acos(q/(p*r))/3.0); }
x = min(x,sqrt(2.0)/2.0);

vec2 z = vec2(x,he*(1.0-2.0*x*x)) – pos;
return length(z) * sign(z.y);
}
float drawRectangle(vec2 st, vec2 pos, vec2 size){

float result = 1.0;

vec2 border = (1.0-size)/2.;

st = st – pos + vec2(0.5);

result = step( border.x, st.x);
result *= step( border.x, 1.0-st.x);
result *= step( border.y, st.y);
result *= step( border.y, 1.-st.y);

return result;
}

// by Patricio Gonzalez-Vivo
// from The Book of Shaders

float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}

// by Jeremy Rotsztain
// slightly more useful random
// min: minimum value
// max: maximum value

float randomRange( vec2 st, float min, float max){

float r = random( st);
float range = max-min;
return r * range + min;
}

void main() {

vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec3 color = vec3(0.);

// draw 200 shapes/layers

for( int i=0; i<200; i++){

// pick a random position
// use the for loop index to change the random seed
// use the same x value for each random
// use a different y value for each time random is called in the loop
// so that the results are the same

vec2 pos;
pos.x = random( vec2(i, 0));
pos.y = random( vec2(i, 10));

// calculate a rectangle 0.2 x 0.x
// Lukey –> changed the shape from drawrectangle to blobby cross from the source cited previously in the script.
// Lukey2 –> Adjusted the rest of the script to focus in on one of the animation patterns from the previous created script. I thought this had the same spirit as Angela Johal piece such as this one(maybe a little more choatic) https://www.instagram.com/p/Cn9z_zspeFo/?utm_source=ig_web_button_share_sheet

float shape = sdBlobbyCross( st – pos, 0.352);
//lukey–>added secondary shape which when mixed created a super trippy effect
float shape2 = sdHexagon( st – pos, 0.708);
// random hue, high saturation & random brightness
vec3 hsb;
hsb[0] = random( vec2(i, 20)); // hue
hsb[1] = 0.916; // saturation
hsb[2] = randomRange(vec2(i, 30), 0.45, 1.0); // brightness

// convert to rgb
vec3 shapeColor = hsb2rgb(hsb);

// mix color where shape == 1.0
// otherwise keep previous color
//lukey–> added extra color mix and adjusted the previous one to use the new shapes i experimented with dividing and multiplying the shapes within one mix function it created a crazy effect that goes through multiple unique patterns when the mouse is moved on the canvas

color = mix( color, shapeColor, shape/shape2);
color = mix(color, shapeColor, shape2*shape);
}

gl_FragColor = vec4(color,1.0);
}

 

Week 3 – Justine

For this week’s shader homework, I was inspired by the image below and wanted to recreate the TV CRT. I thought it was a good combination of things we learned during week 3: namely creating and positioning shapes, as well as making those shapes repeat in patterns.

ref

I began with drawing three rectangles using the drawRectangle( ) function we made during class. I then applied a red, green, and blue colour to each of the rectangles, resulting in the base pattern below.

I used a function called brickTile( ) introduced in the Book of Shaders Chapter 9: Patterns that would tile and offset this into a brick-like pattern (staggered every other row/column). I could manipulate the “zoom” in the function which affects how small each tile will appear.

screen-shot-2023-02-02-at-10-13-07-pm  screen-shot-2023-02-02-at-10-20-44-pm  screen-shot-2023-02-03-at-12-19-42-am

(changing the zoom variable from 1.0, to 4.0, to 20.0).

As you can see, the smaller the pattern, the more it resembles old school TV’s–they remind me of when I was a kid and I would stick my face so close to the TV that I could see the individual reds, greens and blues.

Now that I had the TV CRT pattern working, I thought to try and make it display images like a TV. I wanted this to work so that with a black and white image such as a white circle on a dark background, this would correspond with how bright the CRTs will display. This was done by multiplying my desired image to be displayed with the CRT rectangles. I also played around a little bit with the variables in the circle( ) function from the Book of Shaders Chapter 7: Shapes so that I could see a more feathered edge with the smoothstep( ) method, as well as to lighten the background from a pure black… this helped me to better visualize how the brightness becomes affected.
screen-shot-2023-02-03-at-12-34-39-amscreen-shot-2023-02-03-at-12-36-09-am

I also brought in my HSB rainbow wave code from week 2 to use as my displayed image, and I was pleasantly surprised to see that it worked perfectly on my first try. I was afraid that the rainbow wave being HSB would interfere with the CRTs being drawn with RGB, but I guess it makes sense that it doesn’t interfere since they are two separate vec3’s.

screen-shot-2023-02-03-at-12-46-09-am

This was a very simple experimentation with shapes and patterns but I am quite happy with how effective the results are. It was a good reminder of how awesome the power of RGB is, since I am able to see the yellows, cyans and magentas despite none of those colours technically getting drawn.

Week 2 Homework – HSB Colour

a02-shader1

For this week’s shader assignment, I focused on exploring layering different texture, in this case a layered random squares in a gird with a simple, smooth noise. Working with HSB was pretty difficult to use with the grid. For my second shader, I add incorporated animation to my first shader, where the shader would move along the x axis using cos, and it also moves on the y axis using sin making an interesting stretching and compression.

Overall I though this week’s homework was pretty difficult, it was kind of confusing on how to use HSB and the different textures I wanted to use. I think the shader would look better if I had the hue change along with time, I think that would’ve created an interesting monochromatic shader.

Second animated Shader