Saturday, June 5, 2010

A flag for the national day

Swedish national day tomorrow. Lets celebrate it by making a Swedish flag in JavaFX.

What we want is yellow cross on a blue background. In more detail according to the law about Swedish flags so shall the proportions of the flag be 10 to 16 (height to length). The blue fields closest to the flag pole shall have the proportions 4 to 5 and the outer blue fields 4 to 9. The thickness of the arms making up yellow cross should be half as thick as the height of the blue fields. The RGB values of the colors should be #005B99 (blue) and #FCD116 (yellow).

We now at least have some kind of specification of what we want so lets get going.

We need a title, a stage and a scene and finally a place to put our content that is the actual flag. Lets make the scene of our projects 100 times 160 pixels because this is the proportions of the flag. Some thinking and typing produces the following code:

import javafx.stage.Stage;
import javafx.scene.Scene;

Stage {
    title: "Swedish Flag"
    scene: Scene {
        width: 160
        height: 100
        content: [
            // TODO Add code for flag here
        ]
    }
}


Start out the making of the actual flag by constructing a blue rectangle. This is done by the following code.

Rectangle {
    x: 0, y: 0
    width: 160, height: 100
    fill: Color.rgb(0, 91, 153)
}


Adding two yellow rectangles in a similar fashion and then putting it all together gives the final code:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;

Stage {
    title: "Swedish Flag"
    scene: Scene {
        width: 160
        height: 100
        content: [
            Rectangle {
                x: 0, y: 0
                width: 160, height: 100
                fill: Color.rgb(0, 91, 153)
            }
            Rectangle {
                x: 50, y: 0
                width: 20, height: 100
                fill: Color.rgb(252, 209, 22)
            }
            Rectangle {
                x: 0, y: 40
                width: 160, height: 20
                fill: Color.rgb(252, 209, 22)
            }
        ]
    }
}


The result when running the script is the following flag picture

No comments:

Post a Comment