Skip to content

Instantly share code, notes, and snippets.

@ggamel

ggamel/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:22
Download ZIP

Revisions

  1. @mbostock mbostock revised this gist Jun 9, 2015. 1 changed file with 14 additions and 12 deletions.
    26 changes: 14 additions & 12 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,17 +6,19 @@
    /* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
    "undefined"==typeof requestAnimationFrame&&(requestAnimationFrame="undefined"!=typeof window&&(window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(e){return setTimeout(e,17)}),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.timer={})}(this,function(e){"use strict";function t(){l=s=0,c=1/0,n(a())}function n(e){if(!l){var n=e-Date.now();n>24?c>e&&(s&&clearTimeout(s),s=setTimeout(t,n),c=e):(s&&(s=clearTimeout(s),c=1/0),l=requestAnimationFrame(t))}}function i(e,t){this.callback=e,this.time=t,this.flush=!1,this.next=null}function o(e,t,o){o=null==o?Date.now():+o,null!=t&&(o+=+t);var u=new i(e,o);r?r.next=u:m=u,r=u,n(o)}function u(e,t,n){n=null==n?Date.now():+n,null!=t&&(n+=+t),f.callback=e,f.time=n}function a(e){e=null==e?Date.now():+e;var t=f;for(f=m;f;)e>=f.time&&(f.flush=f.callback(e-f.time,e)),f=f.next;f=t,e=1/0;for(var n,i=m;i;)i.flush?i=n?n.next=i.next:m=i.next:(i.time<e&&(e=i.time),i=(n=i).next);return r=n,e}var m,r,f,l,s,c=1/0;e.timer=o,e.timerReplace=u,e.timerFlush=a});

    var tau = 2 * Math.PI,
    n = 100,
    radius = 2.5,
    particles = new Array(n),
    canvas = document.querySelector("canvas"),
    var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    padding = 100,
    distance2a = 80 * 80,
    distance2b = 100 * 100;
    radius = 2.5,
    minDistance = 80,
    maxDistance = 100,
    minDistance2 = minDistance * minDistance,
    maxDistance2 = maxDistance * maxDistance;

    var tau = 2 * Math.PI,
    n = 100,
    particles = new Array(n);

    for (var i = 0; i < n; ++i) {
    particles[i] = {
    @@ -36,8 +38,8 @@
    dx = pi.x - pj.x,
    dy = pi.y - pj.y,
    d2 = dx * dx + dy * dy;
    if (d2 < distance2b) {
    context.globalAlpha = d2 > distance2a ? (distance2b - d2) / (distance2b - distance2a) : 1;
    if (d2 < maxDistance2) {
    context.globalAlpha = d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 1;
    context.beginPath();
    context.moveTo(pi.x, pi.y);
    context.lineTo(pj.x, pj.y);
    @@ -50,8 +52,8 @@
    for (var i = 0; i < n; ++i) {
    var p = particles[i];
    p.y = p.y0 + elapsed * p.v;
    if (p.y > height + padding) p.x = width * Math.random(), p.y0 -= height + 2 * padding;
    else if (p.y < -padding) p.x = width * Math.random(), p.y0 += height + 2 * padding;
    if (p.y > height + maxDistance) p.x = width * Math.random(), p.y0 -= height + 2 * maxDistance;
    else if (p.y < -maxDistance) p.x = width * Math.random(), p.y0 += height + 2 * maxDistance;
    context.beginPath();
    context.arc(p.x, p.y, radius, 0, tau);
    context.fill();
  2. @mbostock mbostock revised this gist Jun 9, 2015. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -27,19 +27,8 @@
    }

    timer.timer(function(elapsed) {
    context.globalAlpha = 1;
    context.clearRect(0, 0, width, height);

    for (var i = 0; i < n; ++i) {
    var p = particles[i];
    p.y = p.y0 + elapsed * p.v;
    if (p.y > height + padding) p.x = width * Math.random(), p.y0 -= height + 2 * padding;
    else if (p.y < -padding) p.x = width * Math.random(), p.y0 += height + 2 * padding;
    context.beginPath();
    context.arc(p.x, p.y, radius, 0, tau);
    context.fill();
    }

    for (var i = 0; i < n; ++i) {
    for (var j = i + 1; j < n; ++j) {
    var pi = particles[i],
    @@ -56,6 +45,17 @@
    }
    }
    }
    context.globalAlpha = 1;

    for (var i = 0; i < n; ++i) {
    var p = particles[i];
    p.y = p.y0 + elapsed * p.v;
    if (p.y > height + padding) p.x = width * Math.random(), p.y0 -= height + 2 * padding;
    else if (p.y < -padding) p.x = width * Math.random(), p.y0 += height + 2 * padding;
    context.beginPath();
    context.arc(p.x, p.y, radius, 0, tau);
    context.fill();
    }
    });

    </script>
  3. @mbostock mbostock revised this gist Jun 9, 2015. 1 changed file with 0 additions and 0 deletions.
    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.
  4. @mbostock mbostock created this gist Jun 9, 2015.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    A test of the [d3-timer module](https://github.com/d3/d3-timer).
    61 changes: 61 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <canvas width="960" height="500"></canvas>
    <script>

    /* https://github.com/d3/d3-timer Copyright 2015 Mike Bostock */
    "undefined"==typeof requestAnimationFrame&&(requestAnimationFrame="undefined"!=typeof window&&(window.msRequestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame)||function(e){return setTimeout(e,17)}),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.timer={})}(this,function(e){"use strict";function t(){l=s=0,c=1/0,n(a())}function n(e){if(!l){var n=e-Date.now();n>24?c>e&&(s&&clearTimeout(s),s=setTimeout(t,n),c=e):(s&&(s=clearTimeout(s),c=1/0),l=requestAnimationFrame(t))}}function i(e,t){this.callback=e,this.time=t,this.flush=!1,this.next=null}function o(e,t,o){o=null==o?Date.now():+o,null!=t&&(o+=+t);var u=new i(e,o);r?r.next=u:m=u,r=u,n(o)}function u(e,t,n){n=null==n?Date.now():+n,null!=t&&(n+=+t),f.callback=e,f.time=n}function a(e){e=null==e?Date.now():+e;var t=f;for(f=m;f;)e>=f.time&&(f.flush=f.callback(e-f.time,e)),f=f.next;f=t,e=1/0;for(var n,i=m;i;)i.flush?i=n?n.next=i.next:m=i.next:(i.time<e&&(e=i.time),i=(n=i).next);return r=n,e}var m,r,f,l,s,c=1/0;e.timer=o,e.timerReplace=u,e.timerFlush=a});

    var tau = 2 * Math.PI,
    n = 100,
    radius = 2.5,
    particles = new Array(n),
    canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height,
    padding = 100,
    distance2a = 80 * 80,
    distance2b = 100 * 100;

    for (var i = 0; i < n; ++i) {
    particles[i] = {
    x: width * Math.random(),
    y0: height * Math.random(),
    v: .1 * (Math.random() - .5)
    };
    }

    timer.timer(function(elapsed) {
    context.globalAlpha = 1;
    context.clearRect(0, 0, width, height);

    for (var i = 0; i < n; ++i) {
    var p = particles[i];
    p.y = p.y0 + elapsed * p.v;
    if (p.y > height + padding) p.x = width * Math.random(), p.y0 -= height + 2 * padding;
    else if (p.y < -padding) p.x = width * Math.random(), p.y0 += height + 2 * padding;
    context.beginPath();
    context.arc(p.x, p.y, radius, 0, tau);
    context.fill();
    }

    for (var i = 0; i < n; ++i) {
    for (var j = i + 1; j < n; ++j) {
    var pi = particles[i],
    pj = particles[j],
    dx = pi.x - pj.x,
    dy = pi.y - pj.y,
    d2 = dx * dx + dy * dy;
    if (d2 < distance2b) {
    context.globalAlpha = d2 > distance2a ? (distance2b - d2) / (distance2b - distance2a) : 1;
    context.beginPath();
    context.moveTo(pi.x, pi.y);
    context.lineTo(pj.x, pj.y);
    context.stroke();
    }
    }
    }
    });

    </script>