a ping-pong game (1)

One of the goals that I postponed long ago was learning OpenGL and creating games with it. I started learning OpenGL, and started building a toy project on the process.

I decided to build a ping-pong game which will be simply a ball moving and hitting around. A simple 2D toy project.

I chose to develop on my mac with XCode & Objective-C. XCode is a simple IDE that works fast and Objective-C is a Object Oriented programming language much simpler that C++. A mac comes with a OpenGL so on a Mac there is not any prerequisite to start developing. Although the source code is written on such platform it wont be hard to port to other platforms.

Code is on svn here.

I have also tagged bar and bars versions which I will be blogging about now.

Setting Up the OpenGL

This is how (code snippets from main.m) :

1:  glutInit(&argc, argv);

glutInit function initializes the GLUT. Parameters are for the underlying Windowing System.

1:       glutInitWindowPosition(400,100);
2:       glutInitWindowSize(400,300);

We initialize the windows size & position.

1:       glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

We use a single buffer & rgb values for now.

1:       glutCreateWindow("Intro");

This sets the title of the window.

1:       glClearColor(0.0,0.0,0.0,0.0);

This function is like setting the background color.

Setting the Callback Functions

OpenGL is designed with the "Hollywood Principle"; "Don't call me, I'll call you...". To draw on screen and listen to events you register a set of callback functions (from BarCallbacks.m);

1:       glutDisplayFunc(display);
2:       glutReshapeFunc(reshape);
3:       glutKeyboardFunc(keyHandler);
4:       glutKeyboardUpFunc(keyUp);

Display callback function is for actually drawing on screen. Reshape function is for redisplaying after the window moves or resizes. Keyboard functions are for detecting key strokes of the user.

These callback function are 'C' functions and this means that you can not use Objective-C methods directly. To use the Objective-C methods you have to use a static variable. I set up a pattern where the 'C' callback functions delegate to Objects and their appropriate methods. This way I can take advantage of the object oriented paradigm.

I created a BarCallbacks Object which is simply responsible of drawing rectangles on screen. Here is the display function and its delegate;

1:  static BarCallbacks * workingCallback;
2:  void display() {
3:       glClear(GL_COLOR_BUFFER_BIT);
4:       [workingCallback display];
5:       glFlush();
6:  }
7:  -(void) display {
8:       // loads the identity matrix
9:       glLoadIdentity();
10:       // floating point red, green, blue values
11:       // 0 to 1 probably but may change I guess 3if ?
12:       glColor3f(0.0,0.0,1.0);
13:       glRectf(box.x - box.xr, box.y - box.yr, box.x + box.xr, box.y + box.yr);
14:  }

workingCallback is the static variable used to delegate from the C function to the Object method.

glClear function (line 3) clears the screen with the color we previously specified. Then we draw the rectangle. glColor3f (line 12) sets the drawing color to blue and glRectf draws the rectangle to specified coordinates.

Another thing we need to setup is the perspective. There are two types of perspectives. I used the Orthogonal Perspective which is I think is easier to use for this kind of app.

1:  glOrtho(0, x, y, 0, 0, 1);

x and y are the width and height of the window. Since this will be a 2D app. I gave the Z-index 1. This function is called from the reshape function.

MainLoop

After setting up the callbacks OpenGL system, machine is more appropriate I think, is started with;

1:  glutMainLoop();

Our rectangle will be displayed, if you put break points you will observe that user key-strokes are caught. I tagged all the code up to this point as bar.

With the BarCallbacks Object we created, I wanted to make some walls where our ball will bounce around. Here are the changes I made to delegating system so that we can use multiple BarCallbacks;

1:  static NSMutableArray * callbacks;
2:  void display() {
3:       glClear(GL_COLOR_BUFFER_BIT);
4:       for( int i = 0; i < callbacks.count; i++) {
5:            BarCallbacks * cb = [callbacks objectAtIndex:i];
6:            [cb display];
7:       }
8:       glFlush();
9:  }

I changed the static variable to an mutable array. Then looped on on callback methods and delegated.

Here is my three walls;

1:       [[BarCallbacks alloc] initWithRect:390 y1:10 w:10 h:280];
2:       [[BarCallbacks alloc] initWithRect:0 y1:10 w:10 h:280];
3:       [[BarCallbacks alloc] initWithRect:0 y1:0 w:400 h:10];

And how it looks;Next we need a ball, a platform and some collision detection.

Summing up the photo gallery (part 6)

I started building a photo gallery app., flickr in mind, as a means to learn the seam framework. To sum up here is my previous posts :

1. "little restfull photo gallery example, with seam, which seams fine", here.

2. "seamy photo gallery, securing it (part 2)", here.

3. "seamy photo gallery, securing it (part 2)", here.

4. "seamy photo gallery, resting easier (part 4)", here.

5. "seamy photo gallery, writing an authentication filter (part 5)", here.

Here is what I did on last couple of days:

Firstly I publish the source code here on google code. Named it jhoto rather hastely. This will probably be an internal name :)

Polished it a little so that it has a original look. I ended up creating some simple bubbley look using paint and some css. Here is how it looks now :

And lastly using jquery to gave the bubbles some animation so that they wiggle a little:

        <script type="text/javascript">
 $(document).ready(function() {
     var animationLoop = function(it) {
         it.animate({
             opacity: 0.5 + Math.random() / 2,
             marginLeft: (Math.round(Math.random()*10) - 5)+"px",
             marginTop: (Math.round(Math.random()*10) - 5)+"px"
         }, 1500, "linear",
         function() {
             animationLoop($(this));
         });
     };
     $("table.aframe").each(function() {
         animationLoop($(this));
     });
 });
 </script>

What the above code does is move my bubbles (tables) randomly whit in some threshold.

Will probably do more on this...

Groovy Impressions

Groovy is a superset of the Java programming language with dynamic language constructs. Here are my notes on Groovy.

1. Java is Groovy

Every Java sentence is a valid Groovy sentence but not the other way around. Which means you can use every Java library out there with Groovy classes. Infact Groovy classes in the end compile into Java code.

2. Loose Syntax

No need for a main method. No more a class should be defined in its own named file requirement. Following is a complete "Hello, World!" program for Groovy:

println "Hello, World!"

We don't need the System.out.... or the semicolon ending commands. Though we could have used them also.

3. Integrated Template Engine

It has a embeded templating engine which does all sort of things. And here is the "Hello, World" of templating :

world = "World"
println "Hello, ${world}!"

4. Constructers, Getters and Setters

Getters and Setters are automatically generated for properties of the class and there is a simple property initialization mechanism. And the example :

new Salutor(hello:true,who:"World")

5. Safe Navigation & Elvis Operators

With Java Often we may have to these null checks :

if(state != null &&
state.getTransitions() != null &&
state.getTransitions().size() > 0) {
states = state.getTransitions().values();
...

With groovy we can navigate with the '?' operator safely with out cluttered if checks :

states = state?.transitions?.values()

And the Elvis operator is used for assigning default values other than null :

name = user.name ?: "Anonymous"

As far as I know these will be available in Java 7.

6. Closures

The folowing closure (the thing between curly brackets) finds even integers inside the int array.

ints?.find {n -> n % 2 == 0}

Closures are passable function block. You can also check out the commons-collections api to see how similar code could be written in Java.

7. Meta Programming

e = new Euro()
prop="value";
op="plus";
e."${prop}"= 5;
e."${prop}"=e."${prop}"."${op}"(1)
println e

The above example succesfully computes to 6.

8. Build DSL's

Using the MetaClass api you can create simple inline DSL's. Here is a example whit euros:

package tr.mca.dsl;
import static tr.mca.dsl.MoneyDomain.*;

println "1 euro + 2 euro :" + money {
1.euro + 2.euro
}

Here whit in the money block we create "new Euro(3)" but we are doing it in a more brain friendly way.

There is two ways I know to achive that:

a. DelegatingMetaClass

DelegatingMetaClass helps us to intercept the method and property accesses. Here is the extended version I crated for money example :

public class MoneyDelegatingMetaClass extends DelegatingMetaClass {

MoneyDelegatingMetaClass(Class delegate) {
super(delegate);
}

public Object getProperty(Object obj, String property) {
if (isDynamicProperty(property)) {
return new Euro(obj);
}
return super.getProperty(obj, property);
}

private boolean isDynamicProperty(String property) {
return "euro".equals(property) || "€".equals(property)
}

}

We are able to intercept the "euro" property access and upon access we create the Euro object. Here is the code that activates this interceptor for a given code block :

class MoneyDomain {

static Object money(Closure closure) {
def orgMetaClass = InvokerHelper.metaRegistry.getMetaClass(Integer.class)
MoneyDelegatingMetaClass myMetaClass = new MoneyDelegatingMetaClass(Integer.class)
InvokerHelper.metaRegistry.setMetaClass(Integer.class, myMetaClass)
try {
return closure.call()
} finally {
InvokerHelper.metaRegistry.setMetaClass(Integer.class, orgMetaClass)
}
}

}

InvokerHelper.metaRegistry.setMetaClass call lets us register and unregister when we are done.

b. ProxyMetaClass

Another way of doing is using the ProxyMetaClass api. We again wrote a similar interceptor :

class MoneyDomainInterceptor implements PropertyAccessInterceptor {

public Object beforeGet(Object obj, String property) {
if ("euro".equals(property)) {
 return new Euro(obj);
} else {
 return obj.getProperties().get(property);
}
}

public void beforeSet(Object obj, String property, Object newValue) {
}
}

This time we implemented the PropertyAccessInterceptor. And here is how we gonna use it :

class MoneyDomain {

def static proxy = ProxyMetaClass.getInstance(Integer.class);
static {
  proxy.interceptor = new MoneyDomainInterceptor();
}

static void moneyProxy(closure) {
  proxy.use(closure);
}
}
}

And thats my short journey of the Groovy language.

SCWCD

I hate exams. Especially multi choice tests. Yet I have worked on the SCWCD exam fort the last weeks.

I choose the "Head First Servlets and JSP" book to study for the exam mainly because it had more stars than this one. Besides "Head First ..." books are usually more brain friendly. Read the "Head First Design Patterns", a very good introduction to design patterns, so that you know what I mean by brain friendly. Servlet book covers the old JSP's. I think Sun should have put some JSF questions instead. The book has a mock exam at the back. I scored %69 on it. On the real exam I scored %79 so the questions are a bit harder and some of them are a bit unclear.

Anyway I passed the exam :)

seamy photo gallery, writing an authentication filter (part 5)

On the 4th part I used an simple authentication filter, to secure my urls, that come out of the box. It only supported basic & digest authentication. With basic authentication what you get is a ugly browser dependent box which asks the credentials of the user. On IE its like:

Instead of that I wanted the user to use the login page which I created. In order to do that I first removed basic authentication filter component and started coding mine :

@Scope(APPLICATION)
@Name("customAuthenticationFilter")
@Install(precedence = Install.DEPLOYMENT)
@BypassInterceptors
@Filter(within = "org.jboss.seam.web.exceptionFilter")
public class CustomAuthenticationFilter extends AbstractFilter {
@Logger
protected Log log;

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException,
       ServletException {
   if (!(request instanceof HttpServletRequest)) {
       throw new ServletException("This filter can only process HttpServletRequest requests");
   }

   HttpServletRequest httpRequest = (HttpServletRequest) request;
   HttpServletResponse httpResponse = (HttpServletResponse) response;
   httpRequest.getSession();
   Context ctx = new SessionContext(new ServletRequestSessionMap(httpRequest));
   Identity identity = (Identity) ctx.get(Identity.class);
   if (identity.isLoggedIn()) {
       chain.doFilter(request, response);
   }
   else {
       // go login than come back
       httpResponse.sendRedirect("/seams/login?serviceUrl="
               + httpRequest.getRequestURL());
   }

}

@Override
public void init(FilterConfig filterConfig) throws ServletException {
   setUrlPattern("/seam/resource/rest/*");
   super.init(filterConfig);
}
}

Seam handles the creation and order of the filters with the help of @Filter annotation. Instead of adding web.xml entries we annotate our filters and specify where they should be in the filter chain. 

I have extended my filter from the seam AbstractFilter class and on the init method I setted the url pattern which the filter mappes to. 

On the doFilter method first thing to do is try to see if the user is already logged in. We have to access the Identity component but seams injections mechanism does not work with the filters. So instead of injecting you have to create a context (and such) to access the Identity component.

Once we have the Identity component we see if the user is already logged in. If so we proceed with the rest of the chain if not we redirect to our custom login page and pass the original page that the user tried to access with a request parameter that I named serviceUrl.

Once the user successfully logs in we need to redirect the user to original resouce pointed by the serviceUrl. To do that I wrote a Listener class which will fire after the user successfully logs in :

@Name("loginRedirect")
@Scope(ScopeType.SESSION)
public class LoginRedirectListener {
private String serviceUrl;

@Observer("org.jboss.seam.security.postAuthenticate")
public void postAuthentication() throws IOException {
    if (serviceUrl != null && serviceUrl.length() > 0) {
        FacesContext.getCurrentInstance().getExternalContext().redirect(serviceUrl);
    }
}
...

The good old observer pattern is implement with annotations on seam. Here using the @Observer annotation we get notified of authentication event end redirect to the serviceUrl if there is one. I have created it as a session bean so that each user will his own serviceUrl. One last thing to do is injecting the serviceUrl parameter to my listener which is done through pages.xml:

<page view-id="/login.xhtml">
 <rewrite pattern="/login" />
 <param name="serviceUrl" value="#{loginRedirect.serviceUrl}"/>
</page>

Thats all there is...

seamy photo gallery, resting easier (part 4)

On my previous post I made a restful photo gallery that has a nice little feature where upon a restful request like 'http://.../mygallery/photo/photo/yoda' served the image named 'yoda' to the user. In order to achive that what I did was first I edited the pages.xml so that it could extract the name (id) part from the request url:

<page view-id="/photo/photo.xhtml" login-required="true">
<rewrite pattern="/photo/photo/{fotoId}" />
<param name="fotoId" value="{fotoId}" />
</page>

Here the name is extracted into el context as 'fotoId'. Second thing is that I created the photo.xhtml mentioned above:

<f:view>
<s:graphicImage id="imaj" value="#{photoService.getFoto(fotoId)}"
style="border: 1px solid black;" lt="image could not be found">
</s:graphicImage>
</f:view>

I used a 's:graphicImage' component which serves the photo using a little service bean using our 'fotoId' parameter. For completeness here is the service bean:

@Name("photoService")
@Scope(ScopeType.APPLICATION)
public class PhotoService {
public byte[] getFoto(String fotoId) {
Photo p = getPhoto(fotoId);
if (p == null) {
   return null;
}
return p.getData();
}
...

What bugged me on this method was that although I just wanted the serve the image here I was actually serving a html page which linked to the image. 

After looking around I learned that what I wanted, came with the seam & resteasy integration. RESTEasy (jaxrs) comes with annotations where you can use to serve the result of methods & beans directly. Seam package comes with the required jars  (dont go downloading for a resteasy package from jboss.org) for integrating it. You just put them in your classpath. So inorder to serve my 'photoService.getFoto' I can use the @Get, @Path and other annotations :

@Name("photoService")
@Scope(ScopeType.APPLICATION)
@Path("/foto")
public class PhotoService {

@GET
@Path("/{fotoId}")
@ProduceMime("image/jpeg")

public byte[] getFoto(@PathParam("fotoId")
String fotoId) {
...

Rest access is by default configured under '.../seam/resource/rest/'. So by using the path and get annotions I can access the 'photoService.getFoto' method with the '.../seam/resource/rest/foto/yoda' request. ProduceMime annotation tells that we are serving an jpeg image and the PathParam annotation is used so that we can get the 'yoda' out of the request and used it as a parameter to our method.

Now are we done ? No, because we need to secure it!. We dont want Vader to see the comprimising images of the Yoda (hehe) so we need to secure it with the restrict annotation :

@GET
@Path("/{fotoId}")
@ProduceMime("image/jpeg")
@Restrict("#{s:hasRole('user') || s:hasRole('admin')}")
public byte[] getFoto(@PathParam("fotoId")
String fotoId) ...

Now what happens when someone not logged in tries to acces the yoda is we will see a NotLoggedInException on the stacktrace. Of course we need to handle that and give the user the option to log in. Seam has a 'web:authentication-filter' component that supports the http basic or digest authentication which I configured like this on components.xml:

<web:authentication-filter url-pattern="/seam/resource/rest/*"
     auth-type="basic" />

Now the yoda is safe I guess and I am sure there will be different authentication types supported in the future. I got few that could be implemented like the oauth which I belive is used by twitter and such.

Moving the keyboard out of the way

After happily doing a little work for iphone, being content for that I was finished with it, I made realize that the text boxes near the bottom of the screen disappeared when the keyboard appeared after saying "hmmmm...", I started searching for a solution. Apples iphone developer library suggest this solution and here I am going to write about how I used it in my project. 

Here is how the problem looks like  in a simple case(a before),

      

What we are going to do is, we are going to define UIScrollView and put our view inside it and scroll it up when the keyboard shows up. In order to do it in a OO fashion I defined a base class that will handle the scroll details.

#import <UIKit/UIKit.h>

@interface BaseViewController  : UIViewController <UITextFieldDelegate> {
bool keyboardShown;

UITextField * activeField;

UIScrollView * scrollView;

UIView * mainView;
}

@property (nonatomic, retain) IBOutlet UIScrollView * scrollView;
@property (nonatomic, retain) IBOutlet UIView * mainView;

@end

I will bind the mainView with the original view which contains the text field. The scrollView will be inside a proxy view. The implementation;

#import "BaseViewController.h"

@implementation BaseViewController

@synthesize mainView, scrollView;

- (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
return [theTextField resignFirstResponder];
}


- (void)textFieldDidBeginEditing:(UITextField *)textField {
activeField = textField;
}

- (void)registerForKeyboardNotifications
{
[[NSNotificationCenter defaultCenter] addObserver:self
                                    selector:@selector(keyboardWasShown:)
                                        name:UIKeyboardDidShowNotification object:nil];

[[NSNotificationCenter defaultCenter] addObserver:self
                                    selector:@selector(keyboardWasHidden:)
                                        name:UIKeyboardDidHideNotification object:nil];
}

// Called when the UIKeyboardDidShowNotification is sent.
- (void)keyboardWasShown:(NSNotification*)aNotification
{
if (keyboardShown)
return;

NSDictionary* info = [aNotification userInfo];

// Get the size of the keyboard.
NSValue* aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
CGSize keyboardSize = [aValue CGRectValue].size;

// Resize the scroll view (which is the root view of the window)
CGRect viewFrame = [scrollView frame];
viewFrame.size.height -= keyboardSize.height;
scrollView.frame = viewFrame;

// Scroll the active text field into view.
CGRect textFieldRect = [activeField frame];
[scrollView scrollRectToVisible:textFieldRect animated:YES];
keyboardShown = YES;

}


// Called when the UIKeyboardDidHideNotification is sent
- (void)keyboardWasHidden:(NSNotification*)aNotification
{
NSDictionary* info = [aNotification userInfo];

// Get the size of the keyboard.
NSValue* aValue = [info objectForKey:UIKeyboardBoundsUserInfoKey];
CGSize keyboardSize = [aValue CGRectValue].size;

// Reset the height of the scroll view to its original value
CGRect viewFrame = [scrollView frame];
viewFrame.size.height += keyboardSize.height;
scrollView.frame = viewFrame;
[scrollView scrollRectToVisible:CGRectMake(0, 0, 1, 1) animated:YES];
keyboardShown = NO;
}

- (void)viewDidLoad {
[super viewDidLoad];
keyboardShown = false;
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView.clipsToBounds = YES;        // default is NO, we want to restrict drawing within our scrollview
scrollView.scrollEnabled = NO;
scrollView.pagingEnabled = NO;
[scrollView setContentSize:CGSizeMake(320, 480)];
[scrollView addSubview:mainView];
[self registerForKeyboardNotifications];
}

@end

The example is here under KeyboardLift. And this is the after screenshot;