[아이폰 앱 개발] Exploring iPhone Graphics Part 1

Exploring iPhone Graphics Part 1

April 9th, 2008 Posted in Software DevelopmentiPhone


The series of articles is going to discuss creating graphics on the iPhone using the SDK. Part 1 will start out with the basics by drawing some simple 2D graphics. In later articles I plan to get into animation, using the accelerometers and maybe even a little OpenGL.

The sample application for this article is very simple. It is just a Cocoa Touch application with a single view. The view’s drawRectmethod contains all of the code. Again, this first article is very introductory.

All drawing is done directly onto a graphics context. For this example we are drawing on the current UI graphics context. You can also create your own graphics context and draw into it but this article won’t be getting into that process.

The first step is to get the graphics context and clear it. Technically since we are only really rendering this scene once and nothing is changing I don’t need to clear it but I will anyway.


1
2
3
4
5

- (void)drawRect:(CGRect)rect
{
    // Get the graphics context and clear it
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextClearRect(ctx, rect);

The UIGraphicsGetCurrentContext function returns the current graphics context for thisUIView object. The CGContextRef value returned from this call is only valid until the drawRect method returns. You should not try to save the value in a variable and use it later.

CGContextClearRect does just what it says. It clears a rectangle. It actually makes the entire rectangle black. I haven’t found a way to clear to a different color.

The first object we are going to draw is a solid square colored red.


1
2
3

    // Draw a red solid square
    CGContextSetRGBFillColor(ctx, 255, 0, 0, 1);
    CGContextFillRect(ctx, CGRectMake(10, 10, 50, 50));

The CGContextSetRGBFillColor function is used to set the current fill color for the context. You give it values for red, green, blue and alpha. There are other ways to set the fill color but this is the easiest I’ve found. We’ll talk about the alpha value later.

You pass CGContextFillRect a rectangle created with CGRectMake and it will draw your rectangle using the current fill color. Nothing to it. Very simple stuff.

This code creates a solid circle colored green.


1
2
3

    // Draw a green solid circle
    CGContextSetRGBFillColor(ctx, 0, 255, 0, 1);
    CGContextFillEllipseInRect(ctx, CGRectMake(100, 100, 25, 25));

Again we use CGContextSetRBGFillColor to set the current fill color.CGContextFillEllipseInRect is passed a rectangle and will draw an ellipse within the bounds of the rectangle. We are giving it a square so our ellipse will end up being a circle.

The following code will draw the outline of a circle in blue:


1
2
3

    // Draw a blue hollow circle
    CGContextSetRGBStrokeColor(ctx, 0, 0, 255, 1);
    CGContextStrokeEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));

This time we use CGContextSetRGBStrokeColor instead of CGContextSetRGBFillColor. The current stroke color is the color used to draw stroke type graphics.CGContextStrokeEllipseInRect is just like CGContextFillEllipseInRect except it draws a hollow circle instead of a filled circle.

This code draws the outline of square in yellow.


1
2
3

    // Draw a yellow hollow rectangle
    CGContextSetRGBStrokeColor(ctx, 255, 255, 0, 1);
    CGContextStrokeRect(ctx, CGRectMake(195, 195, 60, 60));

This code constructs a triangle from a set of three lines.


1
2
3
4
5
6

    // Draw a purple triangle with using lines
    CGContextSetRGBStrokeColor(ctx, 255, 0, 255, 1);
    CGPoint points[6] = { CGPointMake(100, 200), CGPointMake(150, 250),
                          CGPointMake(150, 250), CGPointMake(50, 250),
                          CGPointMake(50, 250), CGPointMake(100, 200) };
    CGContextStrokeLineSegments(ctx, points, 6);

The CGContextStrokeLineSegments function is passed an array of points and will draw lines between each pair of points.

The following code will draw the text string “TrailsintheSand.com”:


1
2
3
4
5
6
7
8
9
10
11
12
13

    // Draw the text TrailsintheSand.com in light blue
    char* text = "TrailsintheSand.com";
    CGContextSelectFont(ctx, "Helvetica", 24.0, kCGEncodingMacRoman);
    CGContextSetTextDrawingMode(ctx, kCGTextFill);
    CGContextSetRGBFillColor(ctx, 0, 255, 255, 1);
 
    CGAffineTransform xform = CGAffineTransformMake(
            1.0,  0.0,
            0.0, -1.0,
            0.0,  0.0);
    CGContextSetTextMatrix(ctx, xform);
 
    CGContextShowTextAtPoint(ctx, 10, 300, text, strlen(text));

When drawing text we need a font. In this case we are selecting a 24 point Helvetica font into the current context with the CGContextSelectFont function.

CGContextSetTextDrawingMode is used to set how the text will be drawn. In this case it is set to kCGTextFill which means the text will be filled with the current fill color. You can draw the text outlined using kCGTextStroke or both filled and outlined with kCGTextFillStroke.

Since we are using kCGTextFill we need to set a fill color.

CGContextShowTextAtPoint draws the text at the specified x,y coordinate within the view. Notice that it takes a C style null terminated string.

You’ll notice that I skipped the call to CGAffineTransformMake function call. If you run this code without it your text will be drawn up-side down but in the correct position on the screen. The CGAffineTransformMake function creates a transformation matrix and theCGContextSetTextMatrix will cause this matrix to be applied to all text drawn on the context. The matrix above will cause to text to be flipped so it is right-side up. It seems strange to me that the default would be upside down. Apparently fonts are stored with a different coordinate system. You can also use transformation matricies to do things like rotate and scale your text.

Now we are going to draw a filled gray transparent rectangle over some of the other graphics that we’ve already drawn.


1
2
3

    // Draw a transparent filled circle over other objects
    CGContextSetRGBFillColor(ctx, 200, 200, 200, 0.5);
    CGContextFillEllipseInRect(ctx, CGRectMake(100, 200, 150, 150));

The last parameter passed to CGContextSetRGBFillColor is the alpha value and controls the transparency of what is drawn. This value ranges from 0 to 1 with 0 being completely transparent and 1 being completely opaque.

The last graphics example is drawing an image.


1
2
3
4
5
6
7
8
9
10

    // Load image from applicaiton bundle
    NSString* imageFileName = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"iphone_sdk.png"];
    CGDataProviderRef provider = CGDataProviderCreateWithFilename([imageFileName UTF8String]);
    CGImageRef image = CGImageCreateWithPNGDataProvider(provider, NULL, true, kCGRenderingIntentDefault);
    CGDataProviderRelease(provider);
 
    // Draw image
    CGContextDrawImage(ctx, CGRectMake(200, 0, 100, 100), image);
    CGImageRelease(image);
}

The image we are going to draw has been added as a resouce to the project (just like a source file) and will be compiled into the application bundle. We get a reference to the bundle by calling the mainBundle: method of NSBundle. Then we get the resourcePath by calling the resourcePath: method on the mainBundle. This returns an NSString object that we call stringByAppendingPathComponent: on passing it the file name to get the full path to the file name.

Now that we have the file name we create a CGDataProviderRef object using theCGDataProviderCreateWithFilename function.

Now we can get the actual CGImageRef object that we’ll use to draw the image. TheCGImageCreateWithPNGDataProvider function takes our provider and turns it into an image.

We are done with the provider so we call CGDataProviderRelease to release its memory and resources.

Finally we can call the CGContextDrawImage function to actually draw the image on the graphics context. We pass it a rectangle that the image will be drawn into. The image will be automatically resized to fit the rectangle with no regard to the image aspect ratio.

Lastly we use CGImageRelease to free up the image.

The only problem with this code is that the image will be drawn up-side down. I assume this is the same reason fonts default to being drawn up-side down. I’ll talk about how to correct this in the next article.

Screenshot:
The next article in this series will go into more detail on drawing images.


http://trailsinthesand.com/exploring-iphone-graphics-part-1

Posted by 오늘마감
[아이폰 앱 개발] OpenGL ES for iPhone : Part 3 with Accelerometer control

OpenGL ES for iPhone : Part 3 with Accelerometer control

In this part 3, we will add the accelerometer control to move the position of ellipse object that we have created in part 2 of the Tutorial.



1) UIAccelerometerDelegate
We need to add the UIAccelerometerDelegate protocol to the EAGLView and implement the accelerometer: didAccelerate: method as below


@interface EAGLView : UIView <UIAccelerometerDelegate>

- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration


We need to configure and start the accelerometer in the setupView method

[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / kAccelerometerFrequency)];
[[UIAccelerometer sharedAccelerometer] setDelegate:self];


2) Accelerometer values
Inside the accelerometer: didAccelerate: method, we add a low-pass filter in the accelerometer values. This low-pass filter codes are sourced from the GLGravity Sample Code from Apple.

//Use a basic low-pass filter in the accelerometer values
accel[0] = acceleration.x * kFilteringFactor + accel[0] * (1.0 - kFilteringFactor);
accel[1] = acceleration.y * kFilteringFactor + accel[1] * (1.0 - kFilteringFactor);
accel[2] = acceleration.z * kFilteringFactor + accel[2] * (1.0 - kFilteringFactor);


The meaning of accelerometer values:

acceleration.x = Roll. It corresponds to roll, or rotation around the axis that runs from your home button to your earpiece. Values vary from 1.0 (rolled all the way to the right) to -1.0 (rolled all the way to the left).

acceleration.y = Pitch. Place your iPhone on the table and mentally draw a horizontal line about half-way down the screen. That's the axis around which the Y value rotates. Values go from 1.0 (the headphone jack straight down) to -1.0 (the headphone jack straight up).

acceleration.z = Face up/face down. It refers to whether your iPhone is face up (-1.0) or face down (1.0). When placed on it side, either the side with the volume controls and ringer switch, or the side directly opposite, the Z value equates to 0.0.

3) Control on movement of the ellipse is using the variables moveX and moveY and the ellipse position will be changed according to acceleration.x (that is accel[0]) and acceleration.y (that is accel[1]) values that passed from the Accelerometer control after the low-pass filter. The larger the absolute value of acceleration.x/acceleration.y, the greater for the magnitude for the value of moveX/moveY and thus the faster the ellipse will change its position to that direction. As the object should not move beyond the screen view, the ellipseData.pos.x and ellipseData.pos.y values will be governed by the boundaries of the screen.

 ellipseData.pos.x += moveX;
 if (accel[0] > -0.1 & accel[0] < 0.1 ) {
   moveX = 0.0f;
 }
 else {
  moveX = 10.0f * accel[0];
 }

 ellipseData.pos.y += moveY;
 if (accel[1] > -0.1 & accel[1] < 0.1 ) {
   moveY = 0.0f;
 }
 else {
   moveY = -10.0f * accel[1];
 }


4) Conditional compilation code for the iPhone Simulator and on-screen debug info
As iPhone Simulator does not have Accelerometer control, we have added the code that will change the ellipse position inside this compiler directive, so that the ellipse will keep moving on the iPhone Simulator.
  #if TARGET_IPHONE_SIMULATOR 

Moroever, we have added a UILabel to the code so that we can read the Accelerometer values while we debug the program on actual device. This UILabel can be disabled using this define directive.
  #undef DEBUGSCREEN

5) The source codes are here, you just need to create a new project from OpenGL ES Application template of XCode and copy the source codes of EAGLView.h and EAGLView.m from below and paste them for Build & Go in XCode. The accelerometer control can only be tested on actual device.



EAGLView.h Select all

// EAGLView.h
// OpenGL ES Tutorial - Part 3 by javacom


// To enable Debug NSLog, add GCC_PREPROCESSOR_DEFINITIONS DEBUGON in Project Settings for Debug Build Only and replace NSLog() with DEBUGLOG()
#ifdef DEBUGON
#define DEBUGLOG if (DEBUGON) NSLog
#else
#define DEBUGLOG
#endif

#define DEBUGSCREEN

#import <UIKit/UIKit.h>
#import <OpenGLES/EAGL.h>
#import <OpenGLES/ES1/gl.h>
#import <OpenGLES/ES1/glext.h>

typedef struct
{
BOOL rotstop; // stop self rotation
BOOL touchInside; // finger tap inside of the object ?
BOOL scalestart; // start to scale the obejct ?
CGPoint pos; // position of the object on the screen
CGPoint startTouchPosition; // Start Touch Position
CGPoint currentTouchPosition; // Current Touch Position
GLfloat pinchDistance; // distance between two fingers pinch
GLfloat pinchDistanceShown; // distance that have shown on screen
GLfloat scale; // OpenGL scale factor of the object
GLfloat rotation; // OpenGL rotation factor of the object
GLfloat rotspeed; // control rotation speed of the object
} ObjectData;

/*
This class wraps the CAEAGLLayer from CoreAnimation into a convenient UIView subclass.
The view content is basically an EAGL surface you render your OpenGL scene into.
Note that setting the view non-opaque will only work if the EAGL surface has an alpha channel.
*/
@interface EAGLView : UIView {

@private
/* The pixel dimensions of the backbuffer */
GLint backingWidth;
GLint backingHeight;

EAGLContext *context;

/* OpenGL names for the renderbuffer and framebuffers used to render to this view */
GLuint viewRenderbuffer, viewFramebuffer;

/* OpenGL name for the depth buffer that is attached to viewFramebuffer, if it exists (0 if it does not exist) */
GLuint depthRenderbuffer;

NSTimer *animationTimer;
NSTimeInterval animationInterval;

@public
ObjectData squareData;
ObjectData ellipseData;
GLfloat ellipseVertices[720];
CGFloat initialDistance;
UIAccelerationValue accel[3];
GLfloat moveX, moveY;
#ifdef DEBUGSCREEN
UILabel *textView;
#endif
}

@property NSTimeInterval animationInterval;

@property (nonatomic) ObjectData squareData;
@property (nonatomic) ObjectData ellipseData;
@property CGFloat initialDistance;
#ifdef DEBUGSCREEN
@property (nonatomic, assign) UILabel *textView;
#endif

- (void)startAnimation;
- (void)stopAnimation;
- (void)drawView;
- (void)setupView;

@end


EAGLView.m Select all

// EAGLView.m
// OpenGL ES Tutorial - Part 3 by javacom
//
#import <QuartzCore/QuartzCore.h>
#import <OpenGLES/EAGLDrawable.h>

#import "EAGLView.h"

#include <math.h>

// Macros
#define degreesToRadians(__ANGLE__) (M_PI * (__ANGLE__) / 180.0)
#define radiansToDegrees(__ANGLE__) (180.0 * (__ANGLE__) / M_PI)

CGFloat distanceBetweenPoints (CGPoint first, CGPoint second) {
CGFloat deltaX = second.x - first.x;
CGFloat deltaY = second.y - first.y;
return sqrt(deltaX*deltaX + deltaY*deltaY );
};

CGFloat angleBetweenPoints(CGPoint first, CGPoint second) {
// atan((top - bottom)/(right - left))
CGFloat rads = atan((second.y - first.y) / (first.x - second.x));
return radiansToDegrees(rads);
}

CGFloat angleBetweenLines(CGPoint line1Start, CGPoint line1End, CGPoint line2Start, CGPoint line2End) {

CGFloat a = line1End.x - line1Start.x;
CGFloat b = line1End.y - line1Start.y;
CGFloat c = line2End.x - line2Start.x;
CGFloat d = line2End.y - line2Start.y;

CGFloat rads = acos(((a*c) + (b*d)) / ((sqrt(a*a + b*b)) * (sqrt(c*c + d*d))));

return radiansToDegrees(rads);
}

#define USE_DEPTH_BUFFER 0

// CONSTANTS
#define kMinimumTouchLength 30
#define kMaximumScale 7.0f
#define kMinimumPinchDelta 15
#define kAccelerometerFrequency 100.0 // Hz
#define kFilteringFactor 0.1


// A class extension to declare private methods
@interface EAGLView ()

@property (nonatomic, retain) EAGLContext *context;
@property (nonatomic, assign) NSTimer *animationTimer;

- (BOOL) createFramebuffer;
- (void) destroyFramebuffer;

@end


@implementation EAGLView

@synthesize context;
@synthesize animationTimer;
@synthesize animationInterval;
@synthesize squareData;
@synthesize ellipseData;
@synthesize initialDistance;
#ifdef DEBUGSCREEN
@synthesize textView;
#endif

// You must implement this method
+ (Class)layerClass {
return [CAEAGLLayer class];
}


//The GL view is stored in the nib file. When it's unarchived it's sent -initWithCoder:
- (id)initWithCoder:(NSCoder*)coder {

if ((self = [super initWithCoder:coder])) {

// Get the layer
CAEAGLLayer *eaglLayer = (CAEAGLLayer *)self.layer;

eaglLayer.opaque = YES;
eaglLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
[NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];

context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES1];

if (!context || ![EAGLContext setCurrentContext:context]) {
[self release];
return nil;
}

animationInterval = 1.0 / 60.0;
[self setupView];
}
return self;
}

// These are four methods touchesBegan, touchesMoved, touchesEnded, touchesCancelled and use to notify about touches and gestures

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
/*
NSUInteger numTaps = [[touches anyObject] tapCount]; // number of taps
NSUInteger numTouches = [touches count]; // number of touches
*/
UITouch *touch = [[touches allObjects] objectAtIndex:0];

DEBUGLOG(@"TouchBegan event counts = %d ",[[event touchesForView:self] count]);
DEBUGLOG(@"TouchBegan tounches counts = %d ",[touches count]);
if ([touches count]== 2) {
NSArray *twoTouches = [touches allObjects];
UITouch *first = [twoTouches objectAtIndex:0];
UITouch *second = [twoTouches objectAtIndex:1];
initialDistance = distanceBetweenPoints([first locationInView:self], [second locationInView:self]);
squareData.rotstop = YES;
squareData.touchInside = NO;
}
else if ([touches count]==[[event touchesForView:self] count] & [[event touchesForView:self] count] == 1) {
squareData.startTouchPosition = [touch locationInView:self];
if (distanceBetweenPoints([touch locationInView:self], squareData.pos) <= kMinimumTouchLength * squareData.scale) {
DEBUGLOG(@"Square Touch at %.2f, %.2f ",squareData.pos.x,squareData.pos.y);
squareData.rotstop = YES;
squareData.touchInside = YES;
}
}

}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [[touches allObjects] objectAtIndex:0];
squareData.currentTouchPosition = [touch locationInView:self];
if ([touches count]== 2) {
NSArray *twoTouches = [touches allObjects];
UITouch *first = [twoTouches objectAtIndex:0];
UITouch *second = [twoTouches objectAtIndex:1];

// Calculate the distance bewtween the two fingers(touches) to determine the pinch distance
CGFloat currentDistance = distanceBetweenPoints([first locationInView:self], [second locationInView:self]);

squareData.rotstop = YES;
squareData.touchInside = NO;

if (initialDistance == 0.0f)
initialDistance = currentDistance;
if (currentDistance - initialDistance > kMinimumPinchDelta) {
squareData.pinchDistance = currentDistance - initialDistance;
squareData.scalestart = YES;
DEBUGLOG(@"Outward Pinch %.2f", squareData.pinchDistance);
}
else if (initialDistance - currentDistance > kMinimumPinchDelta) {
squareData.pinchDistance = currentDistance - initialDistance;
squareData.scalestart = YES;
DEBUGLOG(@"Inward Pinch %.2f", squareData.pinchDistance);
}
}
else if ([touches count]==[[event touchesForView:self] count] & [[event touchesForView:self] count] == 1) {
if (squareData.touchInside) {
// Only move the square to new position when touchBegan is inside the square
squareData.pos.x = [touch locationInView:self].x;
squareData.pos.y = [touch locationInView:self].y;
DEBUGLOG(@"Square Move to %.2f, %.2f ",squareData.pos.x,squareData.pos.y);
squareData.rotstop = YES;
}
}
}


- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if ([touches count] == [[event touchesForView:self] count]) {
initialDistance = squareData.pinchDistanceShown = squareData.pinchDistance = 0.0f;
squareData.rotstop = squareData.touchInside = squareData.scalestart = NO;
DEBUGLOG(@"touchesEnded, all fingers up");
}
else {
initialDistance = squareData.pinchDistanceShown = squareData.pinchDistance = 0.0f;
squareData.scalestart = NO;
DEBUGLOG(@"touchesEnded");
}
}


- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
initialDistance = squareData.pinchDistanceShown = squareData.pinchDistance = 0.0f;
squareData.rotstop = squareData.touchInside = squareData.scalestart = NO;
DEBUGLOG(@"touchesCancelled");
}

- (void)setupView { // new method for intialisation of variables and states

// Enable Multi Touch of the view
self.multipleTouchEnabled = YES;

//Configure and start accelerometer
[[UIAccelerometer sharedAccelerometer] setUpdateInterval:(1.0 / kAccelerometerFrequency)];
[[UIAccelerometer sharedAccelerometer] setDelegate:self];
#if TARGET_IPHONE_SIMULATOR
moveX = 2.0f;
moveY = 3.0f;
#else
moveX = 0.0f;
moveY = 0.0f;
#endif

#ifdef DEBUGSCREEN
UIColor *bgColor = [[UIColor alloc] initWithWhite:1.0f alpha:0.0f];
textView = [[UILabel alloc] initWithFrame:CGRectMake(10.0f, 350.0f, 300.0f, 96.0f)];
textView.text = [NSString stringWithFormat:@"-Accelerometer Data-"];
textView.textAlignment = UITextAlignmentLeft;
[textView setNumberOfLines:4];
textView.backgroundColor = bgColor;
textView.font = [UIFont fontWithName:@"Arial" size:18];
[self addSubview:textView];
[self bringSubviewToFront:textView];
#endif


// Initialise square data
squareData.rotation = squareData.pinchDistance = squareData.pinchDistanceShown = 0.0f;
ellipseData.rotation = 0.0f;
squareData.scale = 1.0f;
squareData.rotstop = squareData.touchInside = squareData.scalestart = NO;
squareData.pos.x = 160.0f;
squareData.pos.y = 240.0f;
squareData.pinchDistance = 0.0f;
squareData.rotspeed = 1.0f;

// Initialise ellipse data
ellipseData.rotation = 0.0f;
ellipseData.rotstop = ellipseData.touchInside = ellipseData.scalestart = NO;
ellipseData.pos.x = 160.0f;
ellipseData.pos.y = 100.0f;
ellipseData.rotspeed = -4.0f;

// calculate the vertices of ellipse
const GLfloat xradius = 35.0f;
const GLfloat yradius = 25.0f;
for (int i = 0; i < 720; i+=2) {
ellipseVertices[i] = (cos(degreesToRadians(i)) * xradius) + 0.0f;
ellipseVertices[i+1] = (sin(degreesToRadians(i)) * yradius) + 0.0f;
// DEBUGLOG(@"ellipseVertices[v%d] %.1f, %.1f",i, ellipseVertices[i], ellipseVertices[i+1]);
}

// setup the projection matrix
glMatrixMode(GL_PROJECTION);
glLoadIdentity();

// Setup Orthographic Projection for the 320 x 480 of the iPhone screen
glOrthof(0.0f, 320.0f, 480.0f, 0.0f, -1.0f, 1.0f);
glMatrixMode(GL_MODELVIEW);

}

- (void)drawView {

// Define the square vertices
const GLfloat squareVertices[] = {
-20.0f, -20.0f,
20.0f, -20.0f,
-20.0f, 20.0f,
20.0f, 20.0f,
};

// Define the colors of the square vertices
const GLubyte squareColors[] = {
255, 255, 0, 255,
0, 255, 255, 255,
0, 0, 0, 0,
255, 0, 255, 255,
};


// Define the colors of the ellipse vertices
const GLubyte ellipseColors[] = {
233, 85, 85, 255,
233, 85, 85, 255,
233, 85, 85, 255,
233, 85, 85, 255,
233, 85, 85, 255,
};


[EAGLContext setCurrentContext:context];
glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
glViewport(0, 0, backingWidth, backingHeight);

// Clear background color
glClearColor(0.5f, 0.5f, 0.5f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);

// draw the square
glLoadIdentity();
glTranslatef(squareData.pos.x, squareData.pos.y, 0.0f);
glRotatef(squareData.rotation, 0.0f, 0.0f, 1.0f);
glScalef(squareData.scale, squareData.scale, 1.0f);
glVertexPointer(2, GL_FLOAT, 0, squareVertices);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, squareColors);
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

// draw the ellipse
glLoadIdentity();
glTranslatef(ellipseData.pos.x, ellipseData.pos.y, 0.0f);
glRotatef(ellipseData.rotation, 0.0f, 0.0f, 1.0f);
glVertexPointer(2, GL_FLOAT, 0, ellipseVertices);
glColorPointer(4, GL_UNSIGNED_BYTE, 0, ellipseColors);
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glDrawArrays(GL_TRIANGLE_FAN, 0, 360); // the ellipse has 360 vertices

// control the square rotation
if (!squareData.rotstop) {
squareData.rotation += squareData.rotspeed;
if(squareData.rotation > 360.0f)
squareData.rotation -= 360.0f;
else if(squareData.rotation < -360.0f)
squareData.rotation += 360.0f;
}

// control the ellipse rotation
if (!ellipseData.rotstop) {
ellipseData.rotation += ellipseData.rotspeed;
if(ellipseData.rotation > 360.0f)
ellipseData.rotation -= 360.0f;
else if(ellipseData.rotation < -360.0f)
ellipseData.rotation += 360.0f;
}

// control the square scaling
if (squareData.scalestart && squareData.scale <= kMaximumScale) {
GLfloat pinchDelta = squareData.pinchDistance - squareData.pinchDistanceShown;
if (squareData.pinchDistance != 0.0f) {
squareData.scale += pinchDelta/30;
squareData.pinchDistanceShown = squareData.pinchDistance;
if (squareData.scale >= kMaximumScale) {
squareData.scale = kMaximumScale;
squareData.pinchDistanceShown = squareData.pinchDistance = 0.0f;
squareData.scalestart = NO;
} else if (squareData.scale <= 1.0f) {
squareData.scale = 1.0f;
squareData.pinchDistanceShown = squareData.pinchDistance = 0.0f;
squareData.scalestart = NO;
}
DEBUGLOG(@"scale is %.2f",squareData.scale);
}
}

// control the ellipse movement
#if TARGET_IPHONE_SIMULATOR
ellipseData.pos.x += moveX;
if (ellipseData.pos.x >= 290.f) {
moveX = -2.0f;
}
else if (ellipseData.pos.x <= 30.f) {
moveX = 2.0f;
}

ellipseData.pos.y += moveY;
if (ellipseData.pos.y >= 450.f) {
moveY = -1.5f;
}
else if (ellipseData.pos.y <= 55.f) {
moveY = 3.5f;
}
#else
ellipseData.pos.x += moveX;
if (accel[0] > -0.1 & accel[0] < 0.1 ) {
moveX = 0.0f;
}
else {
moveX = 10.0f * accel[0];
}

ellipseData.pos.y += moveY;
if (accel[1] > -0.1 & accel[1] < 0.1 ) {
moveY = 0.0f;
}
else {
moveY = -10.0f * accel[1];
}
#endif
if (ellipseData.pos.x >= 290.f) {
ellipseData.pos.x = 290.0f;
}
else if (ellipseData.pos.x <= 30.f) {
ellipseData.pos.x = 30.0f;
}
if (ellipseData.pos.y >= 450.f) {
ellipseData.pos.y = 450.0f;
}
else if (ellipseData.pos.y <= 55.f) {
ellipseData.pos.y = 55.0f;
}


glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
[context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

- (void)accelerometer:(UIAccelerometer*)accelerometer didAccelerate:(UIAcceleration*)acceleration
{
/*
The meaning of acceleration values for firmware 2.x
acceleration.x = Roll. It corresponds to roll, or rotation around the axis that runs from your home button to your earpiece.
Values vary from 1.0 (rolled all the way to the right) to -1.0 (rolled all the way to the left).

acceleration.y = Pitch. Place your iPhone on the table and mentally draw a horizontal line about half-way down the screen.
That's the axis around which the Y value rotates.
Values go from 1.0 (the headphone jack straight down) to -1.0 (the headphone jack straight up).

acceleration.z = Face up/face down.
It refers to whether your iPhone is face up (-1.0) or face down (1.0).
When placed on it side, either the side with the volume controls and ringer switch, or the side directly opposite
, the Z value equates to 0.0.
*/

//Use a basic low-pass filter in the accelerometer values
accel[0] = acceleration.x * kFilteringFactor + accel[0] * (1.0 - kFilteringFactor);
accel[1] = acceleration.y * kFilteringFactor + accel[1] * (1.0 - kFilteringFactor);
accel[2] = acceleration.z * kFilteringFactor + accel[2] * (1.0 - kFilteringFactor);

#ifdef DEBUGSCREEN
textView.text = [NSString stringWithFormat:
@"X (roll, %4.1f%%): %f\nY (pitch %4.1f%%): %f\nZ (%4.1f%%) : %f",
100.0 - (accel[0] + 1.0) * 50.0, accel[0],
100.0 - (accel[1] + 1.0) * 50.0, accel[1],
100.0 - (accel[2] + 1.0) * 50.0, accel[2]
];
#endif
}

- (void)layoutSubviews {
[EAGLContext setCurrentContext:context];
[self destroyFramebuffer];
[self createFramebuffer];
[self drawView];
}


- (BOOL)createFramebuffer {

glGenFramebuffersOES(1, &viewFramebuffer);
glGenRenderbuffersOES(1, &viewRenderbuffer);

glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
[context renderbufferStorage:GL_RENDERBUFFER_OES fromDrawable:(CAEAGLLayer*)self.layer];
glFramebufferRenderbufferOES(GL_FRAMEBUFFER_OES, GL_COLOR_ATTACHMENT0_OES, GL_RENDERBUFFER_OES, viewRenderbuffer);

glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_WIDTH_OES, &backingWidth);
glGetRenderbufferParameterivOES(GL_RENDERBUFFER_OES, GL_RENDERBUFFER_HEIGHT_OES, &backingHeight);

if (USE_DEPTH_BUFFER) {
glGenRenderbuffersOES(1, &depthRenderbuffer);
glBindRenderbufferOES(GL_RENDERBUFFER_OES, depthRenderbuffer);
glRenderbufferStorageOES(GL_RENDERBUFFER_OES, GL_DEPTH_COMPONENT16_OES, backingWidth, backingHeight);
glFramebufferRenderbufferOES(GL_FRAMEBUFFER_OES, GL_DEPTH_ATTACHMENT_OES, GL_RENDERBUFFER_OES, depthRenderbuffer);
}

if(glCheckFramebufferStatusOES(GL_FRAMEBUFFER_OES) != GL_FRAMEBUFFER_COMPLETE_OES) {
DEBUGLOG(@"failed to make complete framebuffer object %x", glCheckFramebufferStatusOES(GL_FRAMEBUFFER_OES));
return NO;
}

return YES;
}


- (void)destroyFramebuffer {

glDeleteFramebuffersOES(1, &viewFramebuffer);
viewFramebuffer = 0;
glDeleteRenderbuffersOES(1, &viewRenderbuffer);
viewRenderbuffer = 0;

if(depthRenderbuffer) {
glDeleteRenderbuffersOES(1, &depthRenderbuffer);
depthRenderbuffer = 0;
}
}


- (void)startAnimation {
self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:animationInterval target:self selector:@selector(drawView) userInfo:nil repeats:YES];
}


- (void)stopAnimation {
self.animationTimer = nil;
}


- (void)setAnimationTimer:(NSTimer *)newTimer {
[animationTimer invalidate];
animationTimer = newTimer;
}


- (void)setAnimationInterval:(NSTimeInterval)interval {

animationInterval = interval;
if (animationTimer) {
[self stopAnimation];
[self startAnimation];
}
}


- (void)dealloc {

[self stopAnimation];

if ([EAGLContext currentContext] == context) {
[EAGLContext setCurrentContext:nil];
}

[context release];
[super dealloc];
}

@end

.http://iphonesdkdev.blogspot.com/2009/04/opengl-es-for-iphone-part-3-with.html
.
Posted by 오늘마감
Exploring iPhone Graphics Part 1

Exploring iPhone Graphics Part 1

April 9th, 2008 Posted in Software DevelopmentiPhone


The series of articles is going to discuss creating graphics on the iPhone using the SDK. Part 1 will start out with the basics by drawing some simple 2D graphics. In later articles I plan to get into animation, using the accelerometers and maybe even a little OpenGL.

The sample application for this article is very simple. It is just a Cocoa Touch application with a single view. The view’s drawRectmethod contains all of the code. Again, this first article is very introductory.

All drawing is done directly onto a graphics context. For this example we are drawing on the current UI graphics context. You can also create your own graphics context and draw into it but this article won’t be getting into that process.

The first step is to get the graphics context and clear it. Technically since we are only really rendering this scene once and nothing is changing I don’t need to clear it but I will anyway.


1 2 3 4 5 

- (void)drawRect:(CGRect)rect { // Get the graphics context and clear it CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextClearRect(ctx, rect);

The UIGraphicsGetCurrentContext function returns the current graphics context for thisUIView object. The CGContextRef value returned from this call is only valid until the drawRect method returns. You should not try to save the value in a variable and use it later.

CGContextClearRect does just what it says. It clears a rectangle. It actually makes the entire rectangle black. I haven’t found a way to clear to a different color.

The first object we are going to draw is a solid square colored red.


1 2 3 

 // Draw a red solid square CGContextSetRGBFillColor(ctx, 255, 0, 0, 1); CGContextFillRect(ctx, CGRectMake(10, 10, 50, 50));

The CGContextSetRGBFillColor function is used to set the current fill color for the context. You give it values for red, green, blue and alpha. There are other ways to set the fill color but this is the easiest I’ve found. We’ll talk about the alpha value later.

You pass CGContextFillRect a rectangle created with CGRectMake and it will draw your rectangle using the current fill color. Nothing to it. Very simple stuff.

This code creates a solid circle colored green.


1 2 3 

 // Draw a green solid circle CGContextSetRGBFillColor(ctx, 0, 255, 0, 1); CGContextFillEllipseInRect(ctx, CGRectMake(100, 100, 25, 25));

Again we use CGContextSetRBGFillColor to set the current fill color.CGContextFillEllipseInRect is passed a rectangle and will draw an ellipse within the bounds of the rectangle. We are giving it a square so our ellipse will end up being a circle.

The following code will draw the outline of a circle in blue:


1 2 3 

 // Draw a blue hollow circle CGContextSetRGBStrokeColor(ctx, 0, 0, 255, 1); CGContextStrokeEllipseInRect(ctx, CGRectMake(200, 200, 50, 50));

This time we use CGContextSetRGBStrokeColor instead of CGContextSetRGBFillColor. The current stroke color is the color used to draw stroke type graphics.CGContextStrokeEllipseInRect is just like CGContextFillEllipseInRect except it draws a hollow circle instead of a filled circle.

This code draws the outline of square in yellow.


1 2 3 

 // Draw a yellow hollow rectangle CGContextSetRGBStrokeColor(ctx, 255, 255, 0, 1); CGContextStrokeRect(ctx, CGRectMake(195, 195, 60, 60));

This code constructs a triangle from a set of three lines.


1 2 3 4 5 6 

 // Draw a purple triangle with using lines CGContextSetRGBStrokeColor(ctx, 255, 0, 255, 1); CGPoint points[6] = { CGPointMake(100, 200), CGPointMake(150, 250), CGPointMake(150, 250), CGPointMake(50, 250), CGPointMake(50, 250), CGPointMake(100, 200) }; CGContextStrokeLineSegments(ctx, points, 6);

The CGContextStrokeLineSegments function is passed an array of points and will draw lines between each pair of points.

The following code will draw the text string “TrailsintheSand.com”:


1 2 3 4 5 6 7 8 9 10 11 12 13 

 // Draw the text TrailsintheSand.com in light blue char* text = "TrailsintheSand.com"; CGContextSelectFont(ctx, "Helvetica", 24.0, kCGEncodingMacRoman); CGContextSetTextDrawingMode(ctx, kCGTextFill); CGContextSetRGBFillColor(ctx, 0, 255, 255, 1);   CGAffineTransform xform = CGAffineTransformMake( 1.0, 0.0, 0.0, -1.0, 0.0, 0.0); CGContextSetTextMatrix(ctx, xform);   CGContextShowTextAtPoint(ctx, 10, 300, text, strlen(text));

When drawing text we need a font. In this case we are selecting a 24 point Helvetica font into the current context with the CGContextSelectFont function.

CGContextSetTextDrawingMode is used to set how the text will be drawn. In this case it is set to kCGTextFill which means the text will be filled with the current fill color. You can draw the text outlined using kCGTextStroke or both filled and outlined with kCGTextFillStroke.

Since we are using kCGTextFill we need to set a fill color.

CGContextShowTextAtPoint draws the text at the specified x,y coordinate within the view. Notice that it takes a C style null terminated string.

You’ll notice that I skipped the call to CGAffineTransformMake function call. If you run this code without it your text will be drawn up-side down but in the correct position on the screen. The CGAffineTransformMake function creates a transformation matrix and theCGContextSetTextMatrix will cause this matrix to be applied to all text drawn on the context. The matrix above will cause to text to be flipped so it is right-side up. It seems strange to me that the default would be upside down. Apparently fonts are stored with a different coordinate system. You can also use transformation matricies to do things like rotate and scale your text.

Now we are going to draw a filled gray transparent rectangle over some of the other graphics that we’ve already drawn.


1 2 3 

 // Draw a transparent filled circle over other objects CGContextSetRGBFillColor(ctx, 200, 200, 200, 0.5); CGContextFillEllipseInRect(ctx, CGRectMake(100, 200, 150, 150));

The last parameter passed to CGContextSetRGBFillColor is the alpha value and controls the transparency of what is drawn. This value ranges from 0 to 1 with 0 being completely transparent and 1 being completely opaque.

The last graphics example is drawing an image.


1 2 3 4 5 6 7 8 9 10 

 // Load image from applicaiton bundle NSString* imageFileName = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"iphone_sdk.png"]; CGDataProviderRef provider = CGDataProviderCreateWithFilename([imageFileName UTF8String]); CGImageRef image = CGImageCreateWithPNGDataProvider(provider, NULL, true, kCGRenderingIntentDefault); CGDataProviderRelease(provider);   // Draw image CGContextDrawImage(ctx, CGRectMake(200, 0, 100, 100), image); CGImageRelease(image); }

The image we are going to draw has been added as a resouce to the project (just like a source file) and will be compiled into the application bundle. We get a reference to the bundle by calling the mainBundle: method of NSBundle. Then we get the resourcePath by calling the resourcePath: method on the mainBundle. This returns an NSString object that we call stringByAppendingPathComponent: on passing it the file name to get the full path to the file name.

Now that we have the file name we create a CGDataProviderRef object using theCGDataProviderCreateWithFilename function.

Now we can get the actual CGImageRef object that we’ll use to draw the image. TheCGImageCreateWithPNGDataProvider function takes our provider and turns it into an image.

We are done with the provider so we call CGDataProviderRelease to release its memory and resources.

Finally we can call the CGContextDrawImage function to actually draw the image on the graphics context. We pass it a rectangle that the image will be drawn into. The image will be automatically resized to fit the rectangle with no regard to the image aspect ratio.

Lastly we use CGImageRelease to free up the image.

The only problem with this code is that the image will be drawn up-side down. I assume this is the same reason fonts default to being drawn up-side down. I’ll talk about how to correct this in the next article.

Screenshot:
The next article in this series will go into more detail on drawing images.


http://trailsinthesand.com/exploring-iphone-graphics-part-1

Posted by 오늘마감