Puzzle It! - project on the knee.

Puzzle It! - online puzzle generator with the ability to build these same puzzles right in the browser window. Below I would like to tell the story of the creation of this interesting tool for me.

Once sitting in the evening and looking through Habr, I stumbled upon a note from a friend ganzer that a person is looking for an appropriate puzzle constructor to meet his needs. Everything would be fine, but I myself, as an amateur of killing several hours behind this occupation, noticed that there are no pleasant and “right” tools in the network for creating a simple puzzle that you can immediately assemble.

And here in the back of the mind an obsession began to itch. This is where it all started.

Before the start

Once again checking the search engines for the presence of such a service without any restrictions (java or flash referred to such restrictions) I decided not to search in vain and, indeed, to take and make such a designer myself. But in a simple place it was not interesting to do it, I needed some kind of goal. For me, this goal was the motto “Just For Fun” and I enthusiastically set about thinking about my future brainchild. Having determined that, after all, the creation of particles of a picture would be the basis of everything, I decided that the first thing I would do was just that.
')

Simple math

The first thing I took up after the annoying thought began to take shape in a beautiful picture of the future service is mathematics. To be more precise, ordinary planar geometry with its eternal laws. It was necessary to determine how and what aspect ratios should be fundamental for the future part of the puzzle. With still not damping enthusiasm, I undertook to draw a geometric model of a particle of a picture, build formulas for calculating the basic aspect ratios and functions for determining points on the coordinate plane, trying to implement all the mechanisms obtained and ...



And after two days that I spent on a math reference book with a pencil, ruler and open Inkscape, I realized that such a model is not just big, but very cumbersome and cumbersome. Dee and time to get the right result was spent a lot - what is worth only that on my working laptop 1 piece of the puzzle was generated with the resulting model for more than 2 seconds from the original image. Now, if we imagine that there are a lot of such particles (there are 400 of them in a 20x20 puzzle), the picture turned out to be very disappointing.

It was necessary to have some kind of visual simplification of the puzzle - and I decided to limit the “randomness” of the choice of the side of the puzzle to 4-5 options, which was enough for a decent randomness of the resulting part.

Handbook of mathematics again went to the shelf.

Process

After the simplification decision, I realized how wonderful Inkscape is. In it, I quite simply made all the variants of the parties and very quickly exported all this to PNG as the main material for the production of particles of the image.

Then everything went as it should be. The fundamental dimensions were determined: the size of the visible particles without the "tails" - 50x50 pixels. Accordingly, the size of all downloaded images should now be multiples of 50.

The decision to resize the image has become one of the cornerstones of the entire project. Resizing was implemented by reducing the original image, if it "did not fall" in the desired size in width, and then - cutting to the height to the desired size. This made it possible to avoid problems with rescaling the image, however, it can cause an interesting point if there was something important in the 49 pixels that were cropped from the bottom. So far, I have not seen the correct and Orthodox solution to this problem, which would allow to avoid the “help” visible directly on the puzzle pieces in assembling the image in the form of lines and other artifacts.

We continue to work. Now I had a picture ready for processing. What to do with it next?

Then came the most interesting moment - the process of building the "matrix" of the whole puzzle and, in fact, the production of all the images of the puzzle pieces. From the very beginning, the PNG format with its 8-bit transparency was chosen as the basis for the puzzle particles, but there are still problems with it in IE6, which I, unfortunately, cannot even test - the filters in Linux IE6 refuse to work. Nevertheless, the format allowed me to do what I wanted from him.

Each element of the final matrix in the total received coordinates on the original image and 4 values ​​for each side. In the sense of the side, I kept the type of side (if you noticed - there are only 4 of them) and “invert” - i.e whether the side is convex or not.

After receiving the matrix, it was possible to run through all its elements and make the final parts of the mosaic. In general, everything is simple here - the pixel with the coordinates from the original image was copied into the final image with the alpha channel value that was in the “blank” side, well, the rest of the side was filled point by point with a triangle towards the center. Good - it is implemented very simply. Visually, this whole process is shown in the picture.



In general, good knowledge of GD helped a lot in this part - I was very actively communicating with this library. The only thing is that pixel-by-pixel copying is still resource intensive.

Another pitfall that came up on the way is a relative change in size due to different finite image sizes (the random bulge of particles made itself felt and regularly sent breathtaking greetings). Therefore, sometimes if () constructs were obtained simply monstrous and another way was immediately searched and pieces of code were rewritten again.

After all the ordeals with the production of particle images, an image map was solved, i.e. A matrix of parts to put in a separate indexed database table.

Assembly

It is also worth mentioning the build process. All Javascript functionality is implemented on jQuery, but the standard Drag'n'Drop (where would you be without it in such a game?) From the jQuery.UI package differs with a fair amount of inhibition in FF, so I started searching for a more lightweight solution. And still found - webtoolkit Drag'n'Drop. If in the future you will have similar tasks - try. There is nothing superfluous in this implementation and it works just fine.

Feedback from my friends and comrades to whom I showed the future brainchild helped me a lot when designing the assembly. It was after discussing the assembly process that the “sticking” of the pieces to each other appeared in case they are in the right place and the movement of the whole pieces collected. It is worth mentioning the separate dragging of whole pieces - implemented the same way on jQuery with some modification of Drag'n'Drop. When several pieces are combined into the correct construction, they form a “colony” with their unique id. And when moving using jQuery relative to one of the pieces, all the other members of the “colony” are also moved. It's simple, but it works great.

Just here, right in the template was made a simple function of the "randomness" of the falling-out particles of the puzzle on the assembly screen. Of course, a bit is not what I wanted, but it works.

Habraeffekt

We also had to think about this part after it took more than 30 seconds to produce a full image map on a working laptop and the PHP marketing restrictions worked. Therefore, during the next day, the simplest single-threaded daemon with a queue was written, which was completely designed to produce puzzle particle images. In general, most of the image generation was taken from an existing mechanism and slightly corrected relative to the daemon.

After the tests on the hosting, I decided that a delay of 0.25 seconds to process one image would be quite enough for normal operation.

It was after the introduction of the demon appeared screen with a request to wait a bit. Still, the life and health of the server is much more expensive than my service and you need to put up with it. A hostel after all, albeit a very pleasant one for me.

Routine

Yes, I'm a little stuck on this. I do not really like routine work, but then I had to do it as part of the generally accepted reality. At this step, a FAQ was written, reviews were made, page design was slightly worked out, validators were corrected for uploading images and comments, some semblance of the main page with the last loaded puzzles was made ... In general, nothing was done without which Malsky project.

Sometimes you had to force yourself. Poor FAQ for 15 questions was born for 10 hours V_v.

But this step was defeated.

The end

After the final scouring of all the pages and checks of the functionality, I uploaded the source code to the hosting server, launched my demon there, and slowly began to rejoice that the first step to capturing the world was done - I had the first service with my idea, which is not so widely spread in the network, as could be.

Of course, this puzzle generator is far from perfect. Here is a short list of what will be implemented soon:

• Changing the process of creating particles using Bezier curves instead of satic layout images
• Preservation in any form of the provisions of the particles in the "unfinished" puzzle. It will be convenient if the puzzle is large and you cannot collect it for 6 hours in a row.
• The ability to flip particles by clicking the mouse and, accordingly, a random flip when displaying.
• Multithreading daemon for faster getting the final puzzle.
• Puzzle Assembly Timers, Collective Assembly Mode From Multiple Computers
• Commenting the puzzle itself

And this is only the first thing that catches your eye. But the work has already begun, and if the service interests anyone, I will continue to work on it. And if I don’t interest me, I won’t throw him all the time ^ _ ^ As for me, the thing is very interesting and promising.

I would like to add that the whole service was made Just For Fun and did not mean any material return. But if you have ideas on how to make it profitable, I will listen with pleasure. And in general, if you have ideas for improving the generator, I am always at your service.

Dares project: puzzleit.org.ua

You can assemble a test puzzle at: http://puzzleit.org.ua/puzzle/cb287c8f7d69827344d053d0f0b97362/

In general, such a small story.
Thanks for attention.

ZY Merry Christmas!
ZYY.Y. Special thanks to Habrahabr and his users for articles on stylized input = file and building multi-threaded demons. Very helpful.