The Building of Birds

After my research into visual techniques, I decided to give my birds an origami style. To start with I decided to take a very simple design, as I was not familiar with building complex designs from shapes in Prcoessing. I decided to work with only triangles, as polygons with more vertices can become quite complicated to control in Processing.

Icon by Jozef Krajčovič

I used this vector icon from designer Krajčovič as a template for my designs as it was quite simple and used only triangles. Although pigeons are usually a bit fatter, this bird icon is quite similar in general proportions to a pigeon.

Here’s my initial design in Processing. The bird is constructed of head and body, triangles and two wing triangles. I made the wings and body a bit shorter to make the bird more pigeon like. I found the design quite challenging to create, as the triangles were quite hard to line up properly, and I had to do some mental geometry to align the bird. I decided to colour the different parts of the bird slightly different shades of blue so I could differentiate easily between the different parts in testing.

The birds are attracted to the grey circle. Move the circle with the mouse to see how they react

Next was to incorporate the bird into the creature sketches I created earlier. It was a pretty simple process in comparison, all I had to do is substitute in the different shapes. I am very pleased with the results although the movement of the wings as well as the birds themselves, need some more adjustment.

The birds are attracted to the grey circle. Move the circle with the mouse to see how they react

Here is an updated version of my sketch. I used Processing’s scale(); function to make the birds into a more manageable size. It also allows me to add a little variation to my birds by adding a random element to it. However this made some problems more obvious, such as the birds flying upside down when they are moving to the left side of the screen. I also added a function that makes the speed of the wings flapping dependent of the velocity of the bird (birds flying harder must flap their wings faster) which although it needs tweaking I belive will work well.

The birds are attracted to the grey circle. Move the circle with the mouse to see how they react

In the sketch above I added some seeking behavior to the birds, as it did not really make sense that the Attractor object had all the functionality for this. I think it improves the way the birds move as they gradually move towards the target instead of being pulled there very quickly. I also gave the birds a function to slow down and then stop when they reach their target, although I don’t think this is very noticeable.

  void seek(PVector target){
    PVector desired = PVector.sub(target, location);
    PVector steer = PVector.sub(desired,velocity);

The method I used builds on the methods I learned previously and with some information in the chapter Autonomous Agents in The Nature of Code. However unlike the previous example, the birds have a target location and the steering vector is calculated based on the max speed of the object. There is also a limit on the steering force of the object (steer.limit(maxforce);) which limits the turning circle of the object.

Screenshot of me error testing the bird’s heading

Next was to fix the problem of the birds flying upside down. This was happening because the heading function operates on a circular basis. In addition I needed to create a “flipped” version of the bird that faces to the left as there is no other way to make a 2D sprite that faces to the left face the other way. I made the opposite facing sprite by making all the x values in the drawing of the bird negative. To figure out when to make the sprite “flip” I had to use techniques similar to what I used before in error testing by printing out the values of the velocity to the console and figuring out when it would be appropriate. This was actually quite a finickity process, and took some time to get it right.

The birds are attracted to the grey circle. Move the circle with the mouse to see how they react

Here is the result. Although the flipping movement is not perfect it gives me something to work upon. Another method I could have used would be to use a sprite library, such as the S4P library by Peter Lagers, however this would be quite complicated to learn and might not be the optimal solution as my birds operate on a full 360 degree of rotation whilst sprites generally work at 4 or 8 cardinal directions. Next I would like to look into how the birds interact with one another, because at the moment there are a lot of collisions that do not look realistic.

Krajčovič, J., 2014. Origami Birds [online] Available from: [Accessed 29.12.2014]

Shiffman, D., 2012. The Nature of Code [online] Mountain View: Creative Commons

Lagers, P. 2014. Sprites Available from: [Accessed 29.12.2014]