Week 8 – Bump Map Butterfly

screen-shot-2021-04-01-at-4-00-40-pm-minscreen-shot-2021-04-01-at-4-01-33-pm-minscreen-shot-2021-04-01-at-4-01-53-pm-minscreen-shot-2021-04-01-at-4-02-14-pm-min


let myCamera;
let webCam;
let videoMesh;
let myShader;
let drawStoke = false;
let displaceAmt;

function preload() {

//load a 3d model
videoMesh = loadModel('butterfly.obj');

// load our shader
// note that shader names don't have to be the same
// this is useful when multiple shaders use the same .vert or .frag file
// you don't need to write code multiple times
myShader = loadShader('displace.vert', 'default.frag');

capture = createCapture(VIDEO);
capture.size(640, 480);
capture.hide(); // hide it
}

function keyPressed(){

// press spacebar to enable/disable drawing strokes

if( keyCode == 32){

drawStoke= !drawStoke;
}
}

function setup() {

// 640 x 480 canvas
createCanvas(windowWidth-50, windowHeight-50, WEBGL);
myCamera = createCamera();

displaceAmt = createSlider(0.0, 3.0, 1.0, 0);
displaceAmt.position(10, height + 5);
displaceAmt.style('width', '200px');

}

function draw() {

background(250);

// elapsed time in seconds
let elapsedSeconds = millis()/1000;
let rotationAngle = TWO_PI*elapsedSeconds*0.025;

// set the camera position
// we're rotating in a circular orbit around the center
myCamera.setPosition(sin(rotationAngle)*300, rotationAngle, cos( rotationAngle) * 300);

// always look at the center
myCamera.lookAt(0, 0, 0);

// set the camera perspective
myCamera.perspective(radians(50), width / height, 0.1, 500);

noStroke();

push();

// rotate and scale mesh
// we scale it 50x to bring it to the dimensions of our 3D world
// model/object space => world space

// scale(50 * 4/3, 50, 50);
scale(250, 250, 250);
rotateX(2);

// begin the shader
// send uniform data
shader(myShader);
myShader.setUniform("uTime", elapsedSeconds);
myShader.setUniform("uTexture0", capture);
myShader.setUniform("uDisplacementAmt", displaceAmt.value());

// turn off the shader & enable stroke() to see the 3D model
//stroke(255, 0, 0);

if( drawStoke ) {
stroke(255, 0, 0);
} else {
noStroke();
}

// draw the 3D model
model(videoMesh);
//rect(0, 0, 640, 480);

pop();

}

Week 8 – 3D Manipulation

screen-shot-2021-04-01-at-3-57-13-pmscreen-shot-2021-04-01-at-3-57-01-pm


let myCamera;
let mesh;
let myShader;
let myTexture;
let displayMode = 0;

function preload() {

//load a 3d model
mesh = loadModel('shiba.obj');

// load our shader
myShader = loadShader('shader.vert', 'shader.frag');

// load a cat pic
myTexture = loadImage('doge.jpeg');
}

function setup() {

// 640 x 480 canvas
createCanvas(640, 640, WEBGL);

myCamera = createCamera();
}

function keyPressed(){

//print( keyCode );

switch(keyCode ){
case 49:
// press '1'
// display fill color
print("Displaying fill");
displayMode = 0;
break;
case 50:
// press '2'
// display model position
// this is the vertex/position from the model
print("Displaying model position (normalized)");
displayMode = 1;
break;
case 51:
// press '3'
// display clip position
// goes from -1 => +1 in all axes
print("Displaying clip position");
displayMode = 2;
break;
case 52:
// press '4'
// display normalized screen position (XY)
print("Displaying 2D screen position");
displayMode = 3;
break;
case 53:
// press '5'
// use normalized screen position (XY) as texture coordinates
print("Displaying 2D screen position as texture");
displayMode = 4;
break;
case 54:
// press '6'
// display normals
print("Displaying normals");
displayMode = 5;
break;
}
}

function draw() {

background(220);

// elapsed time in seconds
let elapsedSeconds = millis()/1000;
let rotationAngle = TWO_PI*elapsedSeconds*0.15;


// set the camera position
// we're rotating in a circular orbit around the center
myCamera.setPosition(sin(rotationAngle)*50, 0, cos( rotationAngle) * 50);

// always look at the center
myCamera.lookAt(0, 0, 0);

// set the camera perspective
myCamera.perspective(PI / 3.0, width / height, 0.1, 500);

noStroke();

// Animation
// It doesn't loop perfectly I can't figure it out
push();
displayMode = 1;
for (let i = 1; i < 6; i++) {
print(displayMode);
if (displayMode < 6){
// displayMode = 1;
background(displayMode);
displayMode = displayMode + elapsedSeconds * 0.1;
} else if (displayMode > 6){
displayMode = 1;
}
}
pop();

push();

// rotate and scale mesh
// we scale it 50x to bring it to the dimensions of our 3D world
// model/object space => world space

translate(0, 9, 0);
rotateZ(3.1);
scale(3, 3, 3);

// begin the shader
// send uniform data
shader(myShader);
myShader.setUniform("uDisplayMode", displayMode);
myShader.setUniform("uTexture0", myTexture);

// turn off the shader & enable stroke() to see the 3D model
// stroke(255, 127, 0);

// draw the 3D model
model(mesh);
// displayMode = 5;
//box(0.5);

pop();
}

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;

}

Week 5 – Image Distortion

screen-shot-2021-03-17-at-2-16-54-am-min screen-shot-2021-03-17-at-2-10-40-am-min screen-shot-2021-03-17-at-2-01-04-am-min

Image Distortion (Noise)


#ifdef GL_ES
precision mediump float;
#endif
 
uniform vec2 uMousePosition;
uniform vec2 uResolution;

uniform sampler2D uTexture0; // image
uniform sampler2D uTexture1; // image2
uniform bool uMousePressed;
uniform float uTime;
uniform float uDisplacement;
 
varying vec2 vTexCoord;

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

// 2D Noise based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {
 vec2 i = floor(st);
 vec2 f = fract(st);

// Four corners in 2D of a tile
 float a = random(i);
 float b = random(i + vec2(1.0, 0.0));
 float c = random(i + vec2(0.0, 1.0));
 float d = random(i + vec2(1.0, 1.0));

// Smooth Interpolation

// Cubic Hermine Curve. Same as SmoothStep()
 vec2 u = f*f*(3.0-2.0*f);
 // u = smoothstep(0.,1.,f);

// Mix 4 coorners percentages
 return mix(a, b, u.x) +
 (c - a)* u.y * (1.0 - u.x) +
 (d - b) * u.x * u.y;
}

// calulate luminosity/brightness of pixel from rgb
float rgb_to_luma( vec3 color ){
 return 0.2126*color.r + 0.7152*color.g + 0.0722*color.b;
}

// map range (just like processing/p5)
float map(float value, float min1, float max1, float min2, float max2) {
 
 return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}

void main() {
 
 vec4 color = vec4(0.0, 0.0, 0.0, 1.0);
 
 float br = rgb_to_luma(texture2D(uTexture0, vec2(vTexCoord.x, 1.0-vTexCoord.y)).rgb);
 
 vec2 uv = vec2(vTexCoord.x, 1.0-vTexCoord.y);
 color = texture2D(uTexture0, fract(uv));

// Use the noise function
 float n = noise(uv);
 
 float mode = 4.0;
 mode = floor(mode);
 
 if( mode==4.0){

vec4 color1 = texture2D(uTexture0, vec2(vTexCoord.x, fract(1.0-vTexCoord.y)));
 
 // get brightness
 // map from 0, 1 =&amp;gt; -1, 1
 float br = rgb_to_luma(color1.rgb);
 br = map(br, 0.0, 1., -1., 1.);
 
 // add brigness to current pixel lookup
 // use fract to repeat values
 color = texture2D(uTexture1, vec2(fract(vTexCoord.x+ br*uDisplacement), fract(1.0-vTexCoord.y+ br*uDisplacement)));
 } 
 
 
 gl_FragColor = vec4(color);
}

 

Week 3 Homework

screen-shot-2021-02-23-at-1-11-37-amscreen-shot-2021-02-23-at-1-12-03-amscreen-shot-2021-02-23-at-1-12-13-amscreen-shot-2021-02-23-at-1-11-16-am


// Author: Francisco
// Title: Assignment 2 - Part 1

#ifdef GL_ES
precision mediump float;
#endif

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

#define PI 3.1415926535

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

float map (float value, float min1, float max1, float min2, float max2) {
return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
}

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.0-st.y);

return result;
}

float drawCircle(vec2 st, vec2 pos, float size){

float result = distance(st, pos);

result = 1.0-step(size, result);
//result = smoothstep(0.7, 0.6, size);

return result;
}

void main() {

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

float r = random(vec2(0., 400.));

vec3 color = vec3(0.860,0.509,0.111);
color = vec3(-st.x*1., st.y*1., cos(sin(u_time)));

float c1 = drawCircle(st, vec2(r, 0.5), 0.3);
float c2 = drawCircle(st, vec2(0.75, r), 0.5);
float c3 = drawCircle(st, vec2(r, 0.75), 0.5);
float c4 = drawCircle(st, vec2(0.25, r), 0.5);
float c5 = drawCircle(st, vec2(r, 0.25), 0.5);
float c6 = drawCircle(st, vec2(0.5, r), 0.5);
float c7 = drawCircle(st, vec2(r, 0.5), 0.5);

float r1 = drawRectangle(st, vec2(0.5), vec2(0.21));
float r2 = drawRectangle(st, vec2(0.5), vec2(0.43));
float r3 = drawRectangle(st, vec2(0.5), vec2(0.6));
float r4 = drawRectangle(st, vec2(0.5), vec2(0.8));
float r5 = drawRectangle(st, vec2(0.5), vec2(1.0));

float d = distance(st, vec2(0.5,0.5))*1.489;
c6, c7 = d;
r1, r2, r3, r4, r5 = d;

c6 = sin(u_time*PI*r+d);
c7 = sin(u_time*PI*1.+d);
r1, r2, r3, r4, r5 = sin(u_time*PI*1.+d);

color = mix(color, vec3(random(vec2(3.)), random(vec2(0.8)), random(vec2(0.7))), c1 * random(vec2(0.09)));
color = mix(color, vec3(random(vec2(3.)), random(vec2(0.8)), random(vec2(0.7))), c2 * random(vec2(0.09)));
color = mix(color, vec3(random(vec2(3.)), random(vec2(0.)), random(vec2(0.7))), c3 * random(vec2(0.09)));
color = mix(color, vec3(3., 0.8, 0.7), c4 * 0.09);
color = mix(color, vec3(random(vec2(3.)), random(vec2(3.)), random(vec2(0.7))), c5 * random(vec2(0.03)));
color = mix(color, vec3(3., 1., 0.7), c6 * 0.5);
color = mix(color, vec3(random(vec2(3.)), random(vec2(0.8)), random(vec2(0.7))), c7 * random(vec2(0.4)));

color = mix(color, vec3(0., 0., 1.), r1 * 0.1);
color = mix(color, vec3(0., 0., 1.), r2 * 0.1);
color = mix(color, vec3(0., 0., 1.), r3 * 0.1);
color = mix(color, vec3(0., 0., 1.), r4 * 0.1);
color = mix(color, vec3(0., 0., 1.), r5 * 0.1);

gl_FragColor = vec4(color,0.9);
}

 

screen-shot-2021-02-23-at-12-32-42-amscreen-shot-2021-02-23-at-12-33-04-am


// Author: Francisco Samayoa
// Title: Assignment 3 - Part 2

#ifdef GL_ES
precision mediump float;
#endif

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

#define PI 3.14159265358979323846

// Simplex 2D noise

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);
}

vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices) {

st *= grid;

indices = floor(st);
st = fract(st);

return st;
}

vec2 rotate2D(vec2 _st, float _angle){
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}

float drawRectangle(vec2 st, vec2 pos, vec2 size) {
float result = 1.0;
vec2 border = (1.0 - size) / 2.0;

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.0 -st.y);
return result;
}

float drawCircle(vec2 st, vec2 pos, float size) {
float result = distance(st, vec2(pos));
// blurry
result = 1.0 - smoothstep(size - 0.3, size + 0.676, result);
return result;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

st.x += snoise(st + vec2(0, u_time * 0.1) * 1.2);

vec2 st0 = st;
vec2 indices;

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

float pct = smoothstep(0.9, 0.1, st.x);
float pct2 = smoothstep(0.1, 0.9, st.y);

float n = snoise(st) * 0.5 + 0.5;


n = snoise(vec2(st.x + u_time * 0.3, 0)) * 0.5 + 0.5;

vec3 color = vec3(0);

if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 0.){

// lower left cell

//color = vec3(0.955,0.750,0.002);
color.r = snoise(st * 2. + vec2(0., u_time)) * 0.5 + 0.5;

color = mix(color, vec3(0.933,1.000,0.493), pct/pct2);

} else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.){

// lower right cell

st = rotate2D(st, PI * 0.25);

//color = vec3(0.975,0.525,0.355);
color.r = snoise(st * 2. + vec2(100., u_time * 0.2)) * 0.5 + 0.5;

color = mix( color, vec3(1., 0., 0), (1.-pct)/(-pct2));


} else if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 1.){

// upper left

//color = vec3(0.745,0.348,0.062);
color.r = snoise(st * 2. + vec2(200., u_time * 0.4)) * 0.5 + 0.5;

color = mix( color, vec3(0.737,1.000,0.648), (pct)/(1.-pct2));

} else {

// upper right

color = vec3(0.800,0.365,0.155);

color = mix( color, vec3(0.794,0.866,1.000), (1.-pct)/(1.-pct2));
}

gl_FragColor = vec4(color,1.0);
}

Week 2 Homework

screen-shot-2021-02-23-at-12-11-23-amscreen-shot-2021-02-23-at-12-11-40-am


// Author: Francisco
// Title: Assignment 2 - Part 1

#ifdef GL_ES
precision mediump float;
#endif

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

#define PI 3.1415926535

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.0-st.y);

return result;
}

float drawCircle(vec2 st, vec2 pos, float size){

float result = distance(st, pos);

result = 1.0-step(size, result);
//result = smoothstep(0.7, 0.6, size);

return result;
}

void main() {

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

vec3 hsb;
hsb.r = st.x; // animate hue with time
hsb.g = 1.; // saturation
hsb.b = 1.; // brightness

vec3 color = vec3(0.860,0.509,0.111);
color = vec3(-st.x*1., st.y*1., cos(sin(u_time)));

float c1 = drawCircle(st, vec2(0.5, 0.5), 0.3);
float c2 = drawCircle(st, vec2(0.75, 0.75), 0.5);
float c3 = drawCircle(st, vec2(0.25, 0.75), 0.5);
float c4 = drawCircle(st, vec2(0.25, 0.25), 0.5);
float c5 = drawCircle(st, vec2(0.75, 0.25), 0.5);
float c6 = drawCircle(st, vec2(0.5, 0.5), 0.5);
float c7 = drawCircle(st, vec2(0.75, 0.5), 0.5);

float r1 = drawRectangle(st, vec2(0.5), vec2(0.21));
float r2 = drawRectangle(st, vec2(0.5), vec2(0.43));
float r3 = drawRectangle(st, vec2(0.5), vec2(0.6));
float r4 = drawRectangle(st, vec2(0.5), vec2(0.8));
float r5 = drawRectangle(st, vec2(0.5), vec2(1.0));

float d = distance(st, vec2(0.5,0.5))*1.489;
c6, c7 = d;
r1, r2, r3, r4, r5 = d;

c6 = sin(u_time*PI*0.+d);
c7 = sin(u_time*PI*1.+d);
r1, r2, r3, r4, r5 = sin(u_time*PI*1.+d);

color = mix(color, vec3(3., 0.8, 0.7), c1 * 0.09);
color = mix(color, vec3(3., 0.8, 0.7), c2 * 0.09);
color = mix(color, vec3(3., 0., 0.7), c3 * 0.09);
color = mix(color, vec3(3., 0.8, 0.7), c4 * 0.09);
color = mix(color, vec3(3., 3., 0.7), c5 * 0.03);
color = mix(color, vec3(3., 1., 0.7), c6 * 0.5);
color = mix(color, vec3(3., 0.8, 0.7), c7 * 0.4);

color = mix(color, vec3(0., 0., 1.), r1 * 0.1);
color = mix(color, vec3(0., 0., 1.), r2 * 0.1);
color = mix(color, vec3(0., 0., 1.), r3 * 0.1);
color = mix(color, vec3(0., 0., 1.), r4 * 0.1);
color = mix(color, vec3(0., 0., 1.), r5 * 0.1);

gl_FragColor = vec4(color,0.9);
}

screen-shot-2021-02-23-at-12-12-58-am


// Author: Francisco Samayoa
// Title: Assignment 2 - Part 2

#ifdef GL_ES
precision mediump float;
#endif

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

#define PI 3.14159265358979323846

vec2 createGrid( in vec2 st, in vec2 grid, out vec2 indices) {

st *= grid;

indices = floor(st);
st = fract(st);

return st;
}

vec2 rotate2D(vec2 _st, float _angle){
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}

float drawRectangle(vec2 st, vec2 pos, vec2 size) {
float result = 1.0;
vec2 border = (1.0 - size) / 2.0;

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.0 -st.y);
return result;
}

float drawCircle(vec2 st, vec2 pos, float size) {
float result = distance(st, vec2(pos));
// blurry
result = 1.0 - smoothstep(size - 0.3, size + 0.676, result);
return result;
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution.xy;
st.x *= u_resolution.x/u_resolution.y;

vec2 st0 = st;
vec2 indices;

st = createGrid( st, vec2(6.), indices);

float pct = smoothstep(0.9, 0.1, st.x);
float pct2 = smoothstep(0.1, 0.9, st.y);

vec3 color = vec3(0);

if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 0.){

// lower left cell

color = vec3(0.955,0.750,0.002);

color = mix(color, vec3(0.933,1.000,0.493), pct/pct2);

} else if( mod(indices.x, 2.) == 1.0 && mod(indices.y, 2.) == 0.){

// lower right cell

st = rotate2D(st, PI * 0.25);

color = vec3(0.975,0.525,0.355);

color = mix( color, vec3(1., 0., 0), (1.-pct)/(-pct2));


} else if( mod(indices.x, 2.) == 0.0 && mod(indices.y, 2.) == 1.){

// upper left

color = vec3(0.745,0.348,0.062);

color = mix( color, vec3(0.737,1.000,0.648), (pct)/(1.-pct2));

} else {

// upper right

color = vec3(0.800,0.365,0.155);

color = mix( color, vec3(0.794,0.866,1.000), (1.-pct)/(1.-pct2));
}

gl_FragColor = vec4(color,1.0);
}