Mondrian

An experiment in translating from SVG into WebGL (via Three.js).

From a class project that involved a creative re-creation of the work of Piet Mondrian.

(Originally written in CoffeeScript, so the code is a little weird.)

<!doctype html>
<html>

var size = {
  width: 300,
  height: 500,
  depth: 100
};

var cellSize = 100;
var rows = Math.floor(size.height / cellSize);
var columns = Math.floor(size.width / cellSize);
var n = rows * columns;
var depthLevels = 5;
var colors = d3.range(4);
var color = d3.scale
  .ordinal()
  .domain(colors)
  .range(['#a0a0a0', '#f0d050', '#e03040', '#4080c0']);

var data = [];

var body = d3.select('html')
  .selectAll('body')
  .data([1])
  .enter()
  .append('body');

translate = function(x, y) {
  return "translate(" + x + "," + y + ")";
};

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(void 0, size.width / size.height);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});

renderer.setSize(size.width, size.height);
renderer.setClearColor('#ffffff', 1);
renderer.sortObjects = true;

body.append(function() {
  return renderer.domElement;
});

var fragment = window.fragment = document.createDocumentFragment();

var svg = body.append('svg').attr(size);

var frame = (function() {
  var g, m, mesh;
  g = new THREE.PlaneGeometry(size.width, size.height);
  m = new THREE.MeshBasicMaterial({
    color: 0x0
  });
  m.transparent = true;
  m.opacity = 0.05;
  mesh = new THREE.Mesh(g, m);
  scene.add(mesh);
  return mesh;
})();

var bordersObj = new THREE.Object3D();

bordersObj.position.z = 100;

scene.add(bordersObj);

var random = Math.random;
var normal = d3.random.normal(0, cellSize * .2);
var vs = document.getElementById('vertexShader').textContent;
var fs = document.getElementById('fragmentShader').textContent;

grid.z = d3.scale.ordinal()
  .domain(d3.range(depthLevels))
  .rangePoints([10, size.depth]);

i = 0;
  return new Promise(function(resolve) {
    return transition
      .each("end", function(d) {
        var m;
        m = this.transform.baseVal[0].matrix;
        d3.select(this)
          .transition()
          .duration(300)
          .attr('transform', function(d) {
            return translate(m.e + normal(), m.f + normal());
          })
          .each("end", function() {
            if (++i === transition.size()) {
              return resolve();
            }
          });
      });
  });
};

var maxLightness = 1;

var normalizePosition = {
  x: d3.scale.linear()
    .domain([0, size.width / 2, size.width])
    .range([maxLightness, 0, maxLightness]),
  y: d3.scale.linear()
    .domain([0, size.height / 2, size.height])
    .range([maxLightness, 0, maxLightness])
};

var borderRectWidth = 4;

var repetitions = 10;

d3.range(repetitions).reduce(function(current, next) {
  return current.then(repeat);
}, Promise.resolve());

camera.position.z = 700;

camera.position.x = -700;

camera.lookAt(new THREE.Vector3(0, 0, 0));

render();

</script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js

https://d3js.org/d3.v3.min.js