Skip to content

Instantly share code, notes, and snippets.

@uicoded

uicoded/.block

Created February 2, 2018 22:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save uicoded/fc78b6fcac1d6463c33f183f5b7f1563 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save uicoded/fc78b6fcac1d6463c33f183f5b7f1563 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. uicoded created this gist Feb 2, 2018.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
    4 changes: 4 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    A slightly updated version of [OMG Particles!](/mbostock/1062544) using Canvas and [smooth interpolation](/mbostock/6499018) towards the mouse location.


    forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/9539958'>OMG Particles II</a>
    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>

    body {
    margin: 0;
    background: #111;
    min-width: 960px;
    }

    </style>
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var width = Math.max(960, innerWidth),
    height = Math.max(500, innerHeight);

    var x1 = width / 2,
    y1 = height / 2,
    x0 = x1,
    y0 = y1,
    i = 0,
    r = 200,
    τ = 2 * Math.PI;

    var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", move);

    var context = canvas.node().getContext("2d");
    context.globalCompositeOperation = "lighter";
    context.lineWidth = 2;

    d3.timer(function() {
    context.clearRect(0, 0, width, height);

    var z = d3.hsl(++i % 360, 1, .5).rgb(),
    c = "rgba(" + z.r + "," + z.g + "," + z.b + ",",
    x = x0 += (x1 - x0) * .1,
    y = y0 += (y1 - y0) * .1;

    d3.select({}).transition()
    .duration(2000)
    .ease(Math.sqrt)
    .tween("circle", function() {
    return function(t) {
    context.strokeStyle = c + (1 - t) + ")";
    context.beginPath();
    context.arc(x, y, r * t, 0, τ);
    context.stroke();
    };
    });
    });

    function move() {
    var mouse = d3.mouse(this);
    x1 = mouse[0];
    y1 = mouse[1];
    d3.event.preventDefault();
    }

    </script>