Pl4n3's world

Blog about Programming, Graphics, Games and Html5


Wikidata Historymaps

The project fetches history data from wikidata (with time/location) and displays them using google maps. Data fetching starts with a person (i.e. its wididata id) and recursivly loads a number of data of ancestor and descendants. Places of historic events are clickable markers, where a description window can be shown. There are lines drawn between places of a persons history and between places of ancestors to descendants.

► Niklot
► Henry the Lion

Some interesting aspects from a programming perspective: the wikidata barcode logo is 'wiki' in morse code (ref). Wikimedia commons image urls are of the form a/ab/(filename), where 'ab' are the first characters of the md5 hash of the filename.


Gree - 3d graphs (of json or javascript)

Experimenting on a new project called 'Gree' (from GRaphs with thrEE.js) to display and edit 3d graphs of json data or sourcecode. Motive is, that complex interconnected networks are difficult to display in 2d, e.g. edges overlap. 3d should improve visibility. To best utilize this, stereoscopic view (e.g. via vr device) is needed, since else the graph stays 2d projection. Currently there are 2 applications. The first is a general 3d graph tool. Graph data is represented and editable in json format. The graph can be modified by dragging its nodes.
► Gree Json

Second application generates 3d graphs of javascript sourcecode and vice versa. Why make 3d graphs of sourcecode? Code (display/editing) can be in a way redundant, because everytime a function is called, its name must be written. So a function name can appear multiple times. Alternatively a function could be represented as graph node (its name only displayed once) and everytime it is called, an edge to that node is drawn. This project tries to go that direction. Here an edge between 2 function nodes is drawn if one function is called from the other. For complex code with lots functions this can give a quick overview of code semantics. 3d positions of nodes are stored as comments above related functions. If the graph is modified by dragging its nodes, javascript can be generated with updated position comments. Javascript is parsed with acorn.js and generated with escodegen.js.
► Gree Javascript


Hearthstone inspired card game test

Its a card game for 2 players, human versus the computer. Cards have 3 properties: cost, attackpoints (ap) and hitpoints (hp). A card with 4 cost can have 4 ap and 4 hp. It might have more/less ap, but then less/more hp too. General formula is cost/2=ap+hp. Cards can attack opponents cards or the opponent directly. If a card gets attacked or attacks its hp decrease by the ap of the other card. If a player is attacked directly, its hp decreases, if its value is 0, the game ends. The game is written for html canvas 2d, optionally webgl. It is based on the same rendering code as a previous game demo. A focus of this game test is playability on mobile devices, as card games are perfect for them (and there is now Hearthstone for android and ios too).

►Start game


Finale 2014

Long time no blogpost. Reasons were vacation, work on projects continued, this posting will summarize some. Also it will be the last text of 2014, so to everyone nice holidays and a good transition to 2015!
  • Web 3D editor now has a three.js renderer instead of the previous plain canvas technique. The plain canvas is still there as overlay to display editing informations. The scripting functionality of the editor can be used to create demos. Scripts can be started via menu or url parameter. As an example the following link loads a xmas baneling with ragdoll physics and scripted animation:


  • Another project (work in progress) is to display train schedules, not as single routes, but as route networks. Single routes can be optimal, but sometimes, especially on routes with lots changes, there are multiple equally good routes. Choosing the right route can be easier using a network of all relevant routes, with all information combined. Problematic with this project is, that lots train companies dont provide raw data of train connections, hopefully OpenData gets more traction.

  • Finally a canvas racing game demo.



Tagdox - minimal tag-based document app

  • The app maintains a list of documents, each has a title, body, tags and a timestamp.
  • The documentlist can be confined via tags(pulldown) and/or free-text search.
  • The documentlist can be ordered by title or timestamp.
  • There is functionality to edit,add & delete documents.
  • At startup documentlist is loaded from localStorage or file (JSON format), on change documentlist is saved to localStorage and can be exported to a file.
  • The use case here is a movie collection. The timestamp can be used to store when a movie was watched and to choose which to watch next.
  • The app is quite minimal, it consists of 3 files: data, backgroundimage and source, which has ~11kB vanilla javascript unminified.
►Start Tagdox
(use case: collection of 570 movies)


Webpage for Hearthstone data log, graph and statistics

The page lets you record results of Hearthstone games. By clicking buttons 'win' or 'loose' an outcome of a game is logged with a timestamp. The resulting game rank is visualized as graph. Data is saved in browsers localStorage and also listed in a textarea (json format). There it can be edited, imported or exported. Finally a win-ratio statistics is available, generated by counting results of each hour of each weekday.