tumbljack

This PBS series about the expansion of America into the West is the most powerful, immersive and emotive storytelling that I have ever experienced, and has changed forever my perception of the world, history and most of all humanity. Highly recommended.

Netflix | Amazon

Steve Kimock 2000-07-15 (15min)

Wed, 16 Dec 2009 22:43:25 -0800

Steve Kimock 2000-07-15 (15min)

Oh snap.. bradandthebrain: I like the look of this. Shows for...

Mon, 14 Dec 2009 20:29:05 -0800

Oh snap..

bradandthebrain:

I like the look of this.

Shows for iPhone ~ Keep tabs on your favorite touring artists

Keller Williams 2001-11-09

Sat, 12 Dec 2009 22:57:53 -0800

Keller Williams 2001-11-09

Metaphorically Speaking

Sat, 12 Dec 2009 22:28:28 -0800

I remember reading somewhere that a graphics context is liken to the pen and the paper, both the tool that you use to express and destination of that expression. I have always thought of it more as a credit card that you just pull out whenever you need anything. But, I have realized that it is in fact a magic wand that you hold in your hand while carefully reciting ancient incantations.

Chatrbox

Mon, 30 Nov 2009 00:08:00 -0800

My buddy @elliottkember had a ton of hits today on his awesome post about getting started. http://j.mp/youllnevergetwhatyouwant

If you thought it was cool, check out the UI on Chatrbox, a chat application he did recently. I particularly like the way the textfield footer and minimal custom scroller make the content a comfortable part of the application, as apposed to fighting the constraints of the window, which is how most websites feel.

You have to login with twitter to check it out, but I personally feel that it’s worth it.

http://chatrboxapp.com

To 1e100f And Beyond with CAReplicatorLayer

Sun, 25 Oct 2009 21:10:00 -0700

CAReplicatorLayer is a powerful new class available in the Core Animation rendering and compositing framework. It’s a special hosting layer that can generate a potentially infinite number of copies, or instances, of its sublayer. Well, almost infinite.

A common feature of modern 3D rendering applications is the ability to replicate an object or artifact over a plane or given surface, resulting in complex scalable patterns that can resemble anything from textiles and woodgrain to skin and even hair.

CAReplicatorLayer packs a lot of this functionality into just a few lines of code. Setting one up would look something like this..

CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.instanceCount = 42;

replicatorLayer.instanceTransform = awesomeTransform; //This was in the oven

replicatorLayer.instanceDelay = 0.6;

[replicatorLayer addSublayer:sublayer]; //This too

The transform is used to spread the layer instances across space, with transforms being multiplied for each new instance. A simple translation quickly creates a row of layers.

One replicator layer can be added as a sublayer of another, in effect creating a two dimensional array of layers, potentially a grid. And a single preservesDepth property bundles all of the functionality of CATransformLayer, allowing you to create three dimensional scenes out of a single blueprint layer.

When an animation is added to the original sublayer, it’s applied to each instance with a timing delay set with the instanceDelay property. Animating a collection of layers in sequence can get pretty fun.

Replicator layers also support color offsets with a built-in set of properties for incrementing or decrementing color values for each new instance. This stuff is really cool.

Apple has a phenomenal demo put together using this new class, which is one of the more beautiful things I’ve seen in a while, so check it out.

I played with this stuff for a little as well and put together another animation sequence. There’s an HD video of it here. But if you’ve got a Mac, you might as well build and run.

made this to impress mad scientists from outer-space who...

Thu, 22 Oct 2009 00:58:00 -0700

made this to impress mad scientists from outer-space who apparently like graphics.

GPU Accelerated Awesomeness with CAGradientLayer

Mon, 14 Sep 2009 17:17:00 -0700

Interface

CAGradientLayer is my favorite new addition to the Core Animation framework. It’s a straightforward, hardware accelerated linear-gradient rendering API that’s easy to use, super powerful and blazing fast. Setting one up is just a few lines of code..

CAGradientLayer *layer = [CAGradientLayer layer];

layer.colors = [NSArray arrayWithObjects:(id)[UIColor colorWithWhite:0.90 alpha:1.0].CGColor, [UIColor colorWithWhite:0.75 alpha:1.0].CGColor, nil];

This renders a straight gradient, top to bottom, with the first color on top. The angle of the gradient can be adjusted by specifying two points to define an axis. CAGradientLayer carries down all the standard properties of CALayer so you get a border and corner radius for free, as well as background color. This is really convenient, because similar to working in Photoshop you can create a rendered effect using transparent whites, then adjust only the background color to change the composition you’re working with.

Tricking one out takes a little more setup, but is just a matter of adding more colors and creating a matching array of color-stop locations..

CAGradientLayer *layer = [CAGradientLayer layer];

UIColor *colorOne = [UIColor colorWithHue:0.625 saturation:0.1 brightness:0.8 alpha:0.7];

UIColor *colorTwo = [UIColor colorWithHue:0.625 saturation:0.1 brightness:0.8 alpha:0.7];

UIColor *colorThree = [UIColor colorWithHue:0.625 saturation:0.1 brightness:0.8 alpha:0.5];

UIColor *colorFour = [UIColor colorWithHue:0.625 saturation:0.1 brightness:0.8 alpha:0.2];

UIColor *colorFive = [UIColor colorWithHue:0.625 saturation:0.1 brightness:0.8 alpha:0.0];

UIColor *colorSix = [UIColor colorWithHue:0.625 saturation:0.1 brightness:0.8 alpha:0.0];

UIColor *colorSeven = [UIColor colorWithHue:0.625 saturation:0.1 brightness:0.8 alpha:0.3];

NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, colorThree.CGColor, colorFour.CGColor, colorFive.CGColor, colorSix.CGColor, colorSeven.CGColor, nil];

layer.colors = colors;

NSNumber *stopOne = [NSNumber numberWithFloat:0.00];

NSNumber *stopTwo = [NSNumber numberWithFloat:0.02];

NSNumber *stopThree = [NSNumber numberWithFloat:0.02];

NSNumber *stopFour = [NSNumber numberWithFloat:0.50];

NSNumber *stopFive = [NSNumber numberWithFloat:0.50];

NSNumber *stopSix = [NSNumber numberWithFloat:0.95];

NSNumber *stopSeven = [NSNumber numberWithFloat:1.00];

NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, stopThree, stopFour, stopFive, stopSix, stopSeven, nil];

layer.locations = locations;

The result is a scaleable, reusable, freely editable piece of hardware accelerated artwork. Entire interfaces can be created with gradient layers, using very little code, all rendered on the GPU. If fact ColorDev is drawn all in code using gradient layers, including the spectrum hue slider, the gloss effects and even the top bar. Of course you get one of those for free in the kit, but what can I say, I was geeking out.

The trick is to subclass CAGradientLayer, and set up the gradient inside of -init, then whenever you need one just instantiate it with CALayer’s constructor method +layer, set its geometry and it’s ready to go.

Animation

CAGradientLayer only has a few properties: an array of colors, an array of color-stop locations, and two points to adjust the axis on which it’s rendered, but everything is animatable. You can set up a gradient animation using the key path of the property you want to animate. So animating from one color-set to another would look something like this..

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@”colors”];

animation.fromValue = initialColors;

animation.toValue = newColors;

animation.duration = 1.0;

animation.removedOnCompletion = NO;

animation.fillMode = kCAFillModeForwards;

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

[gradientLayer addAnimation:animation forKey:@”animateGradient”];

Gradient animations are interesting, to say the least. It’s a little tricky getting a result that makes visual sense, but on the nerdy side, it seems like the rendering engine maps out the two gradients, then interpolates a cross-fade for each color on an per-pixel basis. It’s pretty cool. I set up a few quick examples to demonstrate the concept.

Application

A few weeks ago Matt Gallapher wrote a great post on using CAGradientLayer to implement shadow effects on a table view, as well as rendering a gradient in each table view cell. He does a neat trick by implementing UIView’s +layerClass method. This method is used to specify a custom class as the default backing layer of a UIView. Often it’s used to return a CAEAGLLayer as the views built-in layer so you can jump right into OpenGL. Matt overrides it in his UITableViewCell subclass to return a CAGradientLayer as the built-in backing layer of each table view cell. Slick.

Inspired by this I put together my own quick example implementing +layerClass all over the place to return customized versions of standard kit objects like the navigation bar, toolbar, table view cell, etc. The beauty of this is that you don’t implement -drawRect, or even touch a CGContextRef, and of course there are no images.

Not that I’m dissing Core Graphics. It’s just that it’s like this..

Core Graphics == WALL-E

CAGradientLayer == EVE

You can check out the slightly bizarre gradient animations here.

And I’m releasing my interface sample freely under the WTFPL license. So check out the code on GitHub. And there’s a demo video too.

Video

Mon, 14 Sep 2009 16:36:46 -0700

Video

Mon, 14 Sep 2009 16:36:19 -0700

Complex Interpolation with CAShapeLayer (Free)

Fri, 04 Sep 2009 17:05:00 -0700

CAShapeLayer is an interesting new subclass of CALayer available in 3.0 and now 10.6, and it’s got some pretty cool features.

A shapelayer represents an arbitrary shape that gets rendered onscreen. The shape is defined by its path property which takes a CGPathRef. The path can be anything. So in a sense it’s a freeform drawing API brought up to the Core Animation framework level and available to you in your layering and compositing hierarchy.

Interestingly, the shape isn’t rendered into the layer’s contents. In fact, the layer’s contents aren’t rendered at all, only the shape is. The documentation states that “the shape is composited between the layer’s contents and its first sublayer”. So the layer is in a sense just a container for the shape. You can set all of its standard CALayer properties, like contents and backgroundColor, but they get zeroed out at render time.

Solidifying this distinction, CAShapeLayer has its own set of properties for describing visual attributes following the nomenclature of working with a graphics context. So if you want to create a shapelayer, you’re looking for fillColor and strokeColor. Setting up a shapelayer is pretty easy and would look something like this.

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.path = crazyAwesomePath;

UIColor *fillColor = [UIColor colorWithHue:0.625 saturation:0.4 brightness:0.5 alpha:1.0];

shapeLayer.fillColor = fillColor.CGColor;

UIColor *strokeColor = [UIColor colorWithHue:0.625 saturation:0.4 brightness:0.9 alpha:1.0];

shapeLayer.strokeColor = strokeColor.CGColor;

shapeLayer.lineWidth = 2.0;

shapeLayer.fillRule = kCAFillRuleNonZero;

[rootLayer addSublayer:shapeLayer];

The fillRule tells the rendering engine how to deal with intersecting paths and NonZero just means fill everything inside the path. CAShapeLayer also comes with a set of properties for describing intricate line dash patterns as well as properties for how lines end and corners meet.

The Crazy Part

Since it’s a layer, everything is animatable. Literally everything, even the path property. I couldn’t imagine what this meant at first, and decided it must cross-fade from one shape to another or something. But no, indeed the Core Animation engine interpolates values from the current path to the new path and morphs the shape from one to the other. It’s pretty mind-blowing.

To get a smooth animation from one path to another you want the same number of subpaths and specifically the same number of points, because even though Core Animation doesn’t speak in vertices, that’s really what it’s working with. If you have a discrepancy from one path to another the interpolation engine drops to the lowest common denominator of points and creates its own subpaths to complete the shape, which gives some unexpected results.

Setting up a continuous path animation would look something like this..

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@”path”];

animation.duration = 2.0;

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

animation.repeatCount = 1e100f;

animation.autoreverses = YES;

animation.fromValue = (id)initialPath;

animation.toValue = (id)newPath;

[shapeLayer addAnimation:animation forKey:@”animatePath”];

I put together a couple examples. The first one uses basic shapes that you actually get for free with layers, and just demonstrates CAShapeLayer’s ability to interpolate between them. The second is a little more interesting, using complex polygons sharing only the same number of points and subpaths.

You can check out a video of it in action here.

And the code is available on GitHub here and here.