| license: mit |
playing with rasterizing font using techniques linked below.
The idea of drawing text on a <canvas> element and using the bitmap to
identify points within the text came from Toph Tucker's block that
reverse-engineers FizzyText.
forked from armollica's block: Slimy Text
forked from enjalot's block: Particle viSFest
forked from enjalot's block: thing 0001
| <html> | |
| <head> | |
| <style> | |
| body { background: #111 } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
| <script> | |
| var text = "enjalot"; | |
| var width = 1600; | |
| var height = 900; | |
| var fontSize = 350 | |
| var radius = 3; | |
| var spacing = 15; | |
| var collisionStrength = 0.1; | |
| var options = { | |
| width: width, | |
| height: height, | |
| spacing: spacing, | |
| fontSize: fontSize + "px" | |
| }; | |
| var color = d3.scaleSequential(d3.interpolateRainbow) | |
| .domain([0, width]) | |
| // Rasterized grid of points that represent the text | |
| var pixels = rasterizeText(text, options) | |
| .map(function(d) { | |
| var x = Math.random() * (width - 200); | |
| var r = radius + Math.abs(width/2 - x)/width*2 * 4 | |
| return { | |
| x: x, | |
| y: Math.random() * (height - 200), | |
| xTarget: d[0], | |
| yTarget: d[1] - 40, | |
| rTarget: r, | |
| rDisplay: r * 2. | |
| }; | |
| }); | |
| var maxR = d3.max(pixels, function(d) { return d.rTarget }) | |
| // Combine mouse node with pixel nodes | |
| var nodes = [].concat(pixels); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Circles that form the text | |
| var circle = svg.append("g") | |
| .attr("class", "circles") | |
| //.style("filter", "url(#gooey)") | |
| .selectAll("circle").data(pixels) | |
| .enter() | |
| .append("rect") | |
| .attr("x", function(d) { return d.x + maxR/2 - d.rDisplay/2; }) | |
| .attr("y", function(d) { return d.y + maxR/2 - d.rDisplay/2; }) | |
| .attr("width", function(d) { return d.rDisplay ; }) | |
| .attr("height", function(d) { return d.rDisplay ; }) | |
| .style("fill", function(d) { | |
| if(d.rTarget < maxR/1.3) | |
| return "#fff" | |
| }) | |
| .style("stroke", function(d) { | |
| return "#fff" | |
| }) | |
| .style("stroke-width", function(d) { | |
| return 1 + (maxR - d.rTarget) * .2 | |
| }) | |
| // Nodes want to form the text but won't overlap | |
| var simulation = d3.forceSimulation(nodes) | |
| .velocityDecay(0.2) | |
| .force("x", d3.forceX(function(d) { return d.xTarget; }).strength(collisionStrength)) | |
| .force("y", d3.forceY(function(d) { return d.yTarget; }).strength(collisionStrength)) | |
| .force("collide", d3.forceCollide().radius(function(d) { return d.rTarget; })) | |
| .on("tick", ticked); | |
| function ticked() { | |
| circle | |
| //.attr("cx", function(d) { return d.x; }) | |
| //.attr("cy", function(d) { return d.y; }) | |
| .attr("x", function(d) { return d.x + maxR/2 - d.rDisplay/2; }) | |
| .attr("y", function(d) { return d.y + maxR/2 - d.rDisplay/2; }) | |
| } | |
| svg.on("click", function() { | |
| pixels.forEach(function(d) { | |
| d.x = Math.random() * (width - 200) | |
| d.y = Math.random() * (height - 200) | |
| }) | |
| simulation.alpha(0.5).restart() | |
| }) | |
| // Convert text into grid of points that lay on top of the text | |
| // Inspired by FizzyText. See http://bl.ocks.org/tophtucker/978513bc74d0b32d3795 | |
| function rasterizeText(text, options) { | |
| var o = options || {}; | |
| var fontSize = o.fontSize || "200px", | |
| fontWeight = o.fontWeight || "600", | |
| fontFamily = o.fontFamily || "sans-serif", | |
| textAlign = o.center || "center", | |
| textBaseline = o.textBaseline || "middle", | |
| spacing = o.spacing || 10, | |
| width = o.width || 960, | |
| height = o.height || 500, | |
| x = o.x || (width / 2), | |
| y = o.y || (height / 2); | |
| var canvas = document.createElement("canvas"); | |
| canvas.width = width; | |
| canvas.height = height; | |
| var context = canvas.getContext("2d"); | |
| context.font = [fontWeight, fontSize, fontFamily].join(" "); | |
| context.textAlign = textAlign; | |
| context.textBaseline = textBaseline; | |
| var dx = context.measureText(text).width, | |
| dy = +fontSize.replace("px", ""), | |
| bBox = [[x - dx / 2, y - dy / 2], [x + dx / 2, y + dy / 2]]; | |
| context.fillText(text, x, y); | |
| var imageData = context.getImageData(0, 0, width, height); | |
| var pixels = []; | |
| for (var x = bBox[0][0]; x < bBox[1][0]; x += spacing) { | |
| for (var y = bBox[0][1]; y < bBox[1][1]; y += spacing) { | |
| var pixel = getPixel(imageData, x, y); | |
| if (pixel[3] != 0) pixels.push([x, y]); | |
| } | |
| } | |
| return pixels; | |
| } | |
| function getPixel(imageData, x, y) { | |
| var i = 4 * (parseInt(x) + parseInt(y) * imageData.width); | |
| var d = imageData.data; | |
| return [ d[i], d[i+1], d[i+2], d[i+3] ]; | |
| } | |
| </script> | |
| </body> | |
| </html> |