Skip to content

Instantly share code, notes, and snippets.

@azundo

azundo/flag.svg

Last active Dec 19, 2015
Embed
What would you like to do?
The Pirate Puzzle in D3.js
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!-- http://thenounproject.com/noun/grave/#icon-No11453 Alex Fuller from The Noun Project -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M68,73V37c0-9.941-8.059-18-18-18s-18,8.059-18,18v36h-9v9h54v-9H68z"/>
</svg>
<!doctype html>
<html>
<head>
<title>The Pirate Puzzle></title>
<style>
.island {
stroke: blue;
stroke-width: 3;
fill: transparent;
}
.tree {
stroke: green;
fill: green;
}
.grave {
stroke: black;
fill: black;
}
.flag {
stroke: red;
fill: red;
}
.treasure {
stroke: yellow;
fill: yellow;
}
.flag-path {
stroke: black;
fill: none;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">
(function (){
var width = 960,
height = 600,
// our svg container
svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height),
// a group within our container that will hold our map features
features = svg.append('g'),
// a group within our features group that will hold some paths to explain the geometries
geometries = features.append('g'),
islandRadius = 300,
featureLength = 30,
treeOffset = 210,
trees = [
{
x: treeOffset,
y: treeOffset
},
{
x: islandRadius*2 - treeOffset,
y: treeOffset
}],
grave = {x: islandRadius, y: islandRadius},
// helper function for generating path values for lines
line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
// create a mask to keep features from displaying off of the island
svg.append('g')
.append('clipPath')
.attr('id','island-mask')
.append('circle')
.attr('r', islandRadius)
.attr('cx', islandRadius)
.attr('cy', islandRadius);
// apply it to the features group
features.attr('clip-path', 'url(#island-mask)');
// create the island on top of everything. If we draw our features "over top"
// of the island then they will interfere with our event handling
svg.append('circle')
.attr('r', islandRadius)
.attr('cx', islandRadius)
.attr('cy', islandRadius)
.classed('island', true);
// create the trees - these are static so only draw them once
features.selectAll('.tree')
.data(trees)
.enter().append('image')
.attr('xlink:href', 'tree.svg')
.attr('width', featureLength)
.attr('height', featureLength)
.attr('x', getX)
.attr('y', getY)
.classed('tree', true);
// dynamic draw function for things that react to moving the grave position
function draw() {
// calculate positions
var flags = getFlagPositions(trees, grave),
treasure = getTreasurePosition(flags),
paths = getPathPoints(trees, flags, grave);
// draw the grave
features.selectAll('.grave')
.data([grave])
.attr('x', getX)
.attr('y', getY)
.enter().append('image')
.attr('xlink:href', 'grave.svg')
.classed('grave', true)
.attr('height', featureLength)
.attr('width', featureLength)
.attr('x', getX)
.attr('y', getY);
// draw the flags
features.selectAll('.flag')
.data(flags)
.attr('x', getX)
.attr('y', getY)
.enter().append('image')
.attr('xlink:href', 'flag.svg')
.classed('flag', true)
.attr('height', featureLength)
.attr('width', featureLength)
.attr('x', getX)
.attr('y', getY);
// draw the treasure location
features.selectAll('.treasure')
.data([treasure])
.attr('x', getX)
.attr('y', getY)
.enter().append('image')
.attr('xlink:href', 'treasure_chest.svg')
.classed('treasure', true)
.attr('height', featureLength)
.attr('width', featureLength)
.attr('x', getX)
.attr('y', getY);
// draw triangles showing the flag calculations
// these are in the geometries group so they appear underneath the other features
geometries.selectAll('.flag-path')
.data(paths)
.attr('d', line)
.enter().append('path')
.classed('flag-path', true)
.attr('d', line);
}
// move grave location to wherever the mouse is
svg.select('.island')
.on('mousemove', function() {
// 15 is a magic number to make things look nice, on my screen at least.
var mousePosition = d3.mouse(this);
grave.x = mousePosition[0] - 5;
grave.y = mousePosition[1] - 5;
draw();
});
// calculate the positions of the flags
function getFlagPositions(treePositions, gravePosition) {
var leftTree, rightTree, rise, run, leftFlag, rightFlag,
flagPositions, leftTreeIdx, rightTreeIdx;
// XXX assume grave position is either above or below both,
// i.e. y positions are equal for both trees
// this code determines which tree is "left" and which is "right" based
// on the location of the grave
if (
(treePositions[0].x < treePositions[1].x && treePositions[0].y < grave.y) ||
(treePositions[0].x > treePositions[1].x && treePositions[0].y > grave.y)
) {
leftTreeIdx = 0;
rightTreeIdx = 1;
} else {
leftTreeIdx = 1;
rightTreeIdx = 0;
}
leftTree = treePositions[leftTreeIdx];
rightTree = treePositions[rightTreeIdx];
// get left flag position
rise = gravePosition.y - leftTree.y;
run = gravePosition.x - leftTree.x;
// turn 90 to the left
leftFlag = {
x: leftTree.x - rise,
y: leftTree.y + run
};
// get right flag position
rise = gravePosition.y - rightTree.y;
run = gravePosition.x - rightTree.x;
// turn 90 to the right
rightFlag = {
x: rightTree.x + rise,
y: rightTree.y - run
};
flagPositions = [];
// use these indexes to keep the order of our flags consistent with the order
// of our trees in the trees array
flagPositions[leftTreeIdx] = leftFlag;
flagPositions[rightTreeIdx] = rightFlag;
return flagPositions;
}
function getTreasurePosition(flagPositions) {
// averages the x and y values of the two flag positions
return {
x: (flagPositions[0].x + flagPositions[1].x) / 2,
y: (flagPositions[0].y + flagPositions[1].y) / 2
}
}
function getPathPoints(treePositions, flagPositions, grave) {
// create two lines, grave -> tree -> flag -> grave for each tree
return [
[
grave,
treePositions[0],
flagPositions[0],
grave
],
[
grave,
treePositions[1],
flagPositions[1],
grave
]
]
}
// helper functions for positioning
function getX(d) {
return d.x - featureLength/2;
}
function getY(d) {
return d.y - featureLength/2;
}
})();
</script>
</body>
</html>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@MarkusQ

This comment has been minimized.

Copy link

@MarkusQ MarkusQ commented Jul 6, 2013

Actually, without the grave you don't know which tree is the left tree and which is the right, so there are actually two places to look, the one you find and another symmetrically places with respect to the line between the trees.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment