viewof sides = html`<input type=range min=4 max=12 step=1 value=5>`
viewof segmentCount = html`<input type=range min=4 max=12 step=1 value=5>`
viewof jointSegment = html`<input type=range min=1 max=${segmentCount} step=1 value=3>`
noTabSegments = [0, 3, 4]
bulbOutline = {
const n = segmentCount
const r = 115 // Radius of the Ornament
const o = r + hangerLength // 50 is how tall the hanger tab is
const t = 0.13 // The initial segment's angle
const main = d3.range(n).map(i => {
const theta = Math.PI * (0.5 + t) + i * (Math.PI - t) / (n)
return {
theta,
z: o - Math.sin(theta) * r,
w: -Math.cos(theta) * r
}
})
return [{ z: 0, w: 0}, { z: hangerLength, w: 12 }].concat(main).concat([{ z: o + r, w: 0 }])
}
sides
segments = d3.pairs(bulbOutline).map(p => {
return {
points: p,
length: Math.hypot(p[0].z - p[1].z, p[0].w - p[1].w) // Math.hypot is just the pythagoras formula
}
})
anglesBetweenSides = 2 * Math.PI / sides
horizontalEdgeCalc = (hypot) => {
return Math.sin(anglesBetweenSides / 2) * hypot * 2
}
horizontalEdgeLengths = bulbOutline.map((p) => {
return horizontalEdgeCalc(p.w)
})
horizontalEdgePairs = d3.pairs(horizontalEdgeLengths)
md`The red lines there represent the horizontal edges.
We now have the lengths of both horizontal and the vertical edges of facets on the ornament. We know that the horizontal edges should be parallel to each other, and that the facets should be symetrical. These constraints will allow us to again use trigonometry compute how tall each facet is.`
facetHeightCalc = (top, bottom, side) => {
const diff = Math.abs(top - bottom)
const theta = Math.asin(diff / 2 / side)
return Math.cos(theta) * side
}
facets = segments.reduce((memo, s, i) => {
const h = horizontalEdgePairs[i]
const facetHeight = facetHeightCalc(h[0], h[1], s.length)
memo.push({
points: s.points,
side: s.length,
top: h[0],
bottom: h[1],
height: facetHeight,
culmulativeHeight: i === 0 ? facetHeight : memo[i - 1].culmulativeHeight + facetHeight
})
return memo
}, [])
stretchedOutHeight = facets.reduce((memo, d) => {
return memo + d.height
}, 0)
midlineOffset = d3.max(horizontalEdgeLengths) / 2
pointPairsOnASide = (facets) => {
const lines = []
facets.forEach((f, i) => {
if (i > 0) {
// Regular Facet
lines.push({
type: "cut",
isExterior: true,
side: "right",
segment: i,
x1: f.top / 2,
y1: f.culmulativeHeight - f.height,
x2: f.bottom / 2,
y2: f.culmulativeHeight
})
lines.push({
type: "cut",
isExterior: true,
side: "left",
segment: i,
x1: -f.top / 2,
y1: f.culmulativeHeight - f.height,
x2: -f.bottom / 2,
y2: f.culmulativeHeight
})
// the Fold Line
lines.push({
type: "fold",
isExterior: false,
segment: i,
x1: +f.bottom / 2,
x2: -f.bottom / 2,
y1: f.culmulativeHeight,
y2: f.culmulativeHeight
})
} else {
lines.push({
type: "skip",
isExterior: true,
side: "right",
segment: i,
x1: f.top / 2,
y1: f.culmulativeHeight - f.height,
x2: f.bottom / 2,
y2: f.culmulativeHeight
})
lines.push({
type: "skip",
isExterior: true,
side: "left",
segment: i,
x1: -f.top / 2,
y1: f.culmulativeHeight - f.height,
x2: -f.bottom / 2,
y2: f.culmulativeHeight
})
// the Hanger Fold Line
lines.push({
type: "fold",
isExterior: false,
segment: i,
x1: +f.bottom / 2,
x2: -f.bottom / 2,
y1: f.culmulativeHeight,
y2: f.culmulativeHeight
})
// hanger
lines.push({
type: "hanger",
isExterior: true,
segment: i,
x1: +f.bottom / 2,
x2: -f.bottom / 2,
y1: f.culmulativeHeight,
y2: f.culmulativeHeight
})
}
})
return lines
}
jointSegment
rotationRequired = {
// facets[jointSegment]
const v = {
x: facets[jointSegment].top / 2,
y: facets[jointSegment].culmulativeHeight - facets[jointSegment].height
}
const v2 = {
x: facets[jointSegment].bottom / 2,
y: facets[jointSegment].culmulativeHeight
}
const diff = {
x: v2.x - v.x,
y: v2.y - v.y
}
const v2theta = Math.atan2(v2.x, v2.y)
const theta = Math.PI / 2 - 2 * Math.atan2(diff.x, diff.y) + v2theta
const length = Math.hypot(v2.x, v2.y)
const translation = {
x: v2.x - Math.cos(theta) * length,
y: v2.y - Math.sin(theta) * length
}
return {
f: facets[jointSegment],
v,
v2,
length,
rotation: -2 * Math.atan2(diff.x, diff.y),
translation
}
}
linesToDraw = {
const basicPointsPairs = pointPairsOnASide(facets).map((pair) => {
return {
...pair,
face: 0
}
})
let results = []
const extent = {
x: [Infinity, -Infinity],
y: [Infinity, -Infinity]
}
d3.range(sides).reduce((memo, i) => {
const transform = (pair) => {
const v1 = rotateVector({ x: pair.x1, y: pair.y1 }, rotationRequired.rotation)
const v2 = rotateVector({ x: pair.x2, y: pair.y2 }, rotationRequired.rotation)
const x1 = v1.x + rotationRequired.translation.x
const y1 = v1.y + rotationRequired.translation.y
const x2 = v2.x + rotationRequired.translation.x
const y2 = v2.y + rotationRequired.translation.y
if (x1 < extent.x[0] || x2 < extent.x[0]) { extent.x[0] = Math.min(x1, x2) }
if (x1 > extent.x[1] || x2 > extent.x[1]) { extent.x[1] = Math.max(x1, x2) }
if (y1 < extent.y[0] || y2 < extent.y[0]) { extent.y[0] = Math.min(y1, y2) }
if (y1 > extent.y[1] || y2 > extent.y[1]) { extent.y[1] = Math.max(y1, y2) }
return {
...pair,
x1,
y1,
x2,
y2,
face: i,
}
}
const linesGivenSide = (i === 0) ? memo : memo.map(transform)
results = results.concat(linesGivenSide)
return linesGivenSide
}, basicPointsPairs)
const xShift = (extent.x[0] < 0) ? Math.abs(extent.x[0]) : 0
const yShift = (extent.y[0] < 0) ? Math.abs(extent.y[0]) : 0
return results.map((pair) => {
const switchFromCutToFold = (pair.segment === jointSegment)
&& !(pair.face === 0 && pair.side === "left")
&& !(pair.face === sides - 1 && pair.side === "right")
return {
...pair,
x1: pair.x1 + midlineOffset + 22 + xShift,
x2: pair.x2 + midlineOffset + 22 + xShift,
y1: pair.y1 + 22 + yShift,
y2: pair.y2 + 22 + yShift,
type: switchFromCutToFold ? "fold" : pair.type,
tabs: !noTabSegments.includes(pair.segment)
}
})
}
drawingExtent = computeDrawingExtent(linesToDraw)
noTabSegments
md`With the use of tabs, I now have to distinguish between types of lines, and the "renderer" for the types of lines. The following is a bunch of line type implementations.
Starting with a "regular" line.`
regularLine = (svg, line) => {
const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2)
// Overcut to ensure separation
const o1 = {
x: line.x1 + Math.cos(theta) * 1,
y: line.y1 + Math.sin(theta) * 1
}
const o2 = {
x: line.x2 - Math.cos(theta) * 1,
y: line.y2 - Math.sin(theta) * 1
}
svg.append("path")
.attr("d", `M ${o1.x} ${o1.y} L ${o2.x} ${o2.y}`)
.attr("stroke", "black")
}
md`After a while it ocurred to me that I needed a way to hang them.
To accomodate a variety of widths that the attachment might come at, I wrote a bit of code that adjusted the tab design according to the width. Just a bit of tangent calculations.`
hangerLength = 50
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, drawingExtent.x[1] + 10, drawingExtent.y[1] + 10]);
const cutLayer = svg.append("g")
const scoreLayer = svg.append("g")
linesToDraw.forEach((p) => {
switch (p.type) {
case "hanger":
hangerLine(cutLayer, p)
break;
case "fold":
foldCreaseLine(scoreLayer, p)
break;
default:
if (p.tabs) {
latchAttachmentLine(cutLayer, p)
} else {
regularLine(cutLayer, p)
}
}
})
return svg.node()
}
notchCreaseLine = (svg, line) => {
const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2)
const length = Math.hypot(line.y1 - line.y2, line.x1 - line.x2)
const s = {
x: line.x1 - 5 * Math.cos(theta),
y: line.y1 - 5 * Math.sin(theta)
}
const e = {
x: line.x2 + 5 * Math.cos(theta),
y: line.y2 + 5 * Math.sin(theta)
}
svg.append("path")
.attr("d", `M ${line.x1} ${line.y1} L ${s.x} ${s.y}`)
.attr("stroke", "black")
svg.append("path")
.attr("d", `M ${line.x2} ${line.y2} L ${e.x} ${e.y}`)
.attr("stroke", "black")
}
foldCreaseLine = (svg, line) => {
svg.append("path")
.attr("d", `M ${line.x1} ${line.y1} L ${line.x2} ${line.y2}`)
.attr("stroke", "blue")
}
foldCutLine = (svg, line) => {
const theta = Math.atan2(line.y1 - line.y2, line.x1 - line.x2)
const length = Math.hypot(line.y1 - line.y2, line.x1 - line.x2)
const lengthWithPadding = length - 6
const unit = 12
const counts = Math.round(lengthWithPadding / unit)
const remainder = length - counts * unit
d3.range(counts).forEach(i => {
const p = {
x: line.x1 - Math.cos(theta) * (i * unit + remainder + 3),
y: line.y1 - Math.sin(theta) * (i * unit + remainder + 3)
}
const p2 = {
x: line.x1 - Math.cos(theta) * (i * unit + remainder - 3),
y: line.y1 - Math.sin(theta) * (i * unit + remainder - 3)
}
svg.append("path")
.attr("d", `M ${p.x} ${p.y} L ${p2.x} ${p2.y}`)
.attr("stroke", "black")
})
}
md`Below here are utils and things`
computeDrawingExtent = (linesToDraw) => {
const results = {
x: [Infinity, -Infinity],
y: [Infinity, -Infinity]
}
const linesExtents = linesToDraw.map(l => {
if (l.x1 < results.x[0] || l.x2 < results.x[0]) { results.x[0] = Math.min(l.x1, l.x2) }
if (l.x1 > results.x[1] || l.x2 > results.x[1]) { results.x[1] = Math.max(l.x1, l.x2) }
if (l.y1 < results.y[0] || l.y2 < results.y[0]) { results.y[0] = Math.min(l.y1, l.y2) }
if (l.y1 > results.y[1] || l.y2 > results.y[1]) { results.y[1] = Math.max(l.y1, l.y2) }
})
return results
}
rotateVector = (vector, theta) => {
const { x, y } = vector
// first column of the matrix
const xa = x * Math.cos(theta)
const xb = x * Math.sin(theta)
// second column of the matrix
const yc = y * -Math.sin(theta)
const yd = y * Math.cos(theta)
// sum the components
return {
x: xa + yc,
y: xb + yd
}
}
maxWOffset = d3.max(bulbOutline, d => d.w)
height = bulbOutline[bulbOutline.length - 1].z
d3 = require("d3@6")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.