I needed a DropDownList with multiselect capability and wasn't entirely impressed with Googles offerings. Wondering why the DropDownList doesn't support this in the first place (after all, DropDownListBase does extend List which has this feature), I discovered this intriguing comment in the source code:
// Don't allow this value to be set. If the multiple
// selection related properties are set and
// allowMultipleSelection is false, List will
// select the first item passed in.
return;
}
After a brief attempt at manipulating the original component, I got annoyed and wrote a simple one which full fills my needs. I know, "No blog post for years and all we get is a lousy flex component?". Such is life. I'm sure the same code has been written a 100 times by others, but I thought I'd share it anyway.
So, click the image below... You can punch in your (or another) Twitter handle, specify the number of "wanders", click GO and watch the twitter profile pic being drawn by the tweets of the profile pics proud owner. The default is 10 wanders, but 40 or 50 run smooth if you're impatient
So how did I get there? Like this. The following images are a random selection of people I follow on Twitter, rendered as I was progressing with the code.
I started off with just squares, which looked kind of nifty:
I then moved on to text. I started off using regular TextField :
The mighty @wefail
While fun to watch, the text was practically unreadable, so I increased the font size and added a GlowFilter to create a fake stroke:
Here's a full size detail, the text was too big (tough to recognize the image), but damn, the black text with white stroke all piled up like that looks hott!
I had some difficulty with the spacing of the text, so I moved on to the TextEngine instead of TextFields... immediately I ran into some bugs...
I thought it would be fun to have a gradient in the characters instead of a solid color. Instead of grabbing the pixel which corresponds to the center of the new character, I grab one from the "top center" and "bottom center" of the new character. The result isn't necessarily more "recognizeable", but looks nice. I also added a couple more controls : font size, background color and font. That's right, you can now render your image with Comic Sans! Rejoice!
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...
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...
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:
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
