Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
Published
Edited
Apr 1, 2021
1 star
md`# Rad Lines`
degreesToRadians = degrees => {
return degrees * (Math.PI / 180);
}
createPolygon = (x, y, numOfSides, radius, minAngle) => {
let arr = [];
let xo;
let yo;
for (let i = 0; i < numOfSides; i++) {
let t =
(degreesToRadians(360) / numOfSides) * i + minAngle * (Math.PI / 180);
xo = x + radius * Math.sin(t);
yo = y + radius * Math.cos(t);
arr.push([xo, yo]);
}
return arr;
}
quantity = 20
xPositionFormula = '300'
yPositionFormula = '300'
scaleFormula = 'i+i*7'
rotationFormula = '10 * sin(i * pi / 9)'
minAngle = 0
sides = 6
minRadius = 50
roundness = 1
svg = {
const svg = html`<svg id = "svg" width="600" height="600"></svg>`;
const container = d3.select(svg);
const curve = d3.line().curve(d3.curveCardinalClosed.tension(roundness));
container
.selectAll('path')
.data(data)
.join('path')
.attr("stroke", "black")
.attr("fill", "none")
.attr("d", d => {
return curve(d);
});
return svg;
}
data = generatePolygonData(
seed,
quantity,
xPositionFormula,
yPositionFormula,
sides,
minRadius,
scaleFormula,
minAngle,
rotationFormula
)
generatePolygonData = (
seed,
quantity,
xPositionFormula,
yPositionFormula,
sides,
minRadius,
scaleFormula,
minAngle,
rotationFormula
) => {
let polygons = [];
math.config({ randomSeed: seed });
let originalPoints = [];
for (let i = 0; i < quantity; i++) {
try {
polygons.push(
createPolygon(
math.evaluate(xPositionFormula, { i: i }),
math.evaluate(yPositionFormula, { i: i }),
sides,
minRadius + math.evaluate(scaleFormula, { i: i }),
minAngle + math.evaluate(rotationFormula, { i: i})
)
);
} catch (e) {
console.log(e);
}
}
return polygons;
}
math = require('mathjs')
seed = 0.4212687683098432008
d3 = require('d3')
random = require("d3-random@>=2.2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
