#@setting_sun2

_.md

[ Launch: #@setting_sun2 ] f792dfb993ce0f2367a9 by zeffii
[ Launch: setting_sun ] 5560957 by zeffii
[ Launch: zeffii default ] 5559521 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"#@setting_sun2","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/B27V2hx.gif","ajax-caching":true}

inlet.js

d3.select("body").style("background-color", d3.rgb(25,25,25))

var svg = d3.select("svg");
var group1 = svg.append("g").classed("group1", true);

group1.attr("transform", "translate(" + [261, 150] + ")")
.style({stroke: "#fafafa", fill: "none", "stroke-width": 1.5})

    
function draw_tangent_pointer(point1, point2, radius){    
    var tealish = "#494949",
        dlines = "#FDFDFD",
        orange = "#EE5702";
    
    var point3 = {x:point2.x, y:point1.y};
    
    draw_line([point1, point2], tealish)
    draw_line([point1, point3, point2], tealish)
    draw_circle(radius, point1,dlines)
    
    var hyp, opp, adj;
    hyp = get_distance(point1, point2)
    opp = radius
    adj = get_adj(hyp, opp)
    var angle0 = angle_from_opp_adj({opp:opp, adj:adj})
    
    var bisector1 = lerp(point1, point2, 0.5);
    draw_circle(hyp/2, bisector1, tealish)
    
    var measure = opp_and_adj_from_hyp(point1, point2);
    var angle1 = angle_from_opp_adj(measure)
    
    var point4 = get_points_mod(angle0-angle1, radius, point1)
    draw_line([point1, point4], orange)
    draw_line([point2, point4], orange)
    
    var point5 = get_points_mod(Math.PI-angle1-angle0, radius, point1)
    draw_line([point2, point5], orange)
    draw_line([point1, point5], orange)

    group1.append("path")
    .attr("d", gen_stroke(point2, point4, point5, radius))
    .attr({"stroke": "none", "fill": "#00F5FF", "fill-opacity": 0.09})

}

ANIM = tributary.anim

var p1 = {x: ANIM(30,-16.64), y: ANIM(-304, 323)},  // <--- move this around
    p2 = {x: 300, y: ANIM(500,142)};


draw_tangent_pointer(p1, p2, ANIM(50,-341))    


// helpers
function gen_stroke(p2, p3, p4, rad){
    return move(p2)
    + lineSeg(p3)
    + arcTo({r: rad, x: p4.x, y: p4.y})
    + lineSeg(p2);
}

// visit the dot.append video by enjalot of this doesn't make sense.
function move(p) {
    return [" M", p.x, p.y].join(" ");
}

function lineSeg(p) {
    return [" L", p.x, p.y].join(" ");
}

function arcTo(p) {
    return [" A", p.r, p.r, 1, 1, 0, p.x, p.y].join(" ");
}

function draw_line(points, col){
    group1.append("path")
    .attr("d", line_from_points(points))
    .style({stroke: col, fill: "none"})
}

function angle_from_opp_adj(measure){
    var ang = Math.atan2(measure.opp, measure.adj)
    return ang;
}

function line_from_points(points){
    var p_array = [];
    points.forEach(function(p){
        p_array.push(p.x)  
        p_array.push(p.y)
    })
    return "M " + p_array.join(" ")
}

function opp_and_adj_from_hyp(point1, point2){
    var x = (point2.x - point1.x)
    var y = (point2.y - point1.y)
    return {opp: x, adj: y}
}

function get_adj(c, a){
    return Math.sqrt(c*c - a*a)
}

function draw_circle(radis, point, col){
	group1.append("circle")
    .attr({"r": radis, "transform": "translate(" + [point.x, point.y] +")"})
    .style({stroke: col || "#fefefe"})
}

function get_distance(pos1, pos2){
    var a = Math.abs(Math.max(pos1.x, pos2.x) - Math.min(pos1.x, pos2.x)),
        b = Math.abs(Math.max(pos1.y, pos2.y) - Math.min(pos1.y, pos2.y)),
        c = Math.sqrt((a*a) + (b*b));
    return c
}

function get_points(angle, amp){
    var pos = {}; 
	pos.x = Math.cos(angle) * amp
	pos.y = Math.sin(angle) * amp
	return pos
}

function get_points_mod(angle, amp, current_position){
    var pos = {}; 
	pos.x = Math.cos(angle) * amp + current_position.x
	pos.y = Math.sin(angle) * amp + current_position.y
	return pos
}

function lerp(pos0, pos1, t) {
    return {x: pos0.x+(pos1.x-pos0.x)*t, y: pos0.y+(pos1.y-pos0.y)*t}
}


/* EOF */

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}