Doodle Drawer – Brushes

At my Doodle Drawer app, I’ve played with a couple of “brushes”. The idea is to treat the connection lines differently.


Basically the difference is that the line connections are drawn closer or further away from each line based on the formula of Harmony.

The ‘shaded brush’ looks like this:

The sketched brush looks like this:

And the ‘fur brush’ looks like this:

Android: How to get round stroke corners in canvas

When you draw a path with a bigger line stroke width, you might notice uggly edges.

android canvas no round stroke corners no round stroke corners

In order to get them round you simply need to change the stroke join to round. Here are some default settings I’m using in my Doodle Drawer app.

At the end it should look like this:

round cornersround stroke corners

Doodle Drawer

Inspired by Harmony from Mr. Doob (Ricardo Cabello) I made a little app called ‘Doodle Drawer’. The basic idea  for some brushes is that it connects lines that has been drawn already and in case they’re close enough.

doodle drawersilly doodle

Shader to software skinning method conversation

An almost monolog on stackoverflow helped me to get skeleton animations at least usably working in render demo that I’ve put up in android market. By the way on how the shader computes mat4 * vec4 can be found in the opengles shading language specification.

All right I’ve got a mesh with around 8000+ vertices, it’s sekelon with up to 128 bones and all it’s bone keyframe transformations up to 400 each animation.

Ahri SkeletonAhri Skeleton

Ahri MeshAhri Mesh

On desktop I could use this in vertex shader in order to compute the skinning:

As you can see there are a lot of bones. On android I don’t have the luxury of wasting variables to make simple lookups. I’d need 128 mat4  * 4 vec4 = 512 shader uniform vector variables and my samsung galaxy s2 only supports 304. Anyway I can think of 2 solutions:

  1. divide the mesh into an ‘ok’ amount of bones and render the mesh with less bone matrices
  2. do the skinning in software and update the vertex/normal buffers

I’d prefer the first solution, because I’d have to update merely the bone matrices uniform each frame instead of the entire vertex buffer. At this point however I have no idea how to divide the mesh because each vertex can have up to 4 bone influences and so I implemented the 2nd choice for now. Work in progress…

Here is the equivalent java code:

Earth Seasons Shader for Android

In computer graphic 2 we were supposed to create a earth seasons shader. Here is the one I did for android:

earth shader image earth shader image2

Simple vertex shader

and the fragment/pixel shader:

Maybe this isn’t the most efficient way but it is a way and one that works nonetheless. (:

InfoINI Android App

Today I’ve uploaded a new version of the InfoINI app (v1.8).

infoini appinfoini app

This little app is a tribute to the student representatives who work rather hard to help students. They organize events like first semester indroduction, christmas party. They always try to keep an open room for students to get help, information or just want to hang out in the student representatives room at the Beuth University Berlin.

The initial problem was that you never knew if someone is present. So you might have ended up with walking over the entire campus just to find out that the door is closed. With this app however you can just look it up. This works because a door sensor has been installed and has been connected to the webserver.

As you can see the room has grown to be more than just a student represtatives office, even though the AStA says different. It’s cousy because it has couches and coffee. People use it as a learning room and a place to hang out in free hours.

After a while Mirko and Patrick had an idea: What if we could also display how many coffee cups are left? So the both of them and later Hermann build a sensor to weigh the coffee Thermos flask and connected it also to the webserver.

So I added this feature the app, too.

libgdx and BufferUtils.copy()

While trying to increase the speed of skeleton animations in my android opengl render engine I’ve stumbled uppon some issues with android < v3.0 FloatBuffer.put(). It states the following methods to update the buffers and it speeds:

The same benchmark produced the following timings on a Nexus One with Android 2.2:

  • FloatBuffer.put( float value ): 6.876 secs
  • FloatBuffer.put(int index, float value): 7.006 secs
  • FloatBuffer.put( float[] values ): 6.800 sec
  • IntBuffer.put( int[] values): 1.479 secs
  • BufferUtils.copy(): 0.067 secs

In order to use the BufferUtils.copy() methode provided in libgdx library you need the gdx.jar, gdx-backend-android.jar, which you should add as library to your android project, and the compiled libs in the right place.

Also call


actually before you do anything with libgdx classes, since they are using pre-compiled code.