Resizing and reducing color palette of images with command-line

Often you want to batch your assets and prepare them for multiresolutions. One way great way to do it, is by using ImageMagick. It has A LOT of features to manipulate images and since it’s command line, you can just append all commands into a batch/shell script to automate it. For instance resizing all images to half just use this simple command:

Another awesome tool is called pngquant. Which actually reduces 24/32 bit images to 8 bit palette pngs WIDTH keeping full transparency, no idea how, but it works and is a default too to be used as best practice. Here an example for 32 colors:


When it comes to handing massive collections of images for multiresolution it’s always a good idea to automate as much as possible.

Thinking out of the box

Today I’ve stumbled upon two highly inspiring talks. The first one I want to recommend is Media for Thinking the Unthinkable by Bret Victor.

He talks about re-thinking the way we think about systems. The take away for me was in order to understand systems better and easier in general is to visualize its behaviour under multiple perspectives. Also I like the following inspiring quote:

“Just as there are odors that dogs can smell and we cannot, as well as sounds that dogs can hear and we cannot, so too there are wavelengths of light we cannot see and flavors we cannot taste. Why then, given our brains wired the way they are, does the remark, “Perhaps there are thoughts we cannot think,” surprise you?” by Richard Hamming

The second talk is Designing Journey by Jenova Chen (video). Where Jenova introduces a new kind of way to interact with people online at the GDC 2013. His approach is to reduce every noise that would ultimately lead to toxically hating, exploiting and mistrusting your fellow players which is sort of a counterproductive and an unhealthy gameplay overall.

GDC overview: “It took thatgamecompany three years to develop a two-hour long video game. Many high-level experimental ideas were tested and failed, and many lessons were learned during the design and production of the game. 12 months have passed since the game was launched, and we would like to share what we learned with you. This talk will give you the insight into the process thatgamecompany took to come up the original concept for Journey, how we polished and executed the design to realize an emotional arc, and most importantly, the difficult lessons we learned throughout the process.”

Here is gameplay video where a player wanders around and meeting up with a stranger in order to interactivly play walk together.

The takeaway for me is that playing together with other people can actually leave you behind with a very welcoming and healthy feeling if a game is actually designed for social interaction.

WebGL: Three.js and particles from black and white shape

Well Three.js is amazing:

Just adapted the black and white shape image to this Particle Shape Tween. Which basically replaces the shape with particles.

How to boost android canvas performance with a buffered Image

When it comes to drawing to canvas on android one very big performance boost can be gained by using a buffered bitmap image. The idea is to draw lines to a bitmap. And then draw the bitmap to the screen.
This approach avoids unnecessarily redrawing elements that has been drawn already multiple times.

1) Create a bitmap in your view.

2) Remember all touch events.

3) Process all touch events. (Draw lines or something)

4) Draw to buffered bitmap image.


5) And finally draw the buffered bitmap image.

Bonus: invalidate canvas only around finger area and only every 90 milliseconds.

See also

Performance in 2D Canvas App / Game on Android and Traceview War Story

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:

Parametric Curves and deCasteljau Bezier Curves

Cubic Bezier Curves – Under the Hood from Peter Nowell on Vimeo.

You can drag the markers and open this example in new tab.

The core part of this practise clearly is the bezier curve. To get all points on the curve for 4 control points this would suffice.

However in order to use an arbitary amount of control points I use the following function. It’s recursively, so potentially it’ll explode the max available stack depth (no clue how much that is in js). But for now it’ll do the job.

To use the function simply wrap a loop around with your favorite segments amount.

Now simply draw the points.

Et voilà! The animation idea is inspired by

This is my solution to cg2 exercersise a01.2-1.3.

See Also Practical Guide to Bezier Curves

WebGL Course – Canvas API: Draggable Lines and Circles

Well there is not much to say about this excerise, really. You can create lines and circles, drag them, and change their attributes.

This is my solution to cg2 exercersise a01.1.

WebGL: warmup

What are the pros/cons of WebGL?
Read Quote of Henrik Bennetsen’s answer to What are the pros/cons of WebGL? on Quora

This is my “solution” to cg2 exercersise a00-warmup.

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