zan's textures animated

_.md

[ Launch: zan's textures ] a214a903ef38280539f7 by enjalot
[ Launch: zan's textures ] 8c7d398f505adda2cb08 by enjalot

body.html

<div id="clickToClear"></div>

<div id="example"></div>

config.json

{"description":"zan's textures animated","endpoint":"","display":"div","public":true,"require":[{"name":"textures.min.js","url":"http://bl.ocks.org/zanarmstrong/raw/08833a326224d41fbb96/70b0b6a013d6feca652678b2290b07dea79a0e04/textures.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"body.html":{"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":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/bFgp3Ju.png"}

inlet.js

// forked from Zan Armstrong's block: 
// http://bl.ocks.org/zanarmstrong/08833a326224d41fbb96

// goals: 
//    click & drag
//    multiple lines
//    choose: color, width, interpolation
//    show code

// so that touchmove is not scrolling
document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false);

// create svg
var svg = d3.select("#example")
  .append("svg").attr({"height": "100%", "width": "100%"});

var width = 400;
// set major dimensions
var rectDim = {"x": tributary.sw/2 + 20 - width/2, "y":50, "height": width, "width": width}
// drawable dimensions
var drawDim = {"x": tributary.sw/2 + 0 - width/2, "y":30, "height": width + 40, "width": width + 40}

////////////////
// click to clear
////////////////

d3.select("#clickToClear").append("svg").attr("width", 250).attr("height", 30)
  .append("text")
  .on("click", function(d){
  	d3.select(".userShape").classed('hidden',true)
  	d3.select(".full-screen").style("fill", "none");
  	points = [];
	texturePoints = [];
  })
  .attr("class", "clickToClear")
  .attr({x: 0, y:20})
  .text("Click here to Clear")

///////////////////////////////////
// set up input box
//////////////////////////////////
var dashedLinesVert = []
var dashedLinesHori = []
var bufferDist = 20;

for (var i = 0; i < 3; i++){
	dashedLinesVert[i] = {
		"x1": rectDim.x + (i + 1) * rectDim.width / 4,
		"x2": rectDim.x + (i + 1) * rectDim.width / 4,
		"y1": rectDim.y - bufferDist,
		"y2": rectDim.y + rectDim.height + bufferDist
	}
}

for (var i = 0; i < 3; i++){
	dashedLinesHori[i] = {
		"y1": rectDim.y + (i + 1) * rectDim.height / 4,
		"y2": rectDim.y + (i + 1) * rectDim.height / 4,
		"x1": rectDim.x - bufferDist,
		"x2": rectDim.x + rectDim.width + bufferDist
	}
}


function drawDashed(data, direction){
  svg.selectAll("." + direction)
    .data(data)
    .enter()
    .append("line")
    .attr("x1", function(d){return d.x1})
    .attr("x2", function(d){return d.x2})
    .attr("y1", function(d){return d.y1})
    .attr("y2", function(d){return d.y2})
    .attr("class", "dashedLines " + direction);
}

drawDashed(dashedLinesVert, "vert");
drawDashed(dashedLinesHori, "hori");


var points = [];
var texturePoints = [];

// draw rect
var canvas = svg.append("rect")
  .attr(rectDim)
  .style({
      "fill": "transparent",
      "stroke": "darkorange",
      "shape-rendering": "crispEdges",
      "stroke-width": 2
  });
var drawSurface = svg.append("rect")
.attr(drawDim)
.style({
  fill: "transparent"
})
/*
canvas
  .on("mousemove", function() {
      updateArray(d3.mouse(this));
  })
  .on("mouseout", function(){
      var coord = d3.mouse(this)
      if(coord[0] < rectDim.x || coord[0] > rectDim.x + rectDim.width ||
          coord[1] < rectDim.y || coord[1] > rectDim.y + rectDim.height){
          points.push([]);
          texturePoints.push([]);
      }
  })
  .on("touchmove", function() {
      updateArray(d3.mouse(this));
  });
*/
var drag = d3.behavior.drag()
.on("drag", function(d) {
  updateArray([d3.event.x, d3.event.y])
})
.on("dragstart", function(d) {
  points.push([]);
  texturePoints.push([]);
})
.on("dragend", function(d) {
  console.log("end", points)
})

drawSurface.call(drag)


////////////////////////
// set up easy options
///////////////////////


var userOptions = function() {
  this.basesize = 120
  this.baseEdge = this.basesize / 4;
  this.thickness = 2;
  this.patternColor = '#ffffff';
  this.interpolation = 'basis';
};

var text = new userOptions();


/////////////////////
// set up Texture
/////////////////////
var makeItaPath = d3.svg.line()
  .x(function(d){return d.x})
  .y(function(d){return d.y})
  .interpolate("linear");

var t = textures.paths()
  .d(function(s) {
      return makeItaPath([]);
  })
  .size(text.basesize)
  .strokeWidth(1)
  .thicker(2)
  .stroke("blue");

svg.call(t);

/*
svg.append("circle")
  .attr({"cx": rectDim.x + rectDim.width * 3/2 + 50, "cy": rectDim.height / 2 + rectDim.y, "r": rectDim.height / 2, "stroke": "darkorange"})
  .style("fill", t.url());
*/
svg.append("rect")
.classed("full-screen", true)
.attr({
  width: "100%",
  height: "100%"
})
.style("fill", t.url())
.style("pointer-events", "none")

svg.append("path")
  .attr("d", makeItaPath([]))
  .attr("class", "userShape")
  .attr("fill", "none")
  .attr("stroke", "blue")
  .attr("stroke-width", 5);

function allPaths(arrayOfPoints) {
  //console.log(arrayOfPoints)
  var path = ""
  for(var i = 0; i < arrayOfPoints.length; i++){
    path = path + makeItaPath(arrayOfPoints[i])
  }
  return path;
}

//////////////////////
// let user draw
//////////////////////



function updateArray(coord){
  points[points.length - 1].push({
    x: coord[0],
    y: coord[1]
  })

  texturePoints[texturePoints.length - 1].push({
    x: (coord[0] - rectDim.x) / (rectDim.width / text.baseEdge),
    y: (coord[1] - rectDim.y) / (rectDim.width / text.baseEdge)
  })

  d3.select(".userShape").attr("d", allPaths(points)).classed("hidden", false);

  updateTexture(texturePoints);
}

function updateTexture(tps){
	var t = textures.paths()
      .d(function(s) {
          return allPaths(tps);
      })
      .size(text.basesize)
      .strokeWidth(1)
      .thicker(2)
      .stroke("blue");
	svg.call(t);
	//d3.select("circle").style("fill", t.url());
    d3.select(".full-screen").style("fill", t.url());
}

/*
animate the drawing of the paths
*/
tributary.run = function(g,t) {
  var tps = []
  texturePoints.forEach(function(line) {
    var len = line.length;
    var end = Math.round(len * t);
    var l = line.slice(0, end);
    tps.push(l);
  })
  updateTexture(tps);
}

style.css

body {
  font-family: 'Raleway', sans-serif;
}

#example {
  width:100%;
  height:100%;
}

p {
  color: grey;
}

h1 {
  color: darkgrey;
}

.hidden {
  display: none;
}

.dashedLines {
	stroke: darkorange;
	stroke-dasharray: 5, 5;
	shape-rendering: "crispEdges";
	stroke-width: 1;
}

.clickToClear {
	fill: grey;
	text-size: 16px;
}

.clickToClear:hover {
	fill: orange;
}

path {
  pointer-events: none;
}