Blog about (Web-) Programming, Graphics and Games.


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.



Wloom 16: Gravity game test

Game mission is to evacuate a (unconcious) robot to the exit by toggling gravity up or down. Gravity and ragdoll physics is done by bullet.js.

►Start game


Overview of (sub-) projects and their relations

- vector/matrix math
- mostly ported from java
- screen proportional menus/gui
- desktop/mobile (mouse/touch)
- 3D physics engine
- ported from jbullet
- bone-tree 3d objects
- key frame animation, io
- inspired by doom3 md5 structure
- web paint app
- transparency, sprite animation
- web 3d editor
- mesh,bones,animations,textures
- WebGl game env/testing ground
- optionally uses three.js or glge libs
- 2D bone-tree object animation/gametest
- canvas or WebGl renderer


cutout.js - Game Test

The animation project of a previous blogpost is now extended to a game experiment, with following features:
  • Canvas or WebGl renderer via menu
  • Stereo WebAudio synth effects
  • Particle system
  • Various controls depending on system and browser: keys (wasd,cursor,ctrl), mouse, touch or gamepad
Game mission is to fight the mobs. Health regenerates over time. One should only fight single ncps at once. Current quest is to finish the game in less than 264.9 seconds. :)

►Start game
►Github repository