1. One post out of ten has a title similar to this one, starting with a number divisible by 5.
2. This post is totally pointless.
3. You shouldn’t spend your time reading posts like this.
4. You’d better send an SMS to an old friend.
5. You’d better adjourn your résumé.
6. One post out of twenty has a title similar to this one, starting with «10».
7. That déjà vu feeling is more concrete than you think.
8. This post is totally pointless.
9. You’ll end up spamming your friends with a link to this post.
10. There are at least 10 reasons not to read this post.

After I stumbled upon this post about how to draw a Koch curve using turtle graphics, I decided to implement some turtle commands in Javascript and test them inside a <canvas/>.

The application

Set the width and the number of recursions of the Koch algorithm, and watch a classic Koch fractal!

The implementation

The hearth of the application is the fracturtle object. It implements some turtle graphics commands and the algorithm of the Koch curve (may the SRP god forgive me!). The turtle commands implemented here are:

• right(): turns the turtle (i.e. the drawing brush) clockwise
• left(): turns the turtle counter-clockwise
• forward(): moves the turtle ahead

The whole process starts with the init() function, but the real drawing happens after the fracturtle has received all the commands:

• begin(): sets the starting position of the turtle
• koch(): tells the turtle how to move in order to obtain a Koch curve
• end(): terminates the moving phase and draws the geometric path

<script>
var fracturtle = {
 x0: 0,
 y0: 0,
 w2: 150,
 h2: 150,
 x1: 0,
 y1: 0,
 direction360: 0,
 ctx: undefined,
 canvas: undefined,

 init: function(canvasid, width, height) {
  this.canvas = $("#"+canvasid)[0];
  this.canvas.width = width;
  this.canvas.height = height;
  this.ctx = this.canvas.getContext('2d');
  this.ctx.beginPath();
  this.x0 = w2 = width / 2;
  this.y0 = h2 = height / 2;
 },

 begin: function(x,y) {
  this.ctx.beginPath();
  this.ctx.moveTo(this.x0=x, this.y0=y);
 },

 end: function() {
  this.ctx.closePath();
  this.ctx.fill();
  this.ctx.strokeStyle = "red";
  this.ctx.lineWidth="1px";
  this.ctx.stroke();
 },

 from360: function(angle360) {
  return Math.PI * angle360 / 180;
 },

 forward: function(length) {
  this.x1 = this.x0 + length * Math.cos(this.from360(this.direction360));
  this.y1 = this.y0 + length * Math.sin(this.from360(this.direction360));
  this.ctx.lineTo(this.x0=this.x1,this.y0=this.y1);
 },

 right: function(angle360) {
  this.direction360 -= angle360;
 },

 left: function(angle360) {
  this.direction360 += angle360;
 },

 koch: function(length, depth) {
  if (depth === 0) {
   this.forward(length);
  } else {
   this.koch(length / 3, depth - 1);
   this.right(60);
   this.koch(length / 3, depth - 1);
   this.left(120);
   this.koch(length / 3, depth - 1);
   this.right(60);
   this.koch(length / 3, depth - 1);
  }
 }
};

The algorithm is fired when the user interacts with either dropdown, thanks to this vanilla jQuery code:

$("select").change(function(){ 
 var w = $("#fracturtle_w").val();
 var r = $("#fracturtle_r").val();
                
 if (w==0 || r==0) return;

 fracturtle.init("fracturtle_c",w,w/3);
 fracturtle.begin(0,w/3-1);
 fracturtle.koch(w,r);
 fracturtle.end();
});

Happy programming!

Well, this is sort of an implicit tutorial about HTML5 and the <canvas/> tag. If your browser supports HTML5 (*) you'll see an animated starfield: just click and move your mouse (sort of... read the asterisk *) to enjoy a romantic.. er... a classic animation. The javascript code is neither minified nor obfuscated, soo feel free to invastigate the source code of this page.

Happy programming!

(Yes... I told I would continue my previous post about fractals and razor... I promise I will do it, soon.)

(*) …and if you are not using Mozilla, which fires a subtle NS_ERROR_DOM_SYNTAX_ERR. As of now FireFox is in troubles if someone (i.e. some code) wants to draw something outside the boundary of a canvas. The roundtrip described here by rogerh requires you to create a temporary canvas, do all the operations in this canvas and write back to the original one. I decided not to implement this roundtrip in this demo, so the viewport rotation and the mouse interactivity are only available to Internet Explorer and Chrome.

In a previous post I introduced a turn-based strategy game based on Lego ® medieval men and a chessboard. Part of the fun is finding agreement with your opponent about special rules and new pieces, and testing if the game stays balanced after introducing all the novelties.

Here I'm describing a couple of new pieces and a new kind of attack. Both pieces described here can be represented by the Lego character called "The Princess". The new kind of attack is available to every piece, under certain limitations.

Medusa

Medusa is a female monster of the Greek mythology. She had the power to turn anyone who looked directly into her eyes to stone. In Less-or-Chego Medusa has the following stats:

• Attack: 1
• Defense: 1
• Movement: 2 (she is unarmored)
• Gaze (special attack). Medusa can gaze an opponent at any distance, provided it's in the same row or column and there's no other piece in the middle. The piece reached by her gaze is instantly turned into stone. A petrified piece is considered "died" but cannot be removed from the battlefield. Squares occupied by petrified pieces cannot be passed through or occupied by other pieces.

The Healer

The Healer is a mage focused on healing magic. In Less-or-Chego the Healer has the following stats:

• Attack: 1
• Defense: 1
• Movement: 2
• Heal (magic). The Healer casts a spell on an ally increasing his Defence by 2 points until the end of the turn. Using this magic takes away 2 points of movement (so the Healer cannot move and heal in the same turn).

Go for broke!

"Go for broke" is a new kind of attack and it consists in throwing objects upon an opponent! An elm, a shield, even the princess' wig will do! Throwing an object deals 1 damage to an opponent but takes away 1 point of movement. The thrown object is removed from the game after the attack. This attack is available to any living piece on the battlefield, provided it has something to throw...

On the right: yellow squares represent the position where an opponent can be hit, supposing your piece stays on the red square.

Several days ago I realized my son has a sufficient number of Lego ® medieval men to build a couple of armies and make them fight on the battlefield! Both being chess lovers we used a standard chessboard to layout our fighters.

 
The white army is traditionally good. No black magic or evil battle equipment, just POBE (Plain-Old-Battle-Equipment, LOL).

The black army is traditionally evil. Necromancers and siege weapons are welcome here.

Chivalry is the spice of every battle... so, after a couple of trials, we agreed on the following rules.

1. You can lay out your army as you desire, but every piece must stand on the first row of your field.
2. Both armies must occupy the same number of squares.
3. Pieces are described by three numbers: Attack/Defense/Speed
   • Attack is the ability to damage an opponent
   • Defense is the ability to sustain damage
   • Speed is the number of squares a piece can move during a turn
4. Before the battle begins, players agree to move any number of pieces per turn (1, 2 or even all pieces).
5. A piece can move in any direction (as the King in Chess).
6. A piece can't occupy or move through an occupied square.
7. Pieces two-squared long can move 2 squares per turn (for instance catapult or knights). Every other piece moves 1 square per turn, apart from unarmored men, who moves at double Speed (2sq/T) since they are lighter.
8. The following pieces have special abilities:
   • Necromancer: every ally occupying one of the 8 adjacent squares gets a +2A bonus / -1D malus
   • The Jester: every ally occupying one of the 8 adjacent squares gets a +1A bonus / +1D bonus
9. Attack and Defense are the total of:
   • Natural values (1A/1D).
   • Bearing a weapon (+1A). It is unclear if the mage staff counts as a weapon!
   • Bearing a shield (+1D). It is unclear if the long shield counts for a double bonus (+2D).
   • Mounting an horse (+1D).
10. Men bearing a spear can throw it to an enemy no more than 2 squares away. It is unclear if the spear can be thrown diagonally or at any angle! Once the spear has been thrown, it deals 2 damages and disappears.
11. Men bearing a crossbow can hit an enemy no more than 2 squares away.
12. The Catapult can attack from a distance of 3 squares. It has only two shots available but damages two squares per shot.
13. Attacking from a distance takes away 1 point of movement. Therefore if a piece has 1S it cannot move and attack in the same turn (although it can defend itself if attacked).
14. When men come to a square near one or more enemies there is an automatic melee attack.
    • The player who has made this move determines the Group Attack Strength, adding each Attack point from every piece that's adjacent to the moved piece and is in touch with an enemy piece.
    • The opponent does the same, determining its GAS.
    • The GAS is the total of the damage dealt to the enemy group. The player who deals the damage decides how many points damage are dealt to any defending piece.
15. If a piece gets a damage equal to or greater than its Defense, it "dies" (or breaks) and it is then removed from the battlefield.
16. After each attack:
    • dead or broken pieces are removed from the battlefield
    • mechanical pieces like the Catapult lose a number of Defense points equal to the damage received during the attack. This loss is permanent (though you can employ a gnome in your army if you want to repair damaged mechanics...)
17. Living pieces (men, horses, etc...)  can't ever lose their Defense points after an attack (unless if you agree on using unconventional troupes such as zombies or mummies!)

If you don't have a sufficient number of accessories (such as shields and weapons) you can use simple paper tokens to assign Attack and Defense points to your army. Building these tokens can be part of the fun!

You are welcome to throw your fireballs... er... comments!

The game goes on with the Expansion One.