Triangles, interpolation and the math I forgot

For an online project that’s almost completed, we’re polling real-time data from thirty-something weather stations to determine the weather at any given location in the Netherlands. Now that we’ve started beta testing, we concluded that our calculation to interpolate the weather was really, really bad, so I needed to come up with some last-minute thinking. Turns out I had to cough up my third grade math teachings and work the numbers for 36 hours, only to realize that it was a damn hard topic and I should have thought of this earlier in the process.

Thirty points are spread over a fairly spacious area. Pick a random point D within or close to that area, find the nearest three points A, B and C and interpolate the relative distances to a weight distribution list (a, b and c), that we can use to multiply the actual weather values: A.wind * a + B.wind * b + C.wind * c. That way we can make a good estimate of what the weather must be like at point D. Sounds simple, right? I thought so too, but found it was a lot harder than I assumed. I hope I can spare someone the trouble of going through all this, by explaining what I did.

The first thing to clarify is that if you have the weighing parameters for a given point in space, you can weigh any numerical data. For my project I need to weigh weather data (radiation, wind, heat, etc.), but for figuring out what algorithm to take, I used colors. They’re easy to compute and the visual result will instantly tell you if you’re on to something. So I started out writing a little test that would allow me to draw colored triangles:

As you can see, the fourth point called “D” shows the interpolated value both in color and numbers, and if you let that point wander through every location in the area, you can draw a pretty picture like this this:

The algorithm measures the distance of D to the nearest point on the line opposite of A, which is BC and stores it as the weight of point A. You do this three times and then normalize the values by dividing them through the total of the three distances. You then have three weight values that total 1, or 100%, and you can use them to multiply the original values. This alone is not enough. Because this method will only calculate correctly if the point you’re dealing with is within the borders of the triangle! I was so happy to see the insides of the triangle all pretty and smooth, but I felt pretty stupid when everything outside of the triangle went horribly wrong. The solution is to find out on what side of each line point D is. If it’s on the same side as the corner you’re weighing, the weight is valid. If it’s on the other side of the line, you should set it’s value to zero and stretch the remaining weights to become 100%. That way you get a nice and clean interpolation, whether you’re inside or outside the triangle.

If someone could have told me this, it would have saved me some 30 hours in the last week before going live with the project, but hey, I feel a lot smarter now that I’ve figured it out myself! Here’s an interactive demo:

Get Adobe Flash player

The resulting images might look familiar to you, if you’ve ever dealt with 3D visualization techniques, because it is called Gouraud Shading. I’m not sure if I’m using the exact same method, because all reference sites that talk about Gouraud are a bit too elaborate for my use. I don’t have a 3D coordinate space, I don’t have lighting, I’m not even working towards a visual result. I just want to calculate the weather!

It took me several wrong approaches before I finally got this one up here, but the solution is still not optimal. For the example of three points, my last method nailed it. But I don’t just have three points, I have thirty! In 3D applications, all points that are used for shading, are always within the triangles of the mesh. But for my application, I neither have a mesh, nor can I stay within the triangles that the weather stations define. Together with automatic sorting of the three nearest points, this introduces a margin of error, as you can see in this image. I have tested it and because the measured weather data is already smoothed out by mother nature, this presents no big issues.

However, if there’s someone out there that knows a better solution to my problem, please share!

Session at 360|flex Conference

For the past few days I’ve been in Indianapolis, USA, where the 360|flex conference was held. I was invited by the awesome people of Powerflasher to come and support Frank Müller in promoting the FDT coding solution. It’s been a fun few days and the weather was great as well, although I spent most time inside the conference center, where the airco was running overtime. Frank actually got a cold with 28ºC outside!

People close to me probably know I have a very strong opinion on live coding during conference talks, so it’s only ironic that my session today consisted of 95% live coding. But that went really well, and the latest FDT beta crunched every build flawlessly. I started out demonstrating the ways in which FDT helps the developer get rid of the standard small stuff, like creating classes, methods and variables, and finished with creating a little Indianapolis 500 racing simulation all in about 70 minutes.

Get Adobe Flash player

Here’s the result, use the arrow keys to drive the track, and correct, there is no collision detection. The *real* annual Indianapolis 500 race is this Sunday, but unfortunately we won’t be here to see it. We did go to the track after the conference today and rode one lap on it with our rental Toyota! That was pretty damn cool, I’ll tell ya! If I get to go to Indianapolis next time, I’m sure going to extend my stay to be able to attend the race.

Change of plans…

So there I am, minding my freelance business, and along comes a company that offers me a job. This happened a few times now since I left LBi, and while it feels very nice to be asked to come work somewhere, I just didn’t feel like swapping my newly acquired freedoms for yet another company. This last offer however, wasn’t just about doing the same work under a company flag. I was offered an awesome and challenging position at Media Republic… and I took it!

Starting april 1st I’ll be taking my bike to the Herengracht on a daily basis. How’s that for a change of plans?

My FDT Papervision3D workshop

Well that’s it, this year’s coolest conference in Amsterdam, FitC, is over again. Slowly the haze settles and life picks up where we left it the week before. But before I can actually sink into melancholy, my friends at FDT remind me of the next cool thing: My Papervision3D workshop in Krefeld, Germany, yay!

In case you noticed my name on the credit roll at Ralph Hauwert‘s workshop last week, I am not a member of the PV3D developer team and therefore my workshop follows a different strategy. Instead of creating or modifying the 3D framework I’ve been working on implementing it into numerous websites over the past two years. With every project there were new technological boundaries that were overcome by creative coding solutions or by changing the project contents altogether. It’s the insights gained in these processes that I’d like to share with the workshop’s attendees. Of course the basics of handling Papervision3d need to be covered first, for which I’ll take you into the only real software solution for developing ActionScript: Powerflasher’s FDT.

Papervision projects credited to LBi Lost Boys

Oh and in case you’re wondering, the workshop will be held in Germany and I will indeed be speaking German. I’ve had some practice with that in the past, so don’t worry: Ich spreche nicht so wie Rudi Carell!

Check out the signup page if you’re interested!

World of Fruit

From november to christmas, I’ve been working with the awesome people at NOISE here in Amsterdam. They developed a campaign called Wereld van Fruit (translates to “World of Fruit”) for Hero, one of the major suppliers of fruity beverages and snacks in the Netherlands.

Screenshot from www.wereldvanfruit.nl

In the attempt to promote Hero as all things fruity, NOISE came up with the idea of navigating the earth’s continents as you’re used to, with applications such as Google Earth, but with all countries being made up from the fruits they are known for.

On the top level, there should of course be the spinning globe, from where you can zoom into every continent. And although we’ve seen quite a few examples done in realtime 3D, this time Papervision3D or whatever other engine wouldn’t have cut it, since the amount of detail had to be a lot more convincing than what could have been done with smart texturing. Instead, there’s an impressive amount of alpha video’s for all things fruity.

It was really nice to see the world come to life from a flat, uninspiring sphere, to the tasty looking world of fruit it became in the end. Check it out at www.wereldvanfruit.nl. Thank you Niels, for getting me on the project. Thank you NOISE for a wonderful Christmas spirit, and thank you Suzanna, for having the greatest office dog in the world!

Bye bye Privacy, hello transparency!

I updated my homepage yesterday, from being very clean (read: empty) to being very efficient (read: a little less empty). It now sports a very flexible though completely design-less Google Calendar. With this, I’m giving up a considerate amount of privacy, but it’s all for the greater cause.

Since I went freelance last November I’m getting a comforting amount of calls for Flash projects, ranging from small and fast to long and hard. That’s a good thing for one, but I tend to get these calls a lot right when I’m waiting for a streetcar or taking a walke while out for lunch. Those are akward moments to start thinking about your planning, while you were actually thinking about what sandwich to choose.

Screenshot of the new google calendar

So now I can point the callers to my site, and have them put an option into the Google Calendar instantly. It’s still a test, but I have the feeling I’m going to like this feature. It’s also great for trafficers that want to be flexible in their planning.

Bye bye privacy!

Tilt-Shift effect in Papervision3D

About maybe a year ago a colleague of mine stumbled upon a flickr group that used camera’s with tilt-shift lenses to fake a “miniature look”. Next to having such a lens, this effect is pretty easy to fake in Photoshop, by appying a blur on a gradient selection. A little while later, via Keith Peter’s blog, I saw this video apply that same effect on video.

Don’t you just love that effect!? Now for a pet project site I was considering putting that tilt-shift effect on a Papervision scene. This kind of effect is pretty easy to set up, although CPU-processing can become quite intensive.

Tilt-Shift miniature effect in Papervision3D.

Maybe I’ll add some little details later, like little car-blocks driving around at the base of the buildings.

Happy Birthday!

So, there’s a blog. It’s probably my tenth attempt at creating one, but this time I have this feeling it just might stick. This month I quit my job at one of the biggest full-service online bureaus in the Netherlands, and unless the market isn’t ready for me, I’ll be earning my freelance rights the next couple of monts/years.

And hey, since there’s no assignment yet, I might aswell put my effort into creating this pet project: Happy birthday, blog!