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

Week 10

For this week I was pretty amazed at how easy shader graph makes things.

2021-04-18-20_08_38-5-unity-magma-shader-youtube

Magma Shader

I created this Magma shader after experimenting with a rock texture I found online. I had originally wanted to make a sphere have cracks with energy seeping out of them, but then I got the idea to make magma instead. I’m also using some bloom to achieve the bright spots.

2021-04-18-20_08_01-5-unity-cloaking-shader-youtube

Cloaking Shader

I got inspired to make a shader depicting a common game mechanic of “cloaking” after watching the alpha clip lesson.

Week 9

2021-04-18-01_00_11-shaderart-week9-image-homework-pc-mac-linux-standalone-unity-2019-4-24f

For this weeks homework it was eye opening to finally be able to port our shaders to Unity as well as learn more about how rendering in Unity works. Previously the graphics and shader side of Unity has kind of been a black box to me but it was great finally being able to understand it all.

I found it a bit confusing converting my shaders to HLSL, having to get used to the new structure as well as all the new keywords and functions.

Pictured is some primitives with different surface shaders applied and the top cube is one of my Week 1 shaders converted to HLSL.

 

Week 3

This week I had a lot of fun working with simplex noise and adding randomness to my sketches. I experimented with the complex shape function I used in my previous sketches and integrated noise into it, I found it started to look really interesting so I kept on messing around until I got to what you see below. Noise and randomness are very powerful tools to add complexity to a shader and I’m excited to see what else is possible.


// Author: Brian Nguyen
// Title: Random Noise Shape without Grid

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
#define PI 3.14159265359
#define TWO_PI 6.28318530718

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

vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.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, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.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.0 * dot(m, g);
}

float drawSidedShape(vec2 st, vec2 pos, float size, int sides, vec2 indices) {
float d = 0.0;
// st = st *2.-1.;
st -= pos;

// Number of sides of your shape
int N = sides;

// Angle and radius from the current pixel
float a = atan(st.x,st.y)+PI;
float r = TWO_PI/float(N);

// Shaping function that modulate the distance
d = cos(floor(sin(u_time+snoise(st + indices)*2.096)*1.0+a/r)*r-a)*length(st);

d = smoothstep( 0.734 ,1.0-size, 1.0-d);

return d;
}

vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}

void main() {

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

vec2 indices;

// st = createGrid( st, vec2(5.), indices);

vec3 color = vec3(0.);

float r = 0.0;
r += drawSidedShape(st,vec2(.5,.5),0.016,9, indices);
float bg = snoise(st+vec2(u_time+snoise(st), u_time+snoise(st)))*0.2-0.1;

color = mix( color, hsv2rgb(vec3(float(st.y+u_time),1.0,1.00)), bg);
color = mix( color, hsv2rgb(vec3(float(st.x),0.336,1.00)), r);

gl_FragColor = vec4(color,1.0);
}

Week 2

For this shader I tried out a lot of different patterns and shapes. I started with using rectangles that span across cells but I later turned to circles as I thought they were more mesmerizing especially when in motion.

While working on it I got more comfortable with the 4 cell system where at first it was kind of confusing me.

// Author: Brian Nguyen
// Title: 2D Pattern

#ifdef GL_ES
precision mediump float;
#endif

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

#define PI 3.14159265359
#define TWO_PI 6.28318530718

vec2 createGrid(in vec2 st,in vec2 grid,out vec2 indices){
 
 // multiply by the number of cells
 // [0,1] range => [0,10] (for example)
 st*=grid;
 
 // get the cell indices
 // for example, in a grid of 10x10:
 // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
 indices=floor(st);
 
 // use fract to get the fractional amount of st
 // 9.5 => 0.5
 // shows the xy coordinate in each cell
 st=fract(st);
 
 return st;
}

float drawSidedShape(vec2 st,vec2 pos,float size,int sides,vec2 indices){
 float d=0.;
 // st = st *2.-1.;
 st-=pos;
 
 // Number of sides of your shape
 int N=sides;
 
 // Angle and radius from the current pixel
 float a=atan(st.x,st.y)+PI;
 float r=TWO_PI/float(N);
 
 // Shaping function that modulate the distance
 d=cos(floor(sin(u_time)*1.+a/r)*r-a)*length(st);
 
 d=smoothstep(.734,1.-size,1.-d);
 
 return d;
}

float drawCircle(vec2 st,vec2 pos,float size){
 float d=distance(st,pos);
 // step shows values > argument 1, and we want the opposite
 // so we invert the results by subtraction 1.0 - the value
 return 1.-step(size,d);
}
void main(){
 
 vec2 st=gl_FragCoord.xy/u_resolution.xy;
 st.x*=u_resolution.x/u_resolution.y;
 
 vec2 indices;
 
 st=createGrid(st,vec2(5.),indices);
 
 vec3 color=vec3(0.);
 
 if(mod(indices.x,2.)==0.&&mod(indices.y,2.)==0.){
 
 // lower left cell - triangle fan
 
 color=vec3(0.);
 float r=0.;
 r+=drawSidedShape(st,vec2(.5,.5),.016,3,indices);
 color=mix(color,vec3(1.),r);
 
 }else if(mod(indices.x,2.)==1.&&mod(indices.y,2.)==0.){
 
 // lower right cell - orange bg with blue circles
 color=vec3(.945,.549,.001);
 float r=0.;
 
 for(int k=0;k<20;k++){
 for(int i=0;i<20;i++){
 r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
 }
 
 }
 
 color=mix(color,vec3(.023,.530,.905),r);
 
 }else if(mod(indices.x,2.)==0.&&mod(indices.y,2.)==1.){
 
 // upper left - cyan with blue scircles
 color=vec3(.320,.945,.733);
 float r=0.;
 
 for(int k=0;k<20;k++){
 for(int i=0;i<20;i++){
 r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
 }
 
 }
 
 color=mix(color,vec3(.023,.530,.905),r);
 
 }else{
 
 // upper right - white bg with black circles
 
 color=vec3(.940,.940,.940);
 float r=0.;
 
 for(int k=0;k<20;k++){
 for(int i=0;i<20;i++){
 r+=drawCircle(st,vec2(0.+float(i)*.2,0.+float(k)*.2)+vec2(0.,sin(u_time))-1.,.05);
 }
 
 }
 
 color=mix(color,vec3(0.),r);
 }
 
 gl_FragColor=vec4(color,1.);
}

Week 10 HW

For this week, I created a holographic shader using the shader graph and post-processing effects. I modified the alpha and emission in the shader graph to achieve the line effect, and used a global volume post processing effect to add a bloom effect.

hologram