Skip to content

Instantly share code, notes, and snippets.

@drfloob

drfloob/flag.svg

Forked from azundo/flag.svg
Last active Dec 19, 2015
Embed
What would you like to do?
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.
<!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 - treeOffset,
y: treeOffset+120
}],
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment