If you have a facebook account, here’s the link to the application:

http://www.facebook.com/apps/application.php?id=2356957881

Experienced real life jigsaw fans will be pleased with the game mechanics. Puzzle pieces and completed sections can be rotated freely and intuitively. A built-in timer allows you to compare your best times with those of your friends.

Mystery mode… what the ^&%$ am I puzzling..?

One of the most popular features appears to be the “mystery mode”. When you upload your own photo, you can choose to make the puzzle a mystery puzzle. Your friends won’t be able to see the complete image until they’ve solved the puzzle!

Somehow I feel this mode is going to cause a few “surprises”… I hope only pleasant ones! ;-)

—-

Update: We got a really good review of Puzzlebee from the folks over at Facereviews.com: Read it here:
http://facereviews.com/2007/06/21/facebook-puzzlebee-application-drives-me-crazy

There’s exciting new features in development but they require that the server is updated. We’ll have 2 more GB of RAM in it, and we’ll install a number of software components that are essential for future growth and scaling of the service.

These upgrades are performed by our hosting partner and we don’t have control when exactly the downtime will occur or how long it will take exactly. From experience, I would expect each downtime to not last longer than one hour. I expect 2-3 of these outages in the coming days.

We won’t know for sure whether the software upgrades will be compatible with the existing code on TheBroth. These things are always difficult to predict, but we’ll do our best to get it all fixed up as bugs rear their ugly heads.

Please keep us informed if you find things aren’t working right by posting in the bug reports forum - let’s hope that forum software keeps working :-)

NOTE: If you like to test the new graffiti mode, please message Zaphod B to gain access.

So what does that mean - does it mean the end of mosaics? No! Of course not. Mosaics will stay. Art of different types will coexist. The point is - at TheBroth, you can collaborate. You can load and continue and alter others’ works.

All the amazing TheBroth features that we’ve been able to introduce since we moved the tile rendering from Ajax to Flash will still be there. Dragging, rotation, multi-move, slide-under… you name it! Just don’t expect it in the early beta! :-)

This new mode - some call it sketching, drawing, freehand, painting, or graffiti - and the whole bunch of new modes we’ve got in the pipeline, they’ll have all the features that make TheBroth what it is: You can work together, you can watch others, you can work alone, you can import, change, view the replay… and use all those nifty tricks in terms of moving, dragging, rotating.

Limitations

And you’ll be somehow limited too - not unlike the mosaic, there’ll be a limit to how many strokes you can do. This is just how TheBroth works: imagine we had a public graffiti room and people would just add more and more and more layers of virtual paint. Before you know it, it would take FOREVER to load all the data that make up that painting.

So - there will be a limit of strokes. We call them paths. When you begin to draw a line, you’re basically adding lots of points, and when you release the mouse, the path is complete and stored with your name. This way everyone can still see who’s moving what and what the individual contributions are once the artwork is saved.

We’ll be limiting the amount of points that can be used in each room. When all the points are used up, but people continue to paint, then old points will be recycled so that there’s never more than a certain number of points used. We’ll choose a number that is high enough to allow for detailed artworks but low enough so that each room or artwork can load quickly.

A (welcome) side effect of this limitation of available points is yet again a leveling of the playing field. You can’t just add layer after layer of paint - you have to be economical. This is not Photoshop or Paintshop Pro or Coreldraw or whatever your favorite drawing application is. This is collaborative art on the internet, free, in your web browser! :-)

A new beginning…

Let this serve as the official announcement that TheBroth as a collaborative art platform has sufficiently matured. We’re now ready to add a lot of cool new art forms to … ermm… the broth. I can’t even spell that any other than TheBroth anymore.. :-)

This new mode we’re calling graffiti for now because that’s where the inspiration came from. When we showed TheBroth to new users, they often felt that making art with tiles just takes too long. Well, one thing is certainly true, good mosaic artworks take a least an hour. We just have to accept, advanced mosaicing is not for everyone!

Now, everyone is familiar with paint programs, and in this new mode, you’ll be able to create something quite acceptable in 30 seconds flat. I am certain that once we have all the advanced features, people will again begin tinkering and create art that’s so outstanding, you could NOT create it 30 seconds. But the difference is - in the mosaic, you can’t do much in 5-10 minutes. In the graffiti mode, you can.

I believe that good mosaics are so outstanding and amazing because they are mosaics. They will always look a tad different than graffiti art - and certainly different from these other (top secret, hush hush) art forms that we’re going to implement soon.

I’m going to also announce this in the forum because it’s easier to comment there - and I have the feeling that there’ll be some comments to this revelation! :-)

Discuss in the forum: http://www.thebroth.com/forum/viewtopic.php?p=6770

The new feature of tile rotation and in particular custom textures introduced a great amount of pixel-level detail, and so PNG is no longer a good choice. JPEG, a lossy-compression image format, is better suited for this type of material.

Our main goal was to have the actual artworks load as fast as possible, and so we needed to keep the file size down. JPEG is very well suited for the new type of rotated, textured tiles, but horrible for the old-style artworks. PNG is great for old-style artworks, but REALLY horrible for the new ones with tile rotation and textures.

Just how horrible is horrible? JPEG on old-style artworks typically doubles the file size. That’s bad. But PNG on new-style artworks increases the file size about 5-10 times! We’re talking 300-400 K here. This is quite unacceptable on anyone’s connection.

The only solution was to use whatever is producing the smaller file for each artwork. This happens auto-magically when you take a snapshot. It will actually save both the PNG and JPEG version, but the artwork page will display whatever image file has the smaller file size.

So if you ever feel that the JPEG compression produces too many artifacts and you’d like to see the artwork in its full and unadulterated glory, just manually change the file ending of the actual artwork image file to “.png”.

For example, the image file of Artwork 18152 is http://www.thebroth.com/gal/im18152.jpg - thus http://www.thebroth.com/gal/im18152.png is the PNG version of the image.

Amfphp

For those not familiar with Amfphp, here is a description from the Amfphp website:

Amfphp is an RPC toolkit for PHP. It allows seamless communication between PHP and :

* Flash and Flex with Remoting
* JavaScript and Ajax with JSON
* XML clients with XML-RPC

Essentially, Amfphp converts certain PHP data types to their Actionscript equivalent data types, and where possible, converts Actionscript data types to their PHP equivalents. For example, it can convert a PHP array into an Actionscript Array, or a PHP resource (e.g., a mysql_result result) into an Actionscript Recordset.

Gzip and PHP/Actionscript data type decisions

Since Amfphp 1.9 beta 2, Amfphp has included an option to use gzip compression on the data sent back to the client. This new feature of Amfphp, coupled with suspicions that splitting strings in Actionscript was time consuming, made us rethink our current data exchange method between Flash, Amfphp and PHP, so we thought it was time to experiment some more with the different data types.

Our goal was simple: to find which data types resulted in Actionscript having the data available and ready to process in the least amount of time.

In our specific case, we use Ampfphp to get information about each TheBroth mosaic from the server to the Flash player on the client side. We needed to determine which of the available methods takes the least amount of time to have the data ready to pass to our tile generating function createTile on the client side.

For our experiments, the $gateway->enableGzipCompression(25*1024); line in Amfphp’s gateway.php setting was changed to $gateway->enableGzipCompression(5*1024);. This was because the uncompressed content length of our testing string result was less than the default Amfphp gzip threshold of 25KB (it was about 21KB, to be exact).

Mysql table structure

Here’s the Mysql table create code for the test data we used in this experiment. Each loading will select 1000 rows from the database, eg. SLOTSCOUNT=1000.

CREATE TABLE `thebroth_experiment` (
  `set_id` int(11) NOT NULL default '0',
  `slot_number` smallint(6) NOT NULL default '0',
  `x` smallint(6) default '0',
  `y` smallint(6) default '0',
  `move_number` int(11) unsigned NOT NULL default '0',
  `color` char(6) NOT NULL default '',
  `rotation` smallint(6) NOT NULL default '0',
  PRIMARY KEY  (`set_id`,`slot_number`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

In the context of this experiment, the sql queries only selected slot_number, x, y, color and rotation. The server in this experiment was a Dual AMD Opteron 246 2.0 GHz with 2 GB RAM and little load. It runs Mysql 5.0.22 and Php version 4.3.9. This PHP version was *not* recompiled with amfphp.

PHP/Actionscript data type options

PHP string to Actionscript String

Approach: Create a comma separated PHP string on the server side, and let the client side Actionscript split the Actionscript String into an Actionscript Array in order to loop through the data.

Server side code:

function getTilesAsString() {
	$ret = mysql_query($sql);

	while ($t = mysql_fetch_assoc($ret)) {
		$s .= "$t[n],$t[x],$t[y],$t[c],$t[r]\n"; // where n,x,y,c,r were the attributes whose values we wanted
	}

	return trim($s);
}

Client side code:

function handleDataString(re:ResultEvent) {
	lines = re.result.split("\n");
	for(var i=0; i < SLOTSCOUNT; i++) {
		var tile = lines[i].split(",");
		//createTile(Number(tile[0]), Number(tile[1]), Number(tile[2]), tile[3], Number(tile[4]));
	}
}

PHP array to Actionscript Array

Approach: Create a PHP array on the server side, and let the Actionscript loop through the data as an Actionscript Array.

Server side code:

function getTilesAsArray() {
	$ret = mysql_query($sql);

	while ($t = mysql_fetch_assoc($ret)) {
		$r[] = $t;
	}

	return $r;
}

Client side code:

function handleDataArray(re:ResultEvent) {
	for(var i=0; i < SLOTSCOUNT; i++) {
		var tile = re.result[i];
		//createTile(Number(tile['n']), Number(tile['x']), Number(tile['y']), tile['c'], Number(tile['r']));
	}
}

PHP resource to Actionscript Recordset

Approach: Create a PHP Mysql Resource on the server side, and let the Actionscript loop through the data as an Actionscript RecordSet.

Server side code:

function getTilesAsMysqlResult() {
	return mysql_query($sql)
}

Client side code:

function handleDataMysql(re:ResultEvent) {
	var rs:RecordSet = RecordSet(re.result);
	for(var i=0; i < SLOTSCOUNT; i++) {
		var tile = rs.getItemAt(i);
		//createTile(Number(tile['n']), Number(tile['x']), Number(tile['y']), tile['c'], Number(tile['r']));
	}
}

Results

The following tables show the values that varied depending on the data types used:

Server side

¹ Measured using Amfphp’s service browser.

Notes:

‘Amfphp encode time’ : the time taken by Amfphp to convert the PHP variable into the equivalent Actionscript variable.
‘PHP result creation’ : the time taken by PHP to convert the Mysql result resource into the PHP variable to send back to Amfphp. In the server side code examples above, it’s the while loop.
‘total’: the sum of the above 2 times.
‘Content-length’: the number of bytes used for the response that Amfphp created for the client.

Client side

‘client function’ is the time it took to run the Actionscript function for the particular data type. For testing, the calls to createTile were commented out (they remain in the code to show that the data are in a state ready to be used in such a way).

Machines used

1. Laptop: P3 895 MHz 256MB RAM WIN XP FF 1.509 Shockwave Flash 9.0 r28
2. Desktop: AMD Athlon XP 2500+ 512MB RAM Firefox/2.0 (Ubuntu-edgy) Shockwave Flash 9.0 r31
3. Mac: Imac 1.8 GHz PPC G5 512MB RAM Firefox/2.0 OSX 10.4.8 Shockwave Flash 9.0 r28

As you can see from the results, the extra time taken to split the string into an array on the client side (47.75 ms longer for string splitting than using the array method, on the slow laptop) is still a lot less than the extra server side processing time required for the non-string types (363.25 ms for the PHP array, 111.75 ms for the PHP resource). The string response is also the smallest download of the three methods.

It is also important to note that each client will cause the extra time processing time on the server, so moving the processing effort and time to the client is a good idea when you wish to reduce server load.

Summary

Based on our observations, we recommend the following:

Unless your clients’ processing power is extremely limited (in which case the client side string to array processing can take significantly longer), transfer the data as a comma separated string.

Disclaimer: For smaller or much larger arrays or other datatypes the above results may not apply.

Features of now having larger thumbnails in the gallery views:

Example thumbnail

• 20% larger thumbs: now 146×90 px (was 130×80 px)
• better image quality - a lot clearer, better colors and more detail
• 30% smaller file size -> faster loading of gallery views

Read more about this in the forum (and how to clear your browser’s cache to expel the old small size thumbs): http://www.thebroth.com/forum/viewtopic.php?p=5892

The improvement of large artwork thumbnails was made possible thanks to using a different graphics library than before. We used to use PHP’s built-in GD library, but we’ve now switched over to the vastly more powerful Magickwand library.

Magickwand’s documentation can be considered to be somewhere between “sparse” and “non-existent”. There’s a whole bunch of functions (434 different Magickwand functions, can you believe it?!) and they are each somewhat documented, but how to actually achieve anything at all in concert, that appears to be somewhat of a secret.

How to use ImageMagick for PHP

We recently achieved some loading, resizing, positioning, framing, rectangling, etc using MagickWand with our live active rooms preview image. If there’s interest, I’ll post the whole source code in the developer blog.

In fact, I think I’ll write a whole bunch of developer blog entries (or a whole darn book!) on how to use ImageMagick for PHP. I bet other programmers have had similar challenges trying to wrap their minds around how to use that beast.

If you’re used to GD library (or if you’re unfamiliar with graphics libraries), I can tell you, it’s not all that obvious how to use Magickwand for even the simplest graphics tasks, let’s just say that. :-)

How straight up tiles used to look

Rotation of tiles in 5 degree steps. Star-like and disk-like objects can be created by placing tiles in the same position but with different rotation.

For the longest time, tile rotation remained elusive, caused by the implementation of TheBroth using Javascript that provides only limited means for advanced graphical effects. We thought it would be REALLY worth having tile rotation though, so we eventually decided to reprogram TheBroth core functionality in Flash. We’re making good progress, and hopefully it is only a matter of weeks until the potential of artworks on TheBroth is GREATLY improved.

I can hardly contain myself, so enormous is the excitement, but in a nutshell: It rocks. :-)

Rotation in artwork thumbnails - it’s not visible!

Anyway, this post isn’t really about tile rotation and all the other nifty things that are possible thanks to moving TheBroth to Flash. In fact, it’s about the interesting effect that tile rotation is simply not noticable at all when looking at thumbnails.

Without further ado, let’s jump straight to the proof. The following are thumbnails of the exact same room, shown with rotation of tiles and without.

The first one is a little birdy. It’s a very nice piece of art. I took the liberty to import this snapshot into a private room with an early alpha of Flash-enabled tile rotation. I am not exactly a gifted artist, but it was a breeze to smoothen out the image by rotating some of the tiles.

Here’s the result (all images saved as JPEG with 45% quality setting):

With tile rotation, 146×90 px

Original image, 146×90 px

While the above images are actually different on a pixel level, the point is: They LOOK the same.

Needless to say, using our current thumbnail size that’s even smaller (130×80 px), there’s even less of a difference - if that makes any sense, since there is no visible difference at the larger 146×90 px resolution either.

To really see any noticable difference, we would have to make the thumbnails a lot larger. Here are the same images, this time at 219×135 px resolution (click to see the full 730×450 px versions):

With tile rotation, 219×135 px [Full size]

Original image, 219×135 px [Full size]

The images above clearly show the difference. The right one is very jaggy and pixelated.

For the mathematically inclined, the observation of “missing” rotation in the small thumbnails doesn’t come as a surprise. Rotating a tile at 45 degrees creates an object that extends the original square area by only 2 pixels at most; less so at wider angles. The tile size is 10 pixels. A thumbnail of 146×90 is exactly 20% in dimension of the original size (730×450), which corresponds to a 10x smaller area. In the thumbnail, each tile is at best reflected as 2×2 pixels, and the tiny 20% extension that the tile may experience at some angles is simply above the sampling frequency and thus won’t show up in the thumbnail.

Many people rate images in the gallery view, before even (or ever) looking at the full size artwork. The question will be, is the absence of rotation in the thumbnails a good thing, does it matter at all, or is it a bad thing?

I look forward to your input!

In the past, changing a seeding image in an image application such as Photoshop was at best a hit or miss situation. Well, this has now come to an end. A new feature allows you to recreate a seeding image that has exactly 1000 pixels, with one pixel for each tile.

Members

The image that is being created by that new feature is very small, since it takes only 40×25 pixels to represent 1000 pixels. You can now load this image into your favorite image editing software and change the color of any one pixel. Zooming in may help to achieve that.

Simply reseed your room with your adapted tiny seeding image (see how fast it is if you use a small image?), and there we go… every pixel in this image represents exactly 1 tile.

Don’t worry about this 40×25 image to be a very distorted version of the image you originally used. The width and height of this image is probably not that same as the original image, but that doesn’t matter - when seeding, what really happens is this:

The image that you load is firstly resized so it has approximately 1000 pixels, or any value close enough to that. This means that if you’ve been uploading large image files, you’ve been doing yourself no favor - it just takes a very long time to upload that image and then to resize it. My tip is: Resize any image that you upload for seeding so that the largest edge is only 60 pixels or less. Yep, that tiny, since the image seeding algorithm is going to discard any extra pixels anyway.

So - upon recreating the seeding image, 40×25 dimensions are enforced. That’s probably not only the wrong aspect ratio but the image may look terribly distorted or skewed. Once again - this doesn’t matter. When seeding, TheBroth will look at one pixel after the other, row by row, column by column, and just use each pixel color for one tile color. I hope this makes sense.

So, where’s that tool? Well for now it is here: http://www.thebroth.com/seedingcolors.html?room=members

Replace “members” with your own room name or any other room that you have access to. It’s not possible to get to the seeding image of password protected rooms.

Now, that’s not a bad feature, but in addition we also added the ability to upload not only JPG, but also PNG and GIF files. For example, the little image that is being created by this tool is a PNG file. When using this new feature, make sure you save the image in the same PNG format, and not in JPG format - otherwise you may get unexpected results (JPG features a “lossy” compression scheme).

For those intending to use external software to subscribe to the feed, the URL is
http://www.thebroth.com/feed/notificationsXXXXX.xml (XXXXX corresponds to your user id). On your profile page, just mouse over the orange RSS icon and copy that URL into your reader.

Desktop Feed Readers

Modern browsers such as Firefox 1.5+, IE 7+ and Safari2+ can handle RSS feeds such as TheBroth’s, but in general desktop software for feed reading offer a lot more features such as images, audio/visual notifications, and much more.

Recommended feed reading software for your desktop (all of these are free):

• Feedreader (Windows)
• Vienna (OSX)
• Liferea (Linux)

If you know of any other good feed reading software or can think of anything else that should be included in the feed, please mention it in the forum.

Important: Please don’t set your feed reader to check for updates at an interval any shorter than 5 minutes. Doing so will not be of any benefit as the feed data are currently cached with a lifetime of 5 minutes.

Subscribing to the feed using your browser

To subscribe to the feed using Firefox 1.5+

Visit your profile page. A ‘feed’ logo should appear in your browser’s address bar (it’s the little orange logo):

Click on the orange icon and click on the ‘Subscribe Now’ button that appears on the next page.

A dialog box asking you to ‘Add live bookmark’ will appear.

Click ‘add’ or ‘ok’ (the actual text can depend on what OS you’re using).

A new entry should appear on the bookmarks toolbar folder:

You can click on this to see the feed content.

To subscribe to the feed using IE7+

Visit your profile page. A ‘feed’ logo should appear below your browser’s address bar (it’s the little orange logo):

Click on the orange icon and click on the ‘Subscribe to this feed’ link that appears near the top of the next page.

Click ‘Subscribe’ on the dialog box that appears.

To view the feeds that IE7 is subscribed to, press CTL+SHIFT+J.

To subscribe to the feed using Safari 2+

Visit your profile page. A ‘feed’ logo should appear in your browser’s address bar (it’s the blue ‘RSS’ logo):

Click on the ‘RSS’ icon to view the feed, and then click on the ‘Add Bookmark…’ link that appears in the sidebar.

Until now, there was no easy way to keep track of comments to your blog posts, because you can’t easily see an overview of all your posts that shows which posts have new comments that you haven’t seen yet. Maybe we’ll have a feature like this one day - the main problem with it is that it doesn’t scale well if you have a LOT of blog entries.

So, we’re now offering an email notification service. When you go to your own blog pages, you’ll find a checkbox on the right hand side, labeled “Email me comment alerts”. If you switch that on, you’ll get an email sent immediately. It will contain a short message and a direct link to the blogpost with the new comment. Naturally you can use that link to switch off that feature if you’re just getting too many of these notifications.

We also plan to offer a whole number of other email notification services, for example, when there are new comments to any of the snapshots you’re tracking, or when there is a new comment to any blog that you’ve subscribed to, or possibly whenever a new artwork has been placed in the public gallery.

Rest assured, these are all optional services, and by default they are OFF. You will have to actually opt in and tick the checkbox for the corresponding service before we inundate your email inbox with all these notifications. :-)