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