Just for funsies….

Here’s a P5 shader that pulls a random image from unsplash every 10ish seconds.

It’s using a 3D object of a flat plane with vertices x,y.

It sends this image as a texture to the fragment shader.

The vertices are then displaced based on a noise field which is animated over time.

By not clearing the screen on every draw() loop (aka, not setting the background() color within draw()), we get some really interesting glitches at the edges. Pixel stretching and other artifacts.

Some screenshots:
1

2

Code:
https://editor.p5js.org/nicoleannevella/sketches/xMrgZfUbg

View fullscreen:
https://editor.p5js.org/nicoleannevella/present/xMrgZfUbg

////////////////////

And here is another P5 shader using the same noise distortion effects, but rather than pull in an image as texture, it’s using the screen coordinates to color the displaced vertices.

Some screenshots:

screen-shot-2021-03-30-at-9-37-00-pm

screen-shot-2021-03-30-at-9-37-05-pm

Code:
https://editor.p5js.org/nicoleannevella/sketches/6cdlHDIot

View fullscreen:
https://editor.p5js.org/nicoleannevella/present/6cdlHDIot

week 9 homework

For this assignment, I 3D modeled an animated block model/block puzzle. The animation breaks apart the blocks in slow motion and then brings them back together. I wanted to try a different material or shader for each block. I downloaded 2 textured materials (the first, yellow metallic shader, the second, concrete shader). For the third material, I made a 2D textured Surface shader. I used one of the shaders I made for my midterm which animates the 2D texture based on time, sin, and cosine. The original frag shader does not warp the texture so it was cool to see how the texture image gets warped in Unity’s surface shader material. I also animated the color of the material based on time. I also added a skybox hdri render texture to the skybox and used a reflection probe and point lights.

 

screen-shot-2021-03-27-at-2-04-59-am

screen-shot-2021-03-27-at-10-02-21-pm

screen-shot-2021-03-27-at-10-39-09-pm

CGPROGRAM
// Physically based Standard lighting model, and enable shadows on all light types
#pragma surface surf Standard fullforwardshadows

// Use shader model 3.0 target, to get nicer looking lighting
#pragma target 3.0

sampler2D _MainTex;

struct Input
{
float2 uv_MainTex;
};

half _Glossiness;
half _Metallic;
fixed4 _Color;

// Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
// See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
// #pragma instancing_options assumeuniformscaling
UNITY_INSTANCING_BUFFER_START(Props)
// put more per-instance properties here
UNITY_INSTANCING_BUFFER_END(Props)

void surf (Input IN, inout SurfaceOutputStandard o)
{

//COLOUR CHANGE OVERTIME

_Color.r = cos( _Time / 0.03);
_Color.g = cos( _Time / 0.09);
_Color.b = cos( _Time / 0.4);
_Color.b = cos( _Time / 0.03);

//TEXTURE IMPORTED

float2 uv0 = IN.uv_MainTex;

//PART FROM FRAG SHADER CONVERTED TO HLSL - TEXTURE DISTORT

uv0.x += cos( uv0.x/ _Time * 0.6) + sin(_Time + uv0.x * 0.5)*0.1 - cos(_Time/0.03) * sin(_Time/ 0.30);
uv0.y += cos( uv0.x/ _Time * 0.6) + sin(_Time.y + uv0.x * 0.5)*0.1 - cos(_Time.y/0.3) * sin(_Time.x/ 0.3);

// Albedo comes from a texture tinted by color

fixed4 c = tex2D (_MainTex,uv0.xy) * _Color;

o.Albedo = c.rgb;
// Metallic and smoothness come from slider variables
o.Metallic = _Metallic;
o.Smoothness = _Glossiness;
o.Alpha = c.a;
}
ENDCG
}
FallBack "Diffuse"
}

 

Week 8 Homework

Life is pretty hectic right now, sorry for the delay in getting to this!

Here’s a sketch that explores the rotate and translate functions:
https://editor.p5js.org/nicoleannevella/sketches/C_zaN7RZk

JS Code:

let d, a = 0;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
  background(0);
  colorMode(HSB, 360, 100, 100);
}

function draw() {
  rotateX(a/QUARTER_PI);
  rotateY(a/HALF_PI);
  rotateZ(a/PI);

  fill(frameCount % 360, 35, 100, 100);
  translate(cos(a)*250, sin(a)*250);

  d=tan(a)*(width/12);
  sphere(d);
  
  a+= 0.015;
}

Here’s a sketch that attempts to do the same but with moving a camera object:
https://editor.p5js.org/nicoleannevella/sketches/CE3m6hUmo

JS Code:

// camera object and position
let cam;
let camPos;

// set min and max depth of field
let maxdof = 1500;
let mindof = 1;

let a = 0; // angle used for cos/sin animations

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  
  // use the HSB coloe mode because it makes most sense to me
  colorMode(HSB, 360, 100, 100);

  // init our camera and use a vector for its position
  cam = createCamera();
  camPos = createVector();
  
  // strokes can be ugly sometimes, lets not use one
  noStroke();
}

function draw() {

  // animate the fov with cos() by an increasing angle value
  let fov = cos(a)*2;
  let aspect = width / height;

  // animate the camera look at positions using the same
  // increasing angle value and some cos/sin functions
  // if we divide the angle by some number we can add
  // a sense of "randomness" to it
  let camLookX = cos(a) * sin(a / HALF_PI) * maxdof * 0.1;
  let camLookY = cos(a) * sin(a / PI) * maxdof * 0.1;
  let camLookZ = cos(a) * sin(a / QUARTER_PI) * maxdof * 0.1;

  // set the perspective, position, and lookAt for our 3D camera
  cam.perspective(fov, aspect, mindof, maxdof);
  cam.setPosition(cos(a) * maxdof, 0, -10);
  cam.lookAt(camLookX, camLookY, camLookZ);

  // animate that fill nicely with the Hue based on framecount
  fill(frameCount % 360, 35, 100, 100);

  // draw a sphere
  sphere(10);
  
  // the magic value used to caluclate cos/sin that's resposible for all our animations
  a += 0.015;
}

Here’s a sketch where I add my liquid gold frag shader to the blob obj file that Jeremy made in Blender. Hope it’s ok that I stole your .obj (obviously I am going to try to get my delicious gold involved somehow).

Getting my gold fragment shader to map onto the 3D object was not trivial. I had to try out all the possible mappings like vEyePosition, vModelView, etc … I set the st to vScreenPosition.xy/vNormal.xy and that showed progress.

The larger issue was how to get my circles drawn in the right place. As it’s no longer a vec2, but a vec3. So, in the drawCircle function, I had to add the three xyz values of vNormal to get it to draw correctly onto the shape.

#define drawCircle(st,pos,size)smoothstep(0.,5./(vNormal.x+vNormal.y+vNormal.z),size-length(pos-st))

https://editor.p5js.org/nicoleannevella/sketches/sEj2HwGv3

Frag Shader Code:

#ifdef GL_ES
precision mediump float;
#endif
  
uniform float uTime;

varying vec3 vScreenPosition;
varying vec3 vNormal;

#define drawCircle(st,pos,size)smoothstep(0.,5./(vNormal.x+vNormal.y+vNormal.z),size-length(pos-st))

#define PI 3.14159265358979323846
#define TWO_PI 6.283185307179586
#define BUTTER TWO_PI/TWO_PI/TWO_PI/TWO_PI/TWO_PI/TWO_PI

vec3 permute(vec3 x){return mod(((x*34.)+1.)*x,289.);}

float snoise(vec2 v){
    const vec4 C=vec4(.211324865405187,.366025403784439,
    -.577350269189626,.024390243902439);
    vec2 i=floor(v+dot(v,C.yy));
    vec2 x0=v-i+dot(i,C.xx);
    vec2 i1;
    i1=(x0.x>x0.y)?vec2(1.,0.):vec2(0.,1.);
    vec4 x12=x0.xyxy+C.xxzz;
    x12.xy-=i1;
    i=mod(i,289.);
    vec3 p=permute(permute(i.y+vec3(0.,i1.y,1.))
    +i.x+vec3(0.,i1.x,1.));
    vec3 m=max(.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),
    dot(x12.zw,x12.zw)),0.);
    m=m*m;
    m=m*m;
    vec3 x=2.*fract(p*C.www)-1.;
    vec3 h=abs(x)-.5;
    vec3 ox=floor(x+.5);
    vec3 a0=x-ox;
    m*=1.79284291400159-.85373472095314*(a0*a0+h*h);
    vec3 g;
    g.x=a0.x*x0.x+h.x*x0.y;
    g.yz=a0.yz*x12.xz+h.yz*x12.yw;
    return 130.*dot(m,g);
}

void main() {
  
    vec2 st=vScreenPosition.xy/vNormal.xy;
    st.y=vScreenPosition.x/vScreenPosition.y;
  
    st.x/=snoise(st+vec2(uTime*BUTTER,0.))*.5+.5;
  
    float cs=snoise(st+uTime*BUTTER)*.5+.5;
  
    float circ=drawCircle(st,vec2(.5),cs*TWO_PI);
    
    vec3 red  =vec3(1.0,0.0,0.0);
    vec3 green=vec3(0.0,1.0,0.0);
    vec3 blue =vec3(0.0,0.0,1.0);
  
    vec3 color = vec3(0.0);
  
    color+=mix(color,red,circ);
    color+=mix(color,green,circ);
    color+=mix(color,blue,circ);
  
    gl_FragColor = vec4(color, 1.0);
}

As a bonus, I added audio reactivity:
https://nicolevella.com/_beta/shaders/goldblob/

Week 10 Shader Explorations: Neon Ghost Flying Fish

 

neonghostflyingfish2

Without Post-Processing

neonghostflyingfishpostproc

neonghostflyingfishpostproc2

With Post-Processing

Once again, I wanted to bring both of this week’s prompts into one scene. For this project, I modelled a flying fish in Blender and created a neon-inspired ghost/hologram-like shader that also animates the fish to swim (I may want to use the same model for my final but with custom textures instead of a stock illustration).

I manipulated the main texture illustration by converting it into a normal map through Unity’s “Normal from Texture” node and blended it with a scale texture normal map. Rather than creating a mask in photoshop or illustrator to prevent the fins from also being covered in scales, I decided to create a mask in the Shader Graph by multiplying a rectangle shape node with a colour masked fish texture. I also used a colour mask to manipulate and animate the transparency of the fins while preserving the opacity of the body.

For the glow and emissive colour shifting, I used a Fresnel node to create a ring/edge lighting effect on the model as well as animated a Twirl node to get the colour shifts.

I also, followed a tutorial by DitzelGames on Youtube,  “Animations with Unity Shader Graph – Fish”, to create a simple swimming animation for the flying fish through vertex displacement.

Finally, with so many working pieces I split the main shader into two sub shaders, one for the vertex displacement and another for the ring lighting, in order to organize the main shader.

In terms of post-processing effects, I added bloom, tweaked the balance of shadows, mid-tones, and highlight, and tinted the white balance temperature to cool to make the rendered image and skybox darker to make the bloom and emission effects on the flying fish stand out.

In the future, I would like to add some flying animations to the fish’s “wings” to really sell the flying  (or gliding) through the sky effect).

Week 10 HW

For this week’s homework I created a displacement shader using Unity’s shader graph. I follow along this video  and created a shader that moves the vertices of a plane up and down at random intervals using noise. I decided to add a chessboard texture to the plane and decorate it with some animated pawn 3D models that I found online. Unfortunately I was unable to attach an image because the limit is 500kb which is way too small even after I compress the image.

Week 5

For the week 5 homework I worked with Ryan Boyd. Having difficulty porting my shader, after hours of reviewing and checking near every word in comparison to working examples of mine and Ryan’s. Offering it up to Ryan’s perspective he quickly noticed that in my alphabetical subconscious tendency I had written (‘shader.frag’, shader.vert’). Which by reversing their order he got my ported shader working.

portshader-wallways

https://editor.p5js.org/prefab/sketches/pAX3HdbxV

Another shader worked on was the displacement shader. Using an image of newspaper collage and animating it to scroll like our social and news feeds, I displaced the image texture referencing the color and replacing it with an image sourcing the colors of a COVID cell under the microscope. The texture displacement was animated to resemble the flashing lights of an alarm illuminating the scrolling news feed.

in reference to the amount of COVID related art pieces I named the shader:

1540 new pieces of COIVD art were recorded today

https://editor.p5js.org/prefab/sketches/B1zZxXDUe

1540-new-pieces-of-coivd-art-were-recorded-today

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 9 Shader Explorations

hedgehog_on_a_pedestal3_resizehedgehog_on_a_pedestal_pp2_resize

This week I decided to create some fun materials for a hedgehog model I created in Blender, by porting and building off a couple of my Week 1 shaders.  I knew from the start that I wanted to attempt the bonus prompt for this week, displacing vertices, and it ended up being perfect for procedurally generating the spikes of the quills. In the future, it would be interesting to explore how I could also animate movement in quills (i.e make them bristle or lay flat along the hedgehog’s back). For the fur and body of the Hedgehog, I  ported my rainbow wave shader from week one into a surface shader and added parameters for different textures: metallic, smoothness, emission, height, normal, and ambient occlusion. To create a fur-like effect I used a stylized grass texture set (with normals, height, roughness, etc). I used the same shader but with different texture sets or fewer textures (i.e the pedestal used the gravel (?) textures from class) for other models in the scene as well.

The post-processing shader is a simple colour threshold shader that you can control through a script.

For the stone pedestal, bottom sphere, and hedgehog fur.


Shader "Custom/HSBHSVColourBoxBlend_AnimDisplace"
{
    Properties
    {
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Glossiness("Smoothness", Range(0,1)) = 0.5
        _Metallic("Metallic", Range(0,1)) = 0.0
        _DispAmount("Extrusion Amount", Range(0,1)) = 0.1
        _Amplitude("Amplitude", float) = 1.0
        _AnimSpeed("Displacement Animation Speed", float) = 0.2

    }
    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue" = "Geometry"}
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows vertex:vert

        //#pragma fragment frag

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;

        float3 hsb2rgb(in float3 c) {
            float3 rgb = clamp(abs(fmod(c.x * 6.0 + float3(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 * lerp(float3(1.0, 1.0, 1.0), rgb, c.y);
        }

        struct Input
        {
            float2 uv_MainTex;
            float4 screenPos;
            float3 worldPos;

        };

        half _Glossiness;
        half _Metallic;
        fixed4 _Color;
        float _DispAmount;
        float _Amplitude;
        float _AnimSpeed;

        void vert(inout appdata_full v) {
            v.vertex.y += sin(_Time.y * _AnimSpeed + v.vertex.y * _Amplitude) * v.normal * _DispAmount;
        }

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            //float2 st = float2(0.5, 0.5);

            float2 st = IN.worldPos.xy / IN.screenPos.w;
            //float2 st = IN.screenPos.xy / IN.screenPos.w;

            st.x = frac(st.x)*2.0;
            st.y = frac(st.y) * 20.0;

            float3 color1 = hsb2rgb(float3(sin(_Time.y) * 0.1 + st.y * 0.9, 10.0, 2.588));
            float3 color2 = color1 * 1.5 - hsb2rgb(float3(cos(_Time.y) * -0.15 + st.x * 0.7, st.x, 1.8)) * color1;

            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * float4(color2.x, color2.y, color2.z, 1.0);
            o.Albedo = c.rgb;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}


For the Quills.

Shader "Custom/HSBHSVColourBoxBlend_TexDisplace"
{
    Properties
    {
        _Color("Color", Color) = (1,1,1,1)
        _MainTex("Albedo (RGB)", 2D) = "white" {}
        _Glossiness("Smoothness", Range(0,1)) = 0.5
        _Metallic("Metallic", Range(0,1)) = 0.0
        _DispAmount("Displacement Amount", Range(0,0.1)) = 0.01
        _DispTex("Displacement Text", 2D) = "white" {}
        _Distance("Distance", Range(-0.1,0.1)) = 0.0
        _PatternTiling("Pattern Tiling", Vector) = (2.0, 20.0, 0.0, 0.0)
    }
        SubShader
        {
            Tags { "RenderType" = "Opaque" "Queue" = "Geometry"}
            LOD 200

            CGPROGRAM
            // Physically based Standard lighting model, and enable shadows on all light types
            #pragma surface surf Standard fullforwardshadows vertex:vert

            //#pragma fragment frag

            // Use shader model 3.0 target, to get nicer looking lighting
            #pragma target 3.0

            sampler2D _MainTex;
            sampler2D _DispTex;

            float3 hsb2rgb(in float3 c) {
                float3 rgb = clamp(abs(fmod(c.x * 6.0 + float3(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 * lerp(float3(1.0, 1.0, 1.0), rgb, c.y);
            }

            struct Input
            {
                float2 uv_MainTex;
                float2 uv_DispTex;


                float4 screenPos;
                float3 worldPos;

            };

            half _Glossiness;
            half _Metallic;
            fixed4 _Color;
            float _DispAmount;
            float _Distance;
            float2 _PatternTiling;

            void vert(inout appdata_full v) {

                float3 color = tex2Dlod(_DispTex, float4(v.texcoord.xy,0,0)).rgb;

                float brightness = color.r * 0.7 + color.g * 0.2 + color.b * 0.1;

                // Calculate amount of displacement based on brightness
                float textDisp = brightness;
                textDisp -= 0.5;
                textDisp *= 0.5;

                v.vertex.xyz += v.normal * _DispAmount * textDisp;
                v.vertex.yz += _Distance;

            }

            // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
            // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
            // #pragma instancing_options assumeuniformscaling
            UNITY_INSTANCING_BUFFER_START(Props)
                // put more per-instance properties here
            UNITY_INSTANCING_BUFFER_END(Props)

            void surf(Input IN, inout SurfaceOutputStandard o)
            {
                //float2 st = float2(0.5, 0.5);

                //float2 st = IN.worldPos.xy / IN.worldPos.z;            
                float2 st = IN.worldPos.xy / IN.screenPos.w;
                //float2 st = IN.screenPos.xy / IN.screenPos.w;

                st.x = frac(st.x) * _PatternTiling.x;
                st.y = frac(st.y) * _PatternTiling.y;

                float3 color1 = hsb2rgb(float3(sin(_Time.y) * 0.1 + st.y * 0.9, 10.0, 2.588));
                float3 color2 = color1 * 1.5 - hsb2rgb(float3(cos(_Time.y) * -0.15 + st.x * 0.7, st.x, 1.8)) * color1;

                // Albedo comes from a texture tinted by color
                fixed4 c = tex2D(_MainTex, IN.uv_MainTex) * float4(color2.x, color2.y, color2.z, 1.0);
                o.Albedo = c.rgb;
                // Metallic and smoothness come from slider variables
                o.Metallic = _Metallic;
                o.Smoothness = _Glossiness;
                o.Alpha = c.a;
            }
            ENDCG
        }
            FallBack "Diffuse"
}

I would add my post-processing shader but the post is already really long…

Week 9 Homework

This week’s homework was really tough because I was finding it difficult to convert from GLSL to HLSL but eventually I began to understand it better thanks to Jeremy.

Studio MDHR

Studio MDHR developed cuphead using Unity. The game uses a lot of post processing effects to add atmosphere and polish. An example of this can be seen in the rain and thunder during the Grim Matchstick boss fight. Another example of post processing is the grain and scratches overlaid on the screen throughout the entire game. The game is entirely 2D so I am guessing it uses unlit materials, increasing performance. Several particle elements appear to be created with Unity’s shader graph and have even been attempted to be recreated. The developers excelled at recreating the iconic rubber house cartoon style through art, animation and music. The 2D nature of the game shows off the great artstyle without being overbearing in detail. I think Cuphead would be a drastically different and arguably worse looking game if it included realistic reflections because it would not fit in with the hand drawn style. I’m not sure how a PBR could even be incorporated within a 2D game but it might be an interesting concept.

For some reason I can not upload images larger than 500kb so I’ve linked a google drive folder with screenshots from this week.

https://drive.google.com/drive/folders/11IuMLZDs4eP2S3q0rvQMIjHzjM0KjDh7?usp=sharing

Color wheel Shader from the book of shaders that spins using _Time.y (image 1 in google drive)

<div>
<div>Shader "Custom/week9"</div>
<div>{</div>
<div>    Properties</div>
<div>    {</div>
<div>        _Color ("Color", Color) = (1,1,1,1)</div>
<div>        _MainTex ("Albedo (RGB)", 2D) = "white" {}</div>
<div>        _Glossiness ("Smoothness", Range(0,1)) = 0.5</div>
<div>        _Metallic ("Metallic", Range(0,1)) = 0.0</div>
<div>    }</div>
<div>    SubShader</div>
<div>    {</div>
<div>        Tags { "RenderType"="Opaque" }</div>
<div>        LOD 200</div>
<div>        CGPROGRAM</div>
<div>        // Physically based Standard lighting model, and enable shadows on all light types</div>
<div>        #pragma surface surf Standard fullforwardshadows</div>
<div>        // Use shader model 3.0 target, to get nicer looking lighting</div>
<div>        #pragma target 3.0</div>
<div>        sampler2D _MainTex;</div>
<div>        struct Input</div>
<div>        {</div>
<div>            float2 uv_MainTex;</div>
<div>        };</div>
<div>        half _Glossiness;</div>
<div>        half _Metallic;</div>
<div>        fixed4 _Color;</div>
<div>        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.</div>
<div>        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.</div>
<div>        // #pragma instancing_options assumeuniformscaling</div>
<div>        UNITY_INSTANCING_BUFFER_START(Props)</div>
<div>            // put more per-instance properties here</div>
<div>        UNITY_INSTANCING_BUFFER_END(Props)</div>
<div>        float3 hsb2rgb( in float3 c ){</div>
<div>    float3 rgb = clamp(abs(fmod(c.x*6.0+float3(0.0,4.0,2.0),</div>
<div>                             6.0)-3.0)-1.0,</div>
<div>                     0.0,</div>
<div>                     1.0 );</div>
<div>    rgb = rgb*rgb*(3.0-2.0*rgb);</div>
<div>    return c.z * lerp( float3(1.0,1.0,1.0), rgb, c.y);</div>
<div>}</div>
<div>        void surf (Input IN, inout SurfaceOutputStandard o)</div>
<div>        {</div>
<div></div>
<div>    float3 color = float3(0.0,0.0,0.0);</div>
<div>    float TWO_PI= 6.28318530718;</div>
<div>    // Use polar coordinates instead of cartesian</div>
<div>    float2 center = float2(0.5, 0.5);</div>
<div>    float2 toCenter = IN.uv_MainTex - center;</div>
<div>    float angle = atan2(toCenter.x,toCenter.y);</div>
<div>    float radius = length(toCenter)*2.0;</div>
<div>    // Map the angle (-PI to PI) to the Hue (from 0 to 1)</div>
<div>    // and the Saturation to the radius</div>
<div>    color = hsb2rgb(float3((angle/TWO_PI)+_Time.y,radius,1.0));</div>
<div>    //gl_FragColor = vec4(color,1.0);</div>
<div>            // Albedo comes from a texture tinted by color</div>
<div>            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * float4(color.x,color.y,color.z,1.0);</div>
<div>            o.Albedo = c.rgb;</div>
<div>            // Metallic and smoothness come from slider variables</div>
<div>            o.Metallic = _Metallic;</div>
<div>            o.Smoothness = _Glossiness;</div>
<div>            o.Alpha = c.a;</div>
<div>        }</div>
<div>        ENDCG</div>
<div>    }</div>
<div>    FallBack "Diffuse"</div>
<div>}</div>
</div>

My attempt to recreate my arrow shader from week 2 (sadly I was not able to get this to work)

<div>
<div>Shader "Custom/week9"</div>
<div>{</div>
<div>    Properties</div>
<div>    {</div>
<div>        _Color ("Color", Color) = (1,1,1,1)</div>
<div>        _MainTex ("Albedo (RGB)", 2D) = "white" {}</div>
<div>        _Glossiness ("Smoothness", Range(0,1)) = 0.5</div>
<div>        _Metallic ("Metallic", Range(0,1)) = 0.0</div>
<div>    }</div>
<div>    SubShader</div>
<div>    {</div>
<div>        Tags { "RenderType"="Opaque" }</div>
<div>        LOD 200</div>
<div>        CGPROGRAM</div>
<div>        // Physically based Standard lighting model, and enable shadows on all light types</div>
<div>        #pragma surface surf Standard fullforwardshadows</div>
<div>        // Use shader model 3.0 target, to get nicer looking lighting</div>
<div>        #pragma target 3.0</div>
<div>        sampler2D _MainTex;</div>
<div>        struct Input</div>
<div>        {</div>
<div>            float2 uv_MainTex;</div>
<div>        };</div>
<div>        half _Glossiness;</div>
<div>        half _Metallic;</div>
<div>        fixed4 _Color;</div>
<div>        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.</div>
<div>        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.</div>
<div>        // #pragma instancing_options assumeuniformscaling</div>
<div>        UNITY_INSTANCING_BUFFER_START(Props)</div>
<div>            // put more per-instance properties here</div>
<div>        UNITY_INSTANCING_BUFFER_END(Props)</div>
<div>        float2 brickTile(float2 _st, float _zoom){</div>
<div>    _st *= _zoom;</div>
<div></div>
<div></div>
<div>    return frac(_st);</div>
<div>}</div>
<div>float circle(in float2 _st, in float _radius){</div>
<div>    float2 dist = _st-float2(0.5,0.5);</div>
<div>    return 1.-smoothstep(_radius-(_radius*0.1),</div>
<div>                         _radius+(_radius*0.1),</div>
<div>                         dot(dist,dist));</div>
<div>}</div>
<div>float2 rotate2D (float2 _st, float _angle) {</div>
<div>    _st -= 0.5;</div>
<div>    _st =  float2x2(cos(_angle),-sin(_angle),</div>
<div>                sin(_angle),cos(_angle)) * _st;</div>
<div>    _st += 0.5;</div>
<div>    return _st;</div>
<div>}</div>
<div>float2 tile (float2 _st, float _zoom) {</div>
<div>    _st.x += step(1., fmod(_st.y,2.0)) * 2.;</div>
<div>    _st *= _zoom;</div>
<div></div>
<div>    return frac(_st);</div>
<div>}</div>
<div>float2 rotateTilePattern(float2 _st){</div>
<div>    float PI = 6.28318530718/2;</div>
<div>    //  Scale the coordinate system by 2x2</div>
<div>    _st *=2.0;</div>
<div>    //  Give each cell an index number</div>
<div>    //  according to its position</div>
<div>    float index = 0.0;</div>
<div>    index += step(1., fmod(_st.x,2.0));</div>
<div>    index += step(1., fmod(_st.y,2.0))*2.0;</div>
<div>    //      |</div>
<div>    //  2   |   3</div>
<div>    //      |</div>
<div>    //--------------</div>
<div>    //      |</div>
<div>    //  0   |   1</div>
<div>    //      |</div>
<div>    // Make each cell between 0.0 - 1.0</div>
<div>    _st = frac(_st);</div>
<div>    // Rotate each cell according to the index</div>
<div>    if(index == 1.0){</div>
<div>        //  Rotate cell 1 by 90 degrees</div>
<div>        _st = rotate2D(_st,PI*0.25);</div>
<div>    } else if(index == 2.0){</div>
<div>        //  Rotate cell 2 by -90 degrees</div>
<div>        _st = rotate2D(_st,PI*-1.);</div>
<div>    } else if(index == 3.0){</div>
<div>        //  Rotate cell 3 by 180 degrees</div>
<div>        _st = rotate2D(_st,PI*+0.75);</div>
<div>    }</div>
<div></div>
<div>    return _st*2.;</div>
<div>}</div>
<div>        void surf (Input IN, inout SurfaceOutputStandard o)</div>
<div>        {</div>
<div></div>
<div>    float3 color = float3(0.0,0.0,0.0);</div>
<div>    float PI = 6.28318530718/2;</div>
<div>    float TWO_PI= 6.28318530718;</div>
<div>    // Use polar coordinates instead of cartesian</div>
<div>    float2 _st = float2(0.5, 0.5);</div>
<div>    float2 toCenter = IN.uv_MainTex - _st;</div>
<div>    float angle = atan2(toCenter.x,toCenter.y);</div>
<div>    float radius = length(toCenter)*2.0;</div>
<div></div>
<div></div>
<div>    _st = tile(float2(-_st.y+(frac(_Time.y)),-_st.x),3.0);</div>
<div></div>
<div>    _st = rotateTilePattern(_st);</div>
<div>    float clr= circle(_st-_st.x,(0.5-_st.y));</div>
<div>    color = float3(clr,clr,clr);</div>
<div></div>
<div>    float3 blue=float3(0.003,0.575,1.000);</div>
<div>    color=lerp(color,blue,.9);</div>
<div>            o.Albedo = 1.0;</div>
<div>            // Metallic and smoothness come from slider variables</div>
<div>            o.Metallic = _Metallic;</div>
<div>            o.Smoothness = _Glossiness;</div>
<div>            o.Alpha = 1.0;</div>
<div>        }</div>
<div>        ENDCG</div>
<div>    }</div>
<div>    FallBack "Diffuse"</div>
<div>}</div>
</div>

I also looked at using Unity’s animator to switch between shaders (image 2 in google drive folder)

 

Week 5 – Dysmorphic Mosaic

screen-shot-2021-03-17-at-12-35-43-am screen-shot-2021-03-17-at-12-36-23-am


#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D tex0;
uniform vec2 uResolution;
uniform float uTime;
uniform float uDisplacement;
uniform vec2 uMousePosition;

varying vec2 vTexCoord;

float amt = -0.05; // the amount of displacement
float squares = 40.0; // the number of squares to render vertically

void main() {

float aspect = uResolution.x / uResolution.y;
float offset = amt * 0.5;

vec2 uv = vTexCoord;

// the texture is loaded upside down and backwards by default so lets flip it
uv.y = 1.0 - uv.y;

// copy of the texture coords
vec2 tc = uv;

// move into a range of -0.5 - 0.5
uv -= 0.5;

// correct for window aspect to make squares
uv.x *= aspect;

// tile will be used to offset the texture coordinates
vec2 tile = fract(uv * squares + 0.5) * (tan(amt));

// sample the texture using our computed tile
// offset will remove some texcoord edge artifacting
vec4 tex = texture2D(tex0, vec2(fract(tc*uDisplacement) + fract(tile*uDisplacement-uTime*0.1) - offset));

// render the output
gl_FragColor = tex;

}