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

In its own blog, one the Digg’s CEOs defended the censorship, saying that he had to prevent Digg.com from being shut down by lawsuits if they hadn’t removed the offending hex code.

Digg.com’s front page, at the time of writing

Digg users wouldn’t have any of this though. The front page was completely flooded with new stories about Digg’s censorship, repetitions of the hex code, and comments of disgruntled users who had their stories their deleted and/or the “dugg” count on their stories reduced.

When I visited digg.com just an hour ago, many stories where in the 4000-5000 diggs range, and other bloggers reported record digg counts as high as 15,000. Digg reacted, at first by disabling the posting of new posts, but eventually they decided to take the whole site offline.

In their stories and comments, many users argued that Digg wasn’t going about this issue the right way, and many even predicted that today will mark the death of digg.

Being responsible for a community site myself, this phenomenon certainly is telling. Don’t upset your community, is the lesson to be learned. Granted, the people responsible at Digg probably saw themselves sitting somewhere between a rock and a hard place. On one hand, there’s the law to be upheld, on the other hand, there is a community and a certain spirit that has made Digg into what it is today (or was yesterday, at least).

Digg’s not alone: Google/Youtube faces similar problems. On one hand, copyright violations are extremely common, on the other hand, taking a tougher stance against its users may be an extremely unpopular move. Those with high powered lawyers and big pockets to pay them will probably first opt to withstand and fight legal threats, and it’s exactly here where Digg users blame Digg for having caved too quickly. The issue is even trickier as HD DVD itself was a sponsor of Diggnation.com, a popular webcast associated with Digg.

We’ll see whether this will blow over and whether it will, believe it or not, even strengthen Digg to become even more popular. Remember when Wikipedia.com received all this negative publicity about having more errors in its content than Encyclopedia Britannica? During this upheaval, Wikipedia’s traffic doubled(!) and continued to grow with reinforced strength.

So maybe there is something in the old saying of “what doesn’t kill you will make you stronger”.

And now go and digg this, if you can.

The highlight of the conference for me was Jimmy Wales, the founder of Wikipedia. His vision is for every person on the planet to be given free access to the sum of all human knowledge. Not long ago, Google.com was the source of all information, but now, there’s not a day that goes by where I don’t visit Wikipedia for information on, admittedly, anything and everything.

I was excited at the opportunity to meet Mr Wales. It goes without saying that I have incredible respect and admiration for his vision, his ability to see it through and make Wikipedia what it is today. He’s an inspiration for my own modest efforts to contribute to a better world. Most people think of movie stars and pop singers as celebrities, but for me, Mr Wales is a true celebrity. With Wikipedia, he’s helped shape the world today and for generations to come. Just like how many of us grew up thinking the television has always been there, our children and children’s children will be born thinking Wikipedia has always been there.

I attended this conference with some expectations. Not only would I be privileged enough to hear Mr Jimmy Wales speak at the conference, I would get to meet like-minded people that were interested in collaborative sharing, and it also seemed like an opportunity to get the word out about TheBroth. I had to restrain myself a great deal when it came to my eagerness to tell everyone about TheBroth (which wasn’t easy).

Jimmy Wales, founder of Wikipedia, in Perth, 24/04/2007

During a break, I asked Mr Wales to pose for a photograph with the big presentation screen as a backdrop. From the expression of his face, I would think that I may have startled him with my request. At the end of the conference, I may have startled him yet again: Against my instincts, I walked up to Mr Wales and rudely forced my business card onto him. I know my action was very “in-your-face” and he may have really begun to wonder about this stern looking bald fellow (me!) but I wouldn’t have forgiven myself if I hadn’t taken that chance. However, Mr Wales gracefully took my card and dutifully stowed it away inside his jacket pocket, most likely together with many of the unsolicited business cards he received that day. There’s hoping he’ll look at it and comment on our project :-)

The conference itself was very insightful. There was a consensus amongst the attendants that the biggest hurdle with knowledge sharing was to create a culture where it’s actually considered possible and “normal” to share information in a wiki-like environment. No doubt this will take a few more years in many institutions.

The internet is changing our lives more rapidly than even the most radical visionaries could have imagined. It’s exciting to be part of this!

Tags: eduausem2007

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).