…Why?

I love technology and doing cool new things with it, so why bother with any of those other subjects? Because technology doesn’t exist in a vacuum. It’s not enough just to invent a neat new app, network or gadget – as a technologists, we’ve got to understand how the stuff we create exists in society – who’d use it, where they use it, when they use it and why. It’s fun to study the technology side, and tempting to think the exclusive study of the tech aspects will get you the best answers. If you don’t understand people and society, though, you ultimately end up with brilliant solutions to problems that nobody has. Think of the Segway or the even more brilliant (and doubly ridiculous) robotic unicycle. Catherine Bracy recently outlined the problem very clearly, highlighting the un-reality of the consensus bubble that surrounds the technology world. After focusing so heavily on technology it’s now clear to me that I’ve got to look at a wider range of fields to know what technology is really good for.

Where to learn?

Personally, I’ve been looking in a few places – first, coursera.org is an amazing online resource that offers hundreds of classes on an ever-expanding range of subjects. Because it’s a technological resource, it’s not surprising that the courses initially offered in late 2011 were very technology-focused. Since then, though, they’ve opened up a lot – their course listing now covers medicine, history, literature and more – all being taught by some of the best professors in the world. The most useful fields for me have been the ones I’m the least familiar with, and the ones that help me understand more about the nature of human beings – in the present day or in the past, on their own or in large groups. Other great places to look for inspiration are companies like BERG, the Long Now foundation and the old-but-venerable discussion forum at the WELL.

Does that mean studying technology is a problem?

Nope! Technology is a great subject to learn, and a great field to work within. It just means that it has to be understood in a wider context. STEM (Science, Technology, Engineering and Medicine) education has an unfortunate tendency to create graduates with an all-or-nothing mindset about what they’re learning. That means that the people with the best technical skills to do something useful in society are often the worst-equipped to understand where those skills are best put to use. It’s partly because there’s a lot to learn about, so a technology course often doesn’t take the time to point these things out.

Does that mean no more interactive doodles on this site?

Absolutely not! It just means that there might be some more theoretical posts here amid the doodles. This year at Resn we’ve been playing with Leap motion and hope to have some demos and case studies to show off around that. More recently we’ve also been building a series of really gorgeous games in Away3D with models and animations constructed in Blender3D. To make that pipeline work for us we’ve had to do quite a lot of tweaking and building, and we look forward to releasing some of those tools into the wild. Closer to home, I’ve been using WebDatabases and a proxy tool to do some covert data-mining that I look forward to showing off in the near future. 2013 is going to be fun!

It has been a busy time at Resn! We have been hard at work on some pretty cool games/toys that should be available for the up-and-coming LEAP Motion device. It’s even in the paper! The device is amazing, and I’ve got another post or two in the works just to describe what it’s like and how it’s going to change everything. In the meantime, we’ve had to make some games for it. The game  I’ve been working on has puppets that need semi-realistic movements, and so I’ve been using a mixture of Box2DAS3 for the general physics solver, and an Inverse Kinematics (IK) solver that I worked out myself. I’ve never played with IK before, so it was nice to have an opportunity. I built it because I couldn’t find a solver that was simple enough for my needs, and so here it is!

That solver’s not finished! Or, obeying our lord YAGNI

If you’re a stickler for details, you might notice that the solver’s not actually complete. It only deals with two limbs that are exactly the same length. Why bother releasing that? First, because it’s all I needed – The arms and legs of our puppets were close enough to symmetrical in length that it wasn’t necessary to add all of the extra detail. Second, it was kind of an exercise in minimalism. For those unfamiliar with the term, YAGNI stands for ‘You Ain’t Gonna Need It.’ Programmers are notorious for trying to cover every possible situation before beginning anything – which is great for being prepared for everything… eventually. If you want to get anything done, though, it’s necessary to work on only those features that are strictly, immediately necessary.  It’s harder than it sounds to stick to that, though.

So here’s my IK solver, such as it is. If you want the solver on its own you can grab it here, and if you’d prefer the sample project you can grab that here. I hope it’s useful!   

I made a game! Or more accurately, I made a copy of some of the mechanics in Dan Cook‘s Triple Town. The game is so fascinating that I had to study it in more detail. While I know that this could be a bit of an issue – Cook rightly brought action against 6waves for Yeti Town – I’d try to make it clear that my case is different because of the form and the purpose. First, it’s not for sale and I’m not making any money from it. It’s simply an exercise in understanding the mechanics that Cook has included in Triple Town. Second, it’s incomplete – it’s not a replacement for the original game and I hope that if anyone does play it, they’re compelled to try out Triple town to see what else Cook has included.

If it is such shaky ground, why bother copying it at all?

Copying is a great technique for learning about something. There are details that you’d miss when you just try to look at the original – quirks of the production that give you a better insight into why something was made in the first place. It also puts you in a better position to think about what other directions an idea could take – tweaking a color here, a number there or introducing a slightly different mechanic. If you do enough copying you can start to understand the mindset that creates stuff like the original, and start to explore ideas that are similar to  - but distinct from – the work of the the originator.

Why copy Triple Town?

So that’s why I like to copy stuff in general – but in the case of Triple Town it was necessary because Cook’s work is so unique. Triple Town has a fantastically simple rule-set that still creates a huge amount of depth. The three-grasses-to-make-a-bush, three-bushes-to-make-a-tree mechanic goes an incredibly long way. The occasional bonus piece like the wildcard crystal or other powerups add a little randomness and ga glimmer of hope to otherwise hopeless scenarios. The thin layer of narrative on the top isn’t necessary to understand the game but it definitely makes it more enjoyable, and the rendering of the bears turns them into an object of frustration and dread far beyond their actual impact in the game. This is a common theme running through all of Cook’s games – while other people are definitely making excellent games as entire packages, I think that he’s probably the best new mechanic designer working at the moment.

So what did you  learn?

The first thing is probably the most obvious, particularly to anyone who has played any successful mobile games over the last couple of years: Keep the core experience simple, and make sure it’s fun. This approach is not only cheaper to produce games with but ultimately more entertaining.

The second is that the level of polish on the experience matters a lot to people’s sense of quality, particularly non-gamers. For a long time I had plain, colored squares as the set pieces and while it was still Cook’s entertaining mechanic, it was much harder for anyone else to come in and enjoy the outcome of it. While the current appearance I’ve got on Triple Copy is still really abstract, people respond to it a lot better now.

Third, the scale of the world you play within matters a lot. The real Triple Town is played on a maximum of a 6×6 board and my initial reason to make a copy was to understand what it would be like playing with a lot more room. It’s definitely interesting – the greater amount of room leaves more room to make mistakes and understand what does and does not work about certain strategies. The feedback between trying something out and seeing its success or failure becomes tighter and renders the system more learnable.

I was fascinated to realize that more learnable doesn’t always mean more fun, though;  it was the first time I had seen such a clear example of ‘flow’ – the concept that there’s an optimum level for difficulty and progress to keep people engaged in a game. The increased size of the board reduces the difficulty and lays some of the meta-mechanics bare in a way that takes a lot longer without such a wide open test-bed.

The popular success of so many games will pivot on a single hook – and some of those hooks can be ugly when you get close to them. The ‘appointment mechanic’ is really just exploiting a player’s compulsion to finish what they started, irrespective of the time it takes. It’s often intensified with the threat to shame players by parading their unfinished or ruined efforts in front of their friends. The ‘collection mechanic’ feeds off the same compulsion by highlighting just how much better a set of things would look if someone were to just go to the effort of completing the collection. While Triple Town has recently included these mechanics, they’re by no means central to the game – the core is fun and everything else sort of piles goodness up on top of that already satisfying base.

 Where to from here?

Here are a few directions I’d be interested in exploring further:

• A competitive multiplayer mode that borrows aspects of Othello to leapfrog off of your opponent’s established base.
• A (slightly) deeper aspect of resource management that could be incorporated.
• Ever since my friends and I discovered the no-bases mode for Command & Conquer multiplayer back in 1996, I was struck by the similarity it had to a game of chess , albeit a synchronous, real-time version.
• To introduce scenarios where the ratios of pieces to choose from varied and the state of existing pieces were slightly more unstable, so things could spontaneously deteriorate or erupt.

What do you want to do with Triple Town? Does this copy bring up any ideas? Let me know!

Happy 2013!  We have been busy at Resn, as well as working on a couple of internal projects that we should be able to talk about soon. The work is amazing and I’m really looking forward to releasing it into the wild.

This is a random, automatic doodle that is based on the doodles I used to draw on graph paper back in school. I loved the geometric coherence that almost guaranteed you an interesting shape by just putting in random lines. I call it ‘picto salad’ after the phrase ‘word salad’, the random stringing-together of words that don’t make any sense but we still try to decipher the meaning from.

In fact, the most interesting part of this is what happens when you stare at it for a while. Your brain tries to make sense of the chaos, and pick out icons and figures that look like things. Sometimes I see the iconography for Olympic events, sometimes I see heavily stylized Chinese characters. It’s a fascinating insight into the dizzying field of lines and circles that must come from not yet being able to read and the first struggling attempts to make sense of it all.

Internet-based communication systems have been available to the public for over 20 years now, and a comparison of this new walled garden approach of Facebook and Twitter with traditional real-time chat such as the old Internet Relay Chat reveals some of the potential social effects of the different platforms.

Internet Relay Chat (IRC)

IRC was the most popular form of the internet ‘chat rooms’ of the 80s and 90s. A chat room or channel had a name, an owner and hierarchy of operators – people with power to set topics, moderate conversation and kick people out of that channel. A typical IRC user frequented three or four channels at a time, with a different power structure in each – the owner of channel #newzealand might be an operator in #nzchat and a standard user in #funfactory. Messages are sent to a channel or to an individual in ‘private chat.’ Everything sent to a channel is seen by everyone in that channel.

How Facebook Timeline does it

By contrast, the visibility of posts on Facebook Timeline are much more obscure. We each see the activity of our friends, but it’s much harder to determine common ground. My wife and I share about one-third of our friends in common, so you’d expect us to see about one-third of the same posts, but it gets even more complicated. Some Facebook users share up to 100x the average amount of information, and Facebook itself uses a complicated formula called ‘EdgeRank’ to figure out whose posts to show you and whose to hide. The result is not only a bubble of false consensus from the opinions of your friends, but an unpredictable one based on who you’ve recently interacted with and the current implementation of EdgeRank.

But what does that do?

IRC gives a clearer context to all of the conversations a user engages in. Users in a quiet channel are able to see that it’s quiet for everyone, and might complain about being bored to strike up a conversation. A busy channel is visibly busy – it’s possible to get a sense of how taxed another user’s attention is. Users augment their nicknames to reflect their status on a moment-to-moment basis: <Brandy_away>, <Giuseppe`Dinner> etc. On Facebook it’s impossible to anticipate the amount of information that another user has in front of her, so it’s impossible to know how engaged she can afford to be in conversation.

On your permanent record

Confusingly, although the Facebook lacks a single, authoritative record of a conversation, it does keep a permanent record of everyone’s actions. IRC had no such official record. Individual users could save chat logs for posterity, but these were subjective, covering only the duration of that user’s involvement in the channel. This gave everyone the benefit of a selective memory – something that we’ve lost in deference to The World According To Facebook.

The presence of a permanent, undisputed record is also wreaking havoc on what people say. The reality of these new networks is that a stranger, an employer or a government might have access to what you say even years after the fact.

What does that do?

With these features in mind, IRC is a platform where any enduring record is limited to direct participants in that conversation, the list of those participants is made explicit and there’s a visible hierarchy of moderators who can be reasoned with. Contrast that to Facebook – essentially a system where 1. you know that what you say is going to be recorded for all time and 2. you can’t be sure who is paying attention to it right now. I think it’s clear that the latter is going to encourage a more guarded, superficial form of dialog that is more a form of self-promotion than a conversation.

Final thoughts

Facebook does do something extremely well – it’s a great replacement for the vanity websites that allow users to curate their public persona. That’s a legitimate function and the site supports it brilliantly. But it doesn’t support contextual debate, and it doesn’t support free-flowing conversation. That wouldn’t be so bad except that modern social networks have displaced other platforms like IRC. It’s clear that technical choices that go into building a platform change the kind of conversation that takes place on it. I’ll admit that this fills me with a bit of nostalgia for IRC and other platforms whose times have passed, but it also makes me realize that despite the apparent stability of the walled garden, there’s still plenty of room for experimentation.

On Social Sequels

Social games are a different beast to more traditionally developed games.  A game like Grand Theft Auto gets worked on for 3+ of years by a team of 100+ people.  The game gets 100% designed, then 100% developed, and then the game is ‘launched’. Small updates and bug-fixes might come after that launch, but people expect it to be the same game one year after launch, and what people do in the game doesn’t really change it for others. On the other hand, Farmville 1 was created by 5-6 people in 5-6 weeks. That’s 6 man-months of work to Grand Theft Auto’s 300+ man-years. That said, Zynga has also said that Farmville 1 only launched with 5% of the finished product, so they made up a lot as they went along. In one way, this kind of development is liberating. Products can be shipped with a fraction of the content, and designers can test their ideas out without having to commit to everything up-front. However, it also means that initial decisions are made with a limited understanding of what the game is going to develop into over time. Expansions and features are built up in little steps, and after a while this makes additions harder to make. Each new development has to work together with the last, and no update is allowed to break another. I’ve heard from Zynga staff joke that a new player  jumping into Farmville 1 basically needs a diploma in it to understand everything that’s going on! Because of that difficulty, sequels play an important role. They give designers the chance to look through everything that the original did – pick out what worked and throw out what didn’t, to rebuild engines from scratch and take advantage of the changes in technology since the last launch. Both Farmville 2 and Cityville 2have done that admirably – I think Cityville especially, so I’m going focus on that.

Summary of gameplay

Cityville’s in 3D now, thanks to the hardware-accelerated Stage3D and the proprietary Flare3D engine. Like the first Cityville, it’s mostly about buildings – what they do, when you can get them and what they cost. There are the standard currency / level / population cap mechanics as well as the more interesting consumable resource side. I’m quite taken by the human resources, which I ‘ll go into later.

Commodities

Most buildings require components like bricks, foundations and glass. A specialist building like a burger joint may need other resources like ‘mystery meat.’ These can all be collected from certain buildings, and most (if not all) can be crafted in various manufacturing buildings. The resource dependency tree is complex and a little unpredictable – there’s no map of how it all fits together but provides help along the way when you really need something.

Human capital

This is the first big difference for Cityville 2. There are three forms of human resource present in the game: Shoppers, builders and Citizens. You get shoppers by clicking on residential houses, who then stroll the sidewalks of the town until they go into stores like a coffee shop. You need Builders and citizens for putting up new buildings, and you get them by clicking on the cars and trucks on the roads. Most of the game is about the commerce, but it’s a nice link back to the the game setting  - saying that in the end cities are about people.

Location matters

It’s still pretty easy to see the spreadsheet of numbers that underpins most social games. It’s not a terrible thing –  game designers use these things to work out  how to balance the game, but it can be disappointing to know that it doesn’t matter what shape your city is.  The human resources in Cityville 2 actually move around the map, though. Shoppers are created from houses but then travel at a walking pace around the city, so there are strategic advantages to having a shopping mall next to a large population center. Even better, different regions can be zoned so that they’re better for industrial, commercial or residential purposes. That means there’s an advantage to keeping those districts close but still separate. Genius!

It’s purty

Zynga has managed to create a style that lets them use 3D graphics without having to build in too much detail. The color schemes and art direction make a clear aesthetic that makes everything readable without sacrificing style. Basically I guess I’m saying that it works.

Quicktime events

One problems I’ve had with social games is that skill doesn’t matter much – there’s no way for a skilled player to win more and race ahead of an unskilled one. This is because developers want to make these games work for as large an audience as possible, so it’s hard to justify using mechanics that demand skills that would some players just don’t have. Cityville 2 gets around this and layers an optional timing-based minigame on top of each action on the game: When collecting stuff –  laying out a building or picking up completed goods – a small timer is shown, and a player has to click at the right time to get a bonus. Bonuses get bigger over time, and the required timing gets more exact. The game can be played without these bonuses, and it’s not totally clear how much you get from them, but it definitely makes the game more exciting. My one complaint is that you could use different minigame for different activities – hammering a nail, tapping on a cash register or pouring concrete – but this is pretty minor and I’m sure that this will get picked up somewhere down the line.

High-but-finite friction

In the end, social games are designed to get players to pay money for them. A lot of social games made the purchase of in-game items a flat-out requirement (Simcity Social, I’m looking at you), but it seems like all of the items that you need in Cityville 2 can be collected for free – eventually. Every action has a small, random chance of giving the player ‘keys’, the for-pay currency. This means that players hell-bent on playing without paying can do that, but it would also be obvious to them that progress is much faster with a little cash input.

Undecided points

While it’s good to set a game inside a story to help progression, the plot of Cityville 2 has a lot of details that we don’t really need. There’s a criminal investigation going on that puts too much emphasis on too few characters. Zynga has dropped storylines like this into a couple of their games over the last few years, and this one works better than others like the ‘world at war’ story in Empires & Allies. It’s better to pick a story that can be told in the stop-and-start way a mission structure depends on. It’s still very specific to a couple of characters, though, and the game doesn’t sell us on why the playerhas to be in charge of the investigation.

The power of positive thinking

Cityville 2 uses incredibly encouraging language. Icons fly out of buildings in an arc, and if you can catch them before they hit the ground, you get to see encouraging phrases like “Got it!”, “What a catch!” or the more confusing “OMGEEZERS!” Each catch adds to your overall ‘approval’ level, and when that his the maximum you get to see the phrase “WE LOVE YOU!!!!” writ large across the screen while a party goes underneath. It’s an understandable thing to incorporate into a game, I can see why they’d do it, but it’s hard to say whether it makes the game more fun.

Theme and points of emphasis

As with the original Cityville, the game mechanics are based on modern western cities with service-based economies. This framing paints an oddly incomplete picture of the inter-dependent parts of a functioning city, but reflects the state of modern western economies well. It’s quite fitting for us to be left with that question whether it’s intentional or not!

Chat

This is an interesting feature, and an intriguing power grab on Zynga’s part. Over the years, Facebook has limited the number of communication channels that an app can broadcast from. In response, Zynga has started making channels of their own: in Cityville, Each city acts as a chat room. All of my friends can visit my city and then use the chat room there, so even if my friend Aaron isn’t friends with my friend Bruce, they can still talk in my city. That wouldn’t be such a big deal except for the fact that everyonein Cityville is friends with a default neighbour, Governor Maxley. That basically makes Maxley’s city a public chat room, letting strangers connect with each other to get more out of the game.

Dislikes

Overall, the game is another big step in the right direction and I’m pleased about that. There are a few large and glaring things that get in the way of my enjoyment, though.

It barely runs on my machine!

I have very little idea about hardware benchmarks these days, so maybe I’m alone in this issue. I’m also a huge fan of Flash, of 3D games and of pushing graphical boundaries so it’s hard for me to complain about this. I’m going to though. Games that can benefit from a high-performance machine are great, and I’ve had a lot of fun when I buy a new computer that lets me crank up the settings on my old games. Citiville 2 doesn’t present any levels or options, though, and the inconsistency of the frame rate means that the quick-time events can sometimes be impossible. A system that either allowed different levels of complexity or automatically adjusted when things get a little ropey would totally solve this.

Jangling Jingles

It’s probably still in beta, but the music is something that I’d really like to see updated soon. It uses the kind of up-beat, chirpy music you’d expect to hear in the opening of movie about a small-but-bustling midwestern town where you just know something kooky is going to happen. The problem is that this scene is constantly being set, and the only let-up is during a levelling up when Ode To Joyis played instead. Games like Transport Tycoon Deluxe did a great job of varying the music through the game by giving you a playlist of possible tracks. Granted, music was probably cheaper to produce in the era of low-fi MIDI audio, but a game that expects millions of daily players can probably afford to fill the soundtrack out a little more.

I don’t like the humor

Every click and action has a (silly) accompanying description of that action: clicking on a house to send out a shopper will tell you that they are “Opening junk mail”, or “Burning roasts.” The opening site loader is has phrases like “Missing the point” and “Pivoting unexpectedly.” At best it is bewilderingly irrelevant. I get that writing is hard, and most of the designers, artists and programmers who work on a game aren’t very good at it. Unfortunately it often falls on these people to come up with barely-relevant content to fill the gaps for the design. At worst, though , it’s downright offensive. Here are some of my least favourite bits: Dumpsters: where bodies are found (according to TV detective shows) Glass: Clear material made out of sand. Glass ceilings are used to separate the sexes in business environments.

It’s really sexist

Continuing on from the sexist undertone in the humor, the pictures that describe the core mechanics are kind of sexist too. All the icons for builders, store owners and industrial buildings are men. The icons for shopper and citizen are both women. In the narrative flow so far I’ve met a male governor and two male police officers. The female characters are an out-of touch hippie and a scientist. The scientist character wouldn’t be such a problem but she’s depicted as insane and destitute, and asks me to put up extra housing for her after she destroys her home, and raise additional taxes to fund her crazy experiments. On the bright side, it appears that she controls the weather, so there’s that.

Conclusion

All in all it’s an impressive extension of the original Cityville. Unlike the original Farmville or Mafia Wars, it has been launched as  a fully-fledged game with fun mechanics on day one. It’s clear that Zyinga is learning from their experiences and making an effort to put out better games. It’s also clear that they’re not the evil geniuses that many people have made them out to be. If they knew how to make the perfect revenue-generating machine, they would have built it already. Let’s hope that never happens. In the meantime, though, the games are getting better, and we can all be happy about that!

This is a Schelling sim. hit ‘run’ to start it, play with the sliders to get interesting stuff coming out. Read on for an explanation of what’s happening.

I’m still having a lot of fun taking online courses at Coursera. I’m taking ‘Networked life’, which goes over the general ideas of networks in various forms. One of the ideas they mention, and something that was also in “Model Thinking”, is “Schelling segregation.”

I can’t find a simple text explanation of it online, so here goes: imagine a world divided into a grid. Each grid cell can have either a red person, a yellow person or be empty.

A person could have  up to eight neighbours, and  each neighbour can be the same colour, or a different one:

If we say that people want to have more than 35% of their neighbours the same, then this would only affect the bottom-left yellow one. They’d pick a new space at random in the next round until everyone has found a spot where they’re happy.

The interesting thing that you see in this system is that the level of segregation that you get is always much higher than how picky the individual people are. If you have a system with people wanting 20% of their neighbours to be like them, the average person ends up with 40% like them, 40% gives you 80% segregation and upward until nobody ever ends up happy.

It’s an interesting way of looking at a pretty touchy issue, so when I heard about it I decided to code it up to see what it does. You can play with the result above. I’ve added some extra controls to it on top of how picky the people are: How dense the grid is, how many types of people there are, as well as the the number of neighbours a cell has. The standard model says that each person is connected to the eight people around them:

You could imagine expanding it so that a person checks neighbours two squares away:

That would make the check for happiness a lot more complicated – but I have expanded it so that a person might also be connected to people up to five squares away – so each person would be looking at over fifty others. There are some really interesting results when you do that.

First, people have to be more picky to make anything happen. It makes sense – the more neighbours, the more usual your neighbours will be. It’s interesting because this creates a kind of two-layered effect when the world evens out into more segregated areas – there are red-and-yellow, red-and-empty, and yellow-and-empty mixtures.

Another thing is that if everyone starts off too picky, nobody ends up happy and the world just kind of churns. What is interesting, though, is that if the population starts out as not picky, but gets pickier over time, then it can settle into a stable state. It seems like the shape of that stable state has something to do with the speed that the pickiness changes around.

The time it takes to stabilize has a lot to do with the population density. The fewer empty cells available, the harder it is for anything to settle down.

More different colours means more boundaries, and therefore more difficulty settling into a stable state.

These are awesome things to be able to observe, but I’d like to look into it more. At the moment everyone is the same level of picky. First, it would be interesting to see what happens when you either get a pickiness ‘map’, make the pickiness a result of the level of segregation in the last round. Second, it’s unrealistic to think of everyone as having the same level of choice in where they live. Altering the population over time would be cool too – either by adding people at random, or having very happy people ‘reproduce’. A degree of churn could be interesting to observe the effects of too.  If you decide to take this and run with it, let me know how it goes, it’s a fascinating model that has a lot of room for exploration!  Get the source for the Schelling segregation model here.

It has been a while! Resn continues to be amazing. I have just finished up a project for the Toyota Camry effect, where we built a fancy HTML5 website out of jQuery, requirejs and Isotope. As a Flash developer it is gratifying to be able to push HTML to do new things and get a chance to appreciate what JavaScript does well, what it does badly and what it doesn’t do at all. I think it’s fair to say that there is still room for both JavaScript and Flash!

I code pictures

One of the tensions that comes from being involved in development but also having an interest in aesthetics is that there’s a tendency to bounce back and forth between the two. The last couple months have gotten me thinking a little more about what the point of skill in programming is – James Bridle has a good talk about how he studied Computer Science to be able to think more effectively about books. So what did I study for? One of the major reasons was pictures.

I find it very satisfying to produce an image that I like. To get from the initial concept to being able to creating a final image, though, can be a long and arduous process – particularly if that image is a slight tweak of an earlier experiment. There’s definitely something to be learned from doing something the hard way once or twice, but once you’ve learned those things it should get easier! It scares me somewhat to think that Escher’s geometric studies were as time-consuming and difficult to draw the hundredth time as they were the first.

A lot of developments do follow this pattern of escalating efficiency – anything we can automate becomes increasingly fast to do once we have invested in the process. It has become so ingrained in modern society that we have begun rejecting things that can’t benefit from the efficiencies of that process. That sense of impatience has swallowed up entire fields of artisanship, from typesetting to weaving to carpentry.

That’s why I was so thrilled to see Wim Delvoye’s concrete mixers. He’s put that painstaking detail back into an every-day object, in a manner that could have been commonplace in a time before automation.  I feel like it highlights the absence of that degree of attention to many of our most treasured objects. Many of the objects that we’re told to love are built not too look the way we want them to be built, but in a way that makes it easier to build them. But how can we make things that we like with the efficiencies that we have come to expect?

I think we can develop tools that have an understanding of the medium, so that we can focus our human expertise on higher levels of abstraction.  We have tools that have a near-perfect understanding of the technical requirements for, say, printing or injection molding. The next step is to develop systems with an appreciation of symmetry, color and balance. Instagram might already be one of these new programs, although the range of options available is probably too coarse to qualify.

Autobaroque is the result of reflecting on what kind of aesthetic questions these new programs might serve to answer. It’s an attempt at an algorithmic response to the spectacular work on ornamentation by figures like John Leighton in the 1860s. Flip through some pages of his book and you’ll see that there is a world of visual complexity that we have all but abandoned. If autobaroque can help reclaim even a little of that knowledge it will be a great success!

On a related note, I’ve fallen prey to the seductive immediacy of Tumblr where I’ve already posted several animations that come out of this system. Just as in the class of tools I’m talking about here, the immediacy of people’s responses to one image or another helps me to understand what people like remarkably quickly.

In my last post I talked about how certain building blocks of knowledge can make a lot of different tasks easier. I thought I’d go into a couple of building blocks that have helped me to do interesting things with colours.

Colours: What are they?

The first thing to understand is what colours – primary and secondary – actually are. When colours are made of light on a screen, the primary colours are red, green and blue (RGB). We’re told from childhood that they’re red, yellow and blue, but they’re not. People who have used computers a lot are used to this, but it’s surprising how many people aren’t.

The secondary colours are Cyan, Magenta and Yellow.

Green + Blue = Cyan
+ =

Red + Blue = Magenta
+ =

and Red + Green = Yellow (somewhat bizarrely)
+ =

full Red +  full Green + full Blue = White
+ + =

The sooner you accept these things, the happier you will be.

Understanding colours as numbers

Because colours on a computer are represented by numbers, it helps to keep in mind what those numbers are. The range for colour values is either between between 0 and 255 or 0.0 and 1.0. The 0.0-1.0 range can be thought of as a percentage: 0.8, 0.2, 0.9 would be 80% red, 20% green and 90% blue – a bright purple which is slightly more blue than it is red . Numbers in the range 0-255 are the same, so 0 is none of the colour, 128 is half, and 255 is full.

If bright yellow is all red + all green, that would mean it’s (255, 255, 0) . A dark blue would be no red and no green, with just a little blue – maybe something like (0, 0, 64).

So why does this matter?
If you want to be able to write code that generates colours, you need to know what the components of that colour are and what kind of number represents them. Next, we’ll look at how to use math to generate these numbers.

Some basic functions

The three math functions that I use the most are

1. the random number generator
2. rounding, and
3. trigonometry functions.

The random number generator and rounding

The first is simple – it takes no input, and produces a different random number between 0 and 1 every time you use it – 0.2114, 0.7435 etc. If you wanted a random number anywhere between 1 and 10, you could just multiply by 10. If you wanted to simulate flipping a coin – heads or tails with nothing in between – you’d need to round this result to the nearest whole number, and say that 0 is tails and 1 is heads. In JavaScript, that would look like:

var coinFlip = Math.round(Math.random()); //this will give 0 or 1

Alternatively, you could simulate dice by multiplying by six and cutting off the decimal with Math.floor():
var diceThrow = Math.floor(Math.random()*6); //this will give a result of 0-5

floor() is like round() but always rounds down. There’s also ceil(), short for ceiling, which will always round up. We could use that to give a result of 1-6 instead:
var diceThrow = Math.ceil(Math.random()*6); //this will give a result of 1-6
It’s useful to be able to do both, since so many things in programming are zero-indexed.
If you wanted a totally random colour, you could ‘floor’ three random numbers between 0 and 255:

var randomRed = Math.floor(Math.random()*256); //this will give a result of 0-255
var randomGreen = Math.floor(Math.random()*256); //this will give a result of 0-255
var randomBlue = Math.floor(Math.random()*256); //this will give a result of 0-255

Sine and Cosine

The Sine and Cosine function are actually used to describe the components of an angle, but when you’re making colours the most useful aspect of them is that they take an input that increases at a constant rate (like the current time) and turn it into something that bounces back between -1 and 1. That means a function like this:

Turns into this:

This is great, but we need to change it a little to make a colour. If we wanted to make a colour with it, we’d need to do a couple of things. First, the function goes between -1 and +1. A colour needs to be between 0 and 255. First, we could add 1 to make the function go between 0 and 2:

Next, we need to shift it into the range of 0-255. You can think of that as first getting it into the range of 0-1 by dividing it by 2,

and then multiplying by 255 again to get it to cover the full range. The code for that would be:
var output = (1+Math.sin(input))/2*255;

Great! Now if you wanted to make a pulsing red colour, you could use time as the input and set the ‘r’ part of the output to be the output:

var redOutput = (1+Math.sin(input))/2*255;

To make a shade of grey, just make the red, green and blue values all the same:

var redOutput = (1+Math.sin(input))/2*255;
var greenOutput = (1+Math.sin(input))/2*255;
var blueOutput = (1+Math.sin(input))/2*255;

That would look like this:

Sine has a couple of interesting features, though: the wavelength, and the offset or phase. Wavelength is the time it takes for the pattern to repeat itself, so if we’re making a colour out of it, it could be the time it takes for that colour to return to white after going dark. You’d change the wavelength by multiplying the input value:

var slowOutput = (1+Math.sin(input))/2*255;
var fastOutput = (1+Math.sin(input * 10 ))/2*255; //changes ten times as fast as slowOutput

You could make a colour where the red changes slowly, the green changes faster and the blue changes even faster:
var redOutput = (1+Math.sin(input))/2*255;
var greenOutput = (1+Math.sin(input*2))/2*255;
var blueOutput = (1+Math.sin(input*3))/2*255;

That looks like this

The offset, or phase is how far ahead or behind that pattern is from the standard sine wave. You can think of it like a clock running early or late – it goes at the same speed as a clock telling the right time, and always stays different by the same amount. You get this effect/number(?) by adding some consistent amount to input. If you wanted the red, green and blue parts of a colour to change at the same speed but always stay different values, you might do this:

var redOutput = (1+Math.sin(input))/2*255;
var greenOutput = (1+Math.sin(input+1))/2*255;
var blueOutput = (1+Math.sin(input + 2))/2*255;

and that looks like this

So now you can make colours! In a future post I’ll go into how to think of adjusting the range and probability distribution of random numbers, tweaking the shape of a sine wave with exponents, and some advice on understanding hexadecimal.