Introduction

Last week, we described the basics of how to set up OpenGL ES on Android using a subclass of SurfaceView which we manually added as the content view of our Activity.
We only demonstrated drawing 3 triangles but more complicated 3D surfaces can be built out of such triangles.
3D computer graphics though is the subject of a whole course and the intent here was just to give a very brief intro.
One pain point that we saw last day, that I'd like to talk about though before we move on was we had to hard-code Strings for our shaders.
It is much more convenient to just have separate files for our shaders then get out app to read these files in as Strings.
Let's start today by seeing how we could do this...

Loading Stuff for OpenGL

Consider the following code which might be placed in a helper class:

public static String readTextFileFromRawResource(final Context context,
        final int resourceId)
{
    final InputStream inputStream = context.getResources().openRawResource(
            resourceId);
    final InputStreamReader inputStreamReader = new InputStreamReader(
            inputStream);
    final BufferedReader bufferedReader = new BufferedReader(
            inputStreamReader);

    String nextLine;
    final StringBuilder body = new StringBuilder();

    try
    {
        while ((nextLine = bufferedReader.readLine()) != null)
        {
            body.append(nextLine);
            body.append('\n');
        }
    }
    catch (IOException e)
    {
        return null;
    }

    return body.toString();
}

Any activity can serve as a context for the first argument.
Within our res folder we can make a raw subfolder and put files my_vertex_shader.glsl and my_fragment_shader.glsl with our vertex and fragment shaders.
You could then read these in by setting the id to R.raw.my_vertex_shader or R.raw.my_fragment_shader

Location in Android

Before we say how to do Graphics for iOS, we are going to cover one more small topic for Android: Namely, how to get the current location of your device.
To do this you need to make sure the AVD you made has GPS enabled.
When you create an AVD, you used to be able from the GUI to add hardware properties and one of these is the GPS support (another is accelerometer support)
This seems to have gone away, however, if you look in your home directory .android/avd/, you should see the avd's that you have created .ini files. You can edit these and add a line hw.gps=yes to add support for gps. Similarly, hw.accelerometer=yes, and hw.gyroscope=yes can be added for accelerometer and gyroscope.
To make a project using location services you have to edit your manifest file to say you need these permissions:
```
<uses-permission 
        android:name="android.permission.ACCESS_FINE_LOCATION" />
```
To send the emulator coordinate you can telnet into the port number of your emulator
```
telnet localhost 5554
```
You can then send longitude and latitude information with commands like:
```
geo fix -10.5 23.4
```

LocationManager

The LocationManager can be used to get the location service.
Assuming your Activity has a LocationManager field locationManager, you could get the location service in your onCreate method with a line like:
```
locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);
```

Typically, one would want to set up who should receive location updates (whoever does must implement LocationListener) in the onResume method of Activity (called after onStart) and cancel these update requests in onPause. Code to do this might look like:

protected void onResume() 
{
    /*
     * Add LocationListener and request updates every 1000ms or 10m
     * Notice in this case we are saying this Activity implements LocationListener
     */
    locationManager.requestLocationUpdates(
        LocationManager.GPS_PROVIDER, 1000, 10f, this);
    super.onResume();
}
protected void onPause() 
{
    locationManager.removeUpdates(this);
    super.onPause();
}

LocationListener

As a last step to using GPS, we need to implement LocationListener (which we are having our Activity do).
This involves implementing the methods: onLocationChanged, onProviderDisabled, onProviderEnabled, and onStatusChanged.

For example, one could do:

public void onProviderDisabled(String provider) 
{
    Log.v("GPS", "Disabled");

    Intent intent = new Intent(
        android.provider.Settings.ACTION_LOCATION_SOURCE_SETTINGS);
    startActivity(intent);

}

public void onProviderEnabled(String provider) 
{
    Log.v("GPS", "Enabled");	
}

public void onStatusChanged(String provider, int status, Bundle extras) 
{
    switch (status) 
    {
        case LocationProvider.OUT_OF_SERVICE:
            Log.v("GPS", "Status Changed: Out of Service");
        break;
        
        case LocationProvider.TEMPORARILY_UNAVAILABLE:
            Log.v("GPS", "Status Changed: Temporarily Unavailable");
        break;
        case LocationProvider.AVAILABLE:
            Log.v("GPS", "Status Changed: Available");
        break;
    }

}

In onLocationChanged one gets as parameter a Location object which has getLongitude and getLatitude methods.

Quiz

Which of the following is true?

An Android OvalShape is of type ShapeDrawable.
A minimal OpenGL ES shader program makes use of a vertex shader and a fragment shader.
A GLSurfaceView.Renderer has a method onSurfaceChanged which is always called when the surface needs to be drawn.

Graphics on the iPhone

There are two main graphics frameworks on the iPhone:
- Quartz
- OpenGL
Quartz treats the view as a virtual canvas and follows what's called the painter's model: drawing commands are applied in much the same way as paint on a canvas.
As we have already seen to some extent with Android, OpenGL ES is implemented as a state machine.
OpenGL maintains a virtual 3D world. You perform a sequence of actions on this world, mapping it from state to state.
Actions might involve placing objects, rotating things, setting material and lighting to use, and finally projecting down to 2D.

Getting Context in Quartz

When you draw with Quartz, you'll usually add the drawing code to the view doing the drawing.
For example, you might create a subclass of UIView and add Quartz function calls to that class's drawRect: method.
drawRect: is the method in UIView that gets called each time a view needs to redraw itself.
In Quartz, drawing happens in a graphics context, also called just a context.
Every view has such a context.
When you want to draw into a view, you need to retrieve the current context and use that to make various Quartz drawing calls.

To retrieve the context, you can do:

CGContextRef context = UIGraphicsGetCurrentContext();

Note: this is a Core Graphics is C function. It is not Objective-C.

Drawing into a Context

Once you've got a graphics context, you can draw into it by passing the context to a variety of Core Graphics functions.

For example,

  CGContextSetLineWidth(context, 2.0);
  CGContextSetStrokeColorWithColor(context, 
     [UIColor redColor].CGColor);
  CGContextMoveToPoint(context, 100.0f, 100.0f);
  CGContextAddLineToPoint(context, 200.0f, 200.0f);
  CGContextStrokePath(context);

This code sets up the stroke width as being 2pixels wide, sets the color as red (Core Graphics supports both a stroke and fill color), sets the starting coordinates of a stroke, then specifies where to draw to, and finally to draw it.
So in Core Graphics, we first create a shape, then tell Quartz to draw it using the information we have set-up.

The Coordinate System

Coordinates in Core Graphics are pairs of floating point numbers.
The upper left corner of the context is (0,0). As you move down y increase, as you move right x increase.
This coordinate is different from OpenGL's in which (0,0) would represent the lower-left corner if one was drawing in 2D.
To specify a point in the coordinate system, some Quartz functions require two floating point numbers as parameters.
Other functions, ask for the point to be embedded in a CGPoint struct that has two float fields: x, and y.
Another common struct is a CGRect, which is a pair of structs, a CGPoint origin, which specifies the top y, left x coordinates or a rectangular region, and a CGSize called size which specifies the width and the height of the rectangle.
It is completely okay for a point to be offscreen, to have negative x and y values, etc.

Specifying Color

There is an Objective-C class that can be used to help specify a color in Core Graphics: UIColor.
Since Core Graphics is a C library, you don't use this class directly but instead use its properties to get a CGColor struct reference.

This is what we did with the line:

CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

One way to represent colors in Quartz is to use the additive RGBA modes.
This "adds" the red, green and blue components together in a linear combination with parameter alpha of the current color to make a new color.
Combining the three additive colors, gives a color range referred to as the color gamut.
The method of combining colors you learned in grade school, is probably a subtractive model based on red, yellow, and blue. It is almost never used in graphics.
Quartz does support other color models such as HSV, HSL, CMYK.
When working with OpenGL ES though colors are required to be RGBA.

UIColor also has the following method for specifying a color:

[UIColor colorWithRed:1.0f green: 0.0f blue: 0.0f alpha:1.0f];

Drawing Images in a Context

Quartz 2D support drawing images directly into a context.
To do this, you can use the Objective-C class UIImage to work with a Core Graphics struct called CGImage.

UIImage contains methods to draw its image into the current context:

CGPoint drawPoint = CGPointMake(100.0f, 100.0f);
[image drawAtPoint: drawPoint];

Drawing Shapes: Polygons, Lines and Curves

Quartz 2D contains a number of functions to make it easy to create complex shapes.
For example, to draw an ellipse, you define the rectangle into which the ellipse fits, and then call the appropriate Core Graphics functions:
```
CGRect theRect = CGRectMake(0, 0, 100, 100);
CGContextAddEllipseInRect(context, theRect);
CGContextDrawPath(context, kCGPathFillStroke);
```
There are similar methods for rectangles.
There are also methods for arcs, Bezier Curves and paths.

Demo App

To demonstrate Quartz graphics we will make a shape drawing app (which we will finish Wednesday):
This example is based on code from last years text for this class.
To build this app we will create a new view-based application. To this we will add five files: QuartzTestView.h, QuartzTestView.m, Constant.h, UIColor-Random.h, UIColor-Random.h.
The first two are created by choosing to add to the project a new Objective-C Class of type UIView.
The remaining three are added as empty files and then coding in them.

UIRandomColor

We will use an Objective-C Category to modify the UIColor and add a new method to generate a random color.

Here is the header file:

#import <UIKit/UIKit.h>

@interface UIColor(Random)
+(UIColor *)randomColor;
@end

Here is the implementation file:

#import "UIRandomColor.h"

#define ARC4RANDOM_MAX 0x100000000LL

@implementation UIColor(Random)
+(UIColor *)randomColor
{
    CGFloat red = (CGFloat)arc4random()/(CGFloat)ARC4RANDOM_MAX;
    CGFloat blue = (CGFloat)arc4random()/(CGFloat)ARC4RANDOM_MAX;
    CGFloat green = (CGFloat)arc4random()/(CGFloat)ARC4RANDOM_MAX;

    return [UIColor colorWithRed: red green:green blue:blue alpha:1.0f];
}
@end

Constants.h

Constants.h is used mainly to hold two typedef of enum's that are used to give the segments of our segmented controls reasonable names:

typedef enum {
    kLineShape = 0,
    kRectShape,
    kEllipseShape,
    kImageShape
} ShapeType;

typedef enum {
    kRedColorTab = 0,
    kBlueColorTab,
    kYellowColorTab,
    kGreenColorTab,
    kRandomColorTab
} ColorTabIndex;

#define degreesToRadians(x) (3.1415926535897932846 * x /180)

Android Shader Remarks, GPS, Graphics iOS

Outline