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

26.07.2011

Canvas experiment: Penrose Tiling

I experimented with an algorithm which generates a penrose tiling. This pattern consists of 2 tiles: and is non-periodic (never repeats itself).

►Start demo

The current algorithm is still suboptimal, there remain gaps in the pattern. The algorithm works as follows: Before a tile is added, the local neighborhood is checked for upcoming conflicts. Since only a local environment is checked, there can still emerge conflicts (gaps) for the global pattern. To improve the algorithm, one could introduce heuristics or make it interactive: a user could remove pattern areas which contain gaps. Then the generating could be restarted in this areas. (The demo is inspired by an article in the journal Spektrum d.W.)

12.06.2011

Wloom - WebGl game, work in progress #5

WebGl game Wloom version 0.5 is here.

►Youtube
►Start demo
(Chrome 9+, Firefox 4+)

Changes:
  • Latest version of GLGE library and a new feature of it, shadows on direction lights, is used. The issue of previous Wloom version, where shadows didnt work with Firefox 4, is resolved.
  • The Wloom demo this time is basically a complete game, where you can win or loose, with UI. The game logic is pacman-like: You have to collect gems, but must avoid monsters. This time isoperspective is used. Game logic and ai is loaded dynamically from an own script file. As result Wloom represents a flexible base for various kind of games. The UI is done via CSS and also completely from external scripts.
  • A new rendering mode 'Magic3d' is added. With it the scene is drawn twice, side by side, with camera offset. Now, if you cross the eyes, scenes should appear in 3d. All in all there are now 3 rendering modes: Glge, Simple and Magic3d.

28.05.2011

Canvas experiment: Build order simulator

The demo simulates build orders as of RTS games (e.g. Starcraft2). Here buildorders are very simplified, there is only 1 structure, the central; 2 unit types, worker and knight; and 1 resource, gold. To build those, gold must be paid. Workers harvest gold. Centrals produce units, the more centrals and gold exists, the faster units can be produced. The history of the build is displayed as graph. If the simulation is restarted, history graphs of previous runs are kept and displayed too, this allows to optimize a builder order.

27.04.2011

Blog/Diary concept, notes on JEditorPane

For notes on projects and other stuff I'm working on a blog/diary application. As other blogs the app maintains entries, that can be marked with tags. In the following some concepts are described.
  • 2 Renderers. Currently the blog has 2 renderers, which display the entries. Both are written in Java. The first ([1] in the picture) is completely self-written. Thus arbitrary concepts can be tested with this renderer, e.g. taglines (more about that below). The second renderer ([2] in the picture) uses html, which is displayed with the Java html component JEditorPane. This html frontend might be a starting point for a later online version of the blog.
  • Sticky tags. For todo lists or important stuff to be rememberered always there are sticky entries ([3] in the picture). They are implemented using a 'Sticky' tag. The blog renderer draws all entries with a 'Sticky' tag highlighted and on top of other entries.
  • Checkboxes. For todo-lists checkboxes in entries might be useful, that can be checked if a task is done ([4] in the picture). In this app checkboxes are implemented in the following way: The texts "[_]" and "[X]" within an entry make the blog-app render a unchecked/checked checkbox at this position within the text. If the checkbox is clicked the entry text is changed, "[_]" is replaced by "[X]", and a timestamp is added to the text. Clicking a checkbox thus is a special way of editing an entry. If the entry has a 'Todo' tag and if with a checkbox click all checkboxes of the entry are checked, the entry automatically looses the 'Todo' tag.
  • Taglines. To visually distinguish entries of different topics (with different tags) there are taglines ([5] in the picture). This are lines between entries of specific tags with a special color for each tag. The tag-text is drawn besides the entry with the same color. The lines blend out if they are drawn behind entries that dont carry the tag of the line. An older version of taglines is described in this previous blogpost.
Some general notes on JEditorPane: This component is a part of the quite old Java Swing Api, hasnt changed in years and only supports Html 3.2. Nevertheless imho its a very useful lightweight html renderer (opposed to gecko/webkit bindings), useful for structured/formatted output or to render complex gui layouts. The standard approach to Gui layouts, LayoutManagers, is probably hard to implemented for this blog layout, with lots fonts, floating texts and tables.
JEditor renders html-checkboxes as Swing component JCheckbox. This checkboxes can be accessed via jEditorPane.getComponent(i). This will return a java.awt.Container whose first component is the checkbox:
JCheckbox jcb=(JCheckbox)((Container)jEditorPane.getComponent(i)).getComponent(0);
Now eg. listeners can be added to the Checkbox, that inform, if it is clicked. Following link helped to figure out checkbox access: http://www.thatsjava.com/java-swing/12595/

12.04.2011

Wloom - WebGl game, work in progress #4

WebGl game Wloom version 0.4 is here.

►Youtube
►Start demo
(Chrome 9+, Firefox 4+ shadows currently dont work with ff here, this is under investigation..)

New features:
  • GLGE library use. With this lib better gfx is possible. The use of the library is optional and can be toggled with a checkbox. So there are now 2 selectable gfx passes, the feature-rich GLGE one and the simple original. Thus the game should run on fast and slow computers. Maintaining different gfx passes helps to isolate gfx logic from game logic and thus should result in better programmcode. With GLGE there are following new gfx features:
  • Lights & shadows,
  • Normal-, specular- and diffusemaps,
  • Particle effects.

13.03.2011

Wloom - WebGl game, work in progress #3

Finally there is a new version of the WebGl game Wloom.

►Youtube
►Start demo
(Firefox 4+, Chrome 9+)

Following new features:
  • Skybox (the one I wrote about in a previous blogpost)
  • New map with hills and a tunnel
  • Map reiterates infinitely, thus the world does not end :)
  • Basic ai (npcs move away, if they are near another character)
  • Attack (key E), experimental fly mode (key N)