Beginning with modern OpenGL (>3.3)

Quite recently I’ve been wanting to look into modern OpenGL and was a bit confused when I noticed all the options you have. Even before writing the simplest OpenGL application, you need to choose between GLUT, GLFW and other libraries. And then there’s also very very old stuff out there in the internet, that is still talking about the OpenGL fixed function pipeline from 1990 (like Nehe).

This post should give you a primer on what resources to consider and where to get started.

Setting up the project / IDE

First, let’s talk about the libraries that you’ll need. GLFW mainly takes care of the window and OpenGL context creation. It also has some basic functionality regarding, for example, keyboard input. GLEW, on the other hand, takes care of loading OpenGL extensions and also checks which OpenGL extensions are available on the client while run-time. GLM is a mathematics library designed specifically to simplify the mathematical aspects while using OpenGL – like matrices or quaternions. There are alternatives to some of those. For example, FreeGLUT is a alternative to GLFW and also takes care of the window and OpenGL context creation. However, GLFW seemed much simpler and easier to use to me, so I’ve decided to use it.

If you don’t want to hassle with compilingf all the libraries, then linking them and so on – I’ve uploaded a Visual Studio 2013 solution that contains GLFW, GLEW and GLM. Just download and run it – the libraries are only included in debug mode right now, I’ll update the project on a later date. Otherwise, you will need to download GLFW, GLEW and GLM. You’ll need to use CMake to compile GLFW and GLEW. GLM is a header-only library, so you’ll just need to point to the include files. All of them have a really nice site that helps you how to build or use them.

Resources

There are 2 free online tutorials that I can suggest:

While the last tutorial gets results very fast, it doesn’t really explain a lot of the stuff and what is going on in the background – that’s why I’d check out both at the same time. If you have the possibility to get or buy books, there are 2 huge ones that seem very nice.

I’m currently reading through the programming guide myself, which explains OpenGL very deeply. The Superbible has also been recommended a lot and should be just as good, if not better. Both of them definitely explain a wide range of content and are worth checking out – even if only as a reference.

I hope this helped some of you getting started a tad faster with modern OpenGL.

Read More

Speed Dial v0.2

Because I love changelogs and patch notes (seriously, they are awesome) I’ll be doing some posts whenever I feel like I’ve made some changes to any project and I’d like to share that. Helps me keep the motivation up and lets me browse through what’s happening.

So, I’ve reached my first milestone for “Speed Dial” and I began using it on all my devices. Compared to what I showed in the last post about it, here’s what has changed:

General

  • Added “Open in new tab/window button”
  • Added uploading and setting images for dials
  • Lots of layout changes

Bugfixes

  • Fixed a bug where the user got redirected to an invalid URL on IE/Safari when logging in

Speed Dial v0.1


A few of the things I’d like to try out/implement at some point:

  • Introduce settings page (customize the CSS)
  • Drag & Drop dials
  • Import/Export of Speed Dial addon data for Google Chrome

Also looking for more stuff that could be good for the “start page” of your browser. So if you have any ideas, let me know! :)

Read More

Speed Dial

Heyo!

Do you know the plugin “Speed Dial” that exists for most browsers like Google Chrome and Mozilla Firefox? A stripped down version is actually implemented in Opera straight away. So, I’ve always used this addon and I like having a start page which contains categorized links to my most frequently used websites, which is easily navigable. However, I found myself switching between browsers a lot – especially because the “Modern UI” Internet Explorer is superb for touch. Since there doesn’t seem to be any cross-browser service, I decided to make my own version using NodeJS and AngularJS. Before talking about what it does, here’s a quick picture of the current state:

Unbenannt

Basically, you have all these dials, which are normal links to websites. And these dials can be categorized into groups like the “Home” and “Games” in the picture. You can also rearrange the order of the dials. But that’s pretty much all it’s able to do right now. However, there are a lot of features I’d like to add, some of these are…

  • Rearrange groups
  • Add images to dials (upload yourself or image of the website)
  • Drag & Drop functionality
  • Customization for pretty much everything (backgrounds, colors, fonts…)

It’s mostly my “playground” to test new technologies. The project is hosted on GitHub, so feel free to check it out. I might even write a few posts on how I implemented some of the stuff. It’s all really basic, but it might help people new to AngularJS or NodeJS.

Read More

Awesome soundtrack of an underrated game

Lately, I’ve seen a video of the game “Divinity- Original Sin”, which is an old-school RPG with a turn-based combat sysem. The gameplay looks really fun and deep, but it’s actually not what I wanted to talk about. Because it look very interesting, I decided to see who the developers are and what other games they’ve made.

I stumbled across Divinity 2, which looks a bit like Gothic 2 and I actually wanted to play a RPG like this for some time anyway, so I decided to buy it. Even just starting the game felt awesome because the main theme was really good. However, when I reached the first village after the tutorial, my ears began to hear a wonderful track, “Broken Valley Wakes“:

While the game itself has wonderful, interesting and humorous quests and a nice storyline, the soundtrack is what really makes this game stand out. Most of the time I just don’t want to leave the are I’m in. I want to enjoy the soundtrack and atmosphere of the world. The tracks are phenomenal and I even found them better than the OST of Oblivion or Skyrim (Jeremy Soule). If you liked the track above, you should also really listen to:

You can buy the game on Steam. The soundtrack is included. ;)

Read More

The new plans!

Heyo!

As you can see I’m now using WordPress, which might seem a bit weird considering I’ve written a super small CMS using NodeJS/AngularJS for my website. I’ve actually learned quite a lot during that time and I don’t really want to expand that old CMS, because I’d rather start from scratch again. However, I mainly did that to have some sort of playground where I can try new web development stuff. Instead, I decided to develop a smaller and simpler project which serves as my playground from now on.

This means I actually want to write more (blog-like) posts and I think WordPress serves me fairly well for that, considering the nice visual editor as well as media management and more. So, what do I want to do with this new site? In the next few weeks I want to write some posts about the following topics…

  • My playground project “Speed Dial“, which is hosted on GitHub and uses NodeJS/AngularJS
  • A 2D Breakout in the style of my #1GAM5. Currently hosted in a private GitHub repository and using Unity
  • The upcoming MMORPG Wildstar and probably writing addons for it
  • General stuff I want to share (like Soundtracks!)

Instead of staying with one or two topics, I want to branch out a bit more and just write about the stuff I want to write about, including topics that have nothing to do with game or web development. That’s it for now. See ya soon!

Read More

Genetic algorithm: Protein folding

Today’s post is about something completely unrelated and different from the stuff I usually post. It is about an university assignment that I found really interesting and it was a lot of fun trying stuff out. It’s basically about writing a genetic algorithm for the 2DHP problem, which is a extremely simplified model for examining protein folding. You basically have an array of proteins, which can be black or white. The black ones don’t like water, so they should be in the middle of the resulting conformation. In this model it’s super easy to calculate how good a conformation is: If there are 2 black protein neighbors, but they are not sequence neighbors, you increment the score by 1. You can see a little example in the picture below. The blue circles mean you’d increment the score by 1 because of that. In the red circle, the 2 black proteins are sequence neighbours, so you don’t increment the score.

GA_post

 

What a genetic algorithm is

The genetic algorithm (GA) should, in a way, represent the nature and the evolution. You start with a population (first generation) and then calculate the “fitness” (score mentioned above) of every individual in it. This fitness is used to determine which individuals get selected for the next population (second generation). In order to mix these up and also get some new candidates/individuals, you modify (mutate) and “crossover” them. In the end, the better individuals win and get better and better until you find a very good solution to your problem. The cool thing about it is that you could use the genetic algorithm for pretty much any problem, as long as you can get the fitness function right. However, you can specialize your GA to get better results, which is also what we did.

What we did

In order to represent the conformation (protein folding), we could use a simple 2D array and just create elements in it. However, since the genetic algorithm randomly mutates them, this wouldn’t be a very good solution. We can minimize the possible search space with another encoding. We basically have a list of elements which have directions. These are relative directions to their current position. There are 3 possible directions: Left, Straight, Right. By modifiying them it is super easy for the GA to create new conformations. Another really important aspect of a GA is the selection strategy that decides which individuals get to the next generation. In our project we’ve implemented 4 different strategies. To mention the most important ones: We have a simple roulette wheel selection and also a tournament selection.

Testing the genetic algorithm
To test how good your GA is and how it compares to others, there are certain benchmark sequences. These have, for example, 20, 50 or 100 elements and they also measured the maximum energy of each. So you can easily add one of these sequences to your GA and see what an energy value you can get out of them. Below is a sample sequence. 1 means black (hydrophobe) protein, 0 white (hydropolar) protein.

SEQ20 = "10100110100101100101";

In order to visualize what happens during the algorithm you can create a fitness graph showing the average and/or maximum fitness of the generations. Below is a sample graph that shows the benchmark sequence SEQ50, running through 500 generations. You can see the other values in the image. You can also see that there’s not much going on after ~200 generations anymore.

GA_SEQ50

 

Our project

You can go to the GitHub repository to see the full thing. You can also download an executable of the project. The Visual Studio 2012 solution is also included so you should be able to compile it and try it out very fast. It was developed using C++ and SFML. You can also customize the algorithm by changing some of the parameters:

setUp(int maxGeneration, int populationSize, std::string &chain, float mutationRate, float crossoverRate, Selection *selection, std::string& file = (std::string)"average.txt");
  • maxGeneration: How many generations to iterate through
  • populationSize: How many individuals a generation has
  • chain: What benchmark sequence to use (SEQ20, SEQ36…)
  • mutationRate: How many individuals are being mutated every generation (in %)
  • crossoverRate: How many individuals are being crossovered every generation (in %)
  • selection: What selection method to use
  • file: Logfile for saving the values of each generation

Below is a good sample for getting good results with the benchmark sequence SEQ50, but they can vary a lot.

setUp(250, 5000, SEQ20, 0.08, 0.30f, new TournamentSelection(2.0, 80.0f));

In order to test those parameters, we’ve also created a color matrix by incrementing them and let the algorithm run for some time – but for now, this should be enough. I hope you can see how interesting this topic is and how much fun it can be to try out different values and strategies.

Read More

Hosting a NodeJS app on Heroku

I’ve tried to create a Windows Azure account, but figured out that they also want a real credit card, so I can’t register yet. I then visited the Heroku page, created an account and a simple application and tried to push my Git Repository up there. I couldn’t. This post describes the errors I ran into and how to fix them.

So, if you “heroku login” on your machine and also have the GitHub for Windows client isntalled, you’re likely to run into the same error. Heroku automatically adds your GitHub SSH key and uploads it, but you won’t have any permission to actually push or pull. What fixed this problem was creating a new SSH key using ssh-keygen and then add it via ‘heroku keys:add “path_to_key”‘. It is also described here.

I was then able to successfully push my code to Heroku. After that Heroku automatically detected that it is a NodeJS app and executed “npm install” and ran the app. If it doesn’t detect it automatically, you can add a Procfile with the command you want to execute. In my case it’d be:

web: node app.jsherokuProductionCheck

Then the app crashed. I’ve added a loggin addon to heroku, which I highly recommend. It’s also recommended in the “Heroku production check” on the top right of your app (see screenshot on the right). I’ve then noticed that my application couldn’t bind to the port I wanted to use. The easiest way to fix this is by using the ports that are defined in the Heroku environment. Same for MongoDB. So you should set your port like this:

var port = process.env.PORT || 5000;
var mongoUri = process.env.MONGOLAB_URI || process.env.MONGOHQ_URL || 'mongodb://localhost/yourDB';

After that everything worked like a charm. So keep those things in mind if you want to host your app on Heroku

Source: Heroku Dev Center

Read More

Rewriting the page: Tools

In this blog post I’ll cover all the tools and libraries I’m using for rewriting this page. So, first of all, for the server I’m using a super simple framework called Express, that allows me to start the NodeJS server and set up API calls. Using different NodeJS modules I can connect to the MongoDB (Mongoose) database or send E-Mails using SMTP (Nodemailer). The Node Package Manager (NPM) also makes installing them super easy. I’ve heard that there are some problems installing certain modules on Windows, but I have yet to run into them.

On client-side I’m mainly using AngularJS, which covers all the application logic, retrieving data (by calling the NodeJS API) or sending it to the server. For the UI I’m using Twitter Bootstrap and also AngularJS Bootstrap. There are even more UI modules on the AngularUI page. There’s also some jQuery stuff involved, for example, the Slider on the home page is the FlexSlider. They also have a Contao extension for it, which I’m using right now.

If you want to try these tools out: There’s a project template for this kind of application. It includes pretty much everything, so you can get started right away! You can view it here.

Oh, and I’m using Visual Studio 2013 Preview plus the Web Essentials plugin. Visual Studio is, of course, heavier than lightweight editors like Sublime Text or Brackets, but since I’m also using it for pretty much every project, I didn’t really want to switch to another IDE. Plus, VS 2013 Preview is a lot faster than VS 2012, especially starting it up. The Web Essentials plugin also has really nice features, like automatically minifying JS files every time you change them or compiling LESS stylesheets.

Also, to show something, here’s a preview of the upcoming site – but it’s actually from the admin panel.

SPA_preview

Read More

Rewriting the page: Goals

I’ve said that I’m going to rewrite this website and create a single page application. This is mainly because I’m really interested in modern web development and this’ll help me try out new stuff and libraries. Having a real project to work on helps keeping the motivation up. However, I also want to make some design changes to the site, that are primarily about 2 things:

1. Easily extendable

Yeah, I could write my own Contao extensions, but I don’t really enjoy doing it and it’s also slower than just writing it in plain JavaScript. Adding stuff like popovers or tooltips kinda is a pain in the ass with contao. I also don’t really like adding content (news, articles, pages), involves so much clicking. I think I can do stuff more simple – I don’t really need most of the Contao stuff.

2. Focus more on (different) content

I have the feeling reading the blog posts isn’t much fun. I also can’t imagine writing a longer post or tutorial including screenshots and pictures. So I’ll probably add a bit more space for the post and try some stuff with the fonts. I’m also thinking about changing the main background – making it a bit brighter.

I’ll keep posting and probably show some work in progress every now and then. See ya. ;)

Read More

No 1GAM7

Alright, the friend that asked me to help on the Snake project thingy actually wants to do that project somewhen later, so that means I didn’t help him now and there won’t be a #1GAM7. I’m okay with this, just doing it for the sake of a #1GAM probably isn’t the right thing to do, anyways, since I actually want to take on more interesting stuff which helps me learn more in the process.

Also, I’ve been told that a very interesting 2D library for WebGL in the browser will be released early this month, so I actually want to wait until it is released and then start working on #1GAM8, although I will be planning what exactly #1GAM8 is earlier. The library I’m talking about is RaptorGL, so you might want to check it out in a few days (hopefully!).

Read More