Permalink
Browse files

stash

  • Loading branch information...
markmarkoh committed Sep 11, 2012
1 parent 6a075ee commit 47ddf9a823c4351a041fa7a4613f7aa8a306559f
Showing with 638 additions and 16 deletions.
  1. +39 −0 bezier.html
  2. +3 −2 css/style.css
  3. +0 −6 index.html
  4. +94 −0 js/animated-bezier.js
  5. +339 −0 js/bvMap.js
  6. +163 −8 js/flat.js
View
@@ -0,0 +1,39 @@
+
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <title>Animated Bézier Curves - Jason Davies</title>
+ <link rel="stylesheet" href="/css/style.css">
+ <script src="/js/libs/jquery-1.7.1.js"></script>
+ <script src="/js/libs/d3.v2.js"></script>
+ <meta name="author" content="Jason Davies">
+ <style>
+ .curve, .line {
+ fill: none;
+ stroke-width: 1px;
+ }
+ .curve {
+ stroke: red;
+ stroke-width: 3px;
+ }
+ .control {
+ fill: #ccc;
+ stroke: #000;
+ stroke-width: .5px;
+ }
+ .t, .controltext {
+ font-size: .6em;
+ }
+ svg { float: left;}
+ </style>
+ </head>
+ <body>
+ <h1>Animated Bézier Curves</h1>
+ <p>Play with the control points to modify the curves!</p>
+ <div id="vis">
+ <script src="/js/animated-bezier.js"></script>
+ </div>
+ </body>
+</html>
+<p class="copyright">&copy; <a href="http://www.jasondavies.com/">Jason Davies</a> 2012.
View
@@ -80,11 +80,12 @@ circle {
}
path {
- fill: #aaa;
- stroke: #fff;
+ fill: none;
+ stroke: #222;
stroke-width: 0;
}
+
.arc {
stroke-width: 1px;
stroke: #BADA55;
View
@@ -50,11 +50,5 @@
<script src="js/libs/d3.v2.js"></script>
<script src="js/flat.js"></script>
- <script>
- var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
- (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
- g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
- s.parentNode.insertBefore(g,s)}(document,'script'));
- </script>
</body>
</html>
View
@@ -0,0 +1,94 @@
+var w = 250,
+ h = 300,
+ t = 1,
+ delta = .0025,
+ padding = 10,
+ points = [{x: 10, y: 250}, {x: 0, y: 0}, {x: 100, y: 0}, {x: 200, y: 250}],//, {x: 225, y: 125}],
+ bezier = {},
+ line = d3.svg.line().x(x).y(y),
+ n = 4,
+ stroke = d3.scale.category20b(),
+ orders = [4];
+
+var vis = d3.select("#vis").selectAll("svg")
+ .data(orders)
+ .enter().append("svg")
+ .attr("width", w + 2 * padding)
+ .attr("height", h + 2 * padding)
+ .append("g")
+ .attr("transform", "translate(" + padding + "," + padding + ")");
+
+var iii = 0;
+update();
+
+var last = 0;
+d3.timer(function(elapsed) {
+ t = (t + (elapsed - last) / 5000) % 1;
+ last = elapsed;
+ update();
+})
+
+
+function update() {
+ var interpolation = vis.selectAll("g")
+ .data(function(d) { return getLevels(d, t); });
+
+ if (iii === 1)
+ interpolation.enter().append("g")
+ .style("fill", colour)
+ .style("stroke", colour);
+
+ var curve = vis.selectAll("path.curve")
+ .data(function(d) {
+ console.log(d);
+ return getCurve(d);
+ });
+
+
+ if (iii === 1)
+ curve.enter().append("path")
+ .attr("class", "curve " + (iii++));
+
+ iii++;
+
+ curve.attr("d", line);
+
+}
+
+function interpolate(d, p) {
+ if (arguments.length < 2) p = t;
+ var r = [];
+ for (var i=1; i<d.length; i++) {
+ var d0 = d[i-1], d1 = d[i];
+ r.push({x: d0.x + (d1.x - d0.x) * p, y: d0.y + (d1.y - d0.y) * p});
+ }
+ return r;
+}
+
+function getLevels(d, t_) {
+ if (arguments.length < 2) t_ = t;
+ var x = [points.slice(0, d)];
+ for (var i=1; i<d; i++) {
+ x.push(interpolate(x[x.length-1], t_));
+ }
+ return x;
+}
+
+function getCurve(d) {
+ var curve = bezier[d];
+ if (!curve) {
+ curve = bezier[d] = [];
+ for (var t_=0; t_<=1; t_+=delta) {
+ var x = getLevels(d, t_);
+ curve.push(x[x.length-1][0]);
+ }
+ }
+ return [curve.slice(0, t / delta + 1)];
+}
+
+function x(d) { return d.x; }
+function y(d) { return d.y; }
+function colour(d, i) {
+ stroke(-i);
+ return d.length > 1 ? stroke(i) : "red";
+}
Oops, something went wrong.

0 comments on commit 47ddf9a

Please sign in to comment.