Skip to content

Instantly share code, notes, and snippets.

@learningjs

learningjs/README.md

Forked from mbostock/.block
Created December 6, 2015 14:51
Download ZIP

Revisions

  1. @mbostock mbostock revised this gist Nov 29, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    A recreation of a [lovely GIF](https://twitter.com/exploratorium/status/670667375172329472) tweeted by the Exploratorium, explaining, “Wave motion at the surface of water is made up of small circular motions of parcels of water.”
    A recreation of a [lovely GIF](http://beesandbombs.tumblr.com/post/45513650541/orbiters) by Dave Whyte. As the [Exploratorium explains](https://twitter.com/exploratorium/status/670667375172329472), “Wave motion at the surface of water is made up of small circular motions of parcels of water.”
  2. @mbostock mbostock revised this gist Nov 29, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -59,7 +59,7 @@
    contextFront.save();
    contextFront.beginPath();
    contextFront.translate(i * ringSeparation, j * ringSeparation);
    contextFront.rotate((i + j) / 6 + elapsed / 2000);
    contextFront.rotate((i + j) / 6 + elapsed / 200);
    contextFront.arc(ringRadius, 0, dotRadius, 0, 2 * Math.PI);
    contextFront.fill();
    contextFront.restore();
  3. @mbostock mbostock revised this gist Nov 29, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -58,8 +58,8 @@
    for (var j = -1; j < m; ++j) {
    contextFront.save();
    contextFront.beginPath();
    contextFront.translate(i * ringSeparation + ringRadius, j * ringSeparation);
    contextFront.rotate((i + j) / 6 + elapsed / 200);
    contextFront.translate(i * ringSeparation, j * ringSeparation);
    contextFront.rotate((i + j) / 6 + elapsed / 2000);
    contextFront.arc(ringRadius, 0, dotRadius, 0, 2 * Math.PI);
    contextFront.fill();
    contextFront.restore();
  4. @mbostock mbostock revised this gist Nov 29, 2015. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,9 @@
    height = canvasBack.height,
    ringRadius = 24,
    ringSeparation = 1.1 * ringRadius,
    dotRadius = 3.5;
    dotRadius = 3.5,
    n = (width + ringRadius) / ringSeparation,
    m = (height + ringRadius) / ringSeparation;

    var contextBack,
    contextFront,
    @@ -42,8 +44,8 @@
    }

    contextBack.strokeStyle = "#999";
    for (var i = 0, n = (width + ringRadius) / ringSeparation; i < n; ++i) {
    for (var j = 0, m = (height + ringRadius) / ringSeparation; j < m; ++j) {
    for (var i = -1; i < n; ++i) {
    for (var j = -1; j < m; ++j) {
    contextBack.beginPath();
    contextBack.arc(i * ringSeparation, j * ringSeparation, ringRadius, 0, 2 * Math.PI);
    contextBack.stroke();
    @@ -52,8 +54,8 @@

    d3_timer.timer(function(elapsed) {
    contextFront.clearRect(0, 0, width, height);
    for (var i = -1, n = (width + ringRadius) / ringSeparation; i < n; ++i) {
    for (var j = -1, m = (height + ringRadius) / ringSeparation; j < m; ++j) {
    for (var i = -1; i < n; ++i) {
    for (var j = -1; j < m; ++j) {
    contextFront.save();
    contextFront.beginPath();
    contextFront.translate(i * ringSeparation + ringRadius, j * ringSeparation);
  5. @mbostock mbostock revised this gist Nov 29, 2015. No changes.
  6. @mbostock mbostock revised this gist Nov 29, 2015. 2 changed files with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    A recreation of a [lovely GIF](https://twitter.com/exploratorium/status/670667375172329472) tweeted by the Exploratorium, explaining, “Wave motion at the surface of water is made up of small circular motions of parcels of water.”
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  7. @mbostock mbostock revised this gist Nov 29, 2015. 1 changed file with 49 additions and 45 deletions.
    94 changes: 49 additions & 45 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -2,63 +2,67 @@
    <meta charset="utf-8">
    <style>

    .orbit {
    fill: none;
    stroke: #999;
    stroke-width: 1px;
    canvas {
    position: absolute;
    }

    </style>
    <svg width="960" height="500"></svg>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <canvas id="canvas-back" width="960" height="500"></canvas>
    <canvas id="canvas-front" width="960" height="500"></canvas>
    <script>

    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
    /* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
    !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("d3-timer",["exports"],e):e(t.d3_timer={})}(this,function(t){"use strict";function e(t,e,n){this.id=++c,this.restart(t,e,n)}function n(t,n,i){return new e(t,n,i)}function i(t){t=null==t?Date.now():+t,++l;try{for(var e,n=a;n;)t>=n.time&&(e=n.callback)(t-n.time,t),n=n.next}finally{--l}}function o(){l=f=0;try{i()}finally{for(var t,e=a,n=1/0;e;)e.callback?(n>e.time&&(n=e.time),e=(t=e).next):e=t?t.next=e.next:a=e.next;u=t,r(n)}}function r(t){if(!l){f&&(f=clearTimeout(f));var e=t-Date.now();e>24?1/0>t&&(f=setTimeout(o,e)):(l=1,s(o))}}var a,u,l=0,f=0,c=0,m={},s="undefined"!=typeof window&&(window.requestAnimationFrame||window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(t){return setTimeout(t,17)};e.prototype=n.prototype={restart:function(t,e,n){if("function"!=typeof t)throw new TypeError("callback is not a function");n=(null==n?Date.now():+n)+(null==e?0:+e);var i=this.id,o=m[i];o?(o.callback=t,o.time=n):(o={next:null,callback:t,time:n},u?u.next=o:a=o,m[i]=u=o),r()},stop:function(){var t=this.id,e=m[t];e&&(e.callback=null,e.time=1/0,delete m[t],r())}};var d="0.0.6";t.version=d,t.timer=n,t.timerFlush=i});

    var radius = 24,
    separation = 1.1 * radius;
    var canvasBack = document.getElementById("canvas-back"),
    canvasFront = document.getElementById("canvas-front");

    var index = cross(
    d3.range(0, (width + radius) / separation),
    d3.range(0, (height + radius) / separation)
    );
    var width = canvasBack.width,
    height = canvasBack.height,
    ringRadius = 24,
    ringSeparation = 1.1 * ringRadius,
    dotRadius = 3.5;

    svg.append("g")
    .attr("class", "orbit")
    .selectAll("g")
    .data(index)
    .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d[0] * separation + "," + d[1] * separation + ")"; })
    .attr("r", radius);
    var contextBack,
    contextFront,
    scale = window.devicePixelRatio;

    var particle = svg.append("g")
    .attr("class", "particle")
    .selectAll("g")
    .data(index)
    .enter().append("circle")
    .attr("cx", radius)
    .attr("r", 3.5);

    d3.timer(function(elapsed) {
    particle.attr("transform", function(d) {
    return "translate(" + (d[0] * separation) + "," + d[1] * separation + ")rotate(" + ((d[0] + d[1]) * 20 + elapsed / 6) + ")";
    });
    });
    if (scale > 1) {
    canvasFront.style.width = canvasBack.style.width = width + "px";
    canvasFront.style.height = canvasBack.style.height = height + "px";
    canvasFront.width = canvasBack.width = width * scale;
    canvasFront.height = canvasBack.height = height * scale;
    contextBack = canvasBack.getContext("2d");
    contextFront = canvasFront.getContext("2d");
    contextBack.scale(scale, scale);
    contextFront.scale(scale, scale);
    } else {
    contextBack = canvasBack.getContext("2d");
    contextFront = canvasFront.getContext("2d");
    }

    function cross(x, y) {
    var n = x.length,
    m = y.length,
    z = new Array(n * m);
    contextBack.strokeStyle = "#999";
    for (var i = 0, n = (width + ringRadius) / ringSeparation; i < n; ++i) {
    for (var j = 0, m = (height + ringRadius) / ringSeparation; j < m; ++j) {
    contextBack.beginPath();
    contextBack.arc(i * ringSeparation, j * ringSeparation, ringRadius, 0, 2 * Math.PI);
    contextBack.stroke();
    }
    }

    for (var i = 0, k = 0; i < n; ++i) {
    for (var j = 0; j < m; ++j, ++k) {
    z[k] = [x[i], y[j]];
    d3_timer.timer(function(elapsed) {
    contextFront.clearRect(0, 0, width, height);
    for (var i = -1, n = (width + ringRadius) / ringSeparation; i < n; ++i) {
    for (var j = -1, m = (height + ringRadius) / ringSeparation; j < m; ++j) {
    contextFront.save();
    contextFront.beginPath();
    contextFront.translate(i * ringSeparation + ringRadius, j * ringSeparation);
    contextFront.rotate((i + j) / 6 + elapsed / 200);
    contextFront.arc(ringRadius, 0, dotRadius, 0, 2 * Math.PI);
    contextFront.fill();
    contextFront.restore();
    }
    }

    return z;
    }
    });

    </script>
  8. @mbostock mbostock created this gist Nov 29, 2015.
    64 changes: 64 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .orbit {
    fill: none;
    stroke: #999;
    stroke-width: 1px;
    }

    </style>
    <svg width="960" height="500"></svg>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

    var radius = 24,
    separation = 1.1 * radius;

    var index = cross(
    d3.range(0, (width + radius) / separation),
    d3.range(0, (height + radius) / separation)
    );

    svg.append("g")
    .attr("class", "orbit")
    .selectAll("g")
    .data(index)
    .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d[0] * separation + "," + d[1] * separation + ")"; })
    .attr("r", radius);

    var particle = svg.append("g")
    .attr("class", "particle")
    .selectAll("g")
    .data(index)
    .enter().append("circle")
    .attr("cx", radius)
    .attr("r", 3.5);

    d3.timer(function(elapsed) {
    particle.attr("transform", function(d) {
    return "translate(" + (d[0] * separation) + "," + d[1] * separation + ")rotate(" + ((d[0] + d[1]) * 20 + elapsed / 6) + ")";
    });
    });

    function cross(x, y) {
    var n = x.length,
    m = y.length,
    z = new Array(n * m);

    for (var i = 0, k = 0; i < n; ++i) {
    for (var j = 0; j < m; ++j, ++k) {
    z[k] = [x[i], y[j]];
    }
    }

    return z;
    }

    </script>