Mark Cooke’s G-Mixer

Simple but periodically pleasing. Click to randomly generate a new scene.


After Pause Talk vol. 29 last night when talking with just-arrived-in-Tokyo Brian Thomas the topic of algorithmically generated art came up. I spent five minutes and cooked this up. It was definitely fun and I want to explore it more. I need to go ahead and learn the Processing language which I’ve heard is great for this kind of stuff.

Full source code is below:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;

	public class SinDraw extends Sprite
	{
		private var sinWaveData:Array;

	    [SWF(width=500,height=300)]
		public function SinDraw()
		{
			sinWaveData = new Array(200);
			onClick(null);

			stage.addEventListener(MouseEvent.CLICK, onClick);
		}

		private function generateWave():void
		{
			var amplitude:Number = 100 * Math.random();
			var frequency:Number = 0.0174532925 * 2; // 2 degrees in radians
			var phase:Number = 100 * Math.random();

			// intentionally goofy
			var r:uint = (255 * Math.random()) << 16;
			var g:uint = (255 * Math.random()) << 8;
			var b:uint = (255 * Math.random()) << 24;
			var color:uint = 0xff00000000 + r + g + b;

			for (var i:int = 0; i < 200; i++)
			{
				sinWaveData[i] = amplitude * Math.sin((i * frequency) + phase);
			}

			for (i = 0; i < 200; i++)
			{
				var index:Number = i * (500 / 200);

				graphics.beginFill(color, 1);
				graphics.drawCircle(index, sinWaveData[i] + 170, Math.random() * 5);
				graphics.endFill();
			}
		}

		private function onClick(e:MouseEvent):void
		{
			graphics.clear();

			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(500, 300, 90);
			trace(this.width);

			// intentionally goofy
			var r:uint = (255 * Math.random()) << 16;
			var g:uint = (255 * Math.random()) << 8;
			var b:uint = (255 * Math.random()) << 24;
			var color:uint = 0xff00000000 + r + g + b;

			graphics.beginGradientFill("linear", [color, (color - 0xff222222)], [1, 1], [0, 0xff], matrix);
			graphics.drawRect(0, 0, 500, 300);
			graphics.endFill();

			generateWave();
			generateWave();
			generateWave();
			generateWave();
			generateWave();
		}
	}
}

Hamada-san draws her work in acrylics on paper, scans them in, and then does some touch-ups in Photoshop. Everything she does looks great with a distinctive style. The first teaser is here.

The bird above is fully animated and moves about the scene. As the project’s animator (gasp!) I have been forced to learn a lot about animation to take the illustrations of Hamada-san and make something that looks halfway decent.

I got some great advice from my talented animator friend Leo Martinez on a squirrel animation I was working on. You can see a test below. The sequence is animated from only two illustrations (a stand and a jump pose). I had no idea it was possible to create so much motion with Flash’s free transform tool. I don’t think I have a knack for animation but I am having a lot of fun working with it.

I’ve been working with a local Tokyo-based artist, the awesome Kayo Hamada, on a secret Flash-based interactive project for a few months. It has been moving slowly but we recently hit a progress milestone and I wanted to share a tiny bit of teaser art work with you all.

The girl staring at you above is our main character. Her name is Violet.

I don’t want to reveal too much more at this point. Although we have plans drafted up for the theme and general layout of the story we’re taking a very creative and experimental approach to the development of the project. This is a labor of love – there is no money involved – which of course grants us that freedom.

This isn’t a videogame so I’m also taking this opportunity to use a different approach to fleshing out Violet’s story and world. My background in game development gives me the knowledge of how to produce a schedule of building out assets an code to finish the project on a specific time frame but I’m avoiding that in this early stage in the name of unlimited creative freedom.

Hamada-san and I just had a brainstorming meeting inside an Internet cafe in Shinjuku where we settled on a number of issues for the opening of the scenario.

I look forward to when we can share some more!