ricardocabellov5.5

Thanks to HIDIHO! blog I found out about a new Tween library developed by Philippe Elsass.

Yes, yet another Tween library. My favourite at the moment is BetweenAS3 and I though no library could change that. But this one brings a fresh syntax.

eaze(target).to(duration, { x:dx, y:dy })
    .onUpdate(handler, param1, etc)
    .onComplete(handler, param1, param2, etc);

I really missed the (not so old) Zeh Fernando's Tweener days. When everything was simple and clear, without twists and clubs... BetweenAS3 gave me back these days, but it was good to read that Phillipe shared my thoughts.

Now, lets end the drama and start to have fun again!
http://code.google.com/p/eaze-tween/

As always, you just need a bit of practice with a language to start using it in nice ways. Now that I had that little 3D engine working and with the <audio> around, it was time to produce an idea I always had in mine. A 3D interpretation of a waveform.

I'm sure the first thing you would think after checking this experiment would be... What? I didn't know I could analyse the sound signal with the <audio> tag?! ... Well, you can't, if you check the source code (*hint* right click -> view source) you'll see an array of numbers (deltas in fact). These are all the sound level values of the waveform at 30 fps.

I got these values using the library BASS for linux. Unfortunately, my C skills aren't so good (example) and I can't seem to control how to get the values exactly at the fps I want without getting desyncronisations. The first part of the visualisation is spot on, but by the end things aren't that impressive. I'll keep researching on this and update a new array of values whenever I crack it.

Dean McNamee showed me the way. Forget C and BASS. All you need is python, the tune in .wav and 23 lines of magic.

import math
import struct
import wave
import sys

w = wave.open(sys.argv[1], 'rb')
# We assume 44.1k @ 16-bit, can test with getframerate() and getsampwidth().
sum = 0
value = 0;
delta = 0;
amps = [ ]

for i in xrange(0, w.getnframes()):
	# Assume stereo, mix the channels.
	data = struct.unpack('<hh', w.readframes(1))
	sum += (data[0]*data[0] + data[1]*data[1]) / 2
	# 44100 / 30 = 1470
	if (i != 0 and (i % 1470) == 0):
		value = int(math.sqrt(sum / 1470.0) / 10)
		amps.append(value - delta)
		delta = value
		sum = 0

print amps

I've updated the experiment with the new values; now is perfectly in sync all the time. Which makes you appreciate the little sounds at the end much more. Thanks Dean!

As you'll see on the source code, the rest is very simple. Create a couple of cubes, place them one in from on each other, and modify their scaleY depending on the waveform they are related to in that step.

The end result is quite interesting I think and I hope doing more like these. Hopefully more interactive next time.

The factor that turned this from just a nice experiment to an awesome was the fact that the eedl guys allowed me to use their (great) tunes for my experimentation.

Thanks once again!

Seems like I'm still hooked to Javascript. For the last few months, on my spare time I've been toying more and more with it, creating little pieces that will serve as personal benchmarks for browser performance improvements.

For the next few links I recommend using a WebKit based browser otherwise your browser may crash.

The first idea I wanted to try was creating a canvas using checkboxes as pixels. Then display animations with it. Similar to textmode renderers.



I posted the link over twitter and minutes later Aaron was sending me a drawing done with the checkboxes by Valdean Klump. On firefox, the experiment didn't worked correctly and it just created a grid where anyone could pixelate in. Because this, I created drawing tool out of it. I though it would be fun if I could also generate links on-the-fly so people could share their checkbox based drawings easily. This is how it ended up:



(Press Shift for the eraser tool)

Some days after, Joa Ebert ported a Strange Attractor code to Silverlight to compare performance with Flash. I knew that Javascript <canvas> was going to be way slower than these but I was curious how much.



I believe the code can get some performance optimisations for the platform but my interests were to compare exactly the same code. 7 F/S seemed a good start.

At this point I felt it was about time to go back to toying with 3D worlds. Many people were working on engines using <canvas> as the renderer. But I though I could try using <svg> as renderer instead.

Differences between <canvas> and <svg> are pretty much the same as BitmapData and Graphics. With <canvas>, performance decreases exponentially by the size of the viewport. It's easier to fill the pixels of a triangle at 10x10 than 1000x1000. With <svg> the bottle neck is the amount of vectors being drawn. Because they don't get rastered on a bitmap the nodes stay in memory and exponentially gets slower. However, viewport size isn't a much of a problem here, which ticks my fullscreen action requirement.

How do you draw with <svg>?

Good question. A <svg> is basically a XML. Every frame you fill it with nodes for each polygon with their properties. Then, on the next frame, you delete all the nodes and repeat the process. Sounds crazy, but it works. Here is the proof.



As you've probably ovserved, a benefit of <svg> that you can disable antialiasing (which you can't with <canvas>). This thing alone makes <svg> outperform <canvas>.

Now, don't get the wrong impression. At the moment I don't even know if texturing is possible with <svg>, I haven't investigated that yet. Something tells me that, if possible, it'll go horribly slow.

While working on all these I came up with some things I wanted to do that flat colors were good enough. One of these was a QR code in 3D. Now that I own an Android phone I keep seeing more and more QR codes. The shape of a QR code seemed like a little city and extruding it was something that excited my mind (yes, I'm weird).



I've learn quite a bit just for doing this piece. Inkscape for vectorising, Blender for extruding and colorising, Python for exporting from Blender and refactored my engine once again. Performance wise, its like going back to the Actionscript 2 days. But, hopefully, WebGL will arrive soon and I'll be able to play with more polygons. Until then, I can create a bunch of things just with these.

Feel free to study the sources for each piece if you are interested. If you find something wrong or that can be improved, please, let me know.

Lets just ignore the freak speaking on the video.

Marketing wise, am I the only one that thinks Microsoft and Apple work together? If they were really rivals, would Microsoft adopt the "I'm a PC" thing? I guess they need to work together so the free of charge option doesn't make them lose much money. That would explain why they never mention Linux as competitor but they mention the "rival", because the money goes the same place that way.

Yes, I love conspiracies.

EDIT:

Since I moved to Linux, one of the major frustrations was the lack of a decent Subversion client. I have tried many different clients during my time on Windows and on MacOS. My favourite from all of them, by far, was TortoiseSVN.

I've been using both RapidSVN and Eclipse's Subversive on Linux. I can't even begin to think how much time I have spent trying to fix corrupted folders and having to recursively remove ".svn" folders and copy on top of a clean checkout... I even considered stopping using SVN as such a bad experience made me feel SVN was a waste of time.

I don't know why, I though about searching for options again. You know, a new app that changes your computer experience may appear tomorrow. One of the search results was NautilusSVN, which, if I recall correctly, Spite suggested as an option some time ago. Turns out NautilusSVN has been renamed to RabbitVCS, seems they don't want to close themselves to Subversion only (which is good).

When I tried it some months ago I found it was quite rudimentary... command line installation as plug-in for nautilus, everything becoming super slow, crash again and again... Surprisingly, this time has been totally different experience. Straightforward to install, the file browser still performs fast enough and it certainly brings the TortoiseSVN days back.

Yes I know, "Use the SVN command line like real man!" yada yada... not!

EDIT: As per version 0.12 nautilus can get pretty slow over the time to the point that you have to wait 30 seconds to go up a folder. Apparently this is being fixed on 0.13.

As I posted on Twitter I'm no longer commuting from Victoria to Old St every day, nor having Franco's Fruit Salad every morning, nor randomly enjoying Franco's Spaghetti Carbonara, nor randomly enjoying BLT's Caesar Wrap, nor randomly enjoying Kick's Goat Cheese Salad, nor playing foosball matches at the end of the day, nor having beers and Brick Lane Bagels on Fridays and, most importantly, I'm no longer working on a studio with many talented and passionate people.

It's hard to believe that it's been already 2 years since I joined them. When you're having fun time goes really fast.

Thanks to everyone there, and specially to Theo and Mike for their constant support. It has been a great experience. :')

I forgot to mention here that my first Android App is on the Market already (took me less than a month since I got the device, beat that Apple).



So, for such a simple thing I had to learn OpenGL|ES, create my own little Tween engine, and so on...

Thanks a lot to all the people that were kind enough to answer my noob questions!

Now... let's get going with the next App :)

Over the weekend I changed a bit the system. Now, whenever a new comment gets sent, it's first checked against Akismet, if it gets flagged as spam, the system asks the user to fill a reCAPTCHA. But for a normal (and honest) user the comment experience is still simple.

The main change is the reCAPTCHA step, that should act as a better firewall for bots than what I had before (a form token rudimentary system).

So far so good.

Some months ago, the fact that the Hi-ReS! Stats seemed to be all over the internet made me come up with the idea of doing a A1 poster for the developers room in the office. Unfortunately, the idea got forgotten at some point.

This morning, while checking Twitter, I got intrigued by a Anatoly Zenkov tweet.



If discovering eedl yesterday made my day, I think this just made my month.

Now, what can I say? Thanks batch!! :'D

Whether it's prettier or not is something totally subjective. In my opinion it is much nicer in many aspects (spacing, cluttering, colors...)

Here it's a video showing some of the changes (so I save fingers):



Also, for the full effect, here it's the background I use:



Which is a matte painting done for this video.