Pl4n3s world

Wloom - WebGl game, work in progress #7

2011-11-30T06:04:00.001-08:00

WebGl game Wloom version 0.7 is here with following changes:

Jump&run-gameplay is introduced.
Core game abstraction. To ensure that the gameplay is working well and for better testing, the core game is a standalone module, which can be applied to different renderers. Wloom7 is essentially a webgl renderer for the core game. There is a second, very simple renderer, which displays the game as blocks on a canvas.
The design of the npcs is inspired by Starcraft2-banelings.
There are new sounds, made with sfxr.

►Youtube
►Start demo (Chrome 9+, Firefox 4+)
►Start simple core game canvas demo

Drawing with Java

2011-08-24T09:34:00.000-07:00

For Wloom I needed a transparent radar background image. Since I am not used to a vector-paint-programm, I 'drew' the image with java, by programming following small program. At first it creates an image, then it draws the radar shapes and saves everything as transparent png. Ingame the radar will look like this.

import java.awt.*;

import java.awt.image.*;



public final class Drawer {

  public static void main(String [] args) {

    try {

    BufferedImage i=new BufferedImage(300,150,BufferedImage.TYPE_INT_ARGB);

    Graphics2D g=i.createGraphics();

    

    g.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);

    

    g.setColor(new Color(0,0,0,100));

    g.fillArc(10,5,280,280,0,180);

    

    g.setColor(Color.black);

    g.setStroke(new BasicStroke(5,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    int r=140;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    g.drawLine(10,145,290,145);

    g.drawLine(150,5,150,145);

    g.setStroke(new BasicStroke(3,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    r=95;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    r=45;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    g.drawLine(51,46,150,145);

    g.drawLine(249,46,150,145);

    

    g.setColor(new Color(100,200,0));

    g.setStroke(new BasicStroke(3,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    g.drawArc(10,5,280,280,0,180);

    g.drawLine(10,145,290,145);

    g.drawLine(150,5,150,145);

    g.setStroke(new BasicStroke(2,BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));

    r=95;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    r=45;g.drawArc(150-r,150-r-5,r*2,r*2,0,180);

    g.drawLine(51,46,150,145);

    g.drawLine(249,46,150,145);

    

    g.dispose();

    javax.imageio.ImageIO.write(i,"png",new java.io.File("radar.png"));

    } catch (Exception e) { e.printStackTrace(); }

  }

}

Wloom - WebGl game, work in progress #6

2011-08-13T06:40:00.000-07:00

WebGl game Wloom version 0.6 is here.

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

Changes:

New content: map and templar model
Basic scripted cutscenes. They are defined in a external map-script-file (same as AI,...), thus dont strain game core.
Minor changes, e.g. in previous version the whole map mesh was used for collision calculation. Now there is coarse collision mesh and a more fine-grained visible mesh.

Canvas experiment: Penrose Tiling

2011-07-26T11:08:00.000-07:00

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.)

Wloom - WebGl game, work in progress #5

2011-06-12T09:15:00.000-07:00

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.

Andalusia pictures

2011-06-06T18:12:00.000-07:00

Here are some pictures from recent vacation in Andalusia, Spain.

Canvas experiment: Build order simulator

2011-05-28T00:50:00.000-07:00

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.

Blog/Diary concept, notes on JEditorPane

2011-04-27T05:09:00.000-07:00

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/

Wloom - WebGl game, work in progress #4

2011-04-12T02:14:00.000-07:00

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.

Wloom - WebGl game, work in progress #3

2011-03-13T14:34:00.000-07:00

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)

Starcraft 2 casts

2011-03-11T14:50:00.000-08:00

In the last weeks I did spend some time watching Starcraft2 casts. I find them very entertaining to watch and they teach you to play. On the other hand watching alot casts is very time consuming. With this blogpost I will give an overview of my favorite casts. Following table contains name, url, unique features and, if existing, the main fraction and league-level the caster is playing. Because I watched casts only for the last weeks, the data assembled below might be incomplete or partly wrong. In this case please notify me and I will update things.

	Notes	Fraction/League
Psy	Partly very funny.	Zerg/Master
HD	Basically awesome.	Zerg/Master
TotalHalibut	British accent. Partly very funny. Also other games like WoW.	Terran/Silver
Husky	Reference. Different game-styles (e.g. 4v4).	Protoss/~Diamond
Day9	Reference. Focus on in-depth (but also time consuming) analysis.
Ahnaris	Basically awesome.	Terran/Gold
Destiny	Very funny.	Zerg/Master
Gom Tv	Great GSL pro games. Login (e.g. via Twitter), partly free to watch.

Btw, the work on a new version of the WebGl game Wloom is almost finished. Thus there will be a new demo in a couple of days on this blog.

Skybox algorithm

2011-02-05T02:40:00.000-08:00

For the Wloom project a skybox was needed. A skybox is a large box around a scene, with sky texture. The textures of the 6 planes of the box can be calculated from a single picture.

The algorithm for this transformation is outlined as follows: For every texture point of the box-planes calculate two angles relative to the center of the box: a horizontal angle ax, where value 0 represents north, PI/2 east, PI south and 3PI/2 west; and a vertical angle ay, with a range from value 0 (=top) to PI (=bottom). From the original picture the color at the coordinates of the two angles is now taken and drawn towards the texture-point of the box-plane. Below the exact algorithm, written in Java, is listed.

for (int y=0;y<=w;y++) 
for (int x=0;x<=w;x++) {
  double xh=x-w*0.5;
  double lh=w*0.5;
  double ax=PI/4+Math.atan2(xh,lh);
  double ay=Math.atan2(Math.sqrt(xh*xh+lh*lh),-y+lh);
  b.setRGB(x,y+w,getRGB(ax*biw/(PI*2),ay*bih/PI));
  b.setRGB(x+w*2,y+w,getRGB((ax+PI)*biw/(PI*2),ay*bih/PI));
  
  ax=PI/4+Math.atan2(lh,-x+lh);
  b.setRGB(x+w,y+w,getRGB(ax*biw/(PI*2),ay*bih/PI));
  b.setRGB(x+w*2,y+w*2,getRGB((ax+PI)*(biw-0.5)/(PI*2),ay*bih/PI));
  
  double yh=y-lh;
  ax=3*PI/4+Math.atan2(xh,yh);
  ay=PI/2-Math.atan2(lh,Math.sqrt(xh*xh+yh*yh));
  b.setRGB(x+w,y,getRGB(ax*biw/(PI*2),ay*bih/PI));
  ax-=PI/2;
  b.setRGB(x+w,y+w*2,getRGB(biw-1-ax*biw/(PI*2),bih-1-ay*bih/PI));
}

The shown skybox is used in the next version of the WebGL game Wloom, which will be posted soon.

Wloom - WebGl game, work in progress #2

2011-01-27T12:42:00.000-08:00

There is some progress with the webgl game 'Wloom'. Current state of the project can be seen in the video or as running demo here (needs Chrome 9+, Firefox 4+). Following features have been added since the last blogpost:

Dynamic camera (e.g. in small rooms camera moves closer, so that the view is not clipped)
Map and model data are loaded from external files. Its format is javascript, they are loaded with dynamically added script tags.
Html audio. Currently it sounds on my pc with chrome 9 abit buggy (it seems some samples are not played and chrome crashes after some time). With Firefox 4 beta 6 sound works better here.
Npc scripting with javascript. Since core game and npc scripts are written in the same language, javascript, integration is straightforward and simple. The code can be stored in map- or model-files.

Soon there will be updates on the project. Map(s) and gameplay shall be improved. :)

Wloom - WebGl game, work in progress

2010-12-21T04:26:00.000-08:00

Currently I work on a game for WebGL named 'Wloom'. It shall be fastpaced, from egoperspective, with walkable architecture, maybe an egoshooter. Initially i wanted to call it 'Gloom', but that is taken by an amiga game. So in 'Wloom' the 'Wl' is short for WebGL, 'oom' is a reminiscence to another great game. :) On the right is a video of the current state. You can test the game (with a webgl-capable browser) here. Currently you can only run around with a protagonist and watch the map. Main controls are w,a,s,d,left,right, you can also look around with mouse drag. The WebGL-canvas automatically resizes with the browser, thus the game may run fullscreen.

With this I wish the visitors of this blog Merry Christmas and a Happy New Year. Updates on this and other projects will be posted soon, but probably not before 2011.

CanvasCraft - towards a web RTS game (²)

2010-11-26T19:28:00.000-08:00

A previous blogpost is also transcribed with 'towards a web RTS game'. There I focussed on webgl graphics. This time the focus is the game core engine, thus here graphics are very simple, units are drawn as circles using canvas. Conceptually, once the game core engine is finished, one could combine both approaches and get a game demo with improved gameplay and graphics.

In this demo units can be selected via mouseclick, by mouse-dragging a rectangle around some, or via numeric keys (e.g. shift-1 constitutes a group of previous selected units, key 1 then selects this group). Selected units can be moved by rightclicking on the ground or on another unit. By pressing key P the game pauses.

There are units of 2 different parties (blue-you/orange-computer). If units of different parties approach they will fight each other. There are 2 unit-types: slow ranged and fast melee. The game is over, if all units of a party are gone. The filesize of the javascript code is ~12kB.

A lazy defensive terran strategy for Starcraft2

2010-11-14T18:41:00.000-08:00

In this blogpost I describe, how I play Terran in Starcraft2 Multiplayer. The strategy is defensive, this way I try to avoid micromanagement, which I'm too slow for. When I last looked, my average APM (action per minute) was about 20. Battlecruisers play a big role, but also infantry. At first I summarize the strategy, then I describe some detail aspects.

Summary:

Beginning build order: Scv, Scv, Supply depot, Scv, Barracks, Scv, Barracks, then Marines
Built up infantry (about 10 marines, 8 marauders) as defense. Make the infantry short-key 2. Besides constantly make Scv, Supply depots as needed, 2 Turrets around the Command center. Dont build too much Turrets, since fleet should do anti-air tasks soon.
Build Planetary fortress, a Starport, start building a fleet (a raven and some vikings) and make it shortcut 1.
Build a 2nd Command center, together with each base build 2 Turrets, 2 Refineries, and later Planetary fortress. Build up fleet (vikings, maybe few banshees, battlecruisers), level up fleet to the max (with 2 armories) Build about 5 Starports.
Build maybe 2 more expansions or more. Probably meet enemy, attack with fleet and infantry (key 1 and 2). If you have battlecruisers, attack as much with yamato cannon as possible, (this is almost the only micromanagement needed). If fleet is crushed, rebuild quick.
Hopefully defeat enemy.

Detail aspects:

Often the enemy attacks early, then try to have a good infantry built up, keep infantry and fleet near the Turrets and Planetary fortress, so that they defend together, and very important: make some Scv's repair Planetary fortress during attack.
Thors: In the beginning I tried to attack with Thors. But they couldnt move everywhere like air units can, so I dont use them.
Make sure you have detectors. 2 Turrets for each base and Raven in the fleet.
Bunkers: In my first games my intial defense was too weak. First I tried to put the Marines into Bunkers, now I just build Marines more quickly with 2 Barracks and dont use bunkers.
Once I attacked enemy with medium fleet, made some damage but lost fleet, couldnt rebuild quick, lost game. Thus, attack only with maximum unit count and max upgraded. Make sure there are enough Starports and resources for quick fleet rebuild.
Sensor towers: I am not sure, if they are good. For the first base I usually build one. You see sooner, when the enemy attacks, and have more time to position fleet and infantry for the battle. On the other side from the towers the enemy knows your positions and might attack earlier.
Only build banshees in the beginning or when you have few resources, otherwise build Battlecruisers for ground and air defense.

Html Twitter control (public tweets, no auth)

2010-11-09T08:24:00.000-08:00

I plan to work on a Twitter client for Javascript. The client should display tweets very compact and might have some features of a Java Twitter client, I blogged about previously.

This tweet component is a first step. It shows the user-timeline of a given user plus tweets that the user replied to. It shows only public tweets, thus no auth is needed. You can enter another user to display its tweets, but the users tweets muts be unprotected, otherwise the tweets wouldnt be visible without auth.

Next step towards a client would be to figure out, how the auth stuff works, which looks somewhat complicated.. x) More infos about that probably soon in this blog.

Div sparks - Html decoration

2010-11-02T17:45:00.000-07:00

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisici elit

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

On the right is a Div-spark example shown, demonstrating a decoration for Html-DOM-elements. This might be used to indicate that data is generated or just for esthetic reason. :) Technically div-elements are dynamically generated via javascript, with flashing background colors. The appearance of this div-elements, the "div-sparks", is defined by following structure:

var data=[
  {t:50,  r:0,g:250,b:0,a:1 },
  {t:200, r:0,g:0,  b:0,a:0 ,spawn:1},
  {t:0,   r:0,g:250,b:0,a:0 }
];

where "t" stands for a duration, "r,g,b,a" define a color and the "spawn" flag starts creation of new sparks beside a current element.

WebGL/bullet.js Demo

2010-11-01T11:23:00.000-07:00

The demo shows two characters, the left is calculated using the physics library bullet.js, the right without physics. You can toggle the use of physics with a checkbox. On my Pc I get following framerates:

	with physics	without physics
Chrome 8	19 fps	59 fps
Firefox 4 beta 6	~17 fps (heavily varying)	60 fps

Its interesting, that there isnt the performance gap between Chrome and Firefox, that was observed in an earlier blogpost, anymore. The reason are improved javascript engines and webgl- instead of software-canvas output. Though the Firefox physics performance varies heavily (sometimes drops to 3fps), probably because of background optimizations, while Chrome display is smooth.

Update: bullet.js, together with this and 2 Canvas demos, is now also available here: http://code.google.com/p/bulletjs/

HistoryMaps: Migration period (Völkerwanderung) 150-500

2010-10-04T09:08:00.000-07:00

On the left there is a first version of a HistoryMap. HistoryMaps are a concept to display historic developments, both in place and time. They combine traditional maps, which display places but no different times, and timelines, which show timepoints but no referring places. This first HistoryMap shows movement of tribes and battles during the migration period (Völkerwanderung) 150-500. Below the properties of HistoryMaps and its GUI are described in detail:

Shapes and timeline: The content of HistoryMaps is made up of shapes (in this example there are bezier-curved shapes which represent tribes), which may be morphed between time-keyframes. The time is displayed in the upper timeline, a current time is highlighted. You can click or drag with the mouse the timeline to set the current time, the shapes will be morphed according to this time. Thus you can explore historic constellations at different times.
Eventpoints: In addition to shapes there are eventpoints displayed, marking historic events (here battles). Eventpoints are drawn together with their corresponding times. If you move the mouse over a point additional information for that event is displayed. If you click an event point, the current time will be set to the corresponding time. Thus you see the global historic context of the event. This marks a virtue of the concept: In usual historic maps events are mostly drawn only with local context.
Animation: At startup and when you click the animation-button an animation is running, where current time moves over the timeline. This gives an overview of the history shown.
Timecolumns: When you click the timecolumn-button a static display is shown, where the shapes are drawn in columns of different times. Thus you see a picture of the historic content of all times at once. This gives insights on durations of historic developments, one can distinguish short processes that only appear in few columns from longlasting ones that are drawn in more columns.
Completeness: HistoryMaps may display the complete history of all places and all times. For this the current programm must be extended with zoom facility. Thus you could zoom in and out places (like GoogleMaps) and you could also zoom within the timeline to set a time frame of interest.

Canvas graph demo, Usecase: Football results

2010-08-28T17:46:00.000-07:00

FC Hansa Rostock
Kickers Offenbach
Wacker Burghausen

St. Pauli
HSV
FC Bayern München

On the left there is a interactive canvas graph demo, showing football results. You can switch highlighted graphs by mouse-clicking on the corresponding description. Since all the javascript is written in one line, all content of this blogpost could be uploaded to blogspot, there is no iframe needed here. Soon there will be a more advanced canvas demo and I'm also working on a webgl+bullet.js demo. Stay tuned! :)
Update: I made the graphs animate and added functionality: If the mouse moves over the graph, detail information is displayed.

Twitter client concept: Refer arcs

2010-08-14T03:57:00.000-07:00

In my current twitter client, to follow conversations between users, I often have to scroll and search to find the corresponding tweets. To make this process more comfortable (especially the search part), I introduced refer arcs into a twitter client which visually connect tweets that probably refer to each other (replies, retweets).
On the right there is an animated gif, which demonstrates this technique. The updated twitter client ('Twaja') will be downloadable soon.

Thoughts on other stuff. Three recent (in my opinion) questionable developments in computation:

Oracle sues Google over Java. Obviously the new owner has other priorities then the old one. Java might loose people working with it.
Google and Verizon propose new policy to constrict net-neutrality. This might be a step toward the end of the open net.
Google stops Google Wave. After just a year this innovative project is canceled. Thats quite few patience, reminds of canceled Google Lively.

End of rant. :)

What I like about Javascript (compared to Java)

2010-08-01T03:41:00.000-07:00

This list was assembled, while I was coding some Javascript projects (see blogposts below), and is of course only a subjective view:

dynamic typing: simpler declarations, no casts, no interfaces, less keywords, simpler syntax (but I see possible drawbacks: its may be more error prone, and probably less runtime performant)
"this" is mandatory to access object-variables, in java its optional. This is more clear semantics and promotes the use of local variables.
simple and powerfull Array and Hashtable (instead of Java's multitude of Array,Vector,List,Collections..)
prototype based object system. its more flexible than javas class based system, e.g. you can add methods to existing objects.
last but not least: it runs everywhere in the browser, quite like java, but in a more straightforward and powerfull way (direct dom access, not like a plugin).

Still, Java keeps being great, but above points make Javascript very much interesting, imho.

bullet.js - Javascript Ragdoll Physics

2010-07-31T04:17:00.000-07:00

I ported more classes from JBullet to Javascript Physics engine bullet.js, wrote some new and assembled a new canvas demo showing javascript ragdoll physics: Click. Now almost all classes from JBullet are ported, except some for vehicle physics. The size of bullet.js is now about 330kB. The demo shows on my pc using Chrome ca. 40fps. The current drawing (software 3d using canvas) is not very performant, so soon there will be bullet.js+WebGl demos.

bullet.js - Javascript Physics Engine

2010-07-16T17:27:00.000-07:00

I finished porting parts of the JBullet and Vecmath library from Java to Javascript. As the result there is another 3D Physics Engine for Javascript named bullet.js (because its based on the Bullet Physics Engine). Its size is about 200kB. Here is a canvas-demo, showing the engine in action. The demo consists of the same animation with 20 boxes as the java physics demo, I posted before. Thus one can compare the different performances. On my computer I get following frames per second:

Java: 300 Fps
Javascript Chrome: 45 Fps
Javascript Firefox 4b1: 10 Fps
Javascript Firefox 3.6: 3 Fps

This shows 2 points. Point 1: Google Javascript is quite performant, Mozilla must still improve things. Point 2: Although Javascript execution speed has great improved in the last years, there is still a big performance gap wrt. Java. Maybe javascript will never run as fast as java, because of its dynamic nature/typing? Time will tell. :)
Anyways, currently there is a canvas demo, but the real purpose of a 3d javascript physics engine would be WebGl. So there will be WebGL demos soon on this blog.
A issue exists with the javascript port: the boxes in the demo sometimes show strange behavior, they bump from the ground and fly through the air.. In the java demo they dont do that, so there must be a bug in the Javascript code. If there is someone who actually understands how the bullet engine works (I dont, I just ported it :) it would be nice, if I get help to find the bug.

WebGL demo: normalmaps, shadows, scripting

2010-06-13T06:32:00.000-07:00

The demo uses the glge-library and shows

normalmapping,
shadows and
scripted lights and animation

for WebGL. The building is inspired by a church in Schwerin.

Java Physics Demo: Boxes

2010-05-22T04:04:00.000-07:00

Start applet.

This demo uses parts of the the JBullet and the Vecmath library. I extracted essential classes and put them all into 1 java source file. Thus this demo dont needs external libraries.

On Objectstacks
I also changed the used JBullet parts, so that they dont use Objectstacks. Objectstacks were introduced to manage temporary objects in a threadsafe way. There are 3 possibilities to deal with temporary objects:

1) Just instantiate a temporary object as you need it. Problem: this can result in a lot instantiated objects, garbage collector has alot todo, runtime performance might drop. Though, intelligent jit-compilers could possibly handle multiply temporary instantiations and could in a way inline them..
2) Add (private) auxiliary objectvariables to the class. You can use this objects in computation and dont need to instantiate new ones. Problem: if different threads invoke the same method at the same time, an object could be used twice, with unexpected results. This approach is not thread-safe.
3) Use objectstacks. Retrieve auxiliary objects from a pool and return them to the pool, when computation is over. This way in most cases only limited number of instantitions is needed (opposed to possibly unlimited instantiations in approach 1) and this method is threadsafe (opposed to approach 2).

The original JBullet library uses objectstacks. In this demo I omitted them, because the original approach requires an instrumentation step in the build process. During this step auxiliary classes are generated using an ant-build-file. A simple compile doesnt work. For sake of simplicity I thus dont use objectstacks here, but above second technique. Thus this demo is not thread-safe, but its usecase is only single threaded, so it doesnt matter.

How to build

Make sure, that a JDK is installed.
Put the source file into a directory 'net/plsw/bullet'.
Compile it with 'javac net/plsw/bullet/BoxDemo.java'.
Run it with 'java net.plsw.bullet.BoxDemo'.

Canvas Game Demo: 4Rumble

2010-05-10T07:24:00.000-07:00

As a small project besides a more complex 3d-project (soon more infos here) i wrote this game demo for canvas and javascript. Its a remake of a flash game demo, named 4Rumble (click, click), i made a while back. In this Javascript demo there is currently only one character, Cursor-Left/Right make him run around. Cursor-Up/Down zooms in and out. A formerly flash demo ported to javascript, might be seen as statement in the current html5-instead-of-flash debate. Which leads to:

Others stuff ramblings
My opinion about the Apple/Html5 vs. Flash debate (click, click): I dont have much to do with apple and i dont have much todo with flash. So im not directly affected. Obviously, Html5 is more open and accessible, than flash, so I love to see it gain ground. On the other side I strongly dislike vendor-lockin on Iphone (and elsewhere, e.g. linux-ban on ps3). It kills creativity, the user should have the choice between different technologies. If native apps are better than those (compiled) with intermediate code, they will supersede naturally other apps. There is no need for prohibition. If apple would allow flash (or more importantly imo: java) on its devices, I maybe also wanted to have one. :)
And now for sth. completely different: Google makes O3d a WebGl-Javascript-library, the plugin-development is stopped. This is imo a good step since with WebGl there wont be a need for a browser-3D-plugin. Though, WebGl doesnt currently run everywhere (i.e. on i.e.), but according to google the plugin will still be available for at least a year.

Work in progress: Twaja, Doom3 experiments

2010-03-31T09:24:00.000-07:00

Experimenting with trees and fog and the doom3 engine. The aim is to create a spooky single player level. The created content might be reused for other projects.
A second work in progress is Twaja, the Java Twitter Client. I updated the layout and introduced the top control area. Friend feed clustering is improved, so that successive tweets from the same source are displayed together. Thus the profile icon is only displayed once, and messages are shown more compact. More updates on these projects soon!

Btw, congratulations @cern for the first 7TeV collisions and the beginning of the experiments. Now I must read more on particle physics to understand upcoming, hopefully interesting, results. There are nice live data animation websites on the current lhc-status: click, click.

Does bytecode become obsolete?

2010-03-17T18:17:00.000-07:00

Or, more provocative: Will Javascript substitute Java? Java has a certain technical infrastructure, it utilizes bytecode. This exists for following reasons: In the history of programming languages at first there where interpreted languages, e.g. Lisp or Basic. They where slow but portable. Then there came languages like c and c++, where source is compiled to systemspecifc binary. They were fast, but unportable. With Java and bytecode a quite fast AND portable solution emerged. Java source is compiled to system-independent bytecode, which then is executed by the java virtual machine. With later versions of Java, to increase execution speed, just-in-time (jit) compilers were introduced. They compile the bytecode on the fly to systemspecific binary, which than runs faster. Besides the ecosystems of compiled languages, interpreted languages persisted. Script languages like Javascript are there to e.g. control compiled programms or bytecode.

Recently jit-compilers for javascript appeared (Google V8, Mozilla Tracemonkey). Thus Javascript becomes fast and portable, like java, but without bytecode. Bytecode now seems to be an unnessary intermediate step during programm execution. Bytecode means more complexity in IDEs and in language execution. If a jit-compiler works with sourcecode directly, not with bytecode, possibly more optimizations can be done (without the additional abstraction step bytecode). If you get the same results with a less complex solution, you should apply it. With faster script languages, also there will be no need to separate programm logic into scripts and compiled functions. One advantage of bytecode might be that you can have different programming language compiled to it and than be executed on the same virtual machine. Like with JRuby, Jython, Scala than run on the java virtual machine. If you ommit bytecode and want to have the same flexibilty, the execution engine (with the jit-compiler), must be able to read different types of languages. Future will show if that is feasible.

Aside from the technical aspect, lets look at usage fields of Java and Javascript. At first Java was meant to be for the desktop. This didnt fully work out, e.g. Java applets in general couldnt compete with alternative approaches like flash. Java though became very strong on the server. Javascript was also originally there for the desktop, with its improving performance and the new <canvas> html-tag it can increasingly compete with flash and java applets. As of lateley Javascript spread also to the server (e.g. node.js). Thus, also from this point of view, it seems, that Javascript pushes into Java territory.

Two final notes: First, you may replace the term 'java' with 'c#/.net' (or other bytecode/intermediate language platforms) in this text. Second, this considerations only apply to the far future, currently java cannot be replaced by javascript, because of its superior stability, performance, distribution and api. Also, different languages/platforms will stay (in niches). In my perception java/c# (also called managed code) superseded c++ (unmanaged code), yet c++ still exists. In a comparable manner Javascript will displace Java/C#, but all will stay (for now).

Towards a Web-RTS-Game

2010-03-11T10:43:00.000-08:00

Here is a demo for a real-time-strategy (RTS) game using WebGL. Currently there is only very basic gameplay: you can select units using left mouse button and let them move around with the right mouse button. Following is planned for future releases:

Map and gameplay enhancements. Add strategy to the real-time
Use of other html5 techniques, e.g. audio-tag for audio, websockets for multiplayer gameplay
Custom content creation and modification. Users will be able to upload own units and maps to a central repository. Also AI of units might be controlled by editable user-scripts...

Back from Cebu, Html5 game Sungka

2010-02-27T06:33:00.000-08:00

I'm back from vacation. It was a very nice trip, here are three recommendations: Alta Cebu Resort - very nice place with internet and pool, Qatar Airways - tasty food, free beer and whiskey , Warped Passages - interesting book on particle physics, maybe a good read to understand coming LHC-experiments.

Working on new content: Games for Html5 (Canvas and/or WebGL). A first start is a implementation of the game Sungka using Javascript and Canvas (overall size 3.5kB). You can play it directly in the right field above. Currently it wont run on IE, only with e.g. firefox and chrome.

Html5-Canvas with variable size

2010-02-10T17:29:00.000-08:00

I tried to make a Html-page with a Canvas-element, which fills the whole page or browser window. Following line

<canvas width="100%" height="100%">

didnt work. It produced a canvas with a dimension of 100x100 pixels. Following

<canvas style="width:100%;height:100%" width="100%" height="100%">

worked a bit better: the canvas filled the browser window. Though the canvas still had a size of 100x100 pixels, but it was scaled up to fit the page. To have a canvas that dynamically changes its size according to the browser window, I had to set canvas.width and .height manually, like in this code snippet:

var cont=canvas.parentNode;
if ((canvas.width!=cont.clientWidth)||(canvas.height!=cont.clientHeight)) {
  canvas.width=cont.clientWidth;
  canvas.height=cont.clientHeight;}

Note: by setting e.g. canvas.width the canvas will be cleared, so the resize must take place before the repaint.

Update: If the canvas is used with WebGL, the gl-viewport must be set to the new size.

gl.viewport(0,0,canvas.width,canvas.height);

WebGL skeletal animation demo

2010-02-09T09:28:00.000-08:00

Click here to see it (you need a webgl-enabled browser). This WebGL-demo runs completely without external javascript libraries. All code (incl some basic matrix-computation-routines), mesh and animation data is stored within the Html file, only the Texture is loaded from an external Jpg. The demo is similar to the previous for O3D (here), but there I use external libraries.

Twaja 1.0.8 Release

2010-02-02T16:01:00.000-08:00

A first version of the java twitter client Twaja is available for download here. There are binaries and sources. Twaja may also run as applet or via Webstart.
Comments and critics appreciated.

New project "Twaja"

2010-01-18T17:44:00.000-08:00

Im working on a new project named Twaja. It will be a Twitter-client written in Java. The name is based on the words 'Twitter' and 'Java' and means 'Your' in russian.

There are a lot of twitterclients available, is there a need for another one? I currently use Echofon, which is comfortable and fast, but lacks some features I'd like to use. On the other hand there are other, more complex clients with more features, but they usually have a large footprint. Basically I havent found the ideal client for me, so I started to write an own. It will have the features, which I find important and it will have a small footprint.

It will be written in Java and will use the small jTwitter-api. It thus might run as an applet within a Website, but most likely as an Desktop-application (using Java Webstart). The Gui will not be based on Swing or SWT, but only on AWT, which has the smallest footprint. Here are some characterics and proposed unique features of Twaja:

Combine friends feed and search. While I like to follow tweets of my friends I sometimes also want to follow tweets regarding certains topics from everybody, which can be found through twitter-search, e.g. using tags. The client will be able to display both, friend feeds and search results in an equal way.
Ranking. Sometimes, when I was offline for a while, there are hundreds of unred tweets, which are uncomfortable to browse. There should be a form of ranking in the client, so that you e.g. can read tweets only from 'important' users..
Innovative display. I will try to implement some new display ideas. E.g. tweets with tags may be displayed grouped with Taglines. Thus one can easy distinguish between tweets of different topics. I wrote about the concept of taglines here.

Soon there will be more screenshots and infos available on Twaja. Stay tuned! :)

O3D demo with skeletal animation

2010-01-13T16:13:00.000-08:00

This demo shows skeletal, key-frame-based animation with Google O3D. All mesh- and animation data is stored within a html-file (~60kB) and processed via javascript. Only the texture is loaded from an jpg-file.

Happy Holidays to everyone

2009-12-24T02:03:00.000-08:00

especially to the visitors :)

Doom3 demo with custom contents and explosions

2009-12-15T17:09:00.000-08:00

Some screenshots:

An older Version of the video:

Rubik Cube

2009-11-28T03:19:00.000-08:00

I'm working on a Rubik Cube Applet. It shall help me to solve that puzzle. The Applet size is about 9kb. The Applet also runs via Webstart.

Black Metal Discographies

2009-10-06T18:16:00.000-07:00

Working on a visualisation of discographies. Albums are ordered according to their releasedate. Thus you can see at a glance, which were created at the same time. Also this graphic points out, how long bands exists and when they had their (non)productive phases. I plan to make visualisations for more bands and different kind of metal/music, but currently I listen mostly to blackmetal :)

More generally I work on a tool to visualize historical data (here album releases), that are clustered by topics (here by the bands). More about such a general tool will be posted in the future. Stay tuned :)

Texture update

2009-10-04T09:26:00.000-07:00

Worked a little on the texture of the templar model for a doom3 mod.

Doom3 Mod - Work in Progress

2009-09-20T14:45:00.000-07:00

Working on a mod for the doom3 engine. Here is gif of some unfinished content:

Odosketch, first drawing

2009-09-12T05:53:00.000-07:00

my first drawing using http://sketch.odopod.com/:

Blog Concept with Taglines

2009-09-08T13:14:00.000-07:00

Thinking about a new layout-concept for blogs with tags.
Problem: In a blog with multiple entries with multiple different tags its hard to view/distinguish entries that share same tags.
Solution:

Colored lines, Taglines, each representing a tag, connect entries which have same tags.
Taglines for different tags have different colors and different horizontal position.
Entries are vertically ordered depending on creating time, newest entries above. Entries are horizontally shifted regarding their tags.

This concept improves the reading of blog-entries, wich belong together, while all entries remain visible. On the right side is an screenshot of an example-implementation.

Some concept-details:

The sorting of the tags, i.e. and the horizontal position and color of their taglines, depends on creation time of entries. Thus taglines of newer entries appear on the left side. Since entry shifting also depends on the tags, newer entries will also appear on the left side. This results in a good read-flow. Alternatively tag-sorting might depend on other criteria like tag-importance, thus most entries with most important tags would appear on the left side.
While taglines connect entries which share the corresponding tag, they may cross entries without that tag. Then they are displayed as if they lay under that entry, not connecting it.
The screenshot also shows a minimap, which may improve overview, if there are a lot of entries. There could also be a legend showing the color of the tags, and corresponding entry-counts.

2009-08-03T16:53:00.000-07:00

Another snapshot of Doom3 mod - work in progress.

On 'Gods of War' by Manowar

2009-08-01T08:47:00.000-07:00

Got the the Manowar CD 'Thunder in the Sky'. Its quite good, with less orchestra-stuff compared to the latest album 'Gods of War'. Here a list of my fav songs from 'Gods of War':

Sleipnir
Sons of odin
Gods of war
Odin

The other 12 tracks of the album are mostly instrumentals or ballads with lots of cheesy orchestra-stuff, but those 4 rock :)

2009-07-28T04:38:00.000-07:00

Working on circular stairs for a Doom3 mod.. In the pic some some zombies standing on them :)

Renewed website

2009-03-04T03:22:00.000-08:00

Loading...I renewed an alternative website, which you find here: http://pl4n3.wordpress.com You can still vote here.

Test

Google Lively

2008-07-09T05:27:00.001-07:00

2008-01-15T17:52:00.000-08:00

Hello World. This Blog is started. Comments and Critics are appreciated.
Here are some older pics, i painted: