d3.js Geodesic Rainbow

d3.js Geodesic Rainbow.markdown

d3.js Geodesic Rainbow

Forked from Shintaro Inagaki's Pen d3.js Geodesic Rainbow.

Forked from Shintaro Inagaki's Pen d3.js Geodesic Rainbow.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<div id="subdivision">
  <input type="range" min="1" max="12" value="8">
  <output name="subdivision"></output>
</div>

script.js

var width = 800,
    missingCount = 0,
    height = 475;
var loggedOnce, faceCounter;
var gradients = {};
var velocity = [.050, .004],
    t0 = Date.now();
var projection = d3.geo.orthographic()
    .scale(height / 2 - 10);
var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);
console.log(" ** canvas: ")
console.log(canvas);
var context = canvas.node().getContext("2d");
var gradient = context.createLinearGradient(0,0,500,500);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"blue");
console.log(' ** context');    console.log(context);

context.strokeStyle = "#000";
context.lineWidth = .2;

var faces;

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

var input = d3.select("input")
    .on("change", function() { geodesic(+this.value); })
    .each(function() { geodesic(+this.value); });

d3.timer(function() {
  var time = Date.now() - t0;
  projection.rotate([time * velocity[0], time * velocity[1]]);
  redraw( );
});

function newGradient(d){
var tempGradient = context.createLinearGradient(0,0,200,200);
      color1 = d3.hsl(d[0][1], .75, .5).rgb().toString();
    // Creates string like #AABBCC
    color2 = d3.hsl(d[0][0], .75, .5).rgb().toString();
tempGradient.addColorStop(0, color1);
tempGradient.addColorStop(1, color2);
  return tempGradient;
}

function redraw() {
 // context.clearRect(0, 0, width, height);

  faces.forEach(function(d) {
    d.polygon[0] = projection(d[0]);
    d.polygon[1] = projection(d[1]);
    d.polygon[2] = projection(d[2]);
    if (d.visible = d.polygon.area() > 0) {
      context.fillStyle = d.fill;
      context.beginPath();
      drawTriangle(d.polygon);
      context.fill();
      // 
    }
  });

  context.beginPath();
  faces.forEach(function(d) {
    if (d.visible) {
      drawTriangle(d.polygon);
    }
  });
  context.stroke();
}
/** var gradient = context.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"white");
ctx.fillStyle = gradient;**/

  
function drawTriangle(triangle) {
//  context.getContext("2d").fillStyle = gradient;
  context.moveTo(triangle[0][0], triangle[0][1]);
  context.lineTo(triangle[1][0], triangle[1][1]);
  context.lineTo(triangle[2][0], triangle[2][1]);
  context.closePath();
}

function geodesic(subdivision) {
  output.text("◫"+subdivision);
  faceCounter = 0;
  faces = d3.geodesic.polygons(subdivision).map(function(d) {
   logOnce(d);
    d = d.coordinates[0];
    d.pop(); // use an open polygon
    // was d.fill = 
   if (!gradients[faceCounter++]) {
    missingCount++;
gradients[faceCounter]=newGradient(d);
   }
//    color1 = d3.hsl(d[0][1], .75, .5).rgb().toString();
    // Creates string like #AABBCC
 //   color2 = d3.hsl(d[0][0], .75, .8).rgb().toString();
    
    /* d.fill = gradient; */
    d.fill = gradients[faceCounter];
    d.polygon = d3.geom.polygon(d.map(projection));
    return d;
  });
    
  console.log("faceCounter: "+faceCounter);
  output.text(subdivision+" ◫ "+faces.length);
 console.log(" ** faces[2]");
  //[ary[2],ary[2],ary[2],fill:"#fdff00",polyon]
  console.log(faces[2]);
  console.log("New gradient count: "+missingCount);
  redraw();
}

function logOnce(thingToLog){
  if (!loggedOnce){
    loggedOnce=true;
    console.log(thingToLog);
  }
}

scripts

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geodesic.v0.min.js"></script>

style.css

#subdivision {
  position: absolute;
  top: 20px;
  left: 20px;
}

#subdivision input {
  width: 200px;
}