freifunk/ffmap-backend
8
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

pacman button

Browse source
This commit is contained in:
Nils Schneider 2012-06-12 01:02:49 +02:00
parent 3ba43d8536
commit 30526f51a9
4 changed files with 65 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
html/force.js
View file

@ -54,6 +54,12 @@ var style_btn = cp.append("button")
.text("Farbwechsler") .text("Farbwechsler")
.on("click", next_style) .on("click", next_style)
cp.append("button")
.attr("class", "btn")
.attr("value", "reload")
.text("Click me!")
.on("click", pacman)
var btns = cp.append("div") var btns = cp.append("div")
.attr("class", "btn-group") .attr("class", "btn-group")

1
html/nodes.html
View file

@ -9,6 +9,7 @@
<link href='force-light.css' rel='stylesheet' type='text/css' title='light'/> <link href='force-light.css' rel='stylesheet' type='text/css' title='light'/>
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="d3.v2.js"></script> <script type="text/javascript" src="d3.v2.js"></script>
<script type="text/javascript" src="pacman.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script> <script src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
</head> </head>

27
html/nodes2.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Freifunk Lübeck - Knotengraph</title>
<link href='style.css' rel='stylesheet' type='text/css' />
<link href='force.css' rel='stylesheet' type='text/css' />
<link href='force-big.css' rel='alternate stylesheet' type='text/css' title='big' disabled/>
<link href='force-light.css' rel='stylesheet' type='text/css' title='light'/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="d3.v2.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
</head>
<body>
<header>
<h1>luebeck.freifunk.net</h1>
<ul>
<li><a href="nodes.html">Knotengraph</a></li>
<li><a href="geomap.html">Knotenkarte</a></li>
</ul>
</header>
<div id="chart"></div>
<script src='force.js' type='text/javascript'></script>
<script src='pacman.js' type='text/javascript'></script>
</body>
</html>

116
html/pacman.js
View file

@ -1,72 +1,72 @@
var angle = d3.scale.linear()
.domain([0, 1, 2, 3])
.range([0.01, Math.PI/4, 0.01, Math.PI/4])
d3.timer(pacman)
var a = 0
var p = {x: 0, y: 0}
var pm = vis.append("path")
.style("fill", "#ff0")
.style("stroke", "#000")
.style("stroke-width", 2.5)
.style("stroke-linejoin", "round")
function pacman() { function pacman() {
var size = force.size() var angle = d3.scale.linear()
var nodes = force.nodes() .domain([0, 1, 2, 3])
var n = nodes.length .range([0.01, Math.PI/4, 0.01, Math.PI/4])
if (n == 0)
return
a = (a + 0.10)%2
pm.attr("d", d3.svg.arc().innerRadius(0) d3.timer(pacman_animate)
.outerRadius(24).endAngle(-angle(a) + Math.PI/2 + 2*Math.PI).startAngle(angle(a) + Math.PI/2)) var a = 0
var closest = null var p = {x: 0, y: 0}
var dd = Infinity; var pm = vis.append("path")
for (i = 0; i < n; i++) { .style("fill", "#ff0")
var o = nodes[i] .style("stroke", "#000")
.style("stroke-width", 2.5)
.style("stroke-linejoin", "round")
var d = Math.pow((o.x - p.x),2) + Math.pow( o.y - p.y, 2) function pacman_animate() {
if (d < dd) { var size = force.size()
dd = d var nodes = force.nodes()
closest = o var n = nodes.length
if (n == 0)
return
a = (a + 0.10)%2
pm.attr("d", d3.svg.arc().innerRadius(0)
.outerRadius(24).endAngle(-angle(a) + Math.PI/2 + 2*Math.PI).startAngle(angle(a) + Math.PI/2))
var closest = null
var dd = Infinity;
for (i = 0; i < n; i++) {
var o = nodes[i]
var d = Math.pow((o.x - p.x),2) + Math.pow( o.y - p.y, 2)
if (d < dd) {
dd = d
closest = o
}
} }
}
var dx = closest.x - p.x var dx = closest.x - p.x
var dy = closest.y - p.y var dy = closest.y - p.y
var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2)) var d = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
dx = dx/d dx = dx/d
dy = dy/d dy = dy/d
if (d>1) { if (d>8) {
p.x += dx * 2
p.x += dx p.y += dy * 6
p.y += dy
} else {
var snd;
if (closest.flags.client) {
snd = new Audio("pacman_eatfruit.wav")
} else { } else {
snd = new Audio("pacman_eatghost.wav") var snd;
if (closest.flags.client) {
snd = new Audio("pacman_eatfruit.wav")
} else {
snd = new Audio("pacman_eatghost.wav")
}
snd.play()
data.nodes = data.nodes.filter(function (d) {
return d.id != closest.id
})
data.links = data.links.filter(function (d) {
return d.target.id != closest.id && d.source.id != closest.id
})
update()
} }
snd.play()
data.nodes = data.nodes.filter(function (d) { pm.attr("transform", "matrix(" + [dx, dy, -dy, dx, p.x, p.y].join(",") + ")")
return d.id != closest.id
})
data.links = data.links.filter(function (d) {
return d.target.id != closest.id && d.source.id != closest.id
})
update()
} }
pm.attr("transform", "matrix(" + [dx, dy, -dy, dx, p.x, p.y].join(",") + ")")
} }