block by emeeks b68e22df236159e7afdf

b68e22df236159e7afdf

Full Screen

404: Not Found

index.html


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Colorpacking</title>
<style>
  canvas {
    position: absolute;
  }

  svg {
    position: absolute;
  }

  #cv-new {
    top: 500px;
  }

  #cv {
    opacity: 0;
  }

  img {
    position: fixed;
    top: 0;
    left: 600px;
    max-width: 500px;
    z-index: 99;
  }

</style>
</head>
<body>
<img></img>
<canvas id="cv" width="1000" height="500" ></canvas>
<svg></svg>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="colornames.js" charset="utf-8" type="text/javascript"></script>

<script type="text/javascript">

var gridSize = 2;
var lessDominant = true;
var localColorization = true;

var canvas = document.getElementById('cv');
context = canvas.getContext('2d');

var selectionID = "svg";

var randomImage = parseInt(Math.random() * 13) + 1

//Loading of the home test image - img1
var img = new Image();
img.src = "picture" + randomImage + ".jpg";

d3.select("img").attr("src", "picture" + randomImage + ".jpg")

//drawing of the test image - img1
img.onload = function () {
  d3.select("canvas").attr("width", img.width).attr("height", img.height)
  process(img.width, img.height);
};


function process(width, height) {

    //draw background image
    context.drawImage(img, 0, 0);
    //draw a box over the top
    var imageData = context.getImageData(0, 0, width, height);

    var hslArray = [];
    var hslGrid = [[]];

    var cx = 0;
    var cy = 0;

    for (var x = 0; x<imageData.data.length;x = x + 4) {
      var r = x;
      var g = x + 1;
      var b = x + 2;

      var hsl = d3.hsl(d3.rgb(imageData.data[r],imageData.data[g],imageData.data[b],255));

      var group = "Red";
      var hue = hsl.h;

      if (hue < 10) {
        group = "Red";
      } else if (hue < 20) {
          group = "Orange Red";
      } else if (hue < 30) {
          group = "Safety Orange";
      } else if (hue < 40) {
          group = "Dark Orange";
      } else if (hue < 50) {
          group = "Amber";
      } else if (hue < 60) {
          group = "Golden Yellow";
      } else if (hue < 70) {
          group = "Chartreuse Yellow";
      } else if (hue < 80) {
          group = "Electric Lime";
      } else if (hue < 90) {
          group = "Spring Bud";
      } else if (hue < 100) {
          group = "Bright Green";
      } else if (hue < 110) {
          group = "Harlequin";
      } else if (hue < 130) {
          group = "Lime";
      } else if (hue < 140) {
          group = "Free Speech Green";
      } else if (hue < 160) {
          group = "Spring Green";
      } else if (hue < 170) {
          group = "Medium Spring Green";
      } else if (hue < 190) {
          group = "Aqua";
      } else if (hue < 200) {
          group = "Deep Sky Blue";
      } else if (hue < 220) {
          group = "Dodger Blue";
      } else if (hue < 250) {
          group = "Blue";
      } else if (hue < 260) {
          group = "Han Purple";
      } else if (hue < 270) {
          group = "Electric Indigo";
      } else if (hue < 290) {
          group = "Electric Purple";
      } else if (hue < 300) {
          group = "Psychedelic Purple";
      } else if (hue < 310) {
          group = "Magenta";
      } else if (hue < 320) {
          group = "Hot Magenta";
      } else if (hue < 330) {
          group = "Hollywood Cerise";
      } else if (hue < 340) {
          group = "Deep Pink";
      } else if (hue < 350) {
          group = "Torch Red";
      }

      var hsl = {x: cx, y: cy, hsl: hsl, group: group};

      hslArray.push(hsl);
      hslGrid[cy].push(hsl);
      cx = cx + 1;
      if (cx === 1000) {
        cx = 0;
        cy = cy + 1;
        hslGrid[cy] = [];
      }
    }

    var data = hslArray;

    d3.select(selectionID)
      .attr("height", 1200)
      .attr("width", 600)
      .style("background", "white");

    var hScale = function(d) {return Math.round(d / 15) * 15};
    var sScale = function(d) {return Math.round(d * 10) / 10};
    var lScale = function(d) {return Math.round(d * 20) / 20};

    var dataHash = {};
    var newData = []

    data = data.forEach((d, i) => {
      var datapoint = {};

      datapoint.rh = hScale(d.hsl.h)
      datapoint.rs = sScale(d.hsl.s)
      datapoint.rl = lScale(d.hsl.l)
      datapoint.group = d.group;

      if (datapoint.rl <= 0.1) {
        datapoint.rh = 0;
        datapoint.rs = 0;
        datapoint.rl = 0;
        datapoint.group = "Black";
      }


      if (datapoint.rl >= .9) {
        datapoint.rh = 0;
        datapoint.rs = 0;
        datapoint.rl = 1;
        datapoint.group = "White";
      }

      datapoint.value = 1;
      var hashString = datapoint.group + "-" + datapoint.rh +"-" + datapoint.rs +"-" +datapoint.rl;
      datapoint.key = hashString;

      if (dataHash[hashString]) {
        dataHash[hashString].value = dataHash[hashString].value + 1;
      }
      else {
        dataHash[hashString] = datapoint;
        newData.push(datapoint);
      }
    });

    var nestedData = d3.nest()
      .key(d => d.group)
      .key(d => d.rl)
      .entries(newData);

      var packedData = [];

      packChart = d3.layout.pack();
      packChart.size([600,600])
        .children(function(d) {return d.values})
        .value(function(d) {return d.value});

      var circleData = packChart({key: "root", values: nestedData}).filter(d => d.depth === 3);

      d3.select(selectionID)
      .selectAll("g.overall")
      .data([0])
      .enter()
      .append("g")
      .attr("class", "overall")

      packG = d3.select(selectionID).select("g.overall");

      packG
      .selectAll("circle")
      .data(circleData, d => d.key)
      .enter()
      .append("circle")
      .attr("r", 1)
      .attr("cx", function(d) {return d.x})
      .attr("cy", function(d) {return d.y})
      .style("fill", fillCircle2Level)
      .style("stroke", "none")

      packG
      .selectAll("circle")
      .transition()
      .duration(1000)
      .attr("r", function(d) {return d.r})
      .attr("cx", function(d) {return d.x})
      .attr("cy", function(d) {return d.y})
      .style("fill", fillCircle2Level)

      function fillCircle2Level(d) {
          return d3.hsl(d.rh, d.rs, d.rl).toString()
      }


}

</script>
</body>
</html>

colornames.js

colorHash = {
            "Red": 0,
            "Orange Red": 15,
            "Safety Orange": 25,
            "Dark Orange": 35,
            "Amber": 45,
            "Golden Yellow": 55,
            "Chartreuse Yellow": 65,
            "Electric Lime": 75,
            "Spring Bud": 85,
            "Bright Green": 95,
            "Harlequin": 120,
            "Lime": 125,
            "Free Speech Green": 135,
            "Spring Green": 160,
            "Medium Spring Green": 180,
            "Aqua": 185,
            "Deep Sky Blue": 195,
            "Dodger Blue": 210,
            "Blue": 235,
            "Han Purple": 255,
            "Electric Indigo": 280,
            "Psychedelic Purple": 295,
            "Magenta": 305,
            "Hot Magenta": 315,
            "Hollywood Cerise": 325,
            "Deep Pink": 335,
            "Torch Red": 345,
            "White": 0,
            "Black": 0
          }