nice_css

_.md

[ Launch: #@_25 great circles ] 8178836 by dvdrtrgn
[ Launch: 25 great circles ] 5262684 by zeffii
[ Launch: zeffii default ] 5250055 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"nice_css","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}},"fullscreen":false,"play":false,"loop":false,"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/qL38Oli.png"}

inlet.js

// after buckminster fuller

d3.select("body").style("background-color", d3.rgb(60,83,88))

var svg = d3.select("svg");
var defs = svg.append("defs");

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

var ident_style = {
    "stroke": "#aeaeae",
    "stroke-width": 2,
    "fill": "none"
};

var red_stroke = "#FF2525",
	b_stroke = "#9C9AA2",
    c_stroke = "#243030";


group1.attr("transform", "translate(" + [259, 338] + ")")
group2.attr("transform", "translate(" + [259, 338] + ")")



// some constants and inits
var a = 106,
	edge = a * 2,
	current_angle = 0,
	start_coords = {x: 0, y: 0},
    coordinate_map = [],
	draw_ident_arrow = false;


if (draw_ident_arrow){
    group1.append("path").attr("d", "M -20 0 20 0 M 0 -20 0 20")
        .style(ident_style)
        .classed("ident", true)
}



// i need absolute coordinates, but want to aquire them using relative
// polar coordinate movements
function relative_polar(relative_angle, distance){
    current_angle += relative_angle
    
    // to keep angles within 360 range
    if (current_angle >= 360) current_angle %= 360
    if (current_angle < 0) current_angle = 360 - current_angle
    
    // will return delta x y
    return {x: Math.cos(rad(current_angle)) * distance,
            y: -Math.sin(rad(current_angle)) * distance}
}


var polar_list = [
  // squares
  {a: 120, d: edge},
  {a: -90, d: edge},
  {a: 270, d: edge},
  {a: 60, d: edge},
  {a: 270, d: edge},
  {a: 270, d: edge},
  {a: 60, d: edge},
  {a: -90, d: edge},
  {a: -90, d: edge},
  // tris and inner
  {a: -90, d: 2*edge},
  {a: -240, d: edge},
  {a: 120, d: 3*edge},
  {a: -240, d: edge},
  {a: 120, d: 3*edge},
  {a: 120, d: edge}
];


function absolute_coords(start_coords, polar_list){
   var current_coords = round_coords(start_coords);
   var coord_list = [];

   coord_list.push(round_coords(start_coords))
   polar_list.forEach(function(item){
		var rel_coord = relative_polar(item.a, item.d);
        rel_coord = round_coords(rel_coord)
        current_coords.x += rel_coord.x
        current_coords.y += rel_coord.y
        coord_list.push({x:current_coords.x, y:current_coords.y})
   })
   return coord_list
}


function make_path(coord_list){
	var path_string = "M "
    coord_list.forEach(function(item){
        path_string += (" " + [item.x, item.y].join(" "))
    })
    return path_string += "z"
}




var coord_list = absolute_coords(start_coords, polar_list);
var t_path = make_path(coord_list);

group1.append("path")
	.attr("d", t_path)
	.style(ident_style)
	.style("stroke", red_stroke)

// indexed clockwise
var quad_1 = [0, 1, 2, 3];
var quad_2 = [3, 4, 5, 6];
var quad_3 = [6, 7, 8,9];
var tri_1 = [0, 3, 6];
var tri_2 = [10, 11, 3];
var tri_3 = [12, 13, 6];
var tri_4 = [14, 15, 0];

var quads = [quad_1, quad_2, quad_3];
var tris = [tri_1, tri_2, tri_3, tri_4];

function draw_edge(p1, p2, group, stroke){
	var edge = "M " + [p1.x, p1.y, p2.x, p2.y].join(" ");
    group.append("path")
        .attr("d", edge)
		.style(ident_style)
		.style("stroke", stroke)

}


function poly_line(group, plist){
    var ppath = make_path(plist);
    group.append("path").attr("d", ppath)
		.style(ident_style)
		.style("stroke", c_stroke)
}


// dumbo
function draw_quad_internals(quad){
	// vertex points
    var v1 = coord_list[quad[0]],
        v2 = coord_list[quad[1]],
        v3 = coord_list[quad[2]],
        v4 = coord_list[quad[3]];
  
    // mid points
    var m1 = find_mid(v1, v2),
        m2 = find_mid(v2, v3),
        m3 = find_mid(v3, v4),
        m4 = find_mid(v4, v1);
  
    // mid lines
    draw_edge(m1, m3, group2, b_stroke)
    draw_edge(m2, m4, group2, b_stroke)
    
    // diagonals
    draw_edge(v1, v3, group2, c_stroke)
    draw_edge(v2, v4, group2, c_stroke)
    
    // hectogram
    poly_line(group2, [v1, m2, v4, m1, v3, m4, v2, m3])
}

quads.forEach(function(quad){
	draw_quad_internals(quad)  
})


// dumbo 2
function draw_tri_internals(tri){
	// vertex points
    var v1 = coord_list[tri[0]],
        v2 = coord_list[tri[1]],
        v3 = coord_list[tri[2]];
  
    // mid points
    var m1 = find_mid(v1, v2),
        m2 = find_mid(v2, v3),
        m3 = find_mid(v3, v1);
  
    // mid lines
    draw_edge(v1, m2, group2, b_stroke)
    draw_edge(v2, m3, group2, b_stroke)
    draw_edge(v3, m1, group2, b_stroke)
        
    // hectogram
    poly_line(group2, [m1, m2, m3])
}

tris.forEach(function(tri){
	draw_tri_internals(tri)  
})




// helpers
function rad(deg) { 
    return ((2 * Math.PI) / 360) * deg 
}

function find_mid(c1, c2){
    var x = (c1.x + c2.x) / 2
    var y = (c1.y + c2.y) / 2
    return {x: x, y: y}
}

function round_coords(c_in){
    return {x: d3.round(c_in.x, 4), y: d3.round(c_in.y, 4)}
}




/* 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;}