Last active
December 4, 2015 12:21
-
-
Save BikeshC/fa639e8ec5238311420f to your computer and use it in GitHub Desktop.
Quadratic Bézier curve
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3 : SVG animation</title> | |
| <<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| <style> | |
| svg { | |
| font: 10px sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var margin = {top: 20, right: 40, bottom: 10, left: 40}, | |
| width = 960, | |
| height = 850 - margin.top - margin.bottom; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .style("margin-left", margin.left + "px"); | |
| var bezier = function bezier(t, p0, p1, p2) { | |
| return (1-t)*((1-t)*p0 + t*p1) + t*((1-t)*p1 + t*p2); | |
| } | |
| var bezierLine = function bezierLine(t, p0, p1) { | |
| return (1-t)*p0 + t*p1; | |
| } | |
| var x0=100, y0=350; | |
| var x1=250, y1=50; | |
| var x2=400, y2=350; | |
| svg.append("path") | |
| .attr("d", "M 100,350 Q 250,50 400,350") | |
| .attr("stroke", "blue") | |
| .attr("stroke-width", "2px") | |
| .attr("fill", "none"); | |
| svg.append("text") | |
| .attr("x", x0) | |
| .attr("y", y0) | |
| .attr("dx", "-20") | |
| .text("A"); | |
| svg.append("text") | |
| .attr("x", x1) | |
| .attr("y", y1) | |
| .attr("dx", "-20") | |
| .text("B"); | |
| svg.append("text") | |
| .attr("x", x2) | |
| .attr("y", y2) | |
| .attr("dx", "20") | |
| .text("C"); | |
| svg.append("circle") | |
| .attr("cx", x0) | |
| .attr("cy", y0) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "black"); | |
| svg.append("circle") | |
| .attr("cx", x1) | |
| .attr("cy", y1) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "black"); | |
| svg.append("circle") | |
| .attr("cx", x2) | |
| .attr("cy", y2) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "black"); | |
| svg.append("line") | |
| .attr("x1", x0) | |
| .attr("y1", y0) | |
| .attr("x2", x1) | |
| .attr("y2", y1) | |
| .attr("stroke", "red") | |
| .attr("stroke-width", "1px"); | |
| svg.append("line") | |
| .attr("x1", x1) | |
| .attr("y1", y1) | |
| .attr("x2", x2) | |
| .attr("y2", y2) | |
| .attr("stroke", "red") | |
| .attr("stroke-width", "1px"); | |
| var movingLine = svg.append("line") | |
| .attr("x1", x0) | |
| .attr("y1", y0) | |
| .attr("x2", x1) | |
| .attr("y2", y1) | |
| .attr("stroke", "green") | |
| .attr("stroke-width", "1px"); | |
| var movingCircle = svg.append("circle") | |
| .attr("cx", x0) | |
| .attr("cy", y0) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "black"); | |
| var movingCircle1 = svg.append("circle") | |
| .attr("cx", x0) | |
| .attr("cy", y0) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "none"); | |
| var movingCircle2 = svg.append("circle") | |
| .attr("cx", x1) | |
| .attr("cy", y1) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "none"); | |
| function drawCircle(i) { | |
| var x = Math.round(bezier(i, x0, x1, x2)); | |
| var y = Math.round(bezier(i, y0, y1, y2)); | |
| movingCircle | |
| .attr("cx", x) | |
| .attr("cy", y) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "black"); | |
| var lx1 = Math.round(bezierLine(i, x0, x1)); | |
| var lx2 = Math.round(bezierLine(i, x1, x2)); | |
| var ly1 = Math.round(bezierLine(i, y0, y1)); | |
| var ly2 = Math.round(bezierLine(i, y1, y2)); | |
| movingLine | |
| .attr("x1", lx1) | |
| .attr("y1", ly1) | |
| .attr("x2", lx2) | |
| .attr("y2", ly2) | |
| .attr("stroke", "green") | |
| .attr("stroke-width", "1px"); | |
| movingCircle1 | |
| .attr("cx", lx1) | |
| .attr("cy", ly1) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "none"); | |
| movingCircle2 | |
| .attr("cx", lx2) | |
| .attr("cy", ly2) | |
| .attr("r", "3px") | |
| .attr("stroke", "black") | |
| .attr("stroke-width", "1px") | |
| .attr("fill", "none"); | |
| } | |
| var t=0; | |
| setInterval(function() { | |
| if (t<=1) { | |
| drawCircle(t); | |
| t+=0.02; | |
| } else { | |
| t=0; | |
| } | |
| }, 100); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment