pacman button
parent
3ba43d8536
commit
30526f51a9
|
@ -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")
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
|
@ -1,18 +1,19 @@
|
||||||
var angle = d3.scale.linear()
|
function pacman() {
|
||||||
|
var angle = d3.scale.linear()
|
||||||
.domain([0, 1, 2, 3])
|
.domain([0, 1, 2, 3])
|
||||||
.range([0.01, Math.PI/4, 0.01, Math.PI/4])
|
.range([0.01, Math.PI/4, 0.01, Math.PI/4])
|
||||||
|
|
||||||
d3.timer(pacman)
|
d3.timer(pacman_animate)
|
||||||
var a = 0
|
var a = 0
|
||||||
|
|
||||||
var p = {x: 0, y: 0}
|
var p = {x: 0, y: 0}
|
||||||
var pm = vis.append("path")
|
var pm = vis.append("path")
|
||||||
.style("fill", "#ff0")
|
.style("fill", "#ff0")
|
||||||
.style("stroke", "#000")
|
.style("stroke", "#000")
|
||||||
.style("stroke-width", 2.5)
|
.style("stroke-width", 2.5)
|
||||||
.style("stroke-linejoin", "round")
|
.style("stroke-linejoin", "round")
|
||||||
|
|
||||||
function pacman() {
|
function pacman_animate() {
|
||||||
var size = force.size()
|
var size = force.size()
|
||||||
var nodes = force.nodes()
|
var nodes = force.nodes()
|
||||||
var n = nodes.length
|
var n = nodes.length
|
||||||
|
@ -44,10 +45,9 @@ function pacman() {
|
||||||
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 {
|
} else {
|
||||||
var snd;
|
var snd;
|
||||||
if (closest.flags.client) {
|
if (closest.flags.client) {
|
||||||
|
@ -68,5 +68,5 @@ function pacman() {
|
||||||
}
|
}
|
||||||
|
|
||||||
pm.attr("transform", "matrix(" + [dx, dy, -dy, dx, p.x, p.y].join(",") + ")")
|
pm.attr("transform", "matrix(" + [dx, dy, -dy, dx, p.x, p.y].join(",") + ")")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue