Tip of the Hat to David Van Brink for his Pixel Bender efforts and especially for making me think of the generative possibilities of Pixel Bender in addition to image processing. And to Greg Best whose Core Image Kernel is the basis for this.

<languageVersion : 1.0;>
 
kernel RoundedRect
<
    namespace : "";
    vendor : "Creative Workflow Hacks: Dale Bradshaw, http://creative-workflow-hacks.com";
    version : 1;
    description : "Generates a Rounded Rect given an Upper Left coordinate, a Bottom Right coordinate, a Corner radius, and a Color or Sampled Footage";
    displayname: "Rounded Rect";
>
{
    input image4 image;
    output pixel4 result;
 
    parameter float4 color
  <defaultValue: float4(1,1,1,1);
   aeDisplayName: "Rect Color";
   aeUIControl: "aeColor";>;
 
   parameter bool transfer<defaultValue: false;aeUIControl: "aeCheckbox";aeDisplayName: "Sample Footage";>;
   parameter float radius<defaultValue:25.0;minValue:0.0;maxValue:100.0;>;
   parameter float2 upperLeft<aePointRelativeDefaultValue: float2(0.01, 0.01);aeDisplayName: "Upper Left";aeUIControl: "aePoint";>;
   parameter float2 bottomRight<aePointRelativeDefaultValue: float2(.98,.98);aeDisplayName: "Bottom Right";aeUIControl: "aePoint";>;
 
   void
    evaluatePixel()
    {
 
        float2 p = outCoord();
        float dist = 0.0;
 
        dist += (p.x < upperLeft.x + radius) ? pow((upperLeft.x + radius) - p.x, 2.0) : 0.0;
        dist += (p.y < upperLeft.y + radius) ? pow((upperLeft.y + radius) - p.y, 2.0) : 0.0;
        dist += (p.x > bottomRight.x -radius)   ? pow((bottomRight.x -radius) - p.x, 2.0)   : 0.0;
        dist += (p.y > bottomRight.y - radius)  ? pow((bottomRight.y -radius) - p.y, 2.0)   : 0.0;
 
        dist = sqrt(dist);
        dist = clamp(radius - dist, 0.0, 1.0);
 
        if(transfer)
        result = sampleNearest(image,p) * dist;
        else
        result = color * dist;
 
    }
}

Download db_roundedRect.pbk Pixel Bender kernel

This Kernel is set up as After Effects plugin, but it should be relatively easy to setup for Flash. I’ll update it when I get a chance to check it out.

If you’d like to explore the UV Mapping concept in a developer style with a little less hyperbole, take a look at AE: Projecting a Movie onto a Complex Surface where David van Brink walks you through his experiments and includes a sample AE project.

Pixel Bender is really exciting. A very accessible kernel-style image processing platform without the baggage and overhead of digging into the AE SDK. There is also a useful subset of the kernel language that works in Flash, like these 3D Normal Mapping experiments. Give it a try.

First of all, we create a Socket Object, and connect to our web feed. In this case we are looking for all photos tagged red referenced by this line

webConnect.write (' GET /services/feeds/photos_public.gne?tags=red HTTP/1.0\n\n');

We then fetch and parse the XML, and loop through looking for a link element with an enclosure attribute like so

for(entry in elements)
{

	if(elements[entry].localName() == "entry")
	{
		var entryNodes = elements[entry].elements();
		for(x = 0; x < entryNodes.length(); x++){
				if(entryNodes[x].localName() == 'link')
				{
					if(entryNodes[x].@rel.toString() == "enclosure")
					{
						pictureArray.push(entryNodes[x].@href.toString());
					}
				}
		}

	}
}

Once we've gathered up an array of links, we download the photos using system.callSystem() and a command line app called curl. There is probably a Windows version of curl, but it probably won't be installed on your machine which makes this a mostly Mac script. This code handles the download and import. Note, my version of Wordpress is really upset about using the keyword system in code listing, thus there is extra whitespace around the system.callSystem() call in the code listing below.

for(y =0; y < pictureArray.length; y++)
{

	var picNameSet = pictureArray[y].split("/");
	var picName = "/" +  picNameSet[picNameSet.length -1];

	var curlString  = "curl -O " + pictureArray[y];
	var retVal = sys  tem.callSyste  m(curlString);

	var fileToImport = new File(picName);
	var myProject = app.project;

	if(fileToImport.exists)
	{

			var my_io = new ImportOptions(fileToImport);

			if(my_io.canImportAs(ImportAsType.FOOTAGE)){
				try{
					myItem = myProject.importFile(my_io);

				}catch(e){
					alert('couldn\'t import flickr item with error: \r' + e.toString())
				}

			}
	}

}

I mentioned this code was slightly flawed. Network activities are by their nature asynchronous, our tasks go out into the ether and we don't now when or how they return. In this case I start the download and quickly check to see if the file is available. If it's not, I just skip it. In the real world of network activities this will never do. AE scripting by it's nature is a pretty synchronous activity, we do one thing and then another. As I explore this style of scripting I'm investigating work arounds on how to mesh the two styles of programming a bit better. For now, I just ignore it. grin. If you've got ideas about smart ways to handle asynch network scripting in After Effects, I'd love to hear about it.

Anyway, I run the script and import 20 or so photos matching the tag red. In this case I'm just discarding all the metadata and context information that make the photos really interesting, but it's a fun experiment and I get to see a bunch of cool photos. As I continue to explore, hopefully I'll come up with more robust network programming and more concrete tools for using web feeds in an interesting way.

zip download of db_flickrExperiment

This code segment outlines the basics.

webConnect = new Socket;
response = new String;

if(webConnect.open("feeds.feedburner.com:80","UTF-8")) {

webConnect.write('GET /current/currentpicks?format=xml HTTP/1.0nn');

response    =  webConnect.read(100000);

response = response.toString();

var xmlStart = response.indexOf("<?xml");
var xmlString = response.substring(xmlStart, response.length);

alert(xmlString)

webConnect.close();

} else {

alert (""unable to open webConnect via Socket"")

}

We open a Socket and connect to, in this case, a feedburner feed. We use the read() method to read in the XML, and since the Socket object includes the header we use indexOf to find the beginning of the XML and substring to read to the end of the line.

A couple of gotchas in the code. In this case the header tells us the document encoding is utf-8 so we explicity set it with

webConnect.open("feeds.feedburner.com:80","UTF-8")

Also, when Matt and I were initially exploring this we were just getting the header. It looks like a GET request with

response    =  webConnect.read()

allows a block response, and the later content was going off into the ether, If we used

response    =  webConnect.read(100000);

with a sufficiently large number to include all of the XML we got all of the contents of the XML file. This seems like a really bad idea, since we’ll never know the size of the XML file unless we munge some headers and setting it arbitrarily high also seems like a bad idea. Can someone who’s spent more time with the Socket object leave a comment or email me on how to handle the block response or alternatives to setting a big count for the read() method? I’d appreciate it.

Anyway, that’s the basic idea. You’d then parse the xmlString variable and do fun stuff with it. One heads up, the sample above includes namespaces, so be sure to read the section on namespaces in the Scripting Guide.

This will definitely make things a lot easier to develop tools, and it opens up a whole new slew of possibilites for Web 2.0 mashup tools and explorations when combined with After Effects Socket or new HttpConnection support. kuler explorer anyone? If you’re a scripter, you owe it to yourself to check out the ExtendScript Toolkit (ESTK) 2.0 there are a lot of features that sort of “hide” in Extendscript that aren’t obvious in the After Effects CS3 scripting guide(pdf link).

More experimentation with sampleImage(). This one relies on this expression.

target = thisComp.layer("layerToSample.mov");
samples = new Array();

var spacing = 10;
var w = target.width / spacing ;
var layerOrder = 1;
var h = 10 * layerOrder;

letters = "   .,:!-+=;iot76x0s&8%#@$";

for(x= 0; x < w; x++){
	samples[x] = target.sampleImage([x* spacing ,h],[spacing , spacing], false, time);
}

var string = '';

for(z = 0; z < samples.length; z++){
	var y = Math.round((0.299 * samples[z][0] + 0.587 * samples[z][1] + 0.114* samples[z][2]) * 100)/ 4;
	string = string + letters.substring(y,y + 1);

}

We loop through the row of pixels and place the sampled RGB pixels in the samples array, convert the RGB samples to YUV and grab the Y or brightness value for comparison against a rough gradient of ASCII values. For best results, use a monospace font to retain proper spacing. A more complete script/expression and breakdown to come.

sampleImage() is a new layer method expression introduced in After Effects CS3 that allows you to access a layer’s color pixel data. Combined with sophisticated particle systems like Particular, I think we’re likely to see some really interesting designer driven explorations a la Processing, but with more of a tinkering, let’s try things out approach.

I’ll have more scripts, and automated stuff as I explore further, but until then you might want to take a look at the reference and examples that Dan Ebberts is posting at the brilliant MotionScript.com