Rounded rectangle?

One possibility (though not really efficient at all) is to use the "Glass Lozenge" filter on a solid color image --- see attachment.

You could do it with four circles (one at each corner) and two rectangles overlapping like a plus sign. As far as how you make the circles I don't know. Not sure if this is more efficient than the glass lozenge way?

so far i see i am not far off, if that's what you all are thinking. i did not think of the glass lozenge idea-- thanks. looks like to really be the rounded rectangle, though, there would have to be two lozenges (top and bottom) and a rectangle, no? at least this way i could avoid generating the circle... how does one generate a circle in QC, besides importing an image?

can't rememder where it came from... but it does its job

Really appreciate it. I'll have a look. Very similar to the version I came up with, but differences are significant. Of course it has taken me a ridiculously long time cuz I'm such a newb. Anyway I'll post when I get a couple things smoothed out-- both could be useful.

Any advice on best practices for turning a patch like this into a mask with blur?

This test patch one renders relative to viewer window size.

Once again, I would appreciate any advice on how to make this patch a mask/blur. In general I am just getting started with any real functionality, tons to learn, so any info is good info for me.

Curious why my .qtz file is >5x bigger than the the others...

at this: http://www.daisyrust.com/2007/02/13/quartz-composer-iris-transition/

Probably because your .qtz file has an image file embedded in the image importer patch.

To keep things light, you could use the circle generator private patch instead.

Anyone thought of doing a CI filter that draws a rounded rectangle? I think that should be the lightest and most portable approach. Sorry if you have, not bothered to read through the thread properly :)

i see, yes, embedded pixel images, circle and square. i would love to learn how to make a CI filter that draws a rounded rectangle. this is where i am, at the beginning. help?

Cool, thanks... But it uses a circle and hole distortion-- not sure how i would apply it in any efficient manner to the rounded rectangle, which right now is a patch with 6 sprites (2 rectangles and 4 circles).

is how I originally imagined would be the most versatile/lean. Once again, any guidance would be appreciated.

There is some Apple sample code called QuartzShapes which includes a rounded rectangle-- could this code be implemented in a CI Filter? How? I'm super curious, but at a loss for lack of programming knowledge...

Here's an alternative method, using a 2-pass CIFilter chain. The first pass creates a blurry rectangle, while the second does a simple threshold on the output of the first pass.

Smoothstep is your friend.... :)

Seems to work OK.

alx

Quartz Composer Blog: http://machinesdontcare.wordpress.com

Music Site: http://www.toneburst.net

Nice method there. The output is a little soft, but it would be easily tweaked - and actually the softness is good, combined with the emboss patch it'd make a really nice bevelled, rounded rectangle.

Anyway, much better than my hazy idea of doing it with lots of conditionals and maths to test if pixels are inside the are or not, plus sub-sampling to add some AA to the corners.. :D

You're right; the downside of this method is that you get a soft edge all the way around, rather than just around the corners.

Another method you could try would be to create the curved corners using smoothstep again, driven by the the radial distance between a given point near the corner and the current pixel. I guess you'd also need to check the angle between the current pixel and the point, to ensure you're only drawing a quarter-circle. You'd then have a white square with one nicely-rounded, antialiased corner, which you could run through a simple X/Y mirror filter to get the complete rectangle.

alx

Quartz Composer Blog: http://machinesdontcare.wordpress.com

Music Site: http://www.toneburst.net

I haven't bothered mirroring it, but this method creates a rounded bottom-left corner. It probably needs some more tweaks to smooth it out perfectly, but it's a(nother) start.

Incidentally, you could probably use some fancy conditionals to create rounded edges for all four corners, but I'm thinking it's probably more efficient to just mirror the thing in a separate pass. Any idea if I'm right here? I'm starting to thing more and more about 'modularising' my QTZs, so it makes sense to break things down into discrete units. Makes things more easily-readable, too, I think.

Right, off to lunch!

alx

Quartz Composer Blog: http://machinesdontcare.wordpress.com

Music Site: http://www.toneburst.net

I quickly hacked your last one to make a sharp version. It uses CIRectangleGenerator to create a rectangle, the edge blur function of that patch to blur it, then a simple CI filter that makes a sharp cut-off between black and white where the input alpha passes 0.5. It works..

For better results, double the width and height, and downsample to the real size. That should give some anti-aliasing on the corners.

Oh, cool. That works nicely. Personally, I'd still want to use smoothstep on the threshold CIFilter though. Those curvy corners still look a bit jagged to me. The Rectangle patch is a handy one to know about though. I've not come across that one before.

It's funny how something so apparently simple can be approached in so many different ways....

alx

Quartz Composer Blog: http://machinesdontcare.wordpress.com

Music Site: http://www.toneburst.net

The shapes are drawn with Bezier paths I think -- to use them in QC you have to render the paths to an image, and pass the image around. CI isn't intended for that kind of usage.

Drawing isn't expensive though, so this is a very viable solution. In fact, someone actually started working on a plugin that rendered these shapes. I had my hands on the rounded rect version a number of months ago. Not sure how far things got, or if it ever got released... something we could do as well I suppose, if our project load ever slows down again...

Really appreciate seeing the CIFilters in action. It's funny how something so apparently simple can be approached in so many different ways.... couldn't agree more... also brings up some more of my newb questions: 1. how come the billboard in this last patch has no "width" parameter? 2. (maybe should be a new post requesting a brief tutorial) i get confused in QC how (re)sizing all relates to each other-- eg, here we have the CIRectangleGenerator in relation to Image Crop, and i am trying to insert a Rendering Destination Dimensions to always resize rectangle in relation to edges of viewer, but not so clear how to do it with this patch.

oh, and toneburst, i like the blurry threshold'd version a lot-- really appreciate the generosity. seemed like a simple thing at first but i got a lot of learnin' out of it... :)

Glad you got some use out of it. It was an interesting exercise for me, too.

alx

Quartz Composer Blog: http://machinesdontcare.wordpress.com

Music Site: http://www.toneburst.net

Well, this did start off by desiring what seemed like it should be a basic tool in QC-- and look at the variety of responses over a rounded rectangle! But right now I feel I've too much yet to learn about best practices to make such an official request.

Right now I am super grateful for such an active and gracious forum!

so i appreciate hearing the bit about how CI was not intended for such things.

A patch for creating arbitrary bezier shapes would be very cool, in fact. Can't quite imagine how it would fit in to QC, interface-wise though...

alx

Quartz Composer Blog: http://machinesdontcare.wordpress.com

Music Site: http://www.toneburst.net

On the crudest end of the spectrum, we could do dynamic ports like the GLSpline patch. On the more sophisticated end, we could do some object abstraction similar to the texture patch, particle patch, kineme3d, or others, where you aggregate and accumulate paths into a final renderer. Structures could also be used for this I guess... spreads would of course make it really cool too ;)

1. The billboard is set to 'real size'. It displays the original image, pixel for pixel, so there's no measurements to set.
2. I'll explain what happens:

- First, draw a rectangle, of say 100x100 pixels - next, blur it (this is done in the rectangle patch with the soft edges or whatever it's called). This spreads the image out as it blurs, so the image is now bigger than 100x100! - Filter the blurred image to get the sharp rounded rectangle. This blacks out the edges where it was blurred, and leaves a 100x100 rounded rectangle, but the actual image doesn't get smaller so there's a black border. - Crop the image back to 100x100, to trim the border.

...and that's why the crop has the same width and height as the rectangle...

Spreads will make EVERYTHING cool :D

I was thinking that about the texture patches and rendered, actually. You'd probably want some way of messing with the control points programmatically, I'd imagine. Maybe it could take a struct as input, with 3D coords for each point, and an associated 'handle' point, also in 3D. That way, you could create 3D spline surfaces. Or maybe just a 2D version, to start with....

alx

Quartz Composer Blog: http://machinesdontcare.wordpress.com

Music Site: http://www.toneburst.net

I use Apples Clickable Rectangle patch found in the iDVD plugin. instant adjustable rounded corners ;) easy... soz can't remember where i found the plug in off the top of my head, but if interested i'll send you a copy.

why not... for one, i'm curious cuz i'm not sure what you are referencing with this iDVD plugin-- it works in QC as an adjustable rounded rect? can you post it here?

thanks for your patience...

Many of apple's apps use .qtz files for various things. Photobooth and ichat are probably the most famous examples, all the effects are actually quartz compositions. It's not really surprising that iDVD uses it too (although I didn't know too :)

It works the other way around too - you can often load your .qtz files into other apps. They'll load in quicktime (handy if you want to make a normal video file - just export), and they'll load in stuff like imovie too I believe, so you can mix them with your wedding videos too.

in the System > Library > Compositions folder, eh? No one told me about that folder... :)

I've set a small personal goal with .qtz to create a plugin with fxplug. That is down the road a bit, but i thought it might be a pragmatic way in to some of the programming side of things, to jump in and try to create a functioning filter/effect for FCP or Motion.

Oh, and I have been using the export to quicktime function a lot-- back and forth from after effects to fcp, back to QC and then midi controlling QC for performance using Plogue Bidule. The video work i am doing is relatively technically simple (it is most often used for contemporary dance performances, so the challenge often with video+dance, imho, is to make it integrate with the entire piece and not take over). Also, for now I have opted for Bidule+QC instead of max/msp+jitter, and I am very satisfied at present. The learning curve for QC right now is formidable for me, but it's all okay when it's fun, eh?

Question re: exporting quicktime from QC-- i could not get a couple quicktime movies exported from QC to then export as FLV-- just a white screen. Ie, from QC > export as quicktime, then open in quicktime (plays fine), then export as FLV, no go. Same with flash exporter-- exported product has only a white screen. any clues?

kernel vec4 roundedRect(vec2 bottomLeft, vec2 topRight, float radius, __color color)
{
 vec2 p=destCoord();
 float dist=0;
 
 bottomLeft+=radius;
 topRight-=radius;
 
 dist += p.x<bottomLeft.x ? pow(bottomLeft.x-p.x,2.0) : 0.0;
 dist += p.y<bottomLeft.y ? pow(bottomLeft.y-p.y,2.0) : 0.0;
 dist += p.x>topRight.x   ? pow(topRight.x-p.x,2.0)   : 0.0;
 dist += p.y>topRight.y   ? pow(topRight.y-p.y,2.0)   : 0.0;
 
 dist=sqrt(dist);
 
 return color * clamp(radius - dist, 0.0, 1.0);
}

by Greg Best --- http://www.mail-archive.com/quartzcomposer-dev@lists.apple.com/msg02328....

Soz totally forgot to post that iDVD plug in that includes a rounded sprite.

Nice secret plug in from apple that i'm sure people will get excited about because it includes all the use/and not used apple transitions in ilife (< thing is you can't drill into them though)...

its using the unofficial plugin so place in Quartz Composer/Patches , then look for patch category 'iDVD scene' and '02 transitions' in qc

enjoy

Also want to say -- if you install FxFactory from Noise Industries (and I believe it will install even if you don't have Final Cut Studio installed), you get a bunch of custom patches from them too, which will work regardless of the demo period expiry of their application.

And one of them is "NI Rounded Rectangle".