V1

A few weeks ago, in Amsterdam, Ralph explained a bit about it during his session. And then finally yesterday (actually the day before…), I bit the bullet and spent the evening making it happen. Only 4 hours later I had a first version that got pretty close to it.

Check this very first edition on the following URLs. The text is generated using AS3, so you can just make it show any text you want. Just change the URL params

• Particle fun V1 (with blur)
• Particle fun V1 (without blur)

The particles move to a perlin-map (red & green) with text in front of it. The color of each pixel is used to determine whether the particles has to move up,down,left or right and how far. Not how fast… That left all particles moving almost equally fast… Which is kind of a minor downside to me… Seeing how it almost was 6AM, I felt it were a good idea to catch some sleep…

V2

When I woke up a few hours later, I felt the irresistible need to improve the effect of the particle swarms and optimize some code in order to squeeze a few more frames per second out of the code.

I ruined the rest of my day coming up with another version. This time the perlin-map’s color would not just serve as a guide who tells the particles where to go and how far. The map would actually act as a force field: Each pixel would accelerate the particles on both the x and y-axis. As a result: we have now very different speeds of particles! And it looks pretty cool too! Example below. The text can be controlled using the URL parameters.

• Particle fun V2

Watch out! Nerd time!

This final version (well… final…) looks pretty good in my opinion. A few details about it:

• 25000 particles (1 particle = 1 pixel)
• runs up to 85fps (Capped this at 50fps, otherwise it the animation would be too wild)
• The bitmapdata object’s dimensions: 750 x 350

Most important things

During this experiment I learned a lot about optimization. A few things that might come in handy some time:

• Instead of using setPixel() for every single pixel you wish to animate, only update the bitmapdata once using setVector(). You can get the vector of pixelvalues from the bitmapdata obj using getVector(). Then change the values in the vector. When done, appy the new values to the bitmapdata object using setVector(). This will give you some valuable milliseconds (believe me: every millisecond counts when doing 25 000 loops per frame)
• Instead of looping through long arrays  (or even vectors) use linked lists: They’re easy and fast!
• Bitwise operations might look very unhuman, but they can buy you a great deal of milliseconds! Make sure you check the bitwise possibilities that there are out there. A lot of great minds have shared ‘common’ calculations in the form of bitwise operations that turn out to be just a bit faster.
• Think a lot about what kind of calculations you’re going to make and most importantly: When? For example in my first version: I get the pixelvalue from the perlinmap every iteration of the loop (times 25 000). However in version 2, after generating the perlin map, I immediately calculated the forces of every pixel and saved the values in a vector. I then request those values in the loops. This kind of precalculations will give you valuable milliseconds per frame and thus more fps.
• When editing pixel per pixel, make sure to lock()/unlock() your bitmapdata. That will prevent the bitmap from updating after every change. Again: giving you more milliseconds for your viewing pleasure!

I can’t really post any technical optimization tips (since I really just got started myself) but there are tons of articles out there on this topic. I suggest you check those out for more practical optimization tips.

I’m looking into doing more experimentation regarding particles. If you have any optimization techniques that I should know off, don’t hold back to educate me Either way: I really love this, so stay tuned!

Sources: Click (Flash Builder 4 project)

It was really great to see how Playr popped up on different blogs; Sometimes mentioned as part of a project/experiment, sometimes mentioned in lists of handy AS3 classes. That really made me happy and it inspired me to add even more features, and make it even more useful. But those are to yet to be built

For now I just fixed a few bugs and I added a pretty important feature which wasn’t there yet: the debug property. Set debug to true and Playr will trace any errors that occur without breaking your app, without you having to listen to these errorEvents.

I also changed the shuffle internals (I still wonder what I was thinking when I wrote a ‘setShuffle’ instead of simple getters/setters…) and as far as I know: Nothing seems broken after updating old projects using Playr to the new Playr version (but I’ve been wrong before…).

And the last thing I want to mention: I changed the way Playr handles stream errors. The old version would just skip the track, and try again later. However I think the new implementation is better: The ‘broken’ track just gets removed from the playlist before proceeding to the next track.

So there you go: It’s online, it’s free, it’s open-source, it’s for you to use and save time!
(And it’s created by me, so you’ll probably find bugs sooner or later: Do tell me about them and I’ll look into fixing them )

Happy playing!

Playr Site: Playr.noCreativity.com
Download Playr: Click
Playr Documentation: Playr.noCreativity.com/docs

But it’s still an independent application hacked into WordPress using basic widget.  That means I can’t just share the code so you can use it too on your website (since you’ll have to set up a database, fill in config files, etc… Boring stuff). So yesterday I decided to compact this into a handy WordPress plugin.
And this is what I did: I give you Dooodl!

[UPDATE] Mark asked me to share the source of the Dooodl Creator App, so I did Feel free to send me links to your own creator. I might add different creators to the plugin, and let you choose in the WP-admin which one you’d like your visitors to use

Plugin page: http://wordpress.org/extend/plugins/dooodl
Direct download: http://downloads.wordpress.org/plugin/dooodl.zip
Dooodl Creator source (Flash Builder Beta): Click

If you install it, feel free to drop me a line. Feel free to post the url to your blog as well. I’d be happy to see who’s using it and what people are drawing

(And yes: If you find any bugs, do post them as comment underneath )

Have fun!

So I started moving some code around and after a few minutes, I found myself rewriting the whole thing… That’s not a bad thing since now we’ve got one handy class that can do about just everything a Bezier Animator should be able to do.
Demo time!

There’s still a little bug somewhere which allows the target to ‘run away’ from the bezier, and I haven’t gotten quite to the root of the problem, but I really felt I had to share this. Also there are some imperfections when you disable the orientToPath and scaleByPath properties. I will look into fixing those asap.

I really love the idea of animation movieclips using bezier curves. It looks so natural and yet zo intriguing… I will do some experiments and upload them later on, showing the coolness behind this simple animation engine.

Sources
Download the above demo source (Flash Builder 4 project): Click
Download the BezierAnimatioin class: Click

A few weeks ago I had to create an innovative way to scroll in a page. I have seen tons of scrollbars in Flash and I found it hard to create something completely new. At one point I wondered if I could wire the scrollbar to a webcam using Actionscript… So I started experimenting around…

When I first started I quickly ran into a problem: How the hell do I know if anything is moving? So I actually got stuck right in the beginning.
I went on a Google trip which led me to Koen‘s post about motion detection. Koen was checking all the pixels (using nested loops) to calculate color values. I figured this generated way too much overhead. There had to be a better/simpeler way.

In his post Koen mentioned an article, written by Guy Watson, concerning an other way to get motion detection going. To make things simple: Guy just takes 2 pictures – one of the previous frame, one of the current – puts them on top of eachother, and applies the difference blend mode to the upper one: Tadaaa! There we go! The ‘unchanged’ pixels are blacked out. The remaining pixels are the difference in the picture… which reflects movement.

So I went back to Flash and put something similar together. All I had to do now was clean up the image, turn the difference remainings white, and detect what in the picture remains white.

That last part turned out to be quite tricky too. When I first got to that milestone I quickly checked the BitmapData class for intresting methods, but I didn’t find anything intresting. Later on, I talked to Peter Elst and Koen at Flex Camp, and they told me to look again because there actually was a function: getColorBoundsRect()

There we go: that’s a solution right there! And it worked out just fine!
You can test it for yourself in this little test application – requires a webcam (duh!)

Download

Flex Project source: source.zip
Webcam motion detector class (Actionscript 3): MotionDetector.zip

I was planning on adding a ‘sensitivity’ property for motion detection but that turned out to be a bit harder. So I decided to postpone that for now (procrastination is a bitch )
Feel free to suggest better ways of doing this. I’m still pretty sure I’m creating a bit too much overhead to make this work

After I downloaded the theme I realized a lot of features were missing: No searchbox, no searchresults page, no archives, no global archives, no blogroll support, no pages support, no 404 pages and a few design flaws…

I actually went on, and built those things myself. Later on I wanted to contact the orginal author (Patrick Behrend) of the theme to send him my updates but by the time I got to send my mail, his site was down and he completely dissappeared from the web. I never received an aswer regarding the theme updates I sent him.

UPDATE: Patrick commented in on this post and I got in touch with him. Patrick seemed pleased I kept the theme alive. I updated the URL in the footer which now links to Patrick’s (new) site. Make sure you go check it out and leave him a comment

By now the original download isn’t even online anymore, and Smashing Magazine disabled the link to the SuperMini theme (as it is a 404). So I recently decided to finish the theme, and translate it back to English and re-publish it. I thought the initial theme was awesome, and I figured it would be cool if other people would be able to actually use the completed theme.

I think Patrick did a great job designing a very clean and simple theme, which doesn’t look like most other WordPress themes.

SuperMini V1.0

Download: Click
Preview: ikDicht.be

Screenshots

It’s a one column theme, showing the latest post. Other posts are shown, but only the title and post date is visible.Pages and blogroll links are also featured in the same column, in almost the same style as the links to the other posts.

The searchbox is initially hidden and replaced by text in order to keep the layout as clean as possible.
Clicking the search links reveals the search box.

The list of other posts, blogroll links, pages, and the searchbox is set up as clean as possible, yet very transparent.

The comments area is as clean as the rest of the theme. No gravaters in order to keep the comments area pretty light.

I hope you guys like it. Feel free to report bugs, or browser errors.

I’m very happy to finally release this. A lot of people helped me test it and gave me feedback.
That helped me a lot, and changed a lot of features. Special thanks to all of you!

I’ve put up a dedicated site for Playr where all of the information, code examples, downloads are gathered.
Head over there to read more about it!

More info:
Playr site: Click
Download Playr 2.0: Click
Playr 2.0 documentation: Click

In the past week, I’ve been pretty busy adding the finishing  touches to the features and fixing the last few bugs that popped up. Most of the last-minute changes are a result of using the class in one of my own projects.

It’s then when I realized I’m missing some key features like adding the music directory, and some properties of the PlayrEvents. I also added some ear candy like fadeIn() and fadeOut() methods.

On a more functional note: I’ve abstracted the playlist to an independent class. So now you’re provided with lots and lots of ways to customize and manage your playlists.

The shuffle mode is now smart. In English that means the playlist remembers what songs have played and which ones haven’t.

Finally I’m happy to tell you guys won’t ever have to write an XML playlist file yourself. I’ve got a PHP4 and PHP5 version of PlayrDiscovr which reads a directory and returns the corresponding XML listing the tracks and their properties.
On top of that, I’ve got some help from other people (I still need to contact you guys) who are willing to help me out with building PlayrDiscover in ASP, Ruby and Python.

Even though I’m listing all of the new features, the Playr class is still the easiest way of implementing any kind of sound-feature in any Flash/Flex/AIR application. But the simplicity shouldn’t be a limitation, which it isn’t: you’re still able to build full-feature media-playing applications.

One of the little challenges I still have to tackle is the Tween problem. I’ve implemented fadeIn() and fadeOut() methods. Those methods actually tween the volume property of the Playr instance. The problem with that is when using the Playr class in a Flex project, you get a cool error message telling you it can’t import fl.transitions (which is the class package for the Tween class and the easing package).
I still haven’t figured out how to work around this problem. If any of you have any suggestion on this problem, feel free to tell me about it.

I plan on releasing Playr 2.0 in the coming week (or 2) depending on PlayrDiscovr impementations, final changes, demo’s and site development (yes, I’m building a dedicated site for Playr ) Feel free to suggest other implementations you’d like

Het idee was ooit ontstaan bij gesprekken over Flash-sites, AJAX-sites, Google-vriendelijke sites, en de snelst mogelijke en goedkoopste oplossing om deze RIA-oplossingen zo dicht mogelijk bij elkaar te brengen. Nick had de smaak te pakken en is er enkele maanden geleden in zijn vrije tijd aan begonnen. Gelukkig is hij koppig genoeg, zodat hij een paar weken geleden met een brede smile op zijn gezicht liet zijn hoe het ermee stond… Ik keek ernaar… Ik was onder de indruk…

Onlangs ging hij live met zijn nieuwe portfolio waarop je de Javascript class al in volle actie kan zien.

Enkele features:

• 1 site bouwen: geen extra XML, geen bijkomende PHP functionaliteit, niets. Elke HTML site kan een AJAX site worden in enkele simpele stappen.
• Het is simpel.
• De site wordt niet destructief bewerkt door het AJAX script òf de implementatie ervan. Als je browser de AJAX functionaliteit niet aan kan, surf je gewoon door de standaard HTML site, zonder te bemerken dat er in feite ‘meer onder de motorkap’ zit.
• Het script kan omgaan met ‘incorrecte’ HTML. Dit wordt niet aangeraden, maar de class is robuust genoeg om dit soort fouten te hanteren.
• Je site blijft Google vriendelijk: ondanks het feit dat je bezoekers allerhande cool shit zien gebeuren, blijft Google een standaard HTML site zien, die goed kan geïndexeerd worden.
• Deeplinking: gezien Google je site kan indexeren, kan je content van je site dus ook volwaardig naar voor komen in de zoekresultaten. Deze zoekresultaten zullen je naar de juiste pagina op de website brengen, vanwaar het AJAX script jou weer met eye-candy kan bedienen.
• Crossbrowser: Internet Explorer, Firefox, Safari, Opera. Zelfs op de iPhone kan de website inclusieve AJAX features ten volle naar voor komen.
• Error-handling en browser selection: Als er fouten gebeuren probeert de class dit zelf op te lossen. Hetzij door correctie, hetzij disablen van de class zelf, en de gebruiker zonder AJAX features verder laten surfen. Als de browser geen AJAX ondersteund schakelt de class zichzelf uit.
• Animaties: Niets is leuker dan bewegende onderdelen om de gebruiker te laten weten dat de site verstaan heeft wat er gevraagd werd. De class preload de afbeeldingen en maakt vloeiende transities van één pagina naar de andere.

En dit zijn er slechts een paar. Er zijn nog heel wat features. Meer hierover op Nick’s blog.

Voorbeeld: byDust.com
Documentatie: byDust.com

Ik ben erg onder de indruk, en zal deze class binnenkort zelf inbouwen in mijn eigen site.
Lees er meer over op Nick’s blog (Engels).

Deze versie is volledig object oriented geschreven, en is vanaf nu PHP5-only.
Deze nieuwe versie kun je hier downloaden.

Thx Ward!