Week 1: Introduction and Visual Composition

Observation: Water Reflection Pattern

Observations: Water refractions are caused by light refracted in different directions going from air into water. This pattern is always dynamic responding to the water surface movement and wind. Makes me feel peaceful but dynamic at the same time. It’s like animated glass. It’s interesting because this pattern is moving according to physics system, a bunch of rules. I can create a simplified refraction set up (water surface from dynamic noise TOP, assume flat underneath plane, light direction is top down along y axis) and write a GLSL shader according to this assumption.

Untitled

Untitled

Visual Composition: GLSL Refraction Shader

In TouchDesigner, I made a water refraction GLSL shader to achieve this effect:

GLSL vertex shader

                       GLSL vertex shader

added some post processing

            added some post processing
out vec4 fragColor;
void main()
{
	vec3 surfaceNormal = texture(sTD2DInputs[0], vUV.st).rgb;
	vec3 lightDirection = vec3(0, -1, 0); // directy down in y axis
	// 1.0: index refraction of air; 1.33: index refraction of water.
	vec3 refracted = refract(lightDirection, surfaceNormal, 1.0 / 1.33); 
	refracted = normalize(refracted);
	
	// build our intersection plane
	vec3 planeNormal = vec3(0, 1, 0); // direct opposite of light, directly up.
	vec3 p0 = vec3(0, -0.5, 0); // point on the plane. set the intersection plane below refractive surface.
	
	// build our ray
	vec3 r0 = vec3(vUV.s, 0., vUV.t);
	vec3 rayDirection = refracted;
	
	float t = -dot(r0 - p0, planeNormal) / dot(rayDirection, planeNormal);

	// intersect with plane
	vec3 planeIntersect = r0 + t * rayDirection;
	
	vec4 color = vec4(planeIntersect, 1.0);
	fragColor = TDOutputSwizzle(color);
}

Other Observations

Observation: Portrait Reconstruction

Inspired by the sunflower example in class, I saw these distorted/filtered human faces on instagram and find them interesting. Cognitively we recognize each face, but these faces feel different.

confused, suspicious, bizzare

confused, suspicious, bizzare

broken, vulnerable, fragile, sharp

broken, vulnerable, fragile, sharp

by https://www.instagram.com/principal.studio/

Snapinsta.app_268593145_385142783364734_8261180037788732384_n_1080.jpg

Snapinsta.app_267969531_2947495155467723_8189363597075609143_n_1080.jpg

by https://www.instagram.com/brud.creative/

Visual Composition: Portrait Reconstruction in p5.js