OK, after a bit of refreshing of my SQL skills I’ve now got this wordnet database in shape. I’ve added a new table of “unsuitable” words including swear words, words relating to extreme violence, offensive names, etc. It was hard work assembling the list and I’m sure I’ve missed a lot of swear words but the list currently stands at about 600 words.
I also created a list of “common” words containing 3,4,5 and 6 letters that I’m going to use in a new kids hangman variant. Using the database, I was able to cross-reference the words with their type (verb, noun, etc.) and (in some case multiple) meanings. So I can now produce a hangman game that can give a hint (one of the meanings of the word).
I can also produce a definition for a particular word and example of how it is used. For example, to select the various meanings of the word “house” and example phrases and type (noun, verb, etc.), the SQL is: select w1.lemma,sy1.definition,samp.sample,cat.name from word w1 left join sense se1 on w1.wordid = se1.wordid left join synset sy1 on se1.synsetid = sy1.synsetid left join categorydef cat on sy1.categoryid=cat.categoryid left join sample samp on sy1.synsetid=samp.synsetid where w1.lemma="house" and cat.pos='n' group by se1.rank;
As a quick example of the content of wordnet, try the wordnet search engine
I’ve been working on a number of things recently (whenever I get time). I’ve split my time at the moment between Pixie Paint 2 and some new games.
PP2 is progressing well (but slowly) - I’ve now designed all the icons and I’m writing some of the background code. I’m using SVG heavily - for the icons and for the underlying storage format. Having scalable vector icons is nice to - I’ve implemented a Mac-like icon zoom when you hover over an icon.
I’ve also been looking at wordgames. I’ve been wanting to do a “hangman” variant for a while, but it is slow progress to produce a reasonable dictionary. But then I stumbled across Wordnet. This is really a database of words having related meaning (synonyms) but is great for producing novel games. For example given a word like “house” it can give related words of both “house is a kind of ….” and “…. is a kind of house”.
Now the database by itself is hard to use in a normal hosted web-server environment as it is a binary file format with ‘C’ library underlying interface, so I found that somebody had converted it to a set of MySQL (or Postgress) database tables. You can find details of the project here at SourceForge. There are a number of example SQL queries on the site. MySQL integrates well with PHP, so I’m going to produce a “word server” as my first attempt which will return a random word (and meaning) and a thesarus-like list of words with similar meanings.
Within a few minutes I was able to generate 6-letter random words using the following SQL: select w1.lemma from word w1 left join sense se1 on w1.wordid = se1.wordid left join synset sy1 on se1.synsetid = sy1.synsetid where char_length(w1.lemma)=6 and sy1.pos = 'n' order by rand() limit 1;
Nice!
I’m now going to check the database for “unsuitable” words and produce a “safe” list of more commonly used <= 6 letter words for the games for younger kids.
OK, I’ve been very busy lately (new baby, busy day-job and Christmas holidays) and haven’t had too much time to work on the site. I haven’t been sitting around though - I’ve been designing a couple of new puzzles and will start coding them soon.
I also started playing with 3D models in Blender with an aim to making some animated stories in the future and to generally liven up the website. You can see the initial Dixie 3D model in the Christmas message below:
This was made using Blender to do the animation then combining the individual frames using Mplayer to create an FLV file (Flash video file). The video is then displayed on the webpage using Flowplayer - a free Flash video player.
The Dixie figure was created using the amazing Makehuman program to build a body and head followed by a lot of manual editing in Blender to create clothes and finish the face and hair. All these software packages are free to use and open source!You can also see the new animated PuzzlePixies logo in the video. I’ll be adding it to the website soon.
I’ve updated the svgview class to handle the case where CSS type style definitions are not in a “style” definition but in a “style” definition within a “def” block. New class has been uploaded to usual place:svgview.lzx
I submitted the path animator class and I’ve been doing a lot more improvements to the svgview class over the last week. I’m now nearly at the point where I think it’s good enough to submit.
I’ve improved linear gradient support in SWF - it now does the SVG gradient vector to SWF gradient box model conversion better resulting in more accurate rendering of the SVG file.
I then fixed the annoying problem with open paths sometimes corrupting the image in SWF. I ended up having to begin a 0 opacity fill, draw the open path, unset path line type and doing an endFill(). Result is no more corruption - things look good!
The last update was to add the recent changes to handle visibility correctly in drawview into svgview.
I’ve still got to test the new class a bit more, but it is now rendering quite complex scenes accurately. I’m about to add a spooky spot-the-difference to the website based on the new class. I’ll add a link when it’s done…
I was in a mood for hacking this evening, so I’ve created the first attempt at the pathanimator class. Here is a taster (based on svgview class as well)… I haven’t released source yet as it is still in very active development. I’ll hopefully get it done by the end of the weekend.
New svgview class is in the usual place (see older articles). I’ve added gradients to the dhtml runtime and fixed some minor bugs that stopped some pictures being rendered in dhtml. I’ve also added an “onsvgdone” event that occurs when rendering is complete and a convertCoords method so that multiple svgviews can be combined on-screen more easily.
I’ve also tidied up the code, so it is almost ready for submission to OL (just have to sign the submission form).
The other thing I’ve been busy on this week is starting an interactive Atlas with maps in SVG format. I’ll be creating games as I go along before creating a full interactive kids atlas when I have all the bits together. I was considering producing an OL “map widget” as well. It’s been quite tricky getting the geo data converted - I’m using the world vector shoreline (WVS) and Smith and Sandwell topography database (both free and open). Both need conversion, but luckily I’ve previous experience in geo mapping.
I’ve also been considering creating a new animation class. The current OL animator is OK for linear movement, but I would like to move objects along a path. I think I’m going to create an animator based on cubic bezier curves. Idea is something like:
<cubicpath view=”<view name / id>” duration=”<total duration>” steps=”<number of movement steps in duration>” curve=”<bezier start point x,y, stop point x, y, control point 1 x,y, control point 2 x,y>”/>
OK, I’ve been working on improving the gradient support in SWF. It now renders radial gradients correctly and linear gradients in most cases (there are still some failures in the SVG test suite). It can also deal with forward references by using the excellent XPath search facilities in datasets to find a gradient with the correct id.
I’ve also added some additional support for Flash 8 which has some additional features in its gradient rendering. You can see the difference in the image below (some clipart from openclipart.org). The phone speaker shows off the ability of Flash 8 to set the focal point of a radial gradient. The shadow of the handset is missing on Flash 7 because it cannot render the spread method correctly.
The SWF8 demo is here. Test LZX file is here and the svgview LZX is here. The SWF demo is actually quite fast!
Next on the list is to finish the dhtml gradient support and figure out how to get browsers which can directly support SVG just to render it (although I’ll need to change the SVG to set the desired width and height and possibly add a global transform matrix to implement view rotation).
I design most of the artwork for PuzzlePixies using Inkscape. This is a vector drawing package that produces output in Scalar Vector Graphics (SVG) format (see W3.org).
The puzzles and games are written in OpenLaszlo (OL) which allows you to produce Flash versions that will render (hopefully) the same irrespective of the different operating systems (Linux, Mac, Windows) and browser (Firefox, Opera, Safari, IE) [order deliberate - I’m biased being a Linux kernel hacker as a day job…].
Unfortunately OL can’t import/use SVG graphics for stand-alone applications so what I used to do was create nice resolution independent graphics in SVG and then export them as a fixed size raster (.png or .jpg) file and use those. I’ve gotten fed up with the poor quality, so I finally got around to writing an OL extension that allows it to display SVG files in both the Flash and dhtml runtimes.
Here is a taster of capabilities using the old tried and tested example files (on OL 4.03):
It’s quite capable at the moment, but has some restrictions (mainly due to the Flash runtime). I’ve some things left to fix before this is really usable, but it renders about 90% of the files I’ve tried recently. Performance is suprisingly OK considering that it is mainly written in ActionScript - but it still takes about 1.5 seconds from cold to render a picture like the tiger. The demo above has some reasonably difficult files to render. Flash runtime is here if you want to see for yourself (requires Flash 7 or higher).
Now the important part: source code is here for svgview class. Source to generate demo above is here. SVG example files are here (in gzipped tar format).
Note that it only displays SVG as a graphic format - it doesn’t try to do animation or handle SVG scripting (there is the OL experimental SVG runtime for that).
As soon as I fix the last flaws (mainly radial gradients and xlink handling) and add some proper documentation then I’ll submit it to OL. There are some optimisations to the current drawview functions that I’ve put in this class but could be copied back as well. There is also support for dhtml as well as swf, but I’ve only managed to test it on Firefox. dhtml typically works about 25% faster than swf because of the lack of cubic Bezier curves on Flash.
I’ll be writing up more details in the coming days about how it all works and how compliant it is with SVG.
OK, this blog deals with the more technical details of the PuzzlePixies website. If you’ve stumbled on it accidentally and have no interest in knowing the gory details, then go and try some puzzles instead!
