01
Jul
09

Interesting Moiré Error

I was just experimenting with a moiré pattern Core Image filter, and made a little mistake in my code, with interesting results.

The basic idea was to try and emulate the interference patterns you get when you try to video something like an LCD screen, closeup, and at a slight angle.

I thought I could do this by using CoreImage StripesGenerator to create a base image, then applying slightly different PerspectiveTransforms to two copies of the image, then compositing them back together again. It seems to work pretty well.

I’ve done the whole thing using JavaScript in a Core Image Filter patch, though it could also be done using standard Quartz Composer patches and noodling them together.

I stumbled on the effect above when I tried to increase the size of the base image, while leaving the dimensions of the Crop filter the same. This seems to force extra interpolation, which smoothes out the lines, creating the gradients you can see in the screenshots above.

Here’s the code to create the effect above:

/*
	Moiré effects using CIStripes and Perspective Transform filters.
	
	toneburst 2009
	https://machinesdontcare.wordpress.com
*/

function __image main(__boolean Trigger) {
	
	var black = new Vec(0,0,0,1);
	var white = new Vec(1,1,1,1);
	var center = new Vec(128,128);
	var dims = new Vec(0,0,1024,1024);
	var stripes = Filter.CIStripesGenerator(center,black,white,1,1);
	
	var rotate90 = new AffineTransform().rotateByDegrees(90);
	stripes = Filter.affineTransform(stripes,rotate90);
	
	stripes = Filter.CICrop(stripes,dims);
	
	var offset = 2;
	tl0 = new Vec(0 - Math.random() * offset, 256 - Math.random() * offset);
	tr0 = new Vec(256 - Math.random() * offset, 255 - Math.random() * offset);
	br0 = new Vec(256 - Math.random() * offset, 0 - Math.random() * offset);
	bl0 = new Vec(0 - Math.random() * offset, 0 - Math.random() * offset);
	var stripesP_0 = Filter.CIPerspectiveTransform(stripes,tl0,tr0,br0,bl0);
	
	tl1 = new Vec(0 + Math.random() * offset, 256 + Math.random() * offset);
	tr1 = new Vec(256 + Math.random() * offset, 256 + Math.random() * offset);
	br1 = new Vec(256 + Math.random() * offset, 0 + Math.random() * offset);
	bl1 = new Vec(0 + Math.random() * offset, 0 + Math.random() * offset);
	var stripesP_1 = Filter.CIPerspectiveTransform(stripes,tl1,tr1,br1,bl1);
	
	var moiré = Filter.CIDarkenBlendMode(stripesP_0,stripesP_1);
	
	return moiré;
}

The single input ‘Trigger’ causes a new pattern to be generated whenever it changes state (from off to on or vice-versa).

To get a more standard moiré effect, replace the line

var dims = new Vec(0,0,1024,1024);
with
var dims = new Vec(0,0,256,256);

There’s probably mileage in rejigging the code to do something a bit more subtle than just making a random pattern every time the button is pushed.

Advertisements

0 Responses to “Interesting Moiré Error”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Twitter

July 2009
M T W T F S S
« Jun   Sep »
 12345
6789101112
13141516171819
20212223242526
2728293031  

Links

Blog Stats

  • 472,055 hits

%d bloggers like this: