#366 The nautilus (p14-RND)

_.md

[ Launch: #366 The nautilus (p14-RND) ] 5069735 by enjalot
[ Launch: #366 The nautilus (p13-func) ] 5013867 by zeffii
[ Launch: #366 The nautilus (p12-idx) ] 5012901 by zeffii
[ Launch: #366 The nautilus fracture (p11) ] 5011835 by zeffii
[ Launch: #366 The nautilus fracture (p10) ] 5005833 by zeffii
[ Launch: #366 The nautilus fracture (pr9) ] 5004975 by zeffii
[ Launch: #366 The nautilus fracture (pr8) ] 5004705 by zeffii
[ Launch: #366 The nautilus fracture (pr7) ] 5004264 by zeffii
[ Launch: #366 The nautilus fracture (pr6) ] 5003413 by zeffii
[ Launch: #366 The nautilus fracture (pre5) ] 5003292 by zeffii
[ Launch: #366 The nautilus fracture (pre4) ] 5000473 by zeffii
[ Launch: #366 The nautilus fracture (pre3) ] 5000171 by zeffii
[ Launch: #366 The nautilus fracture (pre2) ] 4997905 by zeffii
[ Launch: #366 The nautilus fracture (pre) ] 4996977 by zeffii
[ Launch: zeffii default inlet ] 4995624 by zeffii
[ Launch Inlet ]
Gist #4485126 [ Launch Inlet ]
Gist #4470504 [ Launch Inlet ]
Gist #4469595 [ Launch Inlet ]
Gist #4466941 [ Launch Inlet ]
Gist #4461697 [ Launch Inlet ]
Gist #4461508 [ Launch Inlet ]
Gist #4458395 [ Launch Inlet ]
Gist #4452401 [ Launch Inlet ]
Gist #4452384
Gist #4452367
Gist #4450163 An inlet to tributary

config.json

{"description":"#366 The nautilus (p14-RND)","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},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"periodictabledump3.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"helpers.js":{"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,"tab":"edit","display_percent":0.43346738058538115,"hidepanel":false,"thumbnail":"http://i.imgur.com/FW19QRJ.png"}

helpers.js

function translate(x, y){
  return "translate(" + [x, y] + ")"
}  
function rotate(amount){
  return "rotate(" + amount + ")"
}  
function scale(){
  var args = arguments;
  var injection = (args.length === 1) ? args[0] : [args[0], args[1]];
  return "scale(" + injection + ")"
}

// web font lookup
var font_array = ['Roboto:400,100:latin'];
WebFontConfig = {
  google: { families: font_array }
};

(function() {
    var wf = document.createElement('script');
    var dlp = document.location.protocol;
    wf.src = ('https:' == dlp ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})(); 
  
// alias console.log as log()
  
function log(text) { return console.log(text); }  

inlet.js

//original by @zeffii
d3.select("body").style("background-color", "#7D92AD")

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

// unfinished.


// - 20 rings. Initial ring has 6 vertices
// - each consecutive ring has 6 additional vertices
// - radius increases by a constant with each extra ring. 
// - for each ring 6 vertices must be connected twice to the next ring.
// - hints of sporadic randomness of delta distance and radial_offset

var	vertex_color = { "stroke": "#6BE7FF"},
	stroke_style = { 
      "fill": "none", 
      "stroke": "#E7E7E7", 
      "stroke-width": 9.208 + "px",
      "stroke-linejoin": "round",
      "stroke-linecap":"round"
    };

var npos = nautilus_pos = {x: tributary.sw/2, y:tributary.sh/2};

var defs = svg.append("defs"),
	locator = defs.append("g").classed("locator", true),
    drawing = svg.append("g").classed("main_group", true),
	loc_group = drawing.append("g").classed("example_locator", true),
	edge_group = drawing.append("g").classed("edges_locator", true),
	index_group = drawing.append("g").classed("edges_locator", true);

// set midpoint of this drawing
drawing.attr("transform", "translate(" + [npos.x, npos.y] + ")")

// radial array variables
var radius = 21,
	radial_offset = 0.70042, // <---------------- radial twist
	num_rings = 30,
	array_collection = [],
	delta = radius * 1.13725; // max distance to connect edges


// definitions of these found in helpers section below
define_marker()
fill_array_collection()
//draw_all(draw_vertex)
//draw_all(draw_index)
draw_star()

/* --- main loop --- */
console.log("loop start ------>")
for (i in d3.range(num_rings-1)){
 
  	var _i = parseInt(i);
  	var _this = array_collection[_i];
  	var _next = array_collection[_i + 1];

    var connected_set_indexed = [];
  	var connected_set = [];
  
    _this.forEach(function(pos1, _j, array){
        var vert_count = _next.length - 1;

        /* 
        - [ ] keep track, doesn't yet
        - [ ] record all double connections
        - [ ] remove double connections, until 6 remain
        - [ ] also remove potentially cross wired
        */

        // temporary, unsure about criteria      
        d3.range(_next.length).forEach(function(id){
         	
            var check_index = parseInt(id);
                        
            if ((check_index < 0) || (check_index > vert_count)){
                check_index += vert_count
          	}
          
            var pos2 = _next[check_index];
            var distance = check_distance(pos1, pos2)
           
            if (distance <= delta){
                connected_set_indexed.push({
                  idx1: _i, 
                  idx2: _j, 
                  coordinates: [pos1, pos2]
                })
            }
            
        })
    })
    
    // process connected_set_indexed into connected_set
    connected_set_indexed.forEach(function(edge){
        // stuff here.
    	connected_set.push(edge.coordinates)  
    })
    
    
    // at this point the set should have been reduced to the essentials
    draw_edges(connected_set)
    
}





// helpers
function draw_all(fn){
  	/* 	input: a function (draw_vertex or draw_index)
    	behaviour: perform function on each element of array_collection.
    	output: none
    */
    
    for (i in d3.range(num_rings)){
        var _i = parseInt(i);
        var _this = array_collection[_i];
              
        _this.forEach(function(pos, idx){
	          fn(pos, idx)
        })
    }
}

function draw_vertex(pos, i){
  	loc_group.append("use")
  		.attr("xlink:href", "#marker")
  		.style(stroke_style)
    	.style(vertex_color)
  		.attr("transform", "translate(" + [pos.x, pos.y] + ")") 
}

function draw_index(pos, i){
    var crad = 8;
  	var idx = index_group.append("g")
  		.attr({"transform": "translate(" + [pos.x + (crad/2), pos.y + (crad/2)] + ")"})
  	
  	idx.append("circle")
    	.attr({fill: "#080808", stroke: "none"})
    	.attr({cx: -crad/2, cy: -crad/2, r: crad})

    idx.append("text")
    	.text(i)
    	.attr({"text-anchor": "middle", "font-size": 9, "x": -crad/2, "y": -1})
    	.style({fill: "#eaeaea"})
}

function draw_star(){
  	array_collection[0].forEach(function(pos){
   		 draw_edge({x:0, y:0}, pos)    
	})
}

function draw_edges(connected_set){
    connected_set.forEach(function(positions){
        draw_edge(positions[0], positions[1])
    })
}

function draw_edge(pos1, pos2){
    var _positions = [pos1.x, pos1.y, pos2.x, pos2.y];
 	var _path = "M" + _positions.join(" ") + "z";
  	
  	edge_group.append("path")
		.attr("d", _path)
       	.style(stroke_style)
}

function check_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 define_marker(){
    var md = marker_dimension = 4;
	var marker_path = ["M", -md, 0, md, 0, "M", 0, -md, 0, md, "z"].join(" ");
    locator.append("path")
        .attr("id", "marker")
        .attr("d", marker_path) 
}

function fill_array_collection(){
    /* to implement: 
      add occasional radial_offset adjustment, to disorder indices 
    */
    for (i in d3.range(num_rings)){
        var num_iter = 6 + (i * 6);
        var new_radius = (radius + (i * radius));
        var _this = generate_array(num_iter, new_radius, radial_offset);
        array_collection.push(_this)
    }
}

function generate_array(num_iterations, radius, radial_offset){
	var n_array = [];  
  	var _offset = radial_offset*i
    for (i in d3.range(num_iterations)){
        n_array.push(position(i, num_iterations, radius, _offset));
    }
	return n_array
}

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

function position(i, num_iterations, radius, radial_offset){ 
	var rot = (360 / num_iterations) * i,
    	rads = rad(rot),
    	x = Math.sin(rads + radial_offset) * radius,
    	y = Math.cos(rads + radial_offset) * radius;
  
  	return {x:x, y:y}
}




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