2c:null 2d:["$","title",null,{"children":"Half-Edge Tools | Fabian Iwand | Observable"}] 32:T1009,viewof drawOptions = collapsibleHistory(Inputs.form({ edgeStrokeWidth: Inputs.range([0, 5], {value: 1, step: .01, label: 'Stroke width'}), edgeStrokeColor: colorOpacity({label: 'Stroke color'}), edge0Color: colorOpacity({label: 'Edge 0 color', value: '#ffffff'}), edge1Color: colorOpacity({label: 'Edge 1 color', value: '#b3b3b3'}), edge2Color: colorOpacity({label: 'Edge 2 color', value: '#666666'}), edgeShiftIndex: Inputs.range([0, 2], {value: 0, step: 1, label: 'Edge zero offset'}), backdropStrokeWidth: Inputs.range([0, 10], {value: 0, step: .01, label: 'Backdrop stroke width'}), backdropColor: colorOpacity({label: 'Backdrop color', value: '#00000000'}), edgeHoverOpacity: Inputs.range([0, 1], {value: .5, step: .01, label: 'Hover edge opacity'}), edgeStrokeHoverColor: colorOpacity({label: 'Hover stroke color', value: '#000000'}), backdropHoverColor: colorOpacity({label: 'Hover backdrop color', value: '#0055ff'}), }), { label: 'Draw options', value: 'elegant', open: false, presets: { "grid": { "edgeStrokeWidth": 0, "edgeStrokeColor": "#000000ff", "edge0Color": "#ffffff00", "edge1Color": "#b3b3b300", "edge2Color": "#66666600", "backdropStrokeWidth": 1.5, "backdropColor": "#ffffffff", "edgeHoverOpacity": 0.5, "edgeStrokeHoverColor": "#000000ff", "backdropHoverColor": "#6196ffff" }, "elegant": { "edgeStrokeWidth": 0, "edgeStrokeColor": "#000000ff", "edge0Color": "#ffffff00", "edge1Color": "#b3b3b349", "edge2Color": "#6666665c", "backdropStrokeWidth": 1.8, "backdropColor": "#ffffffff", "edgeHoverOpacity": 0.79, "edgeStrokeHoverColor": "#000000ff", "backdropHoverColor": "#6196ffff" }, "debug": { "edgeStrokeWidth": 1.5, "edgeStrokeColor": "#00000079", "edge0Color": "#ff8e7aff", "edge1Color": "#f5ef3dff", "edge2Color": "#42c0ffff", "backdropStrokeWidth": 1.8, "backdropColor": "#ffffff00", "edgeHoverOpacity": 0.25, "edgeStrokeHoverColor": "#000000ff", "backdropHoverColor": "#ffffffff" }, "mono": { "edgeStrokeWidth": 1, "edgeStrokeColor": "#00000079", "edge0Color": "#000000ff", "edge1Color": "#00000000", "edge2Color": "#00000000", "backdropStrokeWidth": 0, "backdropColor": "#ffffffff", "edgeHoverOpacity": 1, "edgeStrokeHoverColor": "#000000ff", "backdropHoverColor": "#ffc800ff" }, "sunrise": { "edgeStrokeWidth": 3.94, "edgeStrokeColor": "#00000009", "edge0Color": "#b1ecfbe2", "edge1Color": "#196fa4a5", "edge2Color": "#ffc5475c", "backdropStrokeWidth": 0, "backdropColor": "#ffffffff", "edgeHoverOpacity": 0.69, "edgeStrokeHoverColor": "#00000000", "backdropHoverColor": "#ffffffff" }, "comic": { "edgeStrokeWidth": 0, "edgeStrokeColor": "#000000ff", "edge0Color": "#ffffffff", "edge1Color": "#828282ff", "edge2Color": "#000000ff", "edgeShiftIndex": 0, "backdropStrokeWidth": 1.5, "backdropColor": "#ffffffff", "edgeHoverOpacity": 0.25, "edgeStrokeHoverColor": "#ffffffff", "backdropHoverColor": "#00ccffff" }, "skin": { "edgeStrokeWidth": 0, "edgeStrokeColor": "#e29c7ec9", "edge0Color": "#ffe2c2ff", "edge1Color": "#cda8a83a", "edge2Color": "#ffffffae", "edgeShiftIndex": 0, "backdropStrokeWidth": 2, "backdropColor": "#ffc2c2ff", "edgeHoverOpacity": 0.5, "edgeStrokeHoverColor": "#00000000", "backdropHoverColor": "#ff0000ff" }, "vintage": { "edgeStrokeWidth": 0, "edgeStrokeColor": "#000000ff", "edge0Color": "#f8d8d8ff", "edge1Color": "#7ed2f7ff", "edge2Color": "#000000ff", "edgeShiftIndex": 0, "backdropStrokeWidth": 0, "backdropColor": "#ffffffff", "edgeHoverOpacity": 0.25, "edgeStrokeHoverColor": "#ffffffff", "backdropHoverColor": "#00ccffff" } }, //transition: 500 })33:T401,viewof graphOptions = collapsibleHistory(Inputs.form({ count: Inputs.range([3, 1000], {step: 1, value: 50, label: 'Points'}), iterations: Inputs.range([0, 50], {step: 1, value: 10, label: 'Relaxations'}), seed: Inputs.range([0, 1000], {step: 1, value: 0, label: 'RNG seed'}), }), { label: 'Graph options', value: '100-r0', open: false, presets: { "single": { "count": 3, "iterations": 50, "seed": 0 }, "double": { "count": 4, "iterations": 50, "seed": 0 }, "quad": { "count": 6, "iterations": 50, "seed": 7 }, "fan": { "count": 6, "iterations": 1, "seed": 15 }, "100/0": { "count": 100, "iterations": 0, "seed": 122 }, "100/50": { "count": 100, "iterations": 50, "seed": 122 }, "500/0": { "count": 500, "iterations": 0, "seed": 122 }, "500/50": { "count": 500, "iterations": 50, "seed": 122 } } })34:T111c,viewof chart = { const { w = 640, h = 400, pad = 20, count = 50, iterations = 5, seed = 0, scope: C_SCOPE = DOM.uid().id, } = {...graphOptions}; const scoped = name => `${C_SCOPE}-${name}`; const C_HOVER = scoped('hover'); const C_TRIANGLE = scoped('tri'); const C_BACKDROP = scoped('bg'); const C_EDGE = scoped('edge'); const C_EDGE0 = scoped('e0'); const C_EDGE1 = scoped('e1'); const C_EDGE2 = scoped('e2'); const style = svg`