Jasper Potts
Jigsaw Created With Boolean Shape operations
This JavaFX sample shows you how to add simple shapes like circles and rectangles to create complex shapes like a jigsaw piece.
Understanding the Code
Each of the jigsaw pieces is constructed from a square with four tabs that are either added or subtracted from the square. Each of the tabs is made from an ellipse for the bulb end and a rectangle to join the bulb end to the edge of the square. Two circles are subtracted to round the connection between the square and the bulb.
Figure 1: Diagram Showing the Shapes That Are Joined to Form a Jigsaw Piece.
Figure 2 shows the code for how to create a single tab for the jigsaw piece.
ShapeSubtract {
a: [
Ellipse {
centerX: 139
centerY: 0
radiusX: 20
radiusY: 35
},
Rectangle {
x: 100
y: -25
width: 22
height: 50
}
]
b: [
Circle {
centerX: 112.5
centerY: -28
radius: 12.5
},
Circle {
centerX: 112.5
centerY: 28
radius: 12.5
}
]
}
Figure 2: Code for Creating the Right Tab of the Jigsaw Shape
Taking that code a stage further in Figure 3 is the complete code for how to create a jigsaw piece shape.
ShapeSubtract {
a: [
// main rectangle
Rectangle {
x: -100
y: -100
width: 200
height: 200
}
// right tab
ShapeSubtract {
a: [
Ellipse {
centerX: 139
centerY: 0
radiusX: 20
radiusY: 35
},
Rectangle {
x: 100
y: -25
width: 22
height: 50
}
]
b: [
Circle {
centerX: 112.5
centerY: -28
radius: 12.5
},
Circle {
centerX: 112.5
centerY: 28
radius: 12.5
}
]
}
// bottom tab
ShapeSubtract {
a: [
Ellipse {
centerX: 0
centerY: 139
radiusX: 35
radiusY: 20
},
Rectangle {
x: -25
y: 100
width: 50
height: 22
}
]
b: [
Circle {
centerX: -28
centerY: 112.5
radius: 12.5
},
Circle {
centerX: 28
centerY: 112.5
radius: 12.5
}
]
}
]
b: [
// left tab
ShapeSubtract {
a: [
Ellipse {
centerX: -62
centerY: 0
radiusX: 20
radiusY: 35
},
Rectangle {
x: -100
y: -25
width: 22
height: 50
}
]
b: [
Circle {
centerX: -87.5
centerY: -28
radius: 12.5
},
Circle {
centerX: -87.5
centerY: 28
radius: 12.5
}
]
}
// top tab
ShapeSubtract {
a: [
Ellipse {
centerX: 0
centerY: -62
radiusX: 35
radiusY: 20
},
Rectangle {
x: -25
y: -100
width: 50
height: 25
}
]
b: [
Circle {
centerX: -28
centerY: -87.5
radius: 12.5
},
Circle {
centerX: 28
centerY: -87.5
radius: 12.5
}
]
}
]
}
Figure 3: Code for Creating Jigsaw Shape
After you have created a jigsaw shape, it is simple to take it from there and use it as the clip on an image. From that point all you have to do is add dragging and you have a simple jigsaw game. From this simple beginning, you could easily extend the code to make the jigsaw more complicated by having many smaller pieces and more of them or enabling the user to choose any image to turn into a jigsaw.