I just finished a project called tinygraphs with the help of some friends. You can find it on github.com/taironas/tinygraphs. It was built in Go and the website was done with Boostrap and AngularJS and designed by +Carmen. This post is about how and why we built this.

The idea

The idea came to life after we finished the first version of gonawin, a web app to make friendly bets on sport events. We built it to play during the Fifa World Cup and needed some avatars for our users. We found an avatar generator built in Go called Sigil and we used it for the avatars of our users and teams. After the World Cup came to an end we decided to build our own avatar generator web service. Our aim was to have a greater variety of color themes and patterns, other than the traditional square patterns.

The patterns:

We started with the square pattern, a 6x6 grid that is symetric in Y.squares

/squares/helloworld

We then moved towards something different. We decided to call it isogrids. It is composed by small triangles and is symmetric in Y.isogrids

/isogrids/helloworld

The next pattern is a small derivation of the isogrid pattern, we called it hexa in reference to the hexagon shape. It is basically a cleaner version of an isogrid avatar.hexa

/lab/isogrids/hexa/helloworld

The hexa16 route is a great pattern, it is composed of 6 triangles that rotate to create an hexagon. Each triangle is a rotation of the previous one starting in the middle left.hexa16

/lab/isogrids/hexa16/helloworld

The spaceinvaders pattern was one of the funniest to code. It is a 10x10 grid. A space invader is defined by multiple parameters, number of antennas, number of eyes, size of arms, arms up or down, ...

type invader struct {
legs int
foot bool
arms int
armsUp bool
anthenas int
height int
length int
eyes int
armSize int
anthenaSize int

spaceinvaders

/spaceinvaders/helloworld

All the information needed to create these patterns is derived from the key passed in the URL. In this case helloworld. Let's see how the avatars are generated.

How the avatars are generated

We create an MD5 key from the string passed in the URL.

From this URL http://tinygraphs.com/spaceinvaders/helloworld we extract the helloworld identifier that generates an MD5 key: fc5e038d38a57032085441e7fe7010b0.

// SpaceInvaders handler for /spaceinvaders/:key
func SpaceInvaders(w http.ResponseWriter, r *http.Request) {
var err error
var key string
if key, err = route.Context.Get(r, "key"); err != nil {
log.Println("Unable to get 'key' value: ", err)
key = ""
}

h := md5.New()
io.WriteString(h, key)
key = fmt.Sprintf("%x", h.Sum(nil)[:])
// ...

The generated key is an hexadecimal key. For each of the first 16 characters of the key we extract an information to create the avatar. In most cases each character is decoded into one of the colors that composes the avatar that we are building. In the case of the spaceinvaders pattern, each character of the key let us extract information such as, how many eyes does this space invader has? or, does he has antennas?, etc..

What I learned while building tinygraphs:

Mostly how to work with images and how to use svgo a Go Language Library for SVG generation. I have made some blog posts about some of the things I learned while building tinygraphs:

Hosting a Go web app on Heroku:

I had never properly used heroku before this. The development experience is great for a basic app (We do not even have a database :) ). There is a buildpack for Go here and here is an article to Get started with Go on Heroku.

One of the great things that came with Heroku is that there is a github integration.

Heroku github integration

You can configure it so that every push to master triggers a build and is automatically deployed.

Herkoku github activity

I hope you have found this post useful.

Follow me at @santiago_arias to be notified about more posts like this.

Santiaago


comments powered by Disqus