macOS Cocoa/Quartz Drawing: "glowing" geometry question

[GorillaPaws]

I was wondering if someone could point me in the right direction for figuring out how to achieve the glowing geometry look shown in this screenshot of Geometry Wars:

I'm not trying to make a game or anything, just playing around with drawing some simple shapes on a dark gradient using core animation layers, but I'm not sure what drawing parameters are involved with achieving the above look of being "luminous bodies." Thanks in advance for any help you can offer.

 

[HiRez]

Just looks like thin vector lines drawn with very saturated colors, with a glow effect applied on top (using the colors of the source material as the glow colors as opposed to say white). The effect doesn't look that complicated, but I'm not sure of the best way to achieve it in code. You could maybe try applying a Core Animation glow filter to your sprites (or possibly applying one to the entire image), although the performance might suffer significantly. Faster would be to draw directly in OpenGL and filter there. For shapes that don't change their paths (except for scaling, position, and z rotation), you might be able to pre-render the glow effect into your sprites with alpha channel using Photoshop or After Effects, which would really increase performance.

 

[GorillaPaws]

Thanks for the quick reply HiRez. I'm trying to do this by drawing simple shapes like 2d rectangles, triangles circles etc. using the cocoa drawing classes and dropping down to quartz if necessary. Some of the effects I was thinking about exploring were animating the shape size to create a pulse effect, animate the glowing (like a rheostat), simple affine transformations and trying to achieve the same effects with text layers.

Could pulsing the luminosity be achieved by animating the alpha levels? or should I be animating the saturation of the color? Also I was wondering what you meant by "core animation glow filter." There's a CIBloom filter, but I don't think it gives you control over the highlighting color. Or should I be using a second CIGaussianBlur stacked on top of my shape layer and then animating the two as a group?

 

[Catfish_Man]

Colored NSShadows might work for glow effects.

 

[GorillaPaws]

Colored NSShadows might work for glow effects.

This is actually a pretty brilliant idea. I did a quick mockup test in Pages and this was the result:

It's not quite as pretty as the geometry wars example, but it's a simple implementation and looks pretty darn good. I also played with the opacity slider as a means of "dimming" the glow effect and it seemed to work pretty well. Thanks for the help!

 

[kainjow]

IMO, NSShadow isn't strong enough for more than basic shadow effects, unless it works for what you want. You might want to look into using a CIFilter (although I don't know off hand which filter to use).

 

[HiRez]

Since I don't see an explicit "glow" filter in Core Image, I would try CIBloom (although this seems to create some edging artifacts which may be undesirable). If that doesn't work, try stacking a CIGaussianBlur filter underneath a copy of your colored lineart to fake it. You need both the blurred copy for the glow effect and the original on top to see the sharp lines.

Listing 4 here shows how to apply CI filters to a CA sprite.

EDIT: Also experiment with different blending modes for the glow, such as additive, multiply, and screen (as in, CIAdditionCompositing, CIScreenBlendMode, etc.)

 

[jared_kipe]

How about....

#import <UIKit/UIKit.h>
@interface ShapeGlowView : UIView {
	CGMutablePathRef multiSquare;
	UIColor *greenColor;
	UIColor *blackColor;
}
@end
@implementation ShapeGlowView
- (void) _commonInit {
	greenColor = [[UIColor alloc] initWithRed:0.56f green:0.86f blue:0.30f alpha:1.0f];
	blackColor = [[UIColor alloc] initWithRed:0.0f green:0.0f blue:0.0f alpha:1.0f];
	
	multiSquare = CGPathCreateMutable();
	CGPathMoveToPoint(multiSquare, NULL, 0.0f, 0.0f);
	CGPathAddLineToPoint(multiSquare, NULL, 1.0f, 0.0f);
	CGPathAddLineToPoint(multiSquare, NULL, 1.0f, 1.0f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.0f, 1.0f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.0f, 0.0f);
	
	CGPathMoveToPoint(multiSquare, NULL, 0.5f, 0.0f);
	CGPathAddLineToPoint(multiSquare, NULL, 1.0f, 0.5f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.5f, 1.0f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.0f, 0.5f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.5f, 0.0f);
	
	CGPathMoveToPoint(multiSquare, NULL, 0.25f, 0.25f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.75f, 0.25f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.75f, 0.75f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.25f, 0.75f);
	CGPathAddLineToPoint(multiSquare, NULL, 0.25f, 0.25f);
	
	CGPathCloseSubpath(multiSquare);
	
}
- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self _commonInit];
    }
    return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder {
	if (self = [super initWithCoder:aDecoder]) {
		[self _commonInit];
	}
	return self;
}
- (void) drawPathWithContext: (CGContextRef) c atPoint: (CGPoint) point andScale: (CGFloat) scale andRotation: (CGFloat) rotate {
	CGContextSaveGState(c);
	CGContextSetShadowWithColor(c, CGSizeZero, scale/2.0f, greenColor.CGColor);
	CGContextTranslateCTM(c, point.x, point.y);
	CGContextRotateCTM(c, rotate);
	CGContextScaleCTM(c, scale, scale);
	
	CGContextSetLineWidth(c, 2.0f/scale);
	CGContextAddPath(c, multiSquare);
	CGContextStrokePath(c);

	CGContextRestoreGState(c);
}
- (void)drawRect:(CGRect)rect {
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextSetStrokeColorWithColor(context, greenColor.CGColor);
	CGContextSetFillColorWithColor(context, blackColor.CGColor);
	
	CGContextAddRect(context, self.bounds);
	CGContextFillPath(context);
	
	// draw some squares
	[self drawPathWithContext:context 
					  atPoint:CGPointMake(25.0f, 50.0f) 
					 andScale: 25.0f 
				  andRotation: 0.1f ];
	
	[self drawPathWithContext:context 
					  atPoint:CGPointMake(58.0f, 20.0f) 
					 andScale: 50.0f 
				  andRotation: 0.0f ];
	
	[self drawPathWithContext:context 
					  atPoint:CGPointMake(100.0f, 125.0f) 
					 andScale: 30.0f 
				  andRotation: 0.25f ];
}
- (void)dealloc {
	CGPathRelease(multiSquare);
	[greenColor release];
	[blackColor release];
    [super dealloc];
}
@end

 

[kainjow]

I'm pretty sure NSShadow is just the AppKit wrapper for CGContextSetShadow* so that will have the same effect.

 

[SRossi]

Another way you could do it is create two different images one of just a pure outline and the other the same outline but blur it. Then place the blurred image at the bottom and place the outline image on-top of the first.

Don't know if you can do this in Carbon or Quartz but that is the way I would do it in OpenGL.

Stephen

 

[jared_kipe]

I'm pretty sure NSShadow is just the AppKit wrapper for CGContextSetShadow* so that will have the same effect.

NSShadow does not appear to be in iPhone OS.

It should be pointed out that you can get MOWR GLOWINESS by just stroking the shape over and over. Or maybe another shape for just the outline. Thats what I'm working on right now to get it more to my liking.

 

[kainjow]

NSShadow does not appear to be in iPhone OS.

This thread isn't in the iPhone section though

It should be pointed out that you can get MOWR GLOWINESS by just stroking the shape over and over. Or maybe another shape for just the outline. Thats what I'm working on right now to get it more to my liking.

That could work, but I still think Quartz's shadow isn't all that great and a CIFilter (or as last option OpenGL) is what one should use for a better effect.

 

[jared_kipe]

This thread isn't in the iPhone section though



That could work, but I still think Quartz's shadow isn't all that great and a CIFilter (or as last option OpenGL) is what one should use for a better effect.

Right, but my code is running on the iPhone, and my code could run on either desktop or iPhone.

I can have as much blur and effect as I want, only depends on how thick the line is and how many times you stroke it.

You can also get some pretty weird effects by stroking it once in black slightly thicker then with the green the rest of the times... Makes the graphic really POP. Unfortunately, it doesn't draw a shadow if you stroke it with a clear color (tried clear black and clear white). So you can't make a "clear really thick stroke" to accomplish the same effect as a couple thin strokes.

EDIT: The anti-aliasing artifacts can be reduced by stroking everything except the last one in black. I also increased the blur radius for the shadow for the outside box quite a bit.

EDIT2: Love shadows, I've added drop shadows to a couple of my custom views in my upcoming iphone app. Can't think of any need for awesome bloomy shapes at the moment though.

EDIT3: Added pink shapes, after generalizing my code to draw any path, and color all bloomy.

 

[GorillaPaws]

So I've been playing around with the code that jared_kipe was graceous enough to share, and it seems that shadows work better at smaller scales.

I think I'm going to stick with them for now, but someone might find this useful in a search.