Archive for the 'Safe For Seneca' Category

Fractions driving game in HTML5 instead of Flash

Sunday, July 15th, 2012

I’ve been working on this project part time for a while now, and finally it started bothering me that I couldn’t google the requirements document. That is so because I haven’t publicised it yet, so here you go:

The first step has been to create a requirements document, which I’ve done, on a wiki like real men do. Here it is. It’s complete enough to give you an idea of the scope of the project and some context for some of the posts I will be making.

Progress is pretty good so far. I don’t know if I’ll be putting anything up until there’s at least a playable prototype ready, but maybe. I’ll keep you posted.

Because life is short

Saturday, July 14th, 2012

Some of the photos from my first jump, from the 28th of April 2012. Amazing experience!

My awesome students: Winter 2012 HTML5 DSA

Wednesday, June 20th, 2012

I had a diploma and degree version of a multimedia course in the summer, where half the course was about HTML5 technologies.

The major assignment was for students to implement a functional animation of a data structure and/or algorithm. There were a few of them to choose from.

It took me a while but finally I managed to compile the best of the assignments into a demoable webpage with all the right copyright text in the code.

Have a look yourself, it’s really good stuff!

Processing.js SVG support tester

Wednesday, June 13th, 2012

SVG has been a nightmare over the last decade. It used to be that every implementation is different, no one software created files compatible with any other software. These days the situation is a lot better, but I’m still suspicious of SVG.

But I’m thinking of using it for a Processing.js project, so how do I test what software will create SVG files that will display in a Processing.js sketch? I build a tester of course. You put in your SVG file and it will do its best to render it into a Processing.js sketch. Then you can compare that with what you expected to see.

You can try it yourself here.

I may pull it down though, I’m concerned that it will allow people to upload random files to my server, sort of like the APNG assembler… that’s going on my todo list.

What I found so far: SVG files created in Inkscape don’t show well at all. SVG 1.1 files exported from Illustrator CS5.1 seem to work perfectly, though I haven’t tried anything too advanced.

Scalable HTML Canvas / Processing.js sketch

Saturday, June 2nd, 2012

A bit of background: we are trying to port a game written in Adobe Flash to HTML5 using Processing.js.


An SWF (Flash) file is placed inside a page using HTML <object>/<embed> tags. The size of the SWF as displayed on the user’s computer is dicated by the width/height attribute of the <embed> tag and if that’s a percentage – the size of the parent container.

Because Flash is all vectors (let’s say for simplicity’s sake) – it can be displayed very nicely at any size, and if you specified 100% for width/height then the size of the SWF on the page will be automatically changed when the browser window is resized.

Here’s a demo. I took the flash file from here, it was so hard to find a simple demo!

That’s really nice, and makes thinking about differently-sized screens for your application unnecessary – Flash handles it all for you automatically.

Canvas/Processing.js – scaling at all

Not so with Canvas/Processing.js. You specify a desired fixed size and that’s that. No 100%, no auto stretch, nothing. That’s called a problem in search of a solution!

I tried lots of things, but the first thing I got to work was using CSS for the sizing. You can set a width/height CSS property on your canvas and then the CSS renderer will do the scaling, positioning, and the reflow. Unfortunately though this is the simplest form of resize and it looks aweful even if you’re only scaling up a little.

So even though you can do this resize dynamically – it’s pretty useless other than as a reflow reference.

Then I looked some more at the Canvas scale() function, and its equivalent in Processing.js. This one does a rescale of everything, but transparently to the code. So evn if you were drawing a line from 0 to 200 – that instruction would be changed behind the scenes with a scale of 4.0 to 0 to 800, resulting in a properly drawn line:

Much nicer! All the lines in the sketch are drawn using line() and ellipse(), the image on the top is a JPG and the one at the bottom is an SVG. The one thing that makes this tricky is that you need to change the size of the canvas as a separate step from the scale() call and the order of the two calls matters.

Here is a live demo for you to see it yourself.

Canvas/Processing.js – auto scaling & reflow nightmare

I thought – “great, I’m almost done!” but I thought that too soon. The problem is – even though I can do nice resizes, it will not happen automatically. So I’m still a way off from the Flash sample I started this post with.

Reflow is no laughing matter, I’d say half of the Firefox rendering engine deals just with reflow, with recursion dozens of levels deep. And that’s written in C++ in the framework with access  to everything. Becuse Canvas was designed with a fixed size in mind – it seems I have no choice but to do the same stuff in Javascript.

I tried for a few hours and got it to almost work, but in the end gave up. Even a hacky implementation with my sizing the canvas to the parent element’s size didn’t work very well at all. I won’t go into details, it’s complicated stuff.

So I’ve gone for a compromise. Instead of resizing to any parent element – I assume the Canvas’s parent is the body (with no padding/margin), listen to onresize events for the entire window, and scale the canvas to the size of the window. Not universally useful, but still way better than nothing.

Here’s a demo (resize the popup window to see it).

Next steps?

Probably not for me, not in the near future. It would be great if this problem was solved universally – not only for all use cases but for all browsers. I have other things to do though, so I don’t think it’s going to be me looking into this further.

Bug Me Not

Tuesday, May 15th, 2012

Too often (as everyone knows) a service online asks you to register but it doesn’t seem warranted, perhaps all you want is to download a demo or try something or just look around.

For years I’ve been using a website Mark Paruzel told me about, but I’ve never written about it because I figured not enough people read my blog. But here you go now:

If you get one of these retarded registration requests you just can’t get around – an option might be the website Just go there and see if they have a generic username/password pair you could use.

The world would be so much nicer if this wasn’t necessary…

A shout-out from Linus Torvalds

Tuesday, May 8th, 2012

Wow, Linus himself used ISO Master and mentioned he liked it in a blog post (or whatever that Google+ thing is), I am so flattered!

I would post a thank you response there, but I don’t feel like signing up for an account (yes, I am very happy living without most google services).

Back to NFS

Monday, May 7th, 2012

Grumble grumble, me back to NFS from SSHFS (previous post). Turns out that:

  1. root has no permissions to do anything on the SSH mount, which sort of makes sense but I wonder if it’s security through obscurity. Regardless – I need root to be able to do stuff in there like “make install”.
  2. For some weird reason I can’t execute anything off the SSH mount, which I learned when I tried to (as the correct user) run a simple shell script I run every month.

At first I thought I probably just need to do some googling and figure it out, but that didn’t help. Some of the more interesting “explanations” for like behaviour are “this isn’t a real filesystem”, and bullshit like that turns me off technologies. If it was intended to be used as a toy – great work, it was fun, but I have to user my filesystem now, thank you very much.

So much potential though.. maybe I’ll try again in a few years.

Replacing NFS with SSHFS

Tuesday, April 24th, 2012

For years I knew about the security issues related to NFS, but there wasn’t really a solution to that and I didn’t have a multiuser environment to worry about so I lived with it.

More recently though I’ve experimented with sshfs and found it to work really well. So I figured why not try to replace my NFS entry from /etc/fstab with an SSHFS entry?

Not all that hard to do, though there have been a couple of quirks. First I added this to /etc/fstab:

sshfs#user@ip:/dir          /home/user/dir fuse     defaults,idmap=user,noauto,user 0 0

Note that it’s not mounted automatically. That’s because to mount something using SSHFS you need to give a password or use an SSH key, and root (who runs the startup scripts) doesn’t have my user’s private key.

This works great for mounting it manually (mount /home/user/dir) but not so well for an automount at boot. For that first I tried to add the mount command to my XFCE startup scripts, but it turns out it didn’t run quickly enough. Next thing I tried was to add it to .xinitrc but it seemed to be ignored.

A bit of searching and I found a solution – use ~/.xprofile instead. So this is what mine looks like:

~$ cat .xprofile
mount /home/user/dir

And it works great! Now if only I could find a solution for that ridiculous plain-text SMTP protocol…

Announcing the Open Source Translation Database

Thursday, March 8th, 2012

Translating software is hard, I know from my experience of starting two new open source projects (ISO Master and Asunder) about the challenges of learning how to use Gettext, finding volunteers to do the translations, encouraging and enabling them to translate my software.

The work was worth it for me, I now have almost 70 full translations of my software in 40 languages. But I’d like to make the process of getting your first translation easier, and generally help more software maintainers to get more translations with less effort.

The OSTD ( ) is an automatic translations system – it will take your .POT file and populate it with translations based on strings in other open source software, generating .PO files. Given that you can see which software the strings come from – this will be much more accurate than other automatic translation systems such as Google Translate.

I just started the project so there is a lot of polish still coming, and some significant features such as updating existing .PO files and a web service interface for other software to use. But it can be useful as it is already. Please try it out!

Any feature requests and bug reports are welcome. My goal is to make it as useful as possible to as many people as possible. I’m doing this part time, but I’m excited about the project and will do my best to improve it as quickly as possible.