Koutsi - Animaatiotyöstöä

by james0n

HTML

<body>
    <button onClick="pause()">pause</button>
    <button onClick="start()">start</button>
    <label id="clock"></label>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <div id="viz"></div>

CSS

circle {
    fill: lightsteelblue;
    stroke: steelblue;
    stroke-width: 1.5px;
}
circle.dragging {
    fill: red;
    stroke: brown;
}
#viz {
    background-color:#eee;
}

JavaScript

setInterval(function () {
    updateClock()
}, 100);

var
width = 800,
    height = 600,
    paused = 0;

var points = [];
var times = [];
var mpath = [];
var keyPoints = [];
var keyTimes = [];
var duration = "";



var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("id", "field")
    .attr("width", width)
    .attr("height", height);

var rect = sampleSVG.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all");

var drag = d3.behavior.drag()
    .on("dragstart", dragstarted)
    .on("drag", dragged)
    .on("dragend", dragended);

sampleSVG.append("circle")
    .attr("id", "circ1")
    .attr("r", 10)
    .attr("cx", 50)
    .attr("cy", 150)
    .attr("class", "dot")
    .call(drag);

sampleSVG.append("circle")
    .attr("id", "circ2")
    .attr("r", 10)
    .attr("cx", 100)
    .attr("cy", 250)
    .attr("class", "dot")
    .call(drag);

sampleSVG.append("circle")
    .attr("id", "circ3")
    .attr("r", 10)
    .attr("cx", 150)
    .attr("cy", 350)
    .attr("class", "dot")
    .call(drag);

sampleSVG.append("circle")
    .attr("id", "circ4")
    .attr("r", 10)
    .attr("cx", 200)
    .attr("cy", 450)
    .attr("class", "dot")
    .call(drag);

svg = document.getElementById("field");

function dragstarted(d) {
    d3.event.sourceEvent.stopPropagation();
    d3.select(this).classed("dragging", true);

    currTime = getCorrectTime();
    if (duration) {
        times.push(Date.now() - (1000 * currTime));
    } else {
        times.push(Date.now());
    }

    console.log("started dragging at: " + currTime);
}

function dragged(d) {
    points.push(d3.event.x + "," + d3.event.y);
    times.push(Date.now());
    d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);

}

function dragended(d) {
    d3.select(this).classed("dragging", false);
    convertToMotionPath(this);
}

function convertToMotionPath(t) {

    // use timestamp as path id
    pathId = Date.now();
   ...