Posts Tagged ‘Quartz Composer

05
Dec
10

The Beauty of Bilinear

I’ve recently got into making very low-res images. For various reasons, they’re quite useful for some purposes. Here are some nice examples of what happens when you blow up very small images (in this case from a simple RGB random pixel generator CIFilter), using QCs default bilinear filtering.

‘tb Bilinear 1.0.qtz’ in the widget.

02
Mar
10

3D Lissajous Curves

JavaScript Array > Kineme GL Line Structure.

04
Jun
09

More Random-Walking

Random-walk with bezier curves:

02
Apr
08

tb_sphericalHarmonics 1.0 In Action

Check out this clip Rob McDougall made using tb_sphericalHarmonics 1.0, with lots of controls hooked-up to audio levels in VDMX.
Music is ‘Frau feat. I-Robots’ by Boys Noize, from the ablum ‘Oi Oi Oi’.

Cheers for passing that on. It’s really nice to see people using these things!

26
Mar
08

Radial Vertex Displacement Mapping

Thanks to some great work (and a fortuitous accident) from the good people at Kineme.net, it’s now possible to use moving images as Displacement Maps in a GLSL Vertex Shader in QC. So I thought I’d give it a go.

Radial VDM 01Radial VDM 02Radial VDM 04Radial VDM 03

The input is the iSight camera, with luminosity modulating the Radius parameter of a function to bend a GLSL grid into a sphere, so what we have is essentially a radial distortion of a sphere, based on the luminosity of the input texture.

This is very cool, and something I’ve been wanting to do for ages. It opens the doors to all sorts of mesh-related fun, as you can potentially use custom CIFilter or GLSL Fragment shader code to create different displacement images to feed into the patch.

The only problem is, it runs quite slowly on my machine. It’s undoubtedly much faster to do this kind of thing with Vertex Buffer objects, but that means custom OpenGL code in a QC plugin, which is way beyond my capabilities currently. Sadly.

07
Mar
08

Truchet Tile

Just a little project inspired by this page.
Input is the iSight (but you probably can’t tell).

Truchet Tile QC 01

Truchet Tile QC 02

///////////////////////////
////	  Inputs       ////
///////////////////////////

// Video input
uniform sampler2D VideoIn;
// Truchet tile input
uniform sampler2D TexTile;
// Tile scale (0.01 > 0.5)
uniform vec2 Tile;

///////////////////////////
////	 Functions     ////
///////////////////////////

// Rotate 90 degrees
vec2 rotate90(vec2 phase)
{
	// Rotation matrix
	mat3 rotate = mat3(	0.0,-1.0,0.0,
					1.0,0.0,0.0,
					0.0,0.0,1.0);
	return (vec3(phase,1.0) * rotate).xy;
}

// Flip horizontally
vec2 flipX(vec2 phase)
{
	return vec2(1.0-phase.x,phase.y);
}

// Flip vertically
vec2 flipY(vec2 phase)
{
	return vec2(phase.x,1.0-phase.y);
}

///////////////////////////
////	 Main Loop     ////
///////////////////////////

void main()
{
	// Texture coordinates
	vec2 xy = gl_TexCoord[0].xy;
	
	// Tile coordinates
	vec2 phase = fract(xy / Tile);
	
	// Quantised texture coordinates
	vec2 phaseFloor = floor(xy / Tile) * Tile;
	
	// VideoIn color at quantised coords
	vec4 vid = texture2D(VideoIn,phaseFloor);
	
	// Luminosity of input video pixel
	vec4 lumcoeff = vec4(0.299,0.587,0.114,0.0);
	float lum = dot(vid,lumcoeff);
	
	// Transform texture tile lookup coords based in input luminosity
	vec2 sampleCoord =	(lum > 0.75) ? 	rotate90(phase) :
				(lum > 0.5) ?	flipX(phase) :
				(lum > 0.25) ? 	flipY(phase) :
				phase;
	
	// Output fragment color * tile color
	gl_FragColor = gl_Color * texture2D(TexTile, sampleCoord);
}

The TexTile image looks like this:

Truchet Tile Image

04
Mar
08

Variable Smoothstep Function

float smoothstepVar(float edge1, float edge2, float curve, float value)
{
float width = edge2 - edge1;
float phase = (value - edge1) / width;
phase = clamp(phase,0.0,1.0);
curve = (curve + 0.025) * 99.075;
float outValue = pow(phase,curve);
return outValue;
}

A variation on the builtin GLSL Smoothstep function.
Outputs a float in the range 0.0 > 1.0 when value is between Edge1 and Edge2.
The curve parameter changes the curve of the output between Exponential In and Exponential Out shapes.
Curve parameter should be hooked up to an Exponential control. I’ll eventually get around to making the curve variable exponential in the function itself.

In the example below the function is applied to the distance of each pixel from the centre of the texture, with different curve settings.

Variable SmoothstepVariable Smoothstep 02Variable Smoothstep 03Variable Smoothstep 04




Twitter

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

March 2017
M T W T F S S
« Aug    
 12345
6789101112
13141516171819
20212223242526
2728293031  

Links

Blog Stats

  • 467,487 hits