Why try and learn math after useful arithmatic? Because you can use trig functions make weed leaf shapes.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background:black}
svg {
background: black;
}
.graphline {
stroke-dasharray: 101;
animation: dash 5s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 1000;
}
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var width = 500;
var height = 500;
var margin = {
top: 25,
left:25
}
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append('g')
.attr('transform', 'translate(25,25)')
var scaleWidth = (width - 50)
var scale = d3.scaleLinear()
.domain([-2,2])
.range([0, scaleWidth ])
var yscale = d3.scaleLinear()
.domain([2,-2])
.range([scaleWidth, 0 ])
var horAxis = d3.axisBottom(scale);
var posxtrans = (width-50)/2.0 ;
// console.log(posxtrans)
svg.append("g")
.call(horAxis)
.attr("class", "horizonaxis")
.attr("transform", "translate(" + 0 + "," + posxtrans + ")" )
var vertAxis = d3.axisLeft(scale);
svg.append("g")
.call(vertAxis)
.attr("class", "vertaxis")
.attr("transform", "translate(" + posxtrans+ "," + 0 + ")" )
var angles = [
{ rad: 0, label: "0"} ,
{ rad: Math.PI/6.0, label: "pi/6" } ,
{rad: (Math.PI/4.0), label: "pi/4"} ,
{rad: (Math.PI/3.0), label:"pi/3" },
{ rad: (Math.PI/2.0), label:"pi/2" },
{ rad: (4*Math.PI)/6, label:"2pi/3"},
{ rad: (3*Math.PI)/4, label:"3pi/4"},
{ rad: (5*Math.PI)/6, label:"5pi/6"},
{ rad: Math.PI, label:"pi" },
{ rad: (7*Math.PI)/6, label:"7pi/6"},
{ rad: (5*Math.PI)/4, label:"5pi/4"},
{ rad: (8*Math.PI)/6, label:"4pi/3"},
{ rad: (9*Math.PI)/6, label:"3pi/2"},
{ rad: (7*Math.PI)/4, label:"7pi/4"},
{ rad: (10*Math.PI)/6, label:"5pi/3"},
{ rad: (11*Math.PI)/6, label:"11pi/6"},
{ rad: (12*Math.PI)/6, label:"2pi"},
];
var anglepoints = [];
for ( i of anglepoints){
console.log(i)
anglepoints.push(makeAngles(i.rad))
}
var dotsG = svg.append('g').attr('class', 'dotsGroup')
// .attr('transform', 'translate(' + 0 + "," + 0 + ')');
yscale = d3.scaleLinear()
.domain([2,-2])
.range([0, scaleWidth ])
dotsG.selectAll('.dots')
.data(angles)
.enter()
.append('circle')
.attr('class', 'dots')
.attr('r', 1)
.attr('cx', function(d,i){
return scale(makeAngles(d.rad)[0])
})
.attr('cy', function(d,i){
// console.log(d, i)
// console.log(scale(makeAngles(d.rad)[0]))
// console.log(scale(makeAngles(d.rad)[1]))
return yscale(makeAngles(d.rad)[1])
})
.attr('radi', function(d, i){
return d.rad
})
.attr('id', function(d,i){
// console.log(this);
return 'dot' + i
})
dotsG.selectAll('.majorAngles')
.data(angles)
.enter()
.append('text')
.attr('class', 'majorAngles')
.attr('transform', function(d,i){
var xtran = scale(makeAngles(d.rad)[0])
var ytran = yscale(makeAngles(d.rad)[1])
return "translate("+ xtran +"," + ytran +")"
})
.text(function(d){
console.log('addin text to', d)
return d.label
})
function makeAngles(ang){
var xang = Math.cos(ang);
var yang = Math.sin(ang);
// console.log('xangle is', xang)
// because 2 NaN s are not equal for whatever reason
if(xang !== xang ){
console.log('x is not a number', xang)
xang = 0;
}
if( (yang !== yang)){
yang = 0;
}
return [xang, yang];
}
// going to try to graph sin theta
var sinlineg = svg.append('g').attr('class', 'sinlinegroup')
var sinpoints = [];
for ( o = 0; o < 1000; o++){
var theta = (2 * Math.PI / 1000) * o;
// function i'm graphing var radius = Math.pow(Math.cos(theta * 19 ), 1) + Math.sin(theta);
var radius = Math.pow(Math.cos(theta * 20 ), 1) + Math.sin(theta);
if(radius !== radius){
radius = 0;
}
var xy = findcoor(theta, radius);
sinpoints.push({ theta: theta, radius: radius, xy: xy })
}
console.log(sinpoints)
var line = d3.line()
.x(function(d){
// console.log('trying to make x with', d)
return scale(d.xy[0])
})
.y(function(d){
return yscale(d.xy[1])
})
.curve(d3.curveCatmullRom.alpha(0.5)); // .curve(d3.curveBundle.beta(0.5));
var liner = sinlineg
.append('path')
.attr('d', line(sinpoints))
.attr('stroke', 'purple')
.attr('width', 3)
.attr('fill', 'green')//'orange')
.attr('class', 'graphline')
var totalLength = liner.node().getTotalLength();
console.log(totalLength)
liner.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(6000)
.attr("stroke-dashoffset", .5)
.attr('id', function(d,i){
console.log('hope i m in the animating', d);
return 'hooey'
});
function findcoor(theta, radius){
var xpo = radius * Math.cos(theta);
var ypo = radius * Math.sin(theta);
if( xpo !== xpo){
xpo = 0;
}
if ( ypo !== ypo ){
ypo = 0;
}
// console.log(xpo)
return [xpo, ypo]
}
</script>
</body>