Pl4n3s world

Blog about Programming, Graphics, Games and Html5


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


WebAudio Piano App

Doing some WebAudio experiments. This tutorial helped to start playing music. From there the piano app was implemented, which displays music notes on piano keys. To get music data, a midi-file parser was written, with the help of this format description and the jasmid library. There are 4 different view modes, which are shown on the picture. Replay speed, volume and a replay range can be modified. To start the app, click one of the following links.

►Solaris theme, Bach
►Deception, Winterreise, Schubert
►Silent night

With the carol, since probably there wont be more blogposts in this year, happy holidays and a good transition to 2014 for everyone! :)

Update 10.1.2014: Single tracks can be muted/hidden and screenshot menuitem added.


Wloom 15: bullet.js (and Web 3d editor update)

WebGl game environment 'Wloom' can optionally utilize bullet.js physics libary. This library is now also integrated into the Web 3d editor 'W3dit'. Some thoughts on this version:
  • A first test is a fight game demo (subtitle: High art of low punches).
  • The physics library simulates a physical virtual reality. Another virtual reality layer can be added by using Oculus Rift renderer and device. -> VR²
  • With oculus, canvas hud overlay isnt sufficient anymore, thus a 3d hud with canvas texture is added.
  • In the web editor, press menu 'A.toggle' to see animation and physics.
►Start game demo
►Start web editor