Using canvas and Javascript to blur images

I admire the look and feel of Mike Matas’ new website. It is really well thought through. I was also intrigued by how he did it, especially after getting a pop-up on my first visit advising me to use a more modern browser than a recent version of Firefox.

There is no point in speculating why some of its features don’t work in more browsers. But I was surprised to see that blurred images are served that way and don’t get blurred in browser. I am playing with an idea of implementing a gallery inspired by Mike’s work, but I would like to reduce manual labor needed for maintaining it.

So I wrote a function that blurs an image on canvas. You can see it in action or copy its code, if you find it useful.

The algorithm used is described in 2001 paper by Wojciech Jarosz. Page contains two implementations, second trading algorithm purity for in my opinion nicer code. Increase number of passes or run it few times over an image, if you need a blurrier result.  Please ask, if you need help with its use.

I also measured its speed to see if it fits my needs. That brought a new surprise. Firefox 3.5.8  on my Linux powered VAIO with 1.2GHz processor blurs image twice as fast as same browser on a Mac with a 2.8Ghz processor. Numbers between runs may vary slightly, but never much. No idea why this is happening, since all functions do is some basic math over items in array that should be well optimized everywhere.

I am sure somebody can optimize it further, but I find it good enough for my use. Image isn’t very blurred after one pass, but one pass over a small image is also a good way to measure how fast a particular computer-browser combination is. On fast combinations I might go for multiple passes over images in view, but fall back to a single pass or no pass on slower systems.

Reblog this post [with Zemanta]

Dreaming about arithmetic mean

This post is older then 6 months, which means opinions contained were mine and any technical information is most likely obsolete.
Please contact me for text I would also sign, not only acknowledge or if post got broken during one of many server upgrades. I will be most grateful.

I had a crazy dream, where I was back at University, but this time studying computer science. We were writing a function to calculate an arithmetic mean of an array of numbers. A task obviously too simple for college course, but with dreams you get what you are given.

Discussion started with this function:

  1. function average(arr) {
  2. var i, sum = 0;
  3. for(i=0;i<arr.length;i++) {
  4. sum += arr[i];
  5. }
  6. return sum/i;
  7. }
  8.  
  9. Download this code: /code/dreamjs.txt

Dream me, who by the way is significantly more bitchy than I ever am, wasn’t pleased and thought he could save few bytes by storing counter and sum inside of the array:

  1. function average(arr) {
  2. // Store counter in array[0] and sum in array[1]
  3. if (arr.length < 3) {
  4. return arr.length == 2 ? arr[0]+arr[1] : arr[0];
  5. } else {
  6. arr[1] = arr[0]+arr[1];
  7. arr[0] = 2;
  8. for(;arr[0]<arr.length;arr[0]++) {
  9. arr[1] += arr[arr[0]];
  10. }
  11. }
  12. return arr[1]/arr[0];
  13. }
  14.  
  15. Download this code: /code/dreamjs2.txt

This looked ugly, but what bothered him (me?) was more that it also had a bug. Integer in Javascript is limited to 253, which is a lot, but sum can still overflow or underflow it. Since mean can never be smaller than smallest or bigger than biggest number in a list, I could fix it by writing:

  1. function average(arr) {
  2. var n = arr.length, sum=0;
  3. while (arr.length) {
  4. sum += arr.pop()/n;
  5. }
  6. return sum;
  7. }
  8.  
  9. Download this code: /code/dreamjs3.txt

End of dream. Everything edited for sanity and brevity.

I don’t have much to say about second program except that I would never write something so ugly just to save 16 bytes in a function like this. I wouldn’t even use Javascript if memory was that important.

I am more intrigued by third program. Bug in second is definitely there, even though few of us operate with numbers big enough to encounter it.

It’s interesting, because if I was awake, I would probably never think of it. I used to worry about bugs like this all the time, when I was coding in C. It was an unavoidable consequence of the language.

I guess what I am getting at is that it is nice to code in a high-level language and for the most part not think about implementation details like this, but only as long as you actually know them so your brain gets triggered when they matter. Speaking of details, I bet those divisions can cause rounding errors.

Reblog this post [with Zemanta]

2009 review

This post is older then 6 months, which means opinions contained were mine and any technical information is most likely obsolete.
Please contact me for text I would also sign, not only acknowledge or if post got broken during one of many server upgrades. I will be most grateful.
COP15-11
Image by markos via Flickr

End of this year is here and for a creature of habits like me it’s time to do my annual review of this year spiced with plans for next one. As it happens this year was largely like last year and I could just post last year’s review with few changes.

I intentionally don’t talk much about my private life since I prefer to keep it such, but this year my wife and I had the fifth anniversary of our marriage and I feel compelled to tell how wonderful those years were and how much better each new year is. I am indeed a very lucky person.

Everything I said about my job last year is still very much true and I hope to keep doing it for a long time. My thanks go to my coworkers. Without them it could never be so rewarding.

Downside of a great job is that it can easily be too absorbing. My private project got less attention than I expected, but I hope to change this next year and finally bring it out.

I traveled less than I would have liked, but more than I should or expected. I did emit less CO2 than the year before and hope to do even better next year.

I read more than 30 books this year and would like to read at least as many next year. The ones I read will get their own post in next few days.

I could also repeat my gloomy outlook on our planet. If anything, it is even more true today than it was then. There was no significant progress in dealing with any of the problems I listed and that depressing list wasn’t exhaustive in the first place.

We went to Copenhagen for COP15 and like many I’ve been profoundly shaken since its end. A lot has been written about why conference failed and if you haven’t read those articles, you really should. However it was clear to me at demonstrations that different NGOs might want the same outcome, but have radically different and often incompatible visions on how to get there, so it’s even easier to understand why collectively we are all failing.

Hence, it’s been another year of strange mixture of personal happiness and gloomy outlooks on future. It’s also another year where I can’t muster an optimistic closure to my review. Saturnalias are over, but I am not too late yet to wish everyone happy holidays and the best of luck in new year.

Reblog this post [with Zemanta]

Making peanut butter

This post is older then 6 months, which means opinions contained were mine and any technical information is most likely obsolete.
Please contact me for text I would also sign, not only acknowledge or if post got broken during one of many server upgrades. I will be most grateful.

Rok requested a post about making peanut butter and since he does such a stellar job taking care of technical side of wwwh talks, I thought it would only be fair to grant his wish. My butter looks like this:

Peanut butter on a slice of bread

If this doesn’t look to you like the best peanut butter ever, look again. And again.

Before I go on describing how I make peanut butter, let me spend a moment or two talking about why. After all it can be bought in practically any grocery store in Slovenia and visiting a few will even give you a limited selection. My first reason was to limit my intake. Peanut butter is incredibly delicious, but not exactly healthy and since I noticed that how much I eat is proportional to amount available, I wanted to avoid 350g jars that would be the death of me. My second reason was to have a better control of what goes in it. Like with sausages you can’t really tell what was used and in what condition it was. I certainly didn’t want to eat hydrogenated fat [1] added to your stock  peanut butter and were suspicious of a thick layer of oil on top of organic ones too. When I got better at making it, I also found out I really dislike bought ones.

As it happens the only thing that is absolutely necessary to make peanut butter are peanuts themselves. However you will probably want to use some oil, a sweetener like sugar or maple syrup and salt.

I use roasted peanuts. You can buy already roasted (but unsalted) or roast them yourself. To do that you heat up your oven to 175° C and put them in until they are done to your liking. Turn them around every couple of minutes so they don’t get burned. Next step: chopping.

But first a side note to all my American friends. Reports that Slovenians don’t eat peanut butter are simply false. We just hide it well. It’s kind of like masonry, but instead of discreet regalia and a secret handshake, we, peanut butter connoisseurs, recognize each other by a subtle nutty odor and small brownish stains in corners of lips. Slightly crazy and distracted look in presence of a peanut butter jar might also be a hint.

So, chopping. For small amounts, 200g or less, I use a hand blender with chopper accessory. I also use it because it’s the only blender I own. It tends to overheat and since I melted its predecessor my chopping amounts to mostly waiting pierced with short chopping episodes. Bigger blenders are certainly more resilient, but they also tend to have their blades raised higher from the bottom which makes them unpractical for chopping small amounts of nuts. Spend enough time doing this and dust will turn into a fudge-like paste. Do it more and it will become more liquid. If you like to spread butter thick, it might be even liquid enough.

I don’t so I add a bit of oil. I use peanut oil, but any edible with neutral flavor will work fine, just don’t add too much. You can always add more if you find butter too thick, but it is difficult to correct too liquid one. I add about a tablespoon of oil for 200g of peanuts while they are still pulverized and rarely need to add more later.

On recent vacation in Nepal I also tried their peanut butter. It tastes very much like ours at this stage; right taste but like most food in Nepal not salty enough for western taste.

Salt is not the only thing missing. Peanut butter is like tomato sauce, it needs a bit of sugar to get a more well rounded flavor. I used powdered sugar with some success, but maple syrup recently won me over (a tip from Aleš whose many culinary talents include baking great cakes). How much salt and sugar to use is again down to personal preference. I use about 1-2 teaspoons of maple syrup and slowly salt while mixing until I am satisfied with result. Blender warms butter and spoils tasting somewhat, so I stop spicing butter when it is a bit less sweet and slightly more salted then I would prefer. This results in just the right taste when cooled.

That’s it. You should now have peanut butter good enough for gods. A few tries, to find the right balance between ingredients and you will end up with one fit for you too. It took me longer because I also eat it with spoon, hence it’s easier to notice its mistakes and more difficult to balance different uses (I prefer more salty butter on bread).

My next goal: cashews and cocoa spread.

[1] Hydrogenated fat is used for the same reason as oil, to make butter easier to spread. Added oil doesn’t actually react with peanuts and if you leave your butter long enough, it will eventually separate and form that unwanted oily layer on top. Hydrogenation solidifes fat and prevents that from happening. Downside is that you can’t tell how much additional fat was added unless it is specified in ingredients list and it’s even more unhealthy.

Reblog this post [with Zemanta]

Pseudorandom thoughts of overworked developer

This post is older then 6 months, which means opinions contained were mine and any technical information is most likely obsolete.
Please contact me for text I would also sign, not only acknowledge or if post got broken during one of many server upgrades. I will be most grateful.

I’ve been too busy lately and many things suffered as a consequence, writing being one of them. This is not a complaint, since I mostly had fun doing what I did, but it is becoming obvious that too much fun can kill you too. Anyhow, this is not a post discussing woes many would love to have. It’s a short list of ideas and thoughts that occurred to me recently, which I don’t have time to really think through or didn’t want to commit to Twitter’s transient stream:

  • I got a spam comment offering to kill a competitor’s website for 70$ per day of downtime. It looked genuine enough to be a truly depressing comment on web’s fragility.
  • “Does he have a Facebook account?” seems to be the most succinct way of learning person’s outlook on privacy issues.
  • Democracy is a terrible way of solving important problems fast. Or solving them at all. However it does provide us with our share of blame.
  • I can’t wait to see what Nokia RX-51/N900 will really bring. Here is one reason why. Building on a closed platform is investing in a lottery ticket.
  • Alex Russel’s Some Orthodox Heresies sums my view of HTML5 better than I ever could. Hard to disagree with his other points too.
Reblog this post [with Zemanta]
Next Page »