Well since we have made the decision to discontinue Printomi I have been backing up the databases and downloading the 90GB+ of images that users have uploaded.

Well it wouldn’t be like me if I didnt start thinking about what cool things I do with all those pixels. I remember seeing those cool Mincraft maps that use the Google Maps API to explore the Minecraft servers and it got me thinking if it could be possible to do something like that but for the Printomi images.

Well it turns out yes, you can: http://www.mikecann.co.uk/projects/PrintomiMaps/

Its only 1,024 of the total 27,497 images that were uploaded but even this small ratio results in a total map size of 115,200 x 86,400 pixels. The Google Maps obviously cant handle an image that large and it would take forever to download so you must split it up into many tiles. To achieve the zooming and performance you must also provide the map at various sizes.

With a map of 32×32 image with each image at 3600×2700 pixels and each tile at 450×337 this results in 87,000 tiles at 8 zoom levels! Generating and uploading all that data takes several days. But the result is you can pan and zoom around what seems like one huge 115k x 84k image.

If you are interested I have uploaded the source code I wrote to generate the 87k tiles at the various zoom levels from the 1024 3600×2700 input images. You can find it over on Github: https://github.com/mikecann/PrintomiMaps

If I had enough disk space on my web server I would love to do the whole 37,000 images in this way. If I did 128×128 that would use 16,384 of the images. This would result in 10 zoom levels and a map 460,800 x 345,600 pixels large. I have no idea or how long it would take to generate and upload all those tiles

After just 41 days live we have taken the difficult decision to turn off the Printomi servers. Despite the great stats regarding the number of uploads and views and user engagement, without the poster sales we are unable to keep funding the AWS servers and store the 90GB+ of images that users have uploaded.

Developing Printomi has been a great roller coaster ride of a project. It has been hard work, months of late nights to get things into a shape and despite the fact that less than two months later we decided to shut it all down I still think it was worth it. I am proud of what we accomplished with Printomi and hope that during its short time live others enjoyed what we created.

I am determined not to get downhearted, instead to grow and learn from the many lessons learnt here. Some things worked and others didnt, but it was all good experience. Printomi’s mistakes are all about driving me onto the next, bigger, better thing.

I’m extremely proud to announce the launch of a project I have been working on for quite a while now.

Printomi is a service for social games that allows players to take snapshots of their worlds and upload them to their own personal gallery. Players can like, comment share and order poster prints of their virtual creations.

The way it works is we provide the game owner with a tiny API that is used to interface with Printomi. The bulk of the Printomi client is downloaded at runtime from the Printomi servers. This is good for two reasons. Firstly by keeping down the size of the code that must be embedded into the game we can keep down the initial load time the player must sit through before they can play the game. Secondly we can upload changes and fixes to Printomi without requiring the game owner to recompile their code.

Once downloaded the printomi client is ready to be be used. In the case of Gourmet Ranch a themed button is shown to the player inviting them to click:

Once clicked (or activated by the JavaScript API) the main Printomi window opens:

The window has controls to zoom in and move the print about allowing the player to get the perfect angle of their world:

Once happy the player can then saves the print to the printomi servers. While the image is uploading the user can continue to play the game. Once the upload is complete the window is opened once more offering to show the player their print.

Printomi is tightly integrated with Facebook so that it’s as easy as possible for new users to get started:

Once connected the new print is then available for viewing, sharing, liking, commenting, etc:

In addition the prints are organised into galleries so that users can browse the uploads of others:

If a user particularly likes one print then they can order it as a poster:

Currently we only offer posters to people living in the US however we plan on opening it up to other countries when we can.

To print to such a large poster (24×18″ @ 150DPI) and maintain the quality of the final product we must capture a large number of pixels. For example here is a comparison between what a user would see on printomi.com and what we store behind the scenes:

The technology that lets us capture these large images and store them in a compressed way (to conserve disk space and therefore cost) is quite complex and will have to wait for a later post.

Printomi is currently only available to a small subset of the Gourmet Ranch user base but we are performing a steady-rollout to everyone, so if you don’t have access to the button in Gourmet Ranch just yet then don’t worry it should be available for you soon!

Printomi is a culmination of many many hours of hard work, late nights and stress. But its been worth it! I’ve had a blast throughout the whole process and am proud of the result. I have also learnt a whole bunch in the process. I have had to work with so many technologies to pull this off, to name a few: AS3, C++, C#, ASP.Net, MySQL, IIS, AWS. I have particularly enjoyed the C# work having largely abandoned the language since my early work with it.

If you would like to support me or if you would like to keep up to date with the goings on with Printomi then you can like us on Facebook or follow us on Twitter

]]> http://mikecann.co.uk/business/introducing-printomi/feed/ 0 http://mikecann.co.uk/misc/try-harder-2012-levelup/ http://mikecann.co.uk/misc/try-harder-2012-levelup/#comments Mon, 12 Mar 2012 17:39:07 +0000 admin http://mikecann.co.uk/?p=1869

Last year I was fortunate to be one of the lucky 16 to attend the first try { harder } experimental conference / coder retreat in Nottingham. As mentioned in my blog post at the time it was an incredible 4-day event in which I learnt so much from some of the most talented and experienced people in the flash community.

The event was such a success that not only is it going to run again this year (which I hope very much to attend) but there is also an additional “levelup” conference happening next week. The idea behind the levelup is to provide businesses and freelancers with an intensive 4-day training and motoring session. The mentors are hand picked from the previous try harder members and so represent some of the best in their field.

What’s more Stray, the primary organiser of the event has just announced that Jetbrains the makers of the popular IntelliJ IDEA IDE are going to be sponsoring the event meaning each paying participant will receive a licence to use the IDE!

Interested? Head over to the levelup site and sign up: http://www.tryharder.org.uk/level-up-2012/

Just finished and uploaded a new mix I have been putting together over the last couple of weeks. The mix is mostly Dubstep with some Drum’n'Bass thrown in to mix it up a bit. The tracks are mostly all favourites I have had on repeat in the last 6 months.

Give it at listen, see what you think:

Tracklist:

01 Noisia – Tommys theme
02 Gemini – Vision
03 Nero – Promises (Skrillex & Nero Remix)
04 Tasha – Journey (Culprate & Twist Remix)
05 Labrinth feat. Tinie Tempah – Earthquake (Noisia Remix)
06 Xilent – Choose Me II
07 Gemini – Feel Stronger
08 Porter Robinson – Spitfire
09 Porter Robinson – Spitfire (Kill The Noise Remix)
10 Nero – New Life
11 Camo & Krooked – Cross The Line (Metrik Remix)
12 Camo & Krooked, Body & Soul – The Big Rush
13 John B – Numbers (Camo & Krooked Remix)
14 Noisia – Could This Be
15 Gemini – H. A. T. D.
16 KOAN Sound – Funk Blaster
17 Skrillex – Kill Everybody (KOAN Sound Remix)
18 Two Door Cinema Club – What You Know (Feed Me Cover)
19 Noisia – Tommys theme

Yesterday at Playdemic we had a visit from Ed Vaizey the Minister for Culture, Communications and Creative Industries. As one of the more successful games companies in the North West at the moment he wanted to come and talk to us.

Along with him were a TV crew for the Northwest News. It was a good opportunity for us to show off GourmetRanch abit. Anyways check out the video above. I cant believe they used the Playdemic timeline I wrote on whiteboard in the kitchen including the joke about world domination!

This post is a little off the normal beaten track for my blog. I have been so super busy of late on a project that I havent really had any time for technical personal projects.

I have however had time to do a little home-brewing so I thought I would share a little tip I had picked up. A little white back a friend lent me his kit for homebrewing. Its so simple all you have to do is fill a two litre bottle with juice and sugar, add a little yeast and cap it off with a simple valve-cap. Leave it for a few weeks and you have a ‘tastey’ strong beverage.

The problem however is knowing how long to leave it. The instructions say 2-3weeks but that is heavily dependant on a number of factors such as the ambient temperature of the room. At first what I was doing was putting the juice, yeast and sugar in at the same time then giving it a good shake so all the sugar was disolved.

I have discovered a better way of doing things however. If you put the sugar in the bottom then put the yeast on top then gently pour in the juice over it then you get a rough indicator of when the fermentation process has completed. As the yeast grows and respirates it burns its way down through the sugar slowly converting the sucrose to alcohol. What this results in is a slowly shifting yeast layer as it works it way down. When the layer hits the bottom, no more sugar left and the brew is ready for drinking

I have been meaning to do this for a while, but never gotten round to it. Well more precisely other projects have always been more interesting so I pursued those instead This Christmas however I decided it was about time that I finally did it.

Anyways I have finally given my bio on the About page abit of a spit shine. I originally wrote it based on my CV a long time ago and thought it deserved a little bit of love considering that it gets quite a few hits. Its all written in the third person, im not entirely sure why I decided to do it like that originally, oh well.

I have also rearranged some of my earlier work so best to give the archive a more accurate timeline.

So I have been working on my “Terraria like Terrain” project “Hxaria” again.

Following on from the last post, I have now made it so that each particle can have its texture changed. This completes the functionality required to render each tile as a point sprite, as talked about in my previous post.

The way it works is that the entire world is recorded in a 2×2 array Tilemap. This 2×2 array holds a single Tile object for every single tile in the world:

Source code

class Tile
{
	public var x : Int;
	public var y : Int;
	public var type : Int;
 
	public function new(x:Int, y:Int, type:Int) { this.x = x; this.y = y; this.type = type; }
}

When the TileRenderer needs to render it asks this Tilemap for a Tile that represents that screen coordinate, the Tilemap then offsets the position due to the camera movement and returns a tile. So it looks something like:

The tile type is then passed to the shader in attribute buffers per point sprite / tile along with all the tiles which are stored on a single texture:

The shader then performs the neccessary calculations to work out what the UV coordinate in the texture. The Vertex Shader:

Source code

uniform float amplitude;
uniform float tileSize;
uniform float texTilesWide;
uniform float texTilesHigh;
uniform float invTexTilesWide;
uniform float invTexTilesHigh;
 
attribute float size;
attribute vec3 customColor;
attribute float tileType;
 
varying vec3 vColor;
varying vec2 vTilePos;
 
void main()
{
	vColor = customColor;
 
	float t = floor(tileType/texTilesWide);
	vTilePos = vec2(tileType-(t*texTilesWide), t); // +(.5/tileSize)
 
	gl_PointSize = size;
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

And the Fragment Shader:

Source code

uniform vec3 color;
uniform sampler2D texture;
uniform float invTexTilesWide;
uniform float invTexTilesHigh;
 
varying vec3 vColor;
varying vec2 vTilePos;
 
void main()
{
	vec2 uv = vec2( gl_PointCoord.x*invTexTilesWide + invTexTilesWide*vTilePos.x, gl_PointCoord.y*invTexTilesHigh + invTexTilesHigh*vTilePos.y);	
 
	gl_FragColor = texture2D( texture, uv );
}

So it works in a way very much like a raster engine. You only have to render as many particles as the screen can contain.

If the screen area moves beyond the extent of the Tilemap then more tiles are randomly generated:

The new tiles are randomly selected from 4 different types, Dirt, Gold, Diamonds and Rock. I have added some controls to the demo that allow you to tweak these values to demonstrate the random tile generation:

The UI may look familiar to people that have seen any experiments anyone who has worked with Three.js before, its the very popular dat.GUI. Its a really simple library written in javascript for creating controls that can be used to tweak experiments, perfect for me!

To get dat.GUI to work with haxe, I used the awesome Extern feature of HaXe. This means that all I have to do is provide a stub interface to dat.GUI rather than a full implementation in haXe. This is great as it allows me to rapidly begin to use the library but also have the type safety of HaXe. It didnt take long to stub out the bits of the library I needed in an extern:

Source code

package dat;
 
/**
 * ...
 * @author Mike Cann
 */
 
extern class GUI
{
 
	public function new(options:Dynamic) : Void;
	public function add(options:Dynamic, name:String) : GUI;
	public function name(value:String) : GUI;
	public function min(value:Float) : GUI;
	public function max(value:Float) : GUI;
	public function step(value:Float) : GUI;
	public function onFinishChange(f:Void -> Void) : GUI;
	public function listen() : GUI;
}

Then I used it like:

Source code

package ;
import dat.GUI;
 
/**
 * ...
 * @author
 */
 
class GUIManager
{
	public var goldChance : Float;
	public var rockChance : Float;
	public var diamondsChance : Float;
	public var mapWidth : Int;
	public var mapHeight : Int;
 
	private var gui : GUI;
	private var game : Game;
 
	public function new(game:Game)
	{
		this.game = game;
 
		gui = new GUI( { height : 5 * 32 - 1 } );
 
		goldChance = game.tilemap.goldSpawnChance;
		rockChance = game.tilemap.rockSpawnChance;
		diamondsChance = game.tilemap.diamondsSpawnChance;
		game.tilemap.mapResized = onTilemapResized;
		mapWidth = 0;
		mapHeight = 0;
 
		gui.add(this, 'goldChance').name("Gold").min(0).max(1).step(0.001).onFinishChange(function() { game.tilemap.goldSpawnChance = goldChance; } );
		gui.add(this, 'rockChance').name("Rock").min(0).max(1).step(0.001).onFinishChange(function() { game.tilemap.rockSpawnChance = rockChance; } );
		gui.add(this, 'diamondsChance').name("Diamond").min(0).max(1).step(0.001).onFinishChange(function() { game.tilemap.diamondsSpawnChance = diamondsChance; } );
		gui.add(this, 'mapWidth').listen();
		gui.add(this, 'mapHeight').listen();
	}
 
	private function onTilemapResized(mapW:Int, mapH:Int):Void
	{
		mapWidth = mapW;
		mapHeight = mapH;
	}
}

Simples!

Anyways you can check the final result out on this page: http://mikecann.co.uk/projects/hxaria/02/
(Click and drag to move the camera about)

I have also uploaded a quick video too:

I have also uploaded the source again to my github page: https://github.com/mikecann/Hxaria
(I have also created a tag, incase the source changes in the future)

Next up, lighting!

Its the first time I have had hosting on a windows machine and I must say I really like it. I feel much more at home on a windows machine, I know where everything is and im more familiar in a graphical OS. I had a couple of permissions problems related to uploading new images on wordpress but a quick Google turned up this post:

http://wordpress.org/support/topic/weird-permissions-with-iis7-and-uploaded-images

Apparently WordPress sticks new uploads in the c:\windows\temp directory, before it moves them to the usual \wp-content\ folder, so you have to ensure that temporary folder has the correct permissions for IIS_IUSRS too else it wont work correctly when the file is moved to the content folder.

You may also notice that I have decided to give the blog a little face-lift too with a new theme. I decided this time to go for a paid theme, as they aren’t that expensive (compared to hosting costs) and the quality and customization with paid themes are go much better than their free counterparts. I found it on the excellent themeforest site, the theme is called PixelPower.

Anyways if you find any broken links or anything off with the site then let me know!