Skip to content

Instantly share code, notes, and snippets.

@CassianoSF

CassianoSF/mecanismo.html

Last active July 7, 2018 14:38
Show Gist options
  • Save CassianoSF/369ffd846ec4e546df14db6d59e980a6 to your computer and use it in GitHub Desktop.
Save CassianoSF/369ffd846ec4e546df14db6d59e980a6 to your computer and use it in GitHub Desktop.
Download ZIP
mecanismo com dois graus de liberdade
Raw
mecanismo.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Trabalho ACC VII</title>
<style>
.axis path, .axis line{
fill: none;
stroke: black;
}
.line{
fill: none;
stroke: blue;
stroke-width: 2px;
}
.tick text{
font-size: 12px;
}
.tick line{
opacity: 0.2;
}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<div class="row">
<div class="column">
<div id="graph"></div>
</div>
<div class="column">
<br>
L1: <input type="number" id="l1" style="width: 40px">
<br>
L2: <input type="number" id="l2" style="width: 40px">
<br>
o1: <input type="number" id="o1" style="width: 40px">
<br>
o2: <input type="number" id="o2" style="width: 40px">
<br>
<input type="submit" value="Calcular" onclick="calcular()">
<input type="submit" value="Simular" onclick="simulate()">
<h5 id="xa"/>
<h5 id="ya"/>
<h5 id="xb"/>
<h5 id="yb"/>
</div>
</div>
<script>
var l1 = 7;
var l2 = 3;
var o1 = 0;
var o2 = 0;
var tempo_frame = 20
var calcular = () => {
o1 = parseFloat(document.getElementById("o1").value) || 0;
o2 = parseFloat(document.getElementById("o2").value) || 0;
l1 = parseFloat(document.getElementById("l1").value) || 0;
l2 = parseFloat(document.getElementById("l2").value) || 0;
plot()
}
var radianos = (angle) =>{
return angle * (Math.PI / 180);
}
var transform_function = (l1, l2, o1, o2) => {
return ([
{ // origem
x: 0,
y: 0
},
{ // ponto A
x: l1*Math.sin(radianos(o1)),
y: l1*Math.cos(radianos(o1))
},
{ // ponto B
x: l1*Math.sin(radianos(o1)) + l2*Math.sin(radianos(o2)),
y: l1*Math.cos(radianos(o1)) + l2*Math.cos(radianos(o2))
},
])
}
var dataset = transform_function(l1, l2, o1, o2)
var margin = {top: 20, right: 100, bottom: 30, left: 100},
width = 500,
height = 500;
var xScale = d3.scale.linear()
.domain([0, 10])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, 10])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);
var line = d3.svg.line()
.x(function(d) { return xScale(d.y); })
.y(function(d) { return yScale(d.x); });
var arc = d3.svg.arc()
.innerRadius(10)
.outerRadius(12)
.startAngle(Math.PI/2);
var svg = d3.select("#graph").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var plot = () => {
dataset = transform_function(l1, l2, o1, o2)
svg.selectAll("*").remove();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
svg.append("path")
.data([dataset])
.attr("class", "line")
.attr("d", line);
svg.append("circle")
.attr("cx", (50 * l1*Math.cos(radianos(o1))))
.attr("cy", 500 + (50 * -l1*Math.sin(radianos(o1))))
.attr("r", l2 * 50)
.attr('fill-opacity', 0.1)
.style("fill", "steelblue");
svg.append("circle")
.attr("cx", 0)
.attr("cy", 500 + l1 * 50 - l1 * 50)
.attr("r", l1 * 50)
.attr('fill-opacity', 0.1)
.style("fill", "steelblue");
svg.append("circle")
.attr("cx", (50 * l1*Math.cos(radianos(o1))))
.attr("cy", 500 + (50 * -l1*Math.sin(radianos(o1))))
.attr("r", 2)
.attr('fill-opacity', 1)
.style("fill", "black");
svg.append("circle")
.attr("cx", (50 * l1*Math.cos(radianos(o1)) + 50 * l2*Math.cos(radianos(o2)) ))
.attr("cy", 500 + (50 * -l1*Math.sin(radianos(o1)) + 50 * -l2*Math.sin(radianos(o2)) ))
.attr("r", 2)
.attr('fill-opacity', 1)
.style("fill", "black");
svg.append("text")
.attr("dx", - 90 + + (50 * l1*Math.cos(radianos(o1)) ))
.attr("dy", - 10 + 500 + (50 * -l1*Math.sin(radianos(o1)) ))
.style("font-size", "14px")
.style("font-weight", "bold")
.text("A(" + dataset[1].y.toFixed(2) + ", " + dataset[1].x.toFixed(2) + ")")
svg.append("text")
.attr("dx", - 90 + (50 * l1*Math.cos(radianos(o1)) + 50 * l2*Math.cos(radianos(o2)) ))
.attr("dy", - 10 + 500 + (50 * -l1*Math.sin(radianos(o1)) + 50 * -l2*Math.sin(radianos(o2)) ))
.style("font-size", "14px")
.style("font-weight", "bold")
.text("B(" + dataset[2].y.toFixed(2) + ", " + dataset[2].x.toFixed(2) + ")")
svg.append("text")
.attr("dx", 15)
.attr("dy", 490 + l1 * 50 - l1 * 50)
.style("font-size", "12px")
.text("o1 = " + o1.toFixed(2) + "º")
svg.append("text")
.attr("dx", 15 + (50 * l1*Math.cos(radianos(o1)) ))
.attr("dy", 490 + (50 * -l1*Math.sin(radianos(o1)) ))
.style("font-size", "12px")
.text("o2 = " + o2.toFixed(2) + "º")
svg.append("text")
.attr("dx", 10 + (25 * l1*Math.cos(radianos(o1)) ))
.attr("dy", 500 + (25 * -l1*Math.sin(radianos(o1)) ))
.text("L1 = " + l1)
svg.append("text")
.attr("dx", 10 + (50 * l1*Math.cos(radianos(o1)) + 25 * l2*Math.cos(radianos(o2)) ))
.attr("dy", 500 + (50 * -l1*Math.sin(radianos(o1)) + 25 * -l2*Math.sin(radianos(o2)) ))
.text("L2 = " + l2)
svg.append("path")
.attr("d", arc.endAngle(Math.PI/2 - radianos(o1)) )
.attr("transform", "translate(0,500)")
svg.append("path")
.attr("d", arc.endAngle(Math.PI/2 - radianos(o2)) )
.attr("transform", "translate("+ 50*l1*Math.cos(radianos(o1)) + ", " + (500+50*-l1*Math.sin(radianos(o1))) +")")
document.getElementById("xa").innerHTML = "Ax : "+l1+"sen("+o1.toFixed(2)+") = " + dataset[1].y.toFixed(2)
document.getElementById("ya").innerHTML = "Ay : "+l1+"cos("+o1.toFixed(2)+") = " + dataset[1].x.toFixed(2)
document.getElementById("xb").innerHTML = "Bx : "+l1+"sen("+o1.toFixed(2)+") + "+l2+"sen("+o2.toFixed(2)+") = " + dataset[2].y.toFixed(2)
document.getElementById("yb").innerHTML = "By : "+l1+"cos("+o1.toFixed(2)+") + "+l2+"cos("+o2.toFixed(2)+") = " + dataset[2].x.toFixed(2)
}
var simulate = () => {
[...Array(406)].map((i, index) => {
setTimeout( () => {
o1 = index / 4.5
o2 = index / 0.5
plot()
document.getElementById("o1").value = o1
document.getElementById("o2").value = o2
document.getElementById("l1").value = l1
document.getElementById("l2").value = l2
} , index * tempo_frame)
})
}
simulate()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment