Last active
November 14, 2020 02:55
-
-
Save enthal/3a7e4923c274cb678f60 to your computer and use it in GitHub Desktop.
D3/SVG "finger" articulation: https://bl.ocks.org/enthal/3a7e4923c274cb678f60
This file contains hidden or 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> | |
| <meta charset="utf-8"> | |
| <style> | |
| svg { | |
| fill: none; | |
| stroke: #300; | |
| stroke-width: 4px; | |
| stroke-linecap: round; | |
| } | |
| svg rect.mouse { | |
| fill: none; | |
| stroke: none; | |
| pointer-events: all; | |
| } | |
| svg .arm line { stroke-opacity: 1.0; stroke-width: 24px; } | |
| svg .hand line { stroke-opacity: 0.6; stroke-width: 20px; } | |
| svg .finger1 line { stroke-opacity: 0.4; stroke-width: 12px; } | |
| svg .finger2 line { stroke-opacity: 0.3; stroke-width: 10px; } | |
| </style> | |
| <body></body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| <script> | |
| var width = 960, height = 500; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var arm = svg.append("g").classed("arm", true) | |
| .attr("transform", "translate(100,200) scale(1.2)") | |
| .append("g"); | |
| arm.append("line") | |
| .attr("x2", 250); | |
| var wrist = arm.append("g") | |
| .attr("transform", "translate(250)") | |
| .append("g"); | |
| var hands = []; | |
| var knuckle1s = []; | |
| var knuckle2s = []; | |
| function addHandPart(length) { | |
| var hand = wrist.append("g").classed("hand", true); | |
| hands.push(hand); | |
| hand.append("line") | |
| .attr("x2", length); | |
| var knuckle1 = hand.append("g") | |
| .attr("transform", "translate("+length+")") | |
| .append("g") | |
| knuckle1s.push(knuckle1); | |
| var finger1 = knuckle1.append("g").classed("finger1", true); | |
| finger1.append("line") | |
| .attr("x2", 2*length/3); | |
| var knuckle2 = knuckle1.append("g") | |
| .attr("transform", "translate("+2*length/3+")") | |
| .append("g") | |
| knuckle2s.push(knuckle2); | |
| var finger2 = knuckle2.append("g").classed("finger2", true); | |
| finger2.append("line") | |
| .attr("x2", length/3); | |
| } | |
| addHandPart(100); | |
| addHandPart(120); | |
| addHandPart(110); | |
| svg.append("rect").classed("mouse", true) | |
| .attr("width", width) | |
| .attr("height", height) | |
| .on("click", move); | |
| move(); | |
| function move() { | |
| arm | |
| .attr("transform", "rotate(0)") | |
| .transition() .duration(1200) .attr("transform", "rotate(-16)") .ease("cubic-in") | |
| .transition() .duration(1600) .attr("transform", "rotate( -2)") .ease("cubic-out"); | |
| wrist | |
| .attr("transform", "rotate(10)") | |
| .transition() .duration(1200) .attr("transform", "rotate( 35)") | |
| .transition() .duration( 200) .attr("transform", "rotate(-10)") .ease("linear") | |
| .transition() .duration(1600) .attr("transform", "rotate( 20)"); | |
| hands[1] | |
| .attr("transform", "rotate(20)") | |
| .transition() .duration(1800) .attr("transform", "rotate( 18)"); | |
| hands[2] | |
| .attr("transform", "rotate(40)") | |
| .transition() .duration(1800) .attr("transform", "rotate( 35)"); | |
| rotateKnuckles(knuckle1s); | |
| rotateKnuckles(knuckle2s); | |
| function rotateKnuckles(knuckles) { | |
| knuckles[0] | |
| .attr("transform", "rotate(20)") | |
| .transition() .duration(1400) .attr("transform", "rotate(85)") | |
| .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear") | |
| .transition() .duration(1600) .attr("transform", "rotate(45)"); | |
| knuckles[1] | |
| .attr("transform", "rotate(15)") | |
| .transition() .duration(1400) .attr("transform", "rotate(60)") | |
| .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear") | |
| .transition() .duration(1600) .attr("transform", "rotate(45)"); | |
| knuckles[2] | |
| .attr("transform", "rotate(15)") | |
| .transition() .duration(1400) .attr("transform", "rotate(40)") | |
| .transition() .duration( 300) .attr("transform", "rotate(20)") .ease("linear") | |
| .transition() .duration(1600) .attr("transform", "rotate(45)"); | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment