Cocoa/Quartz Drawing: "glowing" geometry question

Discussion in 'Mac Programming' started by GorillaPaws, Jan 21, 2010.

  1. GorillaPaws macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #1
    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:
    [​IMG]

    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.
     
  2. HiRez macrumors 603

    HiRez

    Joined:
    Jan 6, 2004
    Location:
    Western US
    #2
    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.
     
  3. GorillaPaws thread starter macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #3
    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?
     
  4. Catfish_Man macrumors 68030

    Catfish_Man

    Joined:
    Sep 13, 2001
    Location:
    Portland, OR
    #4
    Colored NSShadows might work for glow effects.
     
  5. GorillaPaws thread starter macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #5
    This is actually a pretty brilliant idea. I did a quick mockup test in Pages and this was the result:
    [​IMG]
    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!
     
  6. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #6
    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).
     
  7. HiRez macrumors 603

    HiRez

    Joined:
    Jan 6, 2004
    Location:
    Western US
    #7
    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.)
     
  8. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #8
    How about....

    Code:
    #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
    
     

    Attached Files:

  9. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #9
    I'm pretty sure NSShadow is just the AppKit wrapper for CGContextSetShadow* so that will have the same effect.
     
  10. SRossi macrumors regular

    Joined:
    May 27, 2009
    Location:
    Glasgow, Scotland
    #10
    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
     
  11. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #11
    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.
     
  12. kainjow Moderator emeritus

    kainjow

    Joined:
    Jun 15, 2000
    #12
    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.
     
  13. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #13
    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.
     

    Attached Files:

  14. GorillaPaws thread starter macrumors 6502a

    GorillaPaws

    Joined:
    Oct 26, 2003
    Location:
    Richmond, VA
    #14
    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.

    [​IMG]

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

Share This Page