Visualize (and replay) notes without notes

The goal is to display piano notes without using musical notation. Notes are shown on top of piano keys. To replay them, the library MIDI.js and with it e.g. WebAudio is used. The image shows the progress of compactifying the display, where first only needed keyboard keys are drawn, and second repetitions are not redrawn.

►Start

Recognize the music? Solution: ⅁N∩HƆS∩Ǝ∀⊥ 'ƎSIƎᴚᴚƎ⊥NIM ⊥ᴚƎ𐐒∩HƆS

Wloom 12: New Mobs

This WebGl game demo contains a new map and new mobs. A focus is improved usage of gamepad or touch controls by applying autofocus during fights. Moving left/right then moves around the focussed mob.

►Youtube
►Start demo

Strategy game experiment

This is a strategy game experiment. A goal is multiplatform, so that it can be played on phones and (even more appropriate) on tablets. Again the textures are made with the web paint app WePaint.

►Start

Update 4.4.2013: Gameplay is added, it consists of following points:

• Its is basically real time strategy (RTS), all units can move at the same time.
• A goal was very simple gameplay (with mobile devices in mind). To move is the only command for units. They attack automatically, if there is something in range. To stop an attacking unit, it as to be moved out of range.
• The map consist of 3 different landscape tiles: lowland,forest,mountains. They affect view range, unit velocity and attack/defense. Lowland has best view range, highest unit velocity and worst attack/defense. Mountains has opposite values and forest is inbetween.
• There are 2 kind of units, melee and ranged (catapult). Melee attack at near range, ranged units attack at far range but not at near range.
• Units have hitpoints that regenerate over time. If a units lost all hitpoints, it is removed.
• Each unit also has experience points, which increase during attacks. The more experience a units has, the better it attacks and defends.
• Game mission is to defeat all the enemies.

Update 12.4.2013: Games can be recorded and replayed as gif. Resulting gif images are quite small, because 6bit palette and incremental draw is applied (using the library omggif.js).

Wloom 11: Slenderman tribute

This WebGl game experiment is a tribute to the slenderman games. Implementation focus was, to have similar game experience on different platforms, desktop and mobile, using different controls, keyboard/mouse or gamepad or touch. The textures were created with the web paint app WePaint.

►Youtube
►Start game (WebGL enabled browser)

WePaint - Web paint app

A new project started: The web based paint app 'WePaint'. Why? I looked for a paint program, which is able to handle:

• transparency (alpha channel),
• animated sprites,
• logging and replay of paint operations.

Also I looked for a paint program for Nexus7, or better, a program that

• runs on mobile platforms and on desktop. This is also needed, because later
• it shall be used a texture paint component for the web 3d editor.

That are the goals for the project, it can be tested here:

►Start

There is currently following detail functionality:

• Save/load images via localStorage.
• Import/export images via dataUrl, png format.
• Import/export paint operations(processes), text format.
• Gif export of animated sprites and processes. Done with a gif encode library.
• 4 paint tools: brush, erase, unerase, select and copy rectangle areas

The images of this blogpost are all created with the app. Currently there is no further documentation, functionality is still changing.

Update: Added pattern draw mode: Brush strokes repeat over the image borders, so that the resulting pattern looks borderless. The mode can be set by Menu>Edit>PatternBrush.

Update 27.1.2013: Added normal texture editing. Diffuse, normal and specular textures can be handled as 3 pages. Textures can be displayed alone or combined, where a lightsource is simulated.

Wloom 0.10: Desktop and Nexus 7

This time focus was, to have the same WebGL game demo being fluently playable on both Desktop and Nexus 7. To achieve this, on Nexus 7 the resolution is lowered. Also different renderers for different platforms are used. On Nexus 7 its a simple one, on Desktop its a more advanced renderer using GLGE for better effects (shadows, particles, lights). Finally, to have the demo being playable on Nexus 7, touch controls are added. They are visible on Desktop too and then display, which keys are pressed.

►Youtube
►Start demo (WebGL enabled browser, on Nexus 7: Firefox Beta, Opera mobile, Chrome beta with flag set)

This is probably the last blogpost before the end of the world on 21.12.2012 of this year, thus happy holidays and a good new year everybody! :)

Update 8.1.2013: Added improved menu and gamepad support. Gamepad works here with Chrome on Desktop. So now the demo runs on desktop and mobile with either keyboard and mouse, touch or gamepad controls. Its a nice level of 'write once, run everywhere'.

Update 26.1.2013: Chrome beta for android with easy WebGl access is now released. There, lowered resolution is no longer necessary since fps stays high on high resolution. Graphics shows performance of different browsers on Nexus 7 at different resolutions. Added a fullscreen menu item. On Nexus7 it works only with Chrome beta.

W3dit - Web 3d editor

Why. Recently I got a Nexus 7 (see last blog post) and want to use I not only to consume & communicate, but also to create. Also, 3d content creation (e.g. for game projects) can be a time-consuming task. Currently I am bound to the desktop that time. It would be nice to do this work on a mobile device, e.g. while on travel or outdoors. Thus this projects aims to be a 3d editor for mobile and desktop.

►Youtube demo
►Start

Current features. The interface is accessible for touch and mouse input. This is done via the handling shown in following table and with an menu approach which is described below.

	Mobile	Desktop
Mesh edit (point drag)	1 touch drag	left mouse drag
Rotate	2 touch drag	right (or ctrl left) mouse drag
Zoom	2 touch distance	mouse wheel (or shift left mouse drag)
Position	3 touch drag	middle (or alt left) mouse drag

Following can be done currently in the editor:

• Static meshes can be edited by adding and removing points and polygons.
• There is an Undo function, unlimited, except RAM. :)
• Meshes can be loaded/saved via localStorage and imported/exported via textarea.
• A grid can be set to construct geometric shapes.

So currently the 3d editor is quite limited because only static meshes are handled. A usecase may be the construction of game level architectures, here the grid is useful.

Roadmap. Following will or may be introduced later.

• Skeleton based meshes and animations.
• Maybe augment these with (bullet.js) physics to construct ragdoll behavior. A proof of concept is shown in an older blogpost.
• The editor should use WebGL, if it is available.
• Texture editing. For this, web based texture painting has to be integrated.

Approach for touch menus. Because mobile devices may have a small screen and to have a maximum room and focus for the edit object, a menu should not take lots place. On the order side to be touchable a menu should not be too small. Because on mobile device there probably are no hotkey menu shortcuts, it should be quickly accessible, there should be a short way to invoke actions. To have all of this self-conflicting properties implemented, the menu here works as follows:

• Single menu start button. The menu can be accessed via a single start button, which unfolds tree structured sub menus. Thus only minimal space is used. In comparison, standard desktop applications often have a menu bar, where a number of menus is displayed all the time, even if they are seldom needed. Interestingly modern browsers also dismissed menu bar in favour of a single menu button.
  
• In place unfold. While browsing a standard desktop menu sub menus stay displayed. Here only the current sub menus are displayed. Thus fewer space is used, but traceability may decrease somewhat.
  
• Recent menus. Because there is a single menu start button instead of a menu bar, menu items are one step farther away, thus less accessible. Therefore menu items, that are potentially often invoked, like "Point add", are displayed after a first use besides the start menu button. Thus for a next invocation now only one click/touch is needed, it is fastest accessibility possible, like a hotkey. Now effectively again a menu bar is used, but with use-dependent menu items. The number of recent menu item is confined, thus menu takes still few place. If the menu is browsed/unfolded, recent menu items are not displayed.
  
• Undo menu. Like recent menus the undo menu is displayed besides the menu start to quickly revoke flawed actions.
  
• Secondary menu information. Because in general less menus are displayed, but each menu item is drawn bigger to be touchable, inside the menu item further informations can be displayed. In standard desktop menus with lots and small items there is no natural way for such information, sometimes tool tips are applied. In W3dit secondary informations is used to mark recent menus, the Undo menu shows the number of possible undo steps.
  
• Modal dialogs. The menu is also used as control buttons of modal dialogs. On desktop, if a modal dialog is shown, the application and its menu is still shown, but interaction is disabled. Thus, since the normal menu is not needed during modal dialogs, the menu can be utilized to render dialog options.