WWDC2003 Session 207

Transcript

Kind: captions Language: en good morning everyone well the session 207 courts 2d in depth and in this session we're going to talk about our fully modern 2d drawing API that we created when we brought mäkelä scan into being and it's important to realize that we're interesting position because marcos 10 actually has two drawing api's that are typically used by developers they've obviously courts to D which is our new drawing API we obviously have quit draw which is our legacy drawing API and one thing I think it's important to understand is where we're investing our time and effort and that's behind courts 2d and as you're going to see in today's presentation we're adding lots of new features in the courts to d2 to meet the future needs of what application developers such as yourselves want it's important to understand as you sit and listen and take in this presentation that your take home from wwc this year with regard to 2d graphics is to start thinking about if you have a product that leverages quick draw to come up with a strategy on how you can move your product over to use quartz 2d because that's really where our focus is on the operating system in terms of 2d graphics so at this point I'd like to invite Derek Clegg and crosses imaging engineer to the stage to take you through the session good morning welcome to the WWDC day for I hope you're enjoying the conference my name is Derek Clegg I work in the courts engineering technologies group and there we go today I'm going to talk about courts what it is a sort of a rough overview of what it is a little bit about the court docket exer i'm going to focus most of the time on the courts ap is strictly some of the things we've added for Panther and along the way I'm going to have a few demos so I'm going to briefly cover what courts is those of you who were haven't been to previous WDS have probably seen some of this material quartz is our Mack owes tens that is imaging model the way we use the way we get from the things you want to draw on to the screen it's been influenced by a couple of very powerful industry standards such as poster can PDF of course that's a pre fundamental piece of quartz 2d we also of course have adopted parts of quick drawing parts of java 2d and we really think of it as the next generation imaging model for your next generation applications so the key thing to keep in mind as Travis mentioned is that here's a here's a graph that we think is very important on the levee that y axis is innovation and as you see we're really putting a lot of energy into innovating in courts UD quick-draw there's still you know it's not it's not a flat ramp or a negative ramp or anything like that but but you can tell that we're really focusing a lot of energy and courts Judy we're really letting quick-draw in terms of innovation any rate not follow as far along as courts two years of course Judy we're really pushing everything we can there as you've seen another top talks we're adding support for OpenGL we're adding all sorts of interesting things so which I'll touch on today so the thing what courts 2d is sometimes it's also called core graphics I'll use both terms interchangeably quick graphics is a slightly older name but the api's and so in live in a core graphics framework court CD is a low-level lightweight 2d rendering life by library what that means is it's low level it's just see functions not a lot of complicated people plus group or anything else very simple low level c functions it's lightweight there's not a lot of api that you have to learn to do very complicated things it's pretty easy to use the 2d 2d api is built up front as a resolution and device independent api so what that means is resolution independent means that we're going to a 72 DPI screen 96 DPI screen or a 300 DPI printer 1400 epi printer you use the same api's you make the same calls you do exactly the same thing but your output comes out beautiful in both cases it's device independent same sort of sense going to the screen going to your printer same API calls same work you do but the output comes out appropriately on the two different devices of course we want to have really high quality fonts so we use apple type services to do all our font management and we want color independent high quality high fidelity color and so we use color seen for color management so the some people asked in the past to users courts to d of course carbon cocoa and java all our implementations inside Mac os10 rely very heavily on quartz today and some of them for example the cocoa case is pretty much implemented in Charlie on top of quartz 2d so it's actually the underlying framework for everybody many apple applications not only use it indirectly through their use of carbon and cocoa but often will do direct API calls in the courts to dapi for example starve Safari does an awful lot of stuff with a course to the api's that's one of the reasons it's so fast and powerful all our I apps one way or another tend to use quartz 2d sometimes directly sometimes indirectly just through cocoa carbon but they leverage that very heavily particular things like iphoto iDVD those types of applications keynote and for those of you saw their talk on Tuesday uses corset II in a tremendous way to do very powerful things as you've seen and most of the talks in fact in every talk keynote is a very powerful application a lot of what it's doing comes directly to the power ports 2d and of course third-party applications use quartz duty to very frequently to do interesting effects or techniques mathematica microsoft office of course Delta graph and your application can as well and for those of you spell Peter stock on Tuesday your application might want to consider skorts Judy before your competitors application does so the general thing about quartz the whole architecture quartz is quartz GD which is eight guys you talk to you underneath that on a lower level is quartz compositor so it's really sort of two pieces horsham potters compositor is the part that handles all the window management that sort of says oh okay i want to take these multiple windows and put them on the screen the thing that does all the expose cool stuff thing that sort of makes your terminal window twenty percent alpha for example and composites under the background so you see things through it and so on i'm not gonna really focus on that too much in fact it's not going to focus on it at all there's a session tomorrow session 2 11 which will go into that in more detail so you might want to check into that if you're interested in quartz compositor so the window management part of the system so again what do we have n of course UD well the things i've already mentioned device resolution independence and so on of course we also have very high quality to 2d graphics all the anti alias rendering both line art and text as anti alias at very high quality all the special effects such as ltd text rendering and so on for your LCD displays transparency of course is a big part of our features that excuse me off-screen rendering so you can create a bitmap off-screen draw into it using exactly the same api's give the same beautiful effect and and composite the result either to your screen or maybe write it out as a PDF file I mean as a sort of tiff file or JPEG files from like that and then we also have support for a PDF document as Peter mentioned on the talk on Tuesday we really think of PDF as our as our digital paper format and to allow you to get the same power that we see in president PDF we allow you to get access to the PF document to render it on the screen or to some other destination and to create it directly so let's go over a little bit the types that we have available in the core graphics API the here's a set of the basic sort of fundamental pieces of the core graphics API that she did we have available for you to work with of course the context the context is sort of the central switching point everything that gets drawn to the screen to a PDF file whatever goes through a context and when you work with context you need to use various pieces various other objects to talk to the context to get things done for you so we have support for a path the passages the collection of lines and curve fonts of course or pour it for text clearly images as you know PDF documents are native typing in the core graphics API colors and color spaces shading sort of gradient system is radial axial fills of regions patterns repeated drawing operations geometry and affine transform for convenience to allow you to do arbitrary transformations rotations and so on and data managers those are the type we use in core graphics to get data into and out in from your program and out to your program so as I mentioned earlier i'm not going to go into a huge amount of depth in some of these various types the session last year we covered all of these in detail it's available to DVD so i definitely recommend that you go check that out if you're not that familiar with some of the details some of the things I talk about today so let's look at the CG context a CG context is sort of as i said the switching point so your applications up here the blue the purple the purple oval it's going to call in the core graphics API either directly just like calling CG context blah blah blah or indirectly by calling a cocoa or carbon or Java function and and the core graphics API will then take what call you've made and switch it out to the appropriate destination that you might be drawn to so you might have a window context in which case all your drawing will go to the screen you might have a poster context in which case all you're doing will go to a postscript file PDF to a PDF document our bitmap and off-screen bitmap so the context is sort of the fundamental piece that we use to push data through the appropriate point so it comes out to the destination that you care about now in terms of drawing primitives as I mentioned there's a number of auxiliary objects that we support that you use to do drawing into context paths is one example here are some text you can have you know fancy fonts you can have rotated text images of course pretty simple idea there PDF pages pages from a PDF file that you can draw just like any other primitive you can draw it rotated scaled however you want all the content will show up correctly patterns here you see an oval with a bunch of stars in it just a repeated set of stars that's just obviously with a pattern is shading right radial or actual shadings and this year and Panther we're adding two new drawing primitives one is shadows so some of you have seen the shadows the cool looking shadows inside Mac os10 in general on the Aqua UI and so we've added a primitive inside CG to let you do shadowed support shadow drawing for any primitive so whenever you draw anything if you want to you can have a shadow so here you see on the left a bunch of fancy circles in some sort of you know logo type design and as you can see there's a shadow on the on the lower left edge that is providing a sort of a sense that this thing is on top of the checkered background an additional thing that we've added as well and I'm going to go into this a little bit more detail stay on the road another thing we've added for excuse me for Panther is transparency layers and transparency layers is a way to sort of temporarily draw to another destination and then have the whole entire result composited back with this particular effect so in this case I might want to get these nice circles all drawn with with a nice transparency and so I can sort of use a transparency layer to draw the circle left screen and then when I composited back the entire result will be drawn in with a particular alpha and I'm going to go into that a little bit more detail later as well so now let's look at the type that I talked about and talk about those a little bit more of course vector geometry is very important that's why I was talking about with path a path can be just a straight line it can have a dash as you see on the left a path can be a collection of curves it doesn't have to be closed if you want it can be closed like the state of California there as you see is a closed path and in addition that's a filled path so it has to either stroked or filled and of course the path doesn't have to be stroked it could just be simply filled as you see on the bottom right you have a circle with the red circle which is actually consists of two paths an inside circle and an outside circle and when you fill it you just get the interior part filled and that brings up interesting thing question about filling for those of you who know a little bit by graphics is to lift different ways of filling there's what's called even odd and whining number Phil that's the illustration of the star and the lower left corner and you can core graphic supports either flavor of phil operation another thing you can do is pass it's very powerful is use them to clip you can use them as a vector geometry clip so here you see on the on the left and arrow which is we're going to use is just a path that we want to clip to when I say clip what that means is once you said that as a clipping region everything that subsequently drawn is clipped through that path and only shows up where that path would be normally filled so here you see the arrow and we set that as a clipping region and then we draw an image and what we have is only the part inside the arrow that's drawn so this can be very powerful technique for complicated drawing operations for simple drawing operations is it's very useful to use paths as a clipping region like this so in addition to path of course we have text text is a very important part of any graphics API because most of the things that you draw tend to be text we have support for all the font flavors that that matt goes tim supports as you can see we can use pretty much any font that's available in the system text doesn't have to be just sort of you know laid out vertically or horizontally it can be rotated an arbitrary angle you have complete freedom over that course you get all the high quality anti-aliasing so when you do rotate it looks very beautiful it doesn't look sort of bit mapping jaggi type text to be stroked or filled as you can see with a stroke dumb text example where you have a whiteboard on the outside and of course you don't have to research yourself just to roman text you can also have Chinese Japanese Korean any of those flavors so the important thing to learn to know about the way the courts to dapi works we're really like I said before we're a low level lightweight thing that means we don't work and unit code strings instead we work on sort of the process Unicode strings after they go through Atsui or the coco text rendering system to end up to glyphs the glyphs is just an index into a font that tells you the path you use to draw the character very simple API so we work at that level we're not really a Unicode text rendering engine we're not a layout text rendering engine all of that stuff you should use either with cocoa or apps food you get there I result and in both cases there's ways to funnel all of your drawing down to glyphs and what you have glyphs then you could if you wanted to use the core graphics API to draw directly to the screen to a bitmap whatever of course they also have both absa and cocoa have a way to draw directly to a context without you having to get involved which is very powerful the good thing about Panther we've improved the text rent of the glyph trending I should say at the core graphics level and some cases up to twice as fast it was already pretty fast so this is actually a pretty significant speed up and of course as I mentioned before we support all the standard flavors to type type one open type c ID which is for Chinese Japanese and Korean always come through 80s and we use the 80s very heavily to get the glyph data out and then we'll go render it and we put it to the destination in a high quality way of course images are well are part of the core graphics API here you see that images don't have to be necessarily just you know rectangular blob of data that can be rotated you have a clipping region associated with it the image itself can have a clipping region in sort of see the ticket has a nice little notch cut out of its edge so images can be very it can be used to do lots of complicated drawing and you don't have to be strict yourself to just a straight rectangular region of data so the the as I mentioned we have an alpha channel support so you have images that have some transparency some non transparency in Panther we have support for images which have 12 32 bits for component that means that each component of your pixel can have up to 32 bit so you can have a 32 bit red component a 32 bit green component a 32 bit blue component for total 96 bits per pixel so that's very powerful we think it's going to give us a lot of headroom for a long time colorspace support in other words the way the image data is interpreted whether it is the RGB or CMYK we support all the standard color spaces so as I mentioned red green blue cyan magenta yellow black index color spaces such as what you find with gif images for each pixel is really an index into a color table and of course ICC profiles those are the way of doing color in color or sorry device-independent color management we use color sync to allow us to give us access to the ICC profiles and do high-quality color rendering and in Panther as well we support image masks which range from 128 bits an image mask is effectively just a stencil it's just a way of specifying where you want paint or color to appear on the destination and so you think you can think of as a stencil and in pants that we have support for 128 bit image map so just to talk a little bit more about profiles give you a better sense of what a profile actually is a color space is how we refer to it in core graphics here's the same identical images same bits in the image but it has two different profiles two different colors to different ways of interpreting the data the one on the left is a standard profile it says the first component in a pixel is red the second component of a pixel is green the third component of the pixel is blue and so you get nice standard ordinary non Martian ladybug the one on the right is a different profile this is somewhat of a contrived example because it is so stark Lee wrong but in this case the first pick the first component of the pixel is blue the second one is green the children's red that's the color space for the profile telling the emmitt telling core graphics how to interpret the image data now this is obviously sort of a silly example but this is very powerful that using profiles using color spaces it's very powerful when you want to do high fidelity color rendering because typically your devices don't actually think about color in the same way so your camera might look you when you take a picture with your camera and you try to show it on your monitor it might not look the same as it looks through the viewfinder of the camera and profiles allow to give us give us extra information so that when you do take the picture what will happen is that the picture will be appended with a profile that says here's how the camera thought about the color and when that image goes back over to two core graphics to display on the screen will take that information from the camera use that profile and display the image correctly on the monitor correctly meaning so it looks the same as it did in the viewfinder so it's very powerful and we use that very heavily we think of that this is sort of the you know a fundamental part of courts GD you know high fidelity color correctness in all cases so in addition to the standard image support that we've had in the past for this year for Panther we're adding new api to quicktime to give us access to a lot of what quick temps apport in terms of image format so the QuickTime guys have added graciously some API to create a CG image ref directly from any graphics importer that you might happen to have and this means that any image formats are supported by quicktime can now be drawn directly into a CG context you have to sort of go and create a G world and do all the dance that you used to have to do so that means we now support through this quicktime api jpeg2000 just images pretty much anything that the QuickTime supports is now supported in CG directly drawn into a context and the important part about it is that quick time excuse me the QuickTime API preserves as much of the information of the original source image as it can so if there was transparency individuals image it will preserve that if there's a color sync profile will preserve that anything that makes sense to preserve through the core graphics API will preserve and the API itself is pretty trivial it's a very nice simple API graphics import create CG image you take a graphics importer and hand it to this API and out pops a CG image rep and then you can use that just as you would any other CG imagery have to draw to any context to PDF to post grip whatever you do whatever you wish okay so another thing that we can do with the context is we can draw a PDF documents we can draw really pages of a PDF document into a context so we support importing of PF one point 0 1 point 10 to the PDF 1.4 flavors of documents and then one thing that's very useful is a lot of times people want to create PDF and so we also have api to allow you create PDF from the drawing a PDF context what you do PDF document creation and when we create pdfs content we always will explore PDF 1.3 which means that it's what more widely available it's more widely supported on older acrobat readers if we need to there are cases where we have to we will bump it up to pee at 1.4 for example use transparency that's only a PDF 1.4 feature so we try to keep the PDF document is widely distributed well as possible because we do think of it as something that's very as we said the digital paper of macro is 10 and an important part about our PDF document port is that we have full round tripping of the cg api what that means is that if you draw anything in core graphics and then to a PDF context what comes out as a PDF document that will view correctly in preview and enact that exactly as you originally specified the drawing in the context so we get a full round tripping so you don't lose any information when you draw to a PDF context that will show up correctly as you wanted in Acrobat in preview and for those of you who worry about this sort of thing we also support for pre-press data interchange by a PDF x3 if you provide the right keys and additional dictionaries when you create the PDF context new this year for Panther in addition in the past the API has been pretty model there's a PDF document you have to do a bunch of the PDF documents a little bit awkward so they've added some convenience api's to do page based access so you can get information directly if there's now a new type of CGS Fiji PDF page ref which you can work with so it's a little bit more convenient you get the standard things such as media box crop box and so on from the PDF page things like the rotation angle and the page number and then what I think is actually even more interesting we have also decided to unlock the sort of the inside of the PDF file so we now have new API which will give you access directly into the the PDF document itself in sort of more of its native form and the idea the for those of you who aren't familiar with the white PDF is structured it you can sort of think about as a big tree and it's a big trees that starts out with a very top with a root node called the catalog and this catalogs the dictionary and all the entries in the dictionary or either more dictionaries or raise or values of you know integers are wheels and stuff like that so it's just this big tree structure it's like a property list so in order to mirror that we that structure we have new API are sorry new types such as like PG PF dictionary cgp of array and so on which allow you to sort of model the contents of the PDF file we have new API for a PDF document to get its catalogue sort of its root node and we have new API to get the dictionary direct from of page a lot of times you don't necessarily care so much about the entire overarching structure you just want to know does this page have a thumbnail or does this page have any annotations and stuff like that so those are the convenience api's that we have available as you can see here's a very simple example of how to use this API in this case we are thinking Oh we'd like to get the thumbnail for this page so we declare two types of dictionary in a stream the stream is sort of the way p it represents an arbitrary collection of just data in this case is going to be image data we get the dictionary for the page that we care about so that we want to get the thumbnail from and then that's just a dictionary that we can look up values in and here we're going to look up the thumbnail the key the way the PDF specification defines the thumbnail is via the key some so here we say does the key does this dictionary have an entry called thumb that's stream in the in the for the page dictionary and if it does then we want to get the data from the stream and once we get to data then we may want to go up and draw that to the screen we may want to pretend like we're preview and draw the bolt on my own within the draw on the side the format key just says is it jpg is a non jpg currently in p.m. and Panther you have one flavor or the other we do all of the decryption decoding stuff like that for you except in the case of jpg where doesn't create my where it doesn't make as much sense so just a simple demo of this I'll go over to the demo machine so here i have a very simple PDF file just has some text hello world in Times Roman and I'll take that to my my PDF introspection amp this is actually about a two hour worth of work most of it was figuring out what to do in cocoa to do the right thing as you can see what I've done is all I'm doing is just explain the contents of the PDF file sort of what look what it looks like when you actually open it up and look at the real structure inside it so here you see we're at the top root node we have the catalog this is a dictionary for the catalog and the root node has the pages those case there's just one page let's account kids is the PDF way of talking about the each page in the document so we can open it up kids is just an array obviously index by zero and it has a dictionary in it which is the first page so i can bring up my inspector which i have and all this is just with public at panther api none of this is special or hidden or anything of that it just allows you to complete access to the PDF file here you can see that they that the the page has a bunch of entries in it that that are related to the sort of how the page gets drawn and so on as you can see here's the resources the resources have some fonts here's the font you can see oh look at the Times Roman so you say oh it's drawing time something good it's doing the right thing and here's the contents of the actual drawing operations for this PDF file it's basically it's sort of like set the font to 36 point f1 means x roma in this case position at 1010 and draw a hello world so it's a pretty trivial PDF file but this and this is a pretty trivial app but we think that this allowing developers to get access to the contents of PS and introspect and interesting ways will be very powerful and provide a lot of interesting application opportunities for you ok so let me quit that and now go back to the slides ok so that's the we're still sort of traveling through the the things you can do with a context another thing you can work with the context as a color space the color space type as I mentioned earlier intel's core graphics how to interpret color data so as i showed you before was that profile one of the profile showed you that was example where the color space the profile said of the first components read the second one screen the third one's blue another one was a profile that said oh the first components blue second ones green the third ones red so color profiles are used in order to provide data interpretation of the color data and a better example perhaps as a profile for a camera which might say oh here's how you tweak things when you draw it so it looks the right way on your monitor new for Panther we're adding two new convenience api's one is a way to get the document default color space a user if they choose can set the the way they want the document by default to used to specify colors if in fact the document doesn't do it itself there's no profile embedded and this is a convenience function because it turned out in the past this was actually sort of difficult to get its information that's available in the in the used to be the coding preferences panel now it's in the color sync utility and it was a little bit more complicated to get that information so now we have a simple way of getting it directly to the CG API we're also adding a new colors new API to allow you to get a display color space the display color space is our term for a color space which is very fast and drawing to the screen there's no matching what that means is there's no special conversions that happen in order to draw something to the screen it's just as you specify its drawn to the screen so you get very drawing to the screen and it's very appropriate for something like you I or something like that where the precise color that you get on the screen may not be that critical relative to the to the time it might take to do the drawing for example if you had a screen saver something you don't really care that much about the size color but you just want it to be fast but the important thing too is that you get a consistent profile anytime you go to another output device so when you're printing for example you get what's called and colors increments the generic profile that is just some profile that's been specified which means that from any device that you're printing you'll always get a consistent result you won't get different results or crazy results when you're printing two different types of printers and stuff like that you'll always get a constant look so this is I think something that will be very powerful for developers to who want to do fast screen drawing and if they do need to print if it does happen they need to they'll get a constant consistent result on the output side and there's a lot more information much more than I can go into here and the session in session 206 the color sync update so if you're interested in in color management and so on I recommend that you go to that another thing that we're adding this year for her Panther is a new primitive type of CG color RAF it turns out in the Jaguar api's sometimes it was a little bit awkward to set colors well not necessarily awkward but but the API didn't actually match was going on internally internally we use a CG color wrap this primitive type for all of our color management and so all the API before you sort of had a specified in terms of component so we'd end up allocating color f and we do in all this will dance and the truth is what we ended up with internally always was just you cg color if it's just a container that holds both the color space the way to interpret data and the components for the photic color so you might for example have a cg color f which is red with this particular profile and it would be 100 RGB plus the profile that you're interested in and as i mentioned it's the fundamental type 4 colors in court ski it's the thing that we use always internally so anytime you were calling the old AP is you are in depth internally getting the cg color oh well if you can create one yourself and use it yourself a manager yourself then as you can imagine we don't have to do that work in Colonel Lee we can just use the color ref that you provide us directly so it is in fact very fast as much faster use a colorist and it is to sort of go to the original API that said there are cases when it's not as may be as powerful there are some cases whether where it's more powerful than it is in other cases so in particular if you use a constant color if you draw a lot of texting red with this particular profile or a lot of text and purple with this other profile creating a CG color wrap to that you hang on to that you reuse over and over and over will be much faster than sitting at every single time part of the reason for that is we can do all sorts of optimizations on the back end for example we might cash the color we might do pre conversions to unknown so the color spaces are going because we're always going to some particular destination you know who knows we might upload it to OpenGL it could be anything in the world but if you can reuse the color over and over it will be somewhat faster than if you had to set it and we create a new thing and then discards at the end if on the other hand you use lots and lots of different colors if you're using you know every color of the rainbow all over the place then you don't get this big-ass speed speed advantage because we can't reuse the data we sort of creating one using it discarding it crane one using and starting in a few don't get quite as much advantage but there are cases where it would be very powerful a typical case would be black text you know almost every piece of Texas ever drawn is in black the slides should not withstanding and so using the black creating a black color and reusing that over and over every coming draw a black text makes a lot of sense of course there's some new API to allow you to set the color directly into the context did you contact set sail color with color set stroke color a color a little bit awkward names with the better names are already taken okay another thing that you can do with the context is specify a shading shading or just a way of doing axial or radial gradients where you provide a function that tells us what colors you want to be drawn across the gradient so here you see on the left you see a radio shading where you start out with the white white bright dot and the sort of offset from the center of the circle and you sort of transition outward smoothly to pink and on the right you have an axial shading which goes through a number of different colors all provided by the function that you you might provide yourself so we don't really restrict what colors you can use how you work with it we also don't do whinnies restriction in terms of things like you know here you can see that the circles don't have to be concentric or anything like that they can sort of be pretty much two different circles anywhere in space that you want and you'll get a nice transition between them for Panther we put an awful lot of effort into improving our performance of axial shadow axial and radial shading drawing we want to well the truth is that we want to have what we call keynote quality gradients and by keane up quality I mean satisfy the principle user keynote and and so you know that takes a bit of work it turns out and so our goal has been for a panther to be keynote quality and and I really that we've reached that goal in in the current release so one of the things that we allow you to do is actually specify the level of quality you want because there are cases when you you actually just sort of want to fast as fast as possible shading not necessarily super high quality because it's just a one-off or you're doing some small little drawing in the corner or who knows what the typical way that this works is through dijeron as you might know if you're doing a gradient when you zoom it up very large you can sometimes get banding and soda luring is an approach to him to solve this problem so you can now control the shading and the way it's drawn by the interpolation quality times of the way you control the quality of images when they're scaled up or scaled down by the interpolation quality and then also in Panther that we've added the ability to have a transition between opaque and non opaque colors in the past and Jaguar all the colors were treated as if they were just a hundred percent opaque so you can do a nice transition with a transparent color now in Panther we've added ability to use transparent not opaque colors so you can have a transition from zero percent no maybe your personnel so so completely transparent to fully opaque you get a nice transition across where you start out with seeing the stuff in the background and by the time you get to the end you see nothing from the background and another thing that we've added as I mentioned earlier is shadows so shadows are basically applied to any drawing you do will take the results of the drawing and will create a shadow from it and what under will will write it down to sort of essentially underneath the object that you're drawing at the off that you provide with a blur radius you provide and so that way you can do any shadow you can do shadows to all sorts of things that you want anything the standard CG API you can shadow so as you see here on the right I have some text shout out in an ordinary way on the left it may be hard to see that you can see it on the left the top figure this little logo that I've created has a shadow that has a hard edge on the bottom it has a soft ridge so the blur radius amount of blur you getting your shadow is controllable so that you can set that as you want depending on the effect you're trying to get as I mentioned the API that that is available allows you to specify an offset sort of the the position relative to where you're drawing how far off the shadow appears the position around as well and and also the blur radius of course and this is part of the graphic state which means that you can save the graphic state set up a shadow do some drawing let me show the graphics data and then the shadow is gone so you can do just very precise shadowing of objects here's a code example of actually how you would use a shadow how you'd actually set it up in this case we're imagining that we've already set up a path that we want to stroke in the context somewhere somebody's done that for us and we want to do a shadow of it so you can see here we start out by just doing a save G state we're going to save the graphic state because we just want this past shadow nothing else we set up the offset here it's going to be 55 and default user space relative to what we're drawing so it's going to be sort of shifted actually it's gonna be shifted up this way so it's as if the light source we're down here don't fly shooting up and then we just call CG contact set shadow with the context of course offset that we've just created and the blur radius and we imagine someone has specified the blur radius that they want to use and then we call TG context rope path in CG context restore G state so it's as simple as that it's nothing very fancy or complex but now you get a shadow path and all of the knife anti-aliasing that happens with regular everything else will happen all of the you know the pretty drawing the interpolation anything that happens that needs to happen often and you'll just have a shadow underneath the object you are drawing so this can be very very powerful and here's a simple demo I'm going to show of this so here's just a bunch of objects that are animating there's just a simple Coco app that just animate object you can see all the objects have shadows underneath them and you get and the shadows don't really incur committed performance penalty this is in fact very little of one this is a animating a pretty good clip and as you can see here we have the shadow instead of see that in this case the shadow is sort of drawn it looks as if it's a 3d effect of course it's not it's just sort of whatever is drawn later will cast a shadow what was drawn before so it looks here you see that it looks as though those this is on top of this but of course it's not really there's this was just drawn later but you do have the shadow on top of the other object as you can see here a little bit for the shadows intersect you get a slightly darker appearance as I mentioned you can set the shadow position anywhere you want you can sort of play around with it and say oh I like it there that's really pretty her or whatever you like and as I said before you can set the shoe the blur radius so you can get it to be more fuzzy more if you slide or sharper light whatever you'd like so it's actually it's pretty simple API and then you can just use it for anything that you might want to draw okay so back to the slides okay so another thing that we've added for panthers I mentioned earlier is transparency layers and the problem we're trying to solve is is this is this math equation what do you get when you want to do a logo let's say we're going to combine these three circles in a way that we that we would like to combine them so that they're overlapping each other but we want to have the results shadowed okay how do we do that so that it looks right as a clear example here you see on the left you have the three our logo or three circles drawn but we've tried to shadow it and we get this horrible result where every circle shadows the ones underneath it or ones drawn earlier look sorrowful what we really want is the one on the the right where we have this a nice low logo that I've created and the whole thing is shadowed so what we've added in a panther is what we call a transparency later and I've been mentioning shadows and you might think well why isn't called a shadow layer well it's both those names are actually sort of misnomers it's really just a way of you can sort of think of as a layer it's really a way to sort of temporarily say okay take what I'm going to draw for a while until I tell you to stop and collect it all up and whatever form makes sense and then after I say stop take the result and draw it back with the effect that you want so here what we're sort of doing is we're saying we're going to begin a transparency layer we're going to draw the three circles all together and then when we say now we're done we take the three circles as they're drawn and then take the take the whole thing and Shadow the result so so it is I mentioned here it's good if you want to do a bunch of objects all simultaneously and just plain is the effect to the entire aggregate not to sort of each one independently and it really is just like a layer in a graphics application you can sort of think of it that way the important thing that makes it really simple to use is that the the graphic state parameters in your grant and your context aren't changed except for the ones that actually affect the final compositing result so that means you can sort of just set up your Fuji state the way you want to begin a transparency layer draw some stuff into transparency layer and bam you have the right result and it's nestable can do transparency layer inside of transparency layer inside of transparency layer do the whole thing all the way back and you'll get the right results as well so as a simple example here you see again this is sort of the the origin of the whites we call a transparency layer here you on the left is sort of what Mike would consider the wrong thing I don't want each circle fifty percent alpha drawn on top of each other because then I get this sort of I don't know didn't even look right on the left hand side what I really want is all the circles drawn essentially simultaneously and then the final result compositing the destination with the Alpha value that I've chosen the code to do that is really really simple here you see when I start out with is I as I tell the context what alpha I'm going to be using and then I begin transparency later I just say we get a transparency layer that's all I have to do and I presume I have some subroutine that does my little logo through our circles in wrecked which will go up and draw them in the right way and you know basically draw one on top of the other on top of the other and then I just say cg contacts in transparency layer and what i end up with is all of that drawing that I've done is composited to the destination with it with the Alpha point seven so I get the expect I'm actually looking for so again a little demo here's my simple application so you can see this is wrong I'm imagining that I'm an artist and I'm going to make my logo and I'm trying to end it so it just all wrong everything's shadowed it's terrible so what I'm going to do is I'm going to click here and now when I do the drawing it's as if each of these is drawn and it's all drawn sort of simultaneously and just the result of shadow so I don't have this bad effect of everything sort of being shadowed one on top of another as you can see it works just the same as as any other shadow it just sort of can move around of course only the the aggregate is shadowed not H&H thing independently and Chris blur radius works the same way so it actually can be pretty powerful for doing groups of objects and applying effectively just to the result not to the each individual object independently okay back to the slides okay so so that's sort of all of the types all the primitive things you can work with with the context to do drawing do relatively relatively complicated drawing and so now we want to step back a little bit and look at just the context idea in general so in in Jaguar we have again as I showed you earlier you can pretty much go to a window post group EF in that context and the beat that one thing is the bitmap context is restricted in in Jaguar you can only have an RGB destination so no matter what anytime you're doing drawing you just get RGB out which is good and many many cases it's very powerful but for Panther we're also going to let you create a CMYK bitmap context so you can for those of you who the clapping array so that you can do direct output from your core graphics API to a CMYK bitmap and even of course obviously you can still do an RGB bitmaps if you want and this can be very powerful some printing applications and it's very simple again you don't have any new API you just create a CMYK color space this is a parameter that you passed as a bitmap creation function and you just create a theme like red color space pass it to the bitmap creation bitmap context creation function and CMYK context and it will just work exactly the way any other context does in addition so we you know we have this little nice diagram on the bottom window postscript PDF bitmap and but those of you saw Peters talk on Tuesday one of the key things was OpenGL and you might say wow I'd like to be able to draw with the CG context into my OpenGL context why can't I what you can and Panther we have support now for an opengl context so you take your GL context bobs and you pass it to a special creation function and out pops in CG context and again it works just like every other context you can do high-quality text drawing you can do you know all the shadows and shadings and stuff like that that I showed you earlier transparent layers everything works the same as every other context in the system the the API is again pretty simple there's cg its mouth phul to say i'm going to take a drink of water before I say it it's CG GL context create and it takes a cgl context ob's and that's the thing that you work with but the OpenGL for those of you are familiar with it a size is the viewport size and a color space the color space says how to convert device-independent colors to the actual destination of the GL context and what you get back is a GG context rep just like any other cg kind of threat so you can start immediately drawing your high quality text on your GL context and so on those initial icic g context feed see ggl context update viewport size in case of report slice changes you can you can call that in addition to to all of that we're also adding and Panther although it's not a message that you're going to get or that you have yet we're adding API to do sort of a scroll wrecked and copy bits for those who are familiar with quick-draw light when I say light just three when I say light what I mean is actually it's really a copy it's not sort of doesn't go through any special effects doesn't do anything crazy or anything like that it just takes bits here and copies them to hear but this is very powerful for the situations when you need that when you want to do a roll yourself or some sort of copy yourself the if you can you can do a scroll which means that you're copying from one context back to itself so if you just wanted to slide some some content up or you can do a copy so you take content from a rectangle of this from one context and copy them to another context another destination and in addition we will have API which lets you create a CG image directly from a region in the context you might do some drawing to the screen grab the area you're interested in and create a CG image from that and maybe you write that as a jpeg or tiff or something else as you wish okay so that's the sort of the general thing of context for Panther the directions were going as you can see we're sort of trying to innovate more add things that people need we've had a lot of new api's for you to work with we've had the PDF data metadata access you can actually crack open PDF files will start working working with them directly pixel copying as I mentioned and we've put in a lot of performance and quality improvement and we're going to continue doing that with view performances a very critical thing in Panther and certainly at our level we're pretty much nowadays everything funnels through a performance is key for us and so we spent a lot of effort making things very fast and very high quality where where that is appropriate okay so that's sort of what's new and Panther for context so now let's sort of step back even farther and look at what you can do with the court API in general one of the things that we've added which you found people have been very interested in is python bindings so since course is so powerful and rich and has all those nice things you can do with it it'd be great if you didn't have to actually write a program to to do anything if you could just write a simple script to have things come out the drawing that you might want to do and so we've added some python bindings that lets you get access directly to the CG api's to do anything that you could do with a regular ordinary program as i mentioned here the fact that it's an object-oriented language makes it really simple to do quick to the one-off programs little tests or examples and so on and there's lots of ways you could use this here i mentioned scripting a PDF manipulation for example you might want to take a PDF file and do say a 4 up version of it or put a water market watermark on it something like that or you might want to take some sort of complicated PDF file or maybe just some complicated drawing of your own and draw directly to a bitmap and then take the result and create jpg out of it so rather than having to go through the whole process of writing a program to be that you could just use the script language to do that for you the as I say the API is that we have almost all the api's are wrapped so you can use them just like you would use them in your C program most of them wrap not all of them but we're probably going to end up adding all of them and then because the CG API is powerful it's not actually it's still not everything you need to do sort of really what you want in terms of some convenience functions so for example ZD doesn't support a lot of the cook time image I oh but we've added wraps for that via the new API so that you can get io from QuickTime easily and then because again as I mentioned earlier we don't really work as a txt level to work as a glyph level we've also added some wraps to do layout and rendering of text by a cocoa so you can do regular text layout HTML Archie f anything like that and so you can sort of get high quality text layout through the python bindings so here's a code example of how you might in this case we're going to draw a red circle in the middle of well near the middle of the page and create a PDF files on it so it's really very simple example as you can see we start out by doing from core graphics import star which is a Python way of saying bring in everything that has to do with the core graphics thank you and then we create a rectangle so this was just like your regular C code that you might write if you're using core graphics did you write make without the semicolon that's the only part that's missing this case is going to be eight and a half by 11 612 by 792 points we create a PDF context with the files we're going to write to the file called circle dot PDF and we pass in the default page wreck so if we don't specify a page wreck that's going to be the rectangle that's used and then we do the CG clinics begin page we start out with the first page set RGB fill color in this case is going to be red no green no blue and fully opaque alphas one and then we add an ark the ark is positioned at 300 300 that's Center it's radius is 100 and it goes from 0 to 2pi radians and we're going to make it counterclockwise and then we just fill the path now we have a red circle in the PDF file and when we do in page we're done that's it so now we have done a very simple drawing of a red circle and a PDF file of course this is a simple example but you can do much more complicated things in this okay so that's python bindings then and we've also found that a lot of people have legacy poster files PDF is a great digital paper format but there's people who have written theses that have used tag to produce PostScript and who knows what albright there's all this PDA post code files that are that sort of are still around that you might like to move forward into PDF or you might just want to have an application to displace postscript files you wanted to accept it so we have new API and Panther that will convert postscript to PDF so that you can call it directly and you can do all the conversions you want from post Wikipedia you provide it at a callback which are a way for us to tell you things like oh I'm finished page 1 i'm going to start on page 2 or oh I'm finished the document or by the way there's this warning that occurred or I couldn't find this font or I'm aborting because you've used an invalid operator whatever the callback mechanisms are there so that you get as much information that you might normally think you would get from us say a postscript printer the one thing to the things to remember are that because it is a post group interpreter it brings in the entire post court vm into your process which is you know could be pretty big actually to be frank it's uh it's not it's not it's a it's a non zero cost to your application and again because you are bringing up is vm and attack got to figure out about fonts and all that sort of information it could be a little slow to start up so that's one thing to keep in mind as well that those two things are things you might want to be aware of now once it started up fam off you go all the conversion happens pretty fast so here's an example a code example of what you might do and it turns out the astute among you or the awake perhaps will notice that I'm writing and reading from the same file which is a bug but if you imagine that in the first line I'm actually creating a data provider a way to get data into court traffic from your application with some post group URL and the second line I'm going to create a data consumer way for core graphics to give information to you with in this case let's imagine a different URL a different PDF URL at supposed so we have an in and out and then we're going to create a converter see GPS converter create creates the converter we presume the callbacks have been specified by you so that you want information about warnings or pages being completed and stuff like that and once you've created the converter then we can just use it to create to convert post script files and so here you see we see GPS converterconvert takes a converter and an input file and out the file and return success when it if it succeeds and false if it fails and what's good about this is that once you've started this up and converted the poster file then you can just reuse the converter it's all ready to go you can just sort of convert more posts compiles if you have a thousand of them or are just have this sort of ready to go so someone drags in a post-it file you can do the conversion automatically so it has a pretty flexible interface in that respect okay so to sum up we have lots of API that you can play with for Panther of course is all the API we've already had in Jaguar so for those of you who haven't been using quartz today I encourage you to experiment with some of this and play around and see what you can do we're going to keep adding more API where it makes sense and part of the way that makes sense is for you to tell us what you need and what is missing that you find would be really useful a lot of things we've added this year have been based directly on feedback we've gotten last year so your feedback is very important to us and it's very useful for helping us direct where we're innovating to satisfy the needs of you the developers and so now i'm going to bring travis back up to wrap up and give you the roadmap up there thank you so remaining today and the road map for the graphics imaging track our next session is going to be session 28 which which is fragment programming with OpenGL in the garage managing over you saw do a lot of really incredible real-time pixel operations and hosting those in the GPU and this is a session that's going to talk about the techniques that you use to do that then we also have session 29 which is OpenGL optimizations if you are interested in finding out how to use OpenGL do its best on Mac OS 10 please attend that session and then two people doing 2d graphics obviously a good companion session that you'll want to attend is 210 which is Mac os10 printing update obviously significant client to the courts 2d technology inside Makela skin is the printing system because our printing system does use quartz to do both its PostScript generation and also its rasterization so there's going to be lots of information relating to court CD and and and how it all interacts with our whole printing architecture so 210 is going to be a great session for you to 10 and then we have to 11 which is talking about the parts of courts that do not deal with drawing but deal with the other services that the system needs for example just handling displays and whatnot and then also we have an interesting session to 12 which is cutting edge OpenGL techniques which is going to be presented by a hardware partners API they have their sort of opengl heavy hitters who are coming to present and let you know what you can do when you really push the envelope with opengl so that's going to be exciting session and then we have a section feedback forum at our traditional time which is friday at 5pm obviously you can give us feedback when you see this in the hallway or at the end of this QA if you have more significant feedback you want to get us please attend the feedback forum because it's a great time to basically let us know what you want to see in Mac OS 10 in terms of graphics technology in the future so now what I want to do is give you some contact information I'm your best point of contact for any of the graphics technologies in Mac OS 10 I can be found at travis at apple com and so please contact me with any questions you have regarding the technologies you seen thus far let me bring the Q&A panel up actually do have some references here but so we have some additional documentation on ADC site and we also have develop a web page addresses court to the general umbrella technology for our windowing system in our 2d drawing at the eyes