sakri rosenstrom blog

I submitted my Irritating Puzzle blog post on reddit yesterday. (link to comments)

Quite confident the submission would just sink into oblivion as usual, I went over to our neighbors for some dinner.

A few hours, and to my surprise 9121 visits later, my blog was replaced with an austere, and rather embarassing 403 forbidden message.

Wordpress is quite the resource hog… I’m attempting to install WP Super Cache for the unlikely recurrence. Anyway, the stats I did get during those glorious hours were interesting/funny.

At the time of writing, the submission has 103 up votes 55 down votes. I would have assumed that would add up to maybe, oh, 300 clicks. Infact, every Reddit vote represents nearly 100 clicks.

I record events using the AS3 Google Analytics API, 41,314 of them to be exact.

• The reset button was smacked 30,973 times
• The show solution buttons were clicked 9,211 times
• The average user hung around for 05:06 minutes
• The puzzle was solved 103 times

How about those enticing Google ads to the right? Grab a hold of your chair…. 1 click! I’m RICH!!!!

I included an event which fires on every “move” which is a multiple of 100.

I felt pretty crap about my 700+ solution, but it’s good to know I’m not alone. Infact:

• 141 people attempted solutions with more than 800 moves…
• 27 did more than 1500…
• 15 over 2000
• 2 people moved those pieces over 4200 times

And the Grand master of patience / self irritation / epic suffering, moved the pieces over 5500 times!!! . Dang!

The solutions to this game are available with the manual that comes with the game, so it’s well possible that some people just followed that. Nevertheless,

• The best solution was 48 moves, second 54 then 114. The first two didn’t submit their solutions, so might be coming from one of those guys that scour the web for flash games on which they can use their 1337 Charles skills on.
• 22 people solved it with less than 200
• 5 with between 1000 and 2000

and finally…. that poor son of a bitch who moved pieces over 5000 in one go?

HE SOLVED IT!!!

WITH 5516 MOVES!

Hat’s off to you

UPDATE1: As pointed out by a helpful redditor called “ijanos” this game is called “Klotski”, wikipedia has an article about it http://en.wikipedia.org/wiki/Klotski

UPDATE2: I’ve uploaded a new version with the solution from “Henrik”.

UPDATE3: I wrote a blog post about stats regarding this game here.

I was over at a friends house for New Years. He had received this “annoying puzzle” as a Christmas gift. I spent 10 minutes fiddling with it, until my wife politely yanked it out of my hands. Before leaving I took a photo of the damned evil thing, thinking I’d quickly make it in flash and solve it on my own time.

The objective is to move the pieces around until the Big Red Square reaches the bottom center. At the bottom side of the box, there is a thin slit. The Big Red Bastard is “thinner” than the others and once in position, it can slide through. Couldn’t be simpler eh?

As planned, I quickly shit together a working copy of the puzzle.

I kid you not, solving this hell spawn took me longer than coding the shitty game!!! I saved my solution for posterity, and it contains a most embarassing 759 moves

So, are you as retarded as me? Try it out:

(oh yeah, mind the elite graphic design and sizzling game play, only one piece can move, one step at a time)

If you do manage to solve it, the “moves” are automatically printed out in the text box. In the likely case that you have less moves than me, just select all, copy and paste the solution in the comments below… I’ll add the solution into the flash and upload it again…

*enjoy*

This was a fun quickie. I’ve always wanted to try creating Northern Lights with Actionscript, and here was a good excuse. I’ve seen the real deal in Finland, and though my demo doesn’t act (or look) exactly like aurora borealis, it does use the Circular Wander Class I blogged about last week The code is pretty straight forward, the “trick” being that I take the y value of the “leader” (an instance of CircularWander), and cast that to the Z value of all the following particles. A little Blur, and voila. Then for lack of inspiration, I made it into a sound visualizer.

I used this random Image from Flickr as my source of inspiration:

Here’s a screenshot of the demo.

Click image to see demo WARNING: 3megs… there’s an embedded sound file…

Here be the source files (without the .mp3, that would be file sharing?!)

I just added the code to the CircularWander.zip from the previous blog entry…

Hope you like it!

click here for the source code It’s relatively clean, even contains some comments.

I get about 20 fps with 3000 small particles (radius1). This can vary depending on other settings like max/min degree of rotation…

So how did this come about? Funny you should ask…

While working at Sony Back in 2003, I made an “all around preloader”, which was to be used for flash showcases, apps, tutorials etc. At the moment Sony was using these “blobs” in their branding:

Armed with Flash6, I used the drawing API to make it into a dynamic animation:

Click image to see it in its never ending glory

That’s the only working version I could find. There is an FLA, but I dare not open it.

Unfortunately, the loader never saw the light of day, as Sony rebranded within weeks of me finishing the code

The most interesting aspect of the loader was the random movement of the blobs. It’s not what I wanted. I wanted the circular wander motion. Time just ran out back then. Every now and then I’ve pondered going back to the problem. I was inspired to finally get off my ass by Grant Skinners recent post about his Wander Class. So it took me 7 years…

The basic premise is simple:

Any particle travelling along the perimeter of a circle, can “smoothly” switch circles, as long as the next ones center is along a line perpendicular to the particles current moving direction.

The problem is, how do you restrict this movement to stay within a given rectangle?

The solution is easy to see when visualizing it:

There are a few “maximum circle sizes” along the blue “axis line” which fit the wandering bounds. Once the radii of those circles are discovered, it’s just a matter of randomly selecting a point along the line, between the “maximums”.

But how to find those magical maximum radii?

There are probably several ways. After blankly staring at a few sketches, I was suddenly reminded of my Highschool Math teacher Mr. Rosko. He would say the term “Isosceles Triangle” in a tone of voice, that sounded like it was something that could get you laid.

Needless to say I never tried that one on the ladies, but for this baby, it did just the trick.

Not only do isosceles triangles have two equal angles, they also have two sides that are the same length.

Now, let’s look at another mindblowing illustration:

In other words, due to the nature of a circle, an isosceles triangle appears between the current position of the particle, the maximum radius center, and the edge of a boundary. So at this point, here’s what we know about that triangle:

• All the angles in the triangle. These can be deciphered with simple arithmetic.
• The point currently occupied by the particle.
• The equation of the line between the particle, and the new center.
• The X (or y) of the point which intersects with the bounds.

In a nutshell, we pwn that sob.

There was some trials and tribulations with maintaining the correct direction when switching circles, and choosing the best circle for the job… more about that if you look at the code

enjoy!

I know this has been done before, probably much more efficiently, but I had an idea wednesday and had to pursue it to its conclusion

The other day Katopz pointed me to this snippet which triangulates polygons. I’ve also seen an approach to ear cutting by nicoptere.

I figured that by converting an “O” into a “C” leaves me with two polygons which are easy to triangulate. Allow me to elaborate:

So the idea is just to cut out a rectangle (two triangles), which connects the polygon and the hole. Triangulate the “cut shape” and then concat the extra two triangles to it. But which rectangle to choose?

I wrote a class called PolygonWithHoles.as . This contains a polygon (Vector.<Point>), and holes (Vector.<Vector.<Point>>). The idea is too loop through the “holes” one at a time (cue beavis and butthead). The safest bet is to find the shortest “connection” between a point on the main polygon and the hole (done by looping and using Point.dist()).

This too has one stipulation. In order to have a rectangle, the code has to find the “shortest connection” either before or after our initially picked “shortest connection”.

Once the “cut out rectangle” has been discovered, the perimeter of the main polygon and the hole are merged through a few loops. If there are more holes, the now modified main shape is chopped again and again, eventually resulting in a “hole free” polygon. This can then be triangulated, and the “removed rectangles” are appended as sets of triangles.

Click image for demo

This approach seems to work well over 90% of the time. A few characters in some fonts do throw an error… not sure why. The triangulation is pretty fast, you can see this in the tracebox in the demo. The vectorization of the text is the slow bit.

The next step, of course, is to extrude the characters using textures Maybe even add shading some day…

The code is more or less legible this time, eventually I hope to clean this up into some sort of an API… Once again, the download is a zip of my always expanding “FindBitmapPixelOutline” project… download it’s latest incarnation here. The project you want to look at is “TriangulationTest.mxml”. Warning, it’s 6 megs with tons of crap you probably don’t want

.