Skip to content

Instantly share code, notes, and snippets.

@vectorsize

vectorsize/domino.js

Last active June 13, 2019 04:18
Download ZIP

Revisions

  1. vectorsize revised this gist Dec 20, 2013. 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
    @@ -26,8 +26,8 @@
    var prefix = "http://www.w3.org/2000/svg";
    var _window = domino.createWindow('<body></body>');

    // var _document = _window.document;
    var _document = window.document;
    var _document = _window.document;
    // var _document = window.document;


    var sketch = d3.select(_document.body).append(function(){
  2. vectorsize revised this gist Dec 20, 2013. No changes.
  3. vectorsize revised this gist Dec 20, 2013. 2 changed files with 104 additions and 0 deletions.
    98 changes: 98 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,98 @@
    <html>
    <head>
    <title>D3 on Domino.js</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script src="domino.js"></script>
    <script src="stats.min.js"></script>
    </head>
    <body>
    <canvas id="container" width="960" height="500"></canvas>
    <script>
    var w = 960,
    h = 500;

    var stats = new Stats();
    stats.setMode(0); // 0: fps, 1: ms
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = 0;
    stats.domElement.style.top = 0;

    var h1 = document.querySelector('body');
    h1.appendChild( stats.domElement );

    var canvas = document.getElementById('container');
    var context = canvas.getContext("2d");

    var prefix = "http://www.w3.org/2000/svg";
    var _window = domino.createWindow('<body></body>');

    // var _document = _window.document;
    var _document = window.document;


    var sketch = d3.select(_document.body).append(function(){
    var svg = _document.createElementNS(prefix, "svg");
    svg.isAncestor = true;
    return svg;
    });

    sketch.attr("width", w)
    .attr("height", h)
    .call(custom);

    // On each mouse move, create a circle that increases in size and fades away.
    d3.select(canvas).on("mousemove", function() {
    stats.begin();

    var sircle = function(){
    var circle = _document.createElementNS(prefix, "circle");
    circle.isAncestor = true;
    return circle;
    };

    for (var i = 0; i < h; i++) {
    var circ = sketch.append(sircle);
    circ.attr("x", d3.event.offsetX + i)
    .attr("y", d3.event.offsetY + i)
    .attr("radius", 1)
    .attr("strokeStyle", "red")
    .transition()
    .duration(2000)
    .ease(Math.sqrt)
    .attr("radius", 200)
    .attr("strokeStyle", "white")
    .remove();
    }

    });

    function custom(selection) {

    selection.each(function() {
    var root = this;

    // It'd be nice to use DOM Mutation Events here instead.
    // However, they appear to arrive irregularly, causing choppy animation.
    d3.timer(redraw);

    // Clear the canvas and then iterate over child elements.
    function redraw() {

    canvas.width = root.getAttribute("width");
    canvas.height = root.getAttribute("height");

    sketch.selectAll('circle')
    .each(function(){
    var d = d3.select(this);
    context.strokeStyle = d.attr("strokeStyle");
    context.beginPath();
    context.arc(d.attr("x"), d.attr("y"), d.attr("radius"), 0, 2 * Math.PI);
    context.stroke();
    });
    stats.end();
    }
    });
    };
    </script>
    </body>
    </html>
    6 changes: 6 additions & 0 deletions stats.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    // stats.js - http://github.com/mrdoob/stats.js
    var Stats=function(){var l=Date.now(),m=l,g=0,n=Infinity,o=0,h=0,p=Infinity,q=0,r=0,s=0,f=document.createElement("div");f.id="stats";f.addEventListener("mousedown",function(b){b.preventDefault();t(++s%2)},!1);f.style.cssText="width:80px;opacity:0.9;cursor:pointer";var a=document.createElement("div");a.id="fps";a.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002";f.appendChild(a);var i=document.createElement("div");i.id="fpsText";i.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";
    i.innerHTML="FPS";a.appendChild(i);var c=document.createElement("div");c.id="fpsGraph";c.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff";for(a.appendChild(c);74>c.children.length;){var j=document.createElement("span");j.style.cssText="width:1px;height:30px;float:left;background-color:#113";c.appendChild(j)}var d=document.createElement("div");d.id="ms";d.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none";f.appendChild(d);var k=document.createElement("div");
    k.id="msText";k.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px";k.innerHTML="MS";d.appendChild(k);var e=document.createElement("div");e.id="msGraph";e.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0";for(d.appendChild(e);74>e.children.length;)j=document.createElement("span"),j.style.cssText="width:1px;height:30px;float:left;background-color:#131",e.appendChild(j);var t=function(b){s=b;switch(s){case 0:a.style.display=
    "block";d.style.display="none";break;case 1:a.style.display="none",d.style.display="block"}};return{REVISION:11,domElement:f,setMode:t,begin:function(){l=Date.now()},end:function(){var b=Date.now();g=b-l;n=Math.min(n,g);o=Math.max(o,g);k.textContent=g+" MS ("+n+"-"+o+")";var a=Math.min(30,30-30*(g/200));e.appendChild(e.firstChild).style.height=a+"px";r++;b>m+1E3&&(h=Math.round(1E3*r/(b-m)),p=Math.min(p,h),q=Math.max(q,h),i.textContent=h+" FPS ("+p+"-"+q+")",a=Math.min(30,30-30*(h/100)),c.appendChild(c.firstChild).style.height=
    a+"px",m=b,r=0);return b},update:function(){l=this.end()}}};
  4. vectorsize created this gist Dec 20, 2013.
    19,506 changes: 19,506 additions & 0 deletions domino.js
    View file
    19,506 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.