Flex 3 Truchet Tiling

Posted on March 4, 2008 | 3 comments

This example of Truchet tiling how to create easy Math patterns Flex 3. There are three classes TruchetTriangle, TruchetCircularArc and TruchetRandomArc.

The “Surprise Me!” button is quite fun to just watch the all the different patterns appear. So whats the purpose of this, well mostly to give my brain something totally different to focus on for a little bit while deadlines approach.

View it here! The source is available in the example, or you can get it here.

Share the post "Flex 3 Truchet Tiling"

  • http://www.phillipkerman.com/blog Phillip Kerman

    Neat O! Nice job.

  • http://www.huttar.net/weblog Lars

    Neat!
    What is the nature of the Random Arc setting? I thought at first it was just a random mixture of circular arcs and straight lines, then I thought it was hand-drawn lines, but it sort of looks like arcs at different size levels, fractal-like.

    Lars

  • http://www.renaun.com Renaun Erickson

    The random arc one takes one of the two arcs and defines a random number of smaller arcs, then for each of the smaller arc it randomizes the value that defines the curve points.

    var parts:int = int(Math.random() * tileSize / Math.min(tileSize, 8)) + 1;
    for (var i:int = 1;i <= parts; i++)
    {
    var pointX:int = leftX + (tileSize/2*i/parts);
    var pointY:int = leftY + (tileSize/2*i/parts*upDown);
    var arcX:int = int(Math.random() * (Math.max(lastX, pointX) – Math.min(lastX, pointX))) + Math.min(lastX, pointX);
    var arcY:int = int(Math.random() * (Math.max(lastY, pointY) – Math.min(lastY, pointY))) + Math.min(lastY, pointY);
    graphics.curveTo(arcX, arcY, pointX, pointY);
    lastX = pointX;
    lastY = pointY;
    }