[ Launch: zan's textures ] a214a903ef38280539f7 by enjalot
[ Launch: zan's textures ] 8c7d398f505adda2cb08 by enjalot
-
-
Save enjalot/a214a903ef38280539f7 to your computer and use it in GitHub Desktop.
zan's textures animated
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="clickToClear"></div> | |
<div id="example"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment