Lecture 11 Using Interface Builder to create an example Application

We use the basic starting sequence and name the application HyperCurve It allows the user to display a variety of curves and interactivly change their parameters: Hypocycloid Hypercycloid Rosepetal curve Lissajous curve

A hypocycloid with 5 leaves The number of leaves can be changed with the buttons, the extrusion (length)of the leaves can be changed with the sliderbar.

The mathematics At the basis of drawing such functions is the drawing of a circle. The circle is drawn in Cartesian coordinates using the sin and cos functions with a common parameter: x = cos(t) y = sin(t)

Drawing a curve in Quartz Create a path (CGMutablePathRef) Set start point (CGPathMoveToPoint) Add lines to the path (CGPathAddLineToPoint) Create a GraphicsContext (CGContextRef) Add the path to the Context (CGContextAddPath) Stroke the path (CGContextStrokePath) Put all drawing code in the method drawRect

Creating the main layout in IB Create window with a View as drawing area and two buttons: one at lower left and one at lower right. No representation of these GUI items is needed in the code: all is done using Library and Inspector windows. Attach the View to all four sides of the window and make it resizable. Attach the buttons to the lower left and lower right window corners respectively. Label the buttons leaves- and leaves+.

The slider bar Add a slider bar (NSSlider) between the two buttons, size it, attach it to the lower border of the window Set the State in the Attributes window of the Inspector Set the number range of the slider bar

Writing and connecting callbacks Write all callbacks as methods of the View Write a callback for the left button (it increases the data member leaves) Write a callback for the right button (it decreases the data member leaves) Write a callback for the slider bar (it obtains the value of the slider and changes the data member petalShift) All callbacks initiate a redraw of the curve

Working with the Menu bar The menu bar is a separate window added to the screen by IB. Taking items out of it is done by dragging them into empty space. Adding items is done using the Library window and adding either an NSMenu or an NSMenuItem. Changing entries is done using the Attributes tab of the Inspector window. Add a drop down menu with the name Curve that has four drop downs: HyperCycloid, HypoCycloid, Rosepetal, Lissajous

Setting the main menu We write a callback for each of the four drop down items (methods of View) and attach them using the Connections tab. These callbacks only change a single number data member of the View, which determines the type of curve to be drawn.

The math portion No details are discussed The math portion of the curve is in drawRect() It uses the type variable to determine which curve to draw It uses the petalShift and the number of leaves as variables in computing the curve