29:null 2a:["$","title",null,{"children":"Phyllotaxis | Sascha Siegmund | Observable"}] 2f:T19ff,{ const svg = d3.create('svg') .attr('height', size) .attr('width', size) const defs = svg.append('defs') pencilFilter(defs) shadowFilter(defs) glowFilter(defs) gooeyFilter(defs) linearGradient(defs, size, 'main', settings.ratio) // 'url(#linear-gradient-main)' radialGradient(defs, 'main') // 'url(#radial-gradient-main)' linearGradient_back(defs, size, 'main', settings.ratio) // 'url(#linear-gradient-back-main)' radialGradient_back(defs, 'main') // 'url(#radial-gradient-back-main)' const random_dotRadius = SmoothRandom_dotRadius(params2.smooth_factor) // background var background_color = null switch(select_gradient_back){ case "unicolor": background_color = color_selector_back.color; break; case "linear color gradient": background_color = 'url(#linear-gradient-back-main)'; break; case "radial color gradient": background_color = 'url(#radial-gradient-back-main)'; break; } svg.append('rect') .attr('width', size) .attr('height', size) .attr('fill', background_color) switch(select_backgroundLayer){ case "global filter": backgroundLayer_filter(svg, defs); break; } // --- // figure if(params.selection.includes("dots")) { svg.append('g') .selectAll('.dot') .data(data) .join('circle') .attr('class', 'dot') .attr('cx', d => x(d.x)) .attr('cy', d => y(d.y)) .attr('r', d => dot_radius(random_dotRadius)) .attr('opacity', dot_opacity()) .attr('fill', (d,i) => color_in(d,i,"dots")) // color_costom_alternatig(d,i) color_in(d,i,"dots") .attr('filter', filter_in()) } if(params.selection.includes("second curve")) { var pathTwo = svg.append('g') .selectAll(".lineTwo") .data(line_data(params.spiralStep2)) .join("path") .attr("class", "lineTwo") .attr("d", line) .attr("fill", "none") .attr('stroke-width', params2.stroke_width) .attr('stroke-linejoin', 'round') .attr('stroke-linecap', 'round') .attr("stroke", (d,i) => color_in(d,i,"path")) .attr('filter', filter_in()) filter_out(pathTwo, svg) color_out(pathTwo, svg) } if(params.selection.includes("first curve")) { var pathOne = svg.append('g') .selectAll(".lineOne") .data(line_data(params.spiralStep)) .join("path") .attr("class", "lineOne") .attr('id', (d,i) => 'lineOne-' + i) .attr("d", line) .attr("fill", "none") .attr('stroke-width', params2.stroke_width) .attr("stroke", (d,i) => color_in(d,i,"path")) .attr('filter', filter_in()) filter_out(pathOne, svg) color_out(pathOne, svg) } if(params.selection.includes("landscape")) { const extraFilter = defs.append("filter").attr("id","dropShadow") extraFilter.append("feColorMatrix") .attr("type", "matrix") .attr("values", '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0') extraFilter.append("feGaussianBlur") .attr("stdDeviation","5") .attr("result","coloredBlur") const extraFeMerge = extraFilter.append("feMerge") extraFeMerge.append("feMergeNode").attr("in","coloredBlur") extraFeMerge.append("feMergeNode").attr("in","SourceGraphic") var landOne = svg.append('g') landOne.append('path') .attr("fill", landscape_config.color[0]) .attr("stroke", 'none') .attr('d', areaLand(landscape_config.lower[0],landscape_config.upper[0])( landscape(landscape_config.resolution[0], landscape_config.octaves[0], landscape_config.seed[0], landscape_config.level[0])) ) .attr('filter', 'url(#dropShadow)') landOne.append('path') .attr('fill', 'none') .attr('stroke-width', params2.stroke_width) .attr("stroke", color_selector.color[0]) .attr('d', areaLand(landscape_config.lower[0],landscape_config.upper[0]).lineY1()( landscape(landscape_config.resolution[0], landscape_config.octaves[0], landscape_config.seed[0], landscape_config.level[0])) ) var landTwo = svg.append('g') landTwo.append('path') .attr("fill", landscape_config.color[1]) .attr("stroke", 'none') .attr('d', areaLand(landscape_config.lower[1],landscape_config.upper[1])( landscape(landscape_config.resolution[1], landscape_config.octaves[1], landscape_config.seed[1], landscape_config.level[1])) ) .attr('filter', 'url(#dropShadow)') landTwo.append('path') .attr('fill', 'none') .attr('stroke-width', params2.stroke_width) .attr("stroke", color_selector.color[0]) .attr('d', areaLand(landscape_config.lower[1],landscape_config.upper[1]).lineY1()( landscape(landscape_config.resolution[1], landscape_config.octaves[1], landscape_config.seed[1], landscape_config.level[1])) ) var landThree = svg.append('g') landThree.append('path') .attr("fill", landscape_config.color[2]) .attr("stroke", 'none') .attr('d', areaLand(landscape_config.lower[2],landscape_config.upper[2])( landscape(landscape_config.resolution[2], landscape_config.octaves[2], landscape_config.seed[2], landscape_config.level[2])) ) .attr('filter', 'url(#dropShadow)') landThree.append('path') .attr('fill', 'none') .attr('stroke-width', params2.stroke_width) .attr("stroke", color_selector.color[0]) .attr('d', areaLand(landscape_config.lower[2],landscape_config.upper[2]).lineY1()( landscape(landscape_config.resolution[2], landscape_config.octaves[2], landscape_config.seed[2], landscape_config.level[2])) ) } // --- // cuts if(settings.layout[0] == "right") { svg.append('rect') .attr('width', size * (1 - settings.layout[1])) .attr('height', size) .attr('transform', `translate(${size * settings.layout[1]}, 0)`) .attr('fill', 'white') } if(settings.layout[0] == "middle") { svg.append('rect') .attr('width', size * (1 - settings.layout[1]) / 2) .attr('height', size) .attr('fill', 'white') svg.append('rect') .attr('width', size * (1 - settings.layout[1]) / 2) .attr('height', size) .attr('transform', `translate(${size * (1 + settings.layout[1]) / 2}, 0)`) .attr('fill', 'white') } // --- return svg.node() }30:T430,viewof params2 = Inputs.form({ lineOptions: Inputs.radio(['curveCardinal', 'curveLinear', 'curveBasis', 'curveStep', 'curveNatural'], {label: "line options", value: "curveLinear"}), stroke_width: Inputs.range([1,20], {step: 1, label: "line width", value: 1}), opacity_mu_sigma: list([Inputs.range([0,1], {step: 0.1, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 2, label: "dot opacity mu, sigma"}), radius_max_mu_sigma: list([Inputs.range([1,20], {step: 0.5, value: 5}), Inputs.range([0,1], {step: 0.1, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 3, label: "dot radius factor, mu, sigma"}), smooth_factor: Inputs.range([1,50], {step: 1, label: "smooth factor", value: 5}), seed: Inputs.range([0,0.999], {step: 0.001, label: "seed", value: 0.013}), unicolor: Inputs.radio(['index', 'angle'], {label: "unicolor by", value: 'index'}), })31:T76e,viewof landscape_config = { const landscape = Inputs.form({ seed: list([Inputs.range([1,3000], {step: 1, value: 3000}), Inputs.range([1,3000], {step: 1, value: 1}), Inputs.range([1,3000], {step: 1, value: 1500})], {columns:3, label: "seed"}), color: list([Inputs.color({ value: "#673aa6"}), Inputs.color({ value: "#472873"}), Inputs.color({ value: "#281640"})], {columns: 3, label: "landscape colors"}), upper: list([Inputs.range([0, size], {step: 10, value: 500}), Inputs.range([0, size], {step: 10, value: 600}), Inputs.range([0, size], {step: 10, value: 700})], {columns:3, label: "upper border"}), lower: list([Inputs.range([0, size], {step: 10, value: 800}), Inputs.range([0, size], {step: 10, value: 900}), Inputs.range([0, size+100], {step: 10, value: 1000})], {columns:3, label: "lower border"}), resolution: list([Inputs.range([0.2, 25], {step: 0.1, value: 3}), Inputs.range([0.2, 25], {step: 0.1, value: 3}), Inputs.range([0.2, 25], {step: 0.1, value: 3})], {columns:3, label: "resolution"}), octaves: list([Inputs.range([1, 5], {step: 1, value: 1}), Inputs.range([1, 5], {step: 1, value: 1 }), Inputs.range([1, 5], {step: 1, value: 1})], {columns:3, label: "octaves"}), level: list([Inputs.range([0, 1], {step: 0.01, value: 1}), Inputs.range([0, 1], {step: 0.01, value: 1}), Inputs.range([0, 1], {step: 0.01, value: 1})], {columns:3, label: "level"}), }) const none = Inputs.form({}) if (params.selection.includes("landscape")){ return landscape } else { return none } }32:T8a3,viewof gradient_config = { const linear_gradient = Inputs.form({ lin_start: list([Inputs.range([0,1], {step: 0.05, value: 0}), Inputs.range([0,1], {step: 0.05, value: 0})], {columns: 2, label: "start position x, y"}), lin_end: list([Inputs.range([0,1], {step: 0.05, value: 1}), Inputs.range([0,1], {step: 0.05, value: 1})], {columns: 2, label: "end position x, y"}), lin_spreadMethod: Inputs.radio(["pad", "reflect", "repeat"], {value: "pad", label: "spread method"}), }) const radial_gradient = Inputs.form({ rad_end: list([Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0.5})], {columns: 3, label: "end circle x, y, rad"}), rad_start: list([Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0})], {columns: 3, label: "start circle x, y, rad"}), rad_spreadMethod: Inputs.radio(["pad", "reflect", "repeat"], {value: "pad", label: "spread method"}), }) const gradient_along_curve = Inputs.form({ grad_precision: list([Inputs.range([1,30], {step: 1, value: 8}), Inputs.toggle({value: true})], {columns: 2, label: "precision, preview x10"}), grad_periods: list([Inputs.toggle({value: false}), Inputs.range([1,10], {step: 1, value: 3}), Inputs.toggle({value: true})], {columns: 3, label: "periodic activate, number, reflect"}), }) const none = Inputs.form({}) if (select_gradient == "linear color gradient"){ return linear_gradient } else if (select_gradient == "radial color gradient") { return radial_gradient } else if (select_gradient == "color gradient along curve") { return gradient_along_curve } else if (select_gradient == "no gradient") { return none } else { return "filter config not implemented" } }33:Td6e,{ const svg = d3.create('svg') .attr('height', 140) .attr('width', width) if (select_filterMode == "global filter"){ svg.append('rect') .attr('height', 100) .attr('width', 250) .attr('transform', 'translate(20, 20)') .attr('fill', 'black') .attr('filter', `url(#${select_filter})`) svg.append('line') .attr('x1', 0).attr('x2', 50) .attr('y1', 100).attr('y2', 0) .attr('transform', 'translate(300, 20)') .attr('stroke', 'black') .attr('stroke-width', 1) .attr('filter', `url(#${select_filter})`) svg.append('line') .attr('x1', 0).attr('x2', 50) .attr('y1', 100).attr('y2', 0) .attr('transform', 'translate(330, 20)') .attr('stroke', 'black') .attr('stroke-width', 2) .attr('filter', `url(#${select_filter})`) svg.append('line') .attr('x1', 0).attr('x2', 50) .attr('y1', 100).attr('y2', 0) .attr('transform', 'translate(360, 20)') .attr('stroke', 'black') .attr('stroke-width', 3) .attr('filter', `url(#${select_filter})`) svg.append('line') .attr('x1', 0).attr('x2', 50) .attr('y1', 100).attr('y2', 0) .attr('transform', 'translate(390, 20)') .attr('stroke', 'black') .attr('stroke-width', 4) .attr('filter', `url(#${select_filter})`) svg.append('line') .attr('x1', 0).attr('x2', 50) .attr('y1', 100).attr('y2', 0) .attr('transform', 'translate(420, 20)') .attr('stroke', 'black') .attr('stroke-width', 5) .attr('filter', `url(#${select_filter})`) svg.append('line') .attr('x1', 0).attr('x2', 50) .attr('y1', 100).attr('y2', 0) .attr('transform', 'translate(450, 20)') .attr('stroke', 'black') .attr('stroke-width', 6) .attr('filter', `url(#${select_filter})`) svg.append('line') .attr('x1', 0).attr('x2', 50) .attr('y1', 100).attr('y2', 0) .attr('transform', 'translate(480, 20)') .attr('stroke', 'black') .attr('stroke-width', 7) .attr('filter', `url(#${select_filter})`) svg.append('circle') .attr('cx', 50).attr('cy', 50) .attr('r', 50) .attr('transform', 'translate(560, 20)') .attr('fill', 'none') .attr('stroke', 'black') .attr('stroke-width', 3) .attr('filter', `url(#${select_filter})`) svg.append('g') .attr('filter', `url(#${select_filter})`) .attr('transform', 'translate(690, 20)') .selectAll('circle') .data(test_circ) .join('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', 10) } else if (select_filterMode == "filter variable along path") { var path = svg.append('path') .attr('fill', 'none') // will be set to stroke color .attr('stroke-width', 20) .attr('stroke', 'black') .attr('d', test_path2) filter_along_path(path, svg, null, 'preview') // (path, svg, color, id) } else if (select_filterMode == "dots along path") { var path = svg.append('path') .attr('fill', 'none') .attr('stroke-width', 20) .attr('stroke', 'black') .attr('d', test_path2) .attr('filter', select_filter == "dots only" ? null : `url(#${select_filter})`) dots_along_path(path, svg) // (path, svg, createScale(color_selection)) & (path, svg, color, id) } return select_filterMode == 'none' ? md`` : svg.node() }34:T28dd,viewof filter_config = { const pencil = Inputs.form({ freq_1_noiseType: list([Inputs.range([0,0.5], {step: 0.01, value: 0.3}), Inputs.radio(["fractalNoise", "turbulence"], {value: "fractalNoise"})], {columns: 2, label: "ground noise freq"}), freq_2_displace_3: list([Inputs.range([0,0.5], {step: 0.01, value: 0.3}), Inputs.range([0,400], {step: 1, value: 5})], {columns: 2, label: "1st noise freq & displace scale"}), freq_4_displace_5: list([Inputs.range([0,0.5], {step: 0.01, value: 0.3}), Inputs.range([0,400], {step: 1, value: 5})], {columns: 2, label: "2nd noise freq & displace scale"}), freq_6_displace_7: list([Inputs.range([0,0.5], {step: 0.01, value: 0.3}), Inputs.range([0,400], {step: 1, value: 3})], {columns: 2, label: "3rd noise freq & displace scale"}), }) const shadow = Inputs.form({ shadow_opacity: Inputs.range([0,1], {step: 0.1, label: "opacity", value: 0.4}), shadow_intensity: Inputs.range([0,10], {step: 1, label: "intensity", value: 3}), }) const glow = Inputs.form({ glow_intensity: Inputs.range([0,10], {step: 1, label: "intensity", value: 2}), }) const gooey = Inputs.form({ gooey_intensity: Inputs.range([0,15], {step: 1, label: "intensity", value: 5}), }) const pencil_along_dots = Inputs.form({ frequency: list([Inputs.range([1,30], {step: 1, value: 8}), Inputs.toggle({value: true})], {columns: 2, label: "dot frequency, preview x10"}), radius_max_mu_sigma: list([Inputs.range([1,10], {step: 0.5, value: 2}), Inputs.range([0,1], {step: 0.01, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 3, label: "dot radius factor, mu, sigma"}), smooth_factor: Inputs.range([1,50], {step: 1, label: "smooth factor", value: 5}), position_sigma: Inputs.range([0,3], {step: 0.01, label: "position sigma", value: 0.3}), opacity_mu_sigma: list([Inputs.range([0,1], {step: 0.1, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 2, label: "dot opacity mu, sigma"}), seed: Inputs.range([0,0.999], {step: 0.001, label: "seed", value: 0.01}), freq_1_noiseType: list([Inputs.range([0,0.5], {step: 0.01, value: 0.3}), Inputs.radio(["fractalNoise", "turbulence"], {value: "fractalNoise"})], {columns: 2, label: "ground noise freq"}), freq_2_displace_3: list([Inputs.range([0,0.5], {step: 0.01, value: 0.05}), Inputs.range([0,100], {step: 1, value: 20})], {columns: 2, label: "1st noise freq & displace scale"}), freq_4_displace_5: list([Inputs.range([0,0.5], {step: 0.01, value: 0.05}), Inputs.range([0,100], {step: 1, value: 20})], {columns: 2, label: "2nd noise freq & displace scale"}), freq_6_displace_7: list([Inputs.range([0,0.5], {step: 0.01, value: 0.05}), Inputs.range([0,100], {step: 1, value: 20})], {columns: 2, label: "3rd noise freq & displace scale"}), }) const dots_only = Inputs.form({ frequency: list([Inputs.range([1,30], {step: 1, value: 8}), Inputs.toggle({value: true})], {columns: 2, label: "dot frequency, preview x10"}), radius_max_mu_sigma: list([Inputs.range([1,10], {step: 0.5, value: 2}), Inputs.range([0,1], {step: 0.01, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 3, label: "dot radius factor, mu, sigma"}), smooth_factor: Inputs.range([1,50], {step: 1, label: "smooth factor", value: 5}), position_sigma: Inputs.range([0,3], {step: 0.01, label: "position sigma", value: 0.3}), opacity_mu_sigma: list([Inputs.range([0,1], {step: 0.1, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 2, label: "dot opacity mu, sigma"}), seed: Inputs.range([0,0.999], {step: 0.001, label: "seed", value: 0.01}), }) const dots_gooey = Inputs.form({ frequency: list([Inputs.range([1,30], {step: 1, value: 8}), Inputs.toggle({value: true})], {columns: 2, label: "dot frequency, preview x10"}), radius_max_mu_sigma: list([Inputs.range([1,10], {step: 0.5, value: 2}), Inputs.range([0,1], {step: 0.01, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 3, label: "dot radius factor, mu, sigma"}), smooth_factor: Inputs.range([1,50], {step: 1, label: "smooth factor", value: 5}), position_sigma: Inputs.range([0,3], {step: 0.01, label: "position sigma", value: 0.3}), opacity_mu_sigma: list([Inputs.range([0,1], {step: 0.1, value: 0.5}), Inputs.range([0,0.4], {step: 0.01, value: 0.2})], {columns: 2, label: "dot opacity mu, sigma"}), seed: Inputs.range([0,0.999], {step: 0.001, label: "seed", value: 0.01}), gooey_intensity: Inputs.range([0,4], {step: 0.1, label: "gooey intensity", value: 1}), }) const pencil_along_path = Inputs.form({ path_precision: list([Inputs.range([1,30], {step: 1, value: 8}), Inputs.toggle({value: true})], {columns: 2, label: "precision, preview x10"}), path_periods: list([Inputs.toggle({value: false}), Inputs.range([1,10], {step: 1, value: 3}), Inputs.toggle({value: true})], {columns: 3, label: "periodic activate, number, reflect"}), num_base: Inputs.range([2,4], {step: 1, label: "active filters", value: 4}), position: list([Inputs.form(), Inputs.range([0, 1], {step: 0.05, value: 0.25}), Inputs.range([0, 1], {step: 0.05, value: 0.5}), Inputs.form()], {columns: 4, label: "position base 1 to 4"}), feTurbulence_baseFrequency_1: list([Inputs.range([0,0.5], {step: 0.01, value: 0}), Inputs.range([0,0.5], {step: 0.01, value: 0.5}), Inputs.range([0,0.5], {step: 0.01, value: 0.05}), Inputs.range([0,0.5], {step: 0.01, value: 0})], {columns: 4, label: "ground noise freq"}), feTurbulence_baseFrequency_2: list([Inputs.range([0,0.5], {step: 0.01, value: 0}), Inputs.range([0,0.5], {step: 0.01, value: 0.5}), Inputs.range([0,0.5], {step: 0.01, value: 0.05}), Inputs.range([0,0.5], {step: 0.01, value: 0})], {columns: 4, label: "1st noise freq"}), feDisplacementMap_scale_3: list([Inputs.range([0,100], {step: 1, value: 0}), Inputs.range([0,100], {step: 1, value: 100}), Inputs.range([0,100], {step: 1, value: 100}), Inputs.range([0,100], {step: 1, value: 0})], {columns: 4, label: "1st displace scale"}), feTurbulence_baseFrequency_4: list([Inputs.range([0,0.5], {step: 0.01, value: 0}), Inputs.range([0,0.5], {step: 0.01, value: 0.5}), Inputs.range([0,0.5], {step: 0.01, value: 0.05}), Inputs.range([0,0.5], {step: 0.01, value: 0}),], {columns: 4, label: "2nd noise freq"}), feDisplacementMap_scale_5: list([Inputs.range([0,100], {step: 1, value: 0}), Inputs.range([0,100], {step: 1, value: 100}), Inputs.range([0,100], {step: 1, value: 100}), Inputs.range([0,100], {step: 1, value: 0})], {columns: 4, label: "2nd displace scale"}), feTurbulence_baseFrequency_6: list([Inputs.range([0,0.5], {step: 0.01, value: 0}), Inputs.range([0,0.5], {step: 0.01, value: 0.5}), Inputs.range([0,0.5], {step: 0.01, value: 0.05}), Inputs.range([0,0.5], {step: 0.01, value: 0})], {columns: 4, label: "3rd noise freq"}), feDisplacementMap_scale_7: list([Inputs.range([0,100], {step: 1, value: 0}), Inputs.range([0,100], {step: 1, value: 100}), Inputs.range([0,100], {step: 1, value: 100}), Inputs.range([0,100], {step: 1, value: 0}),], {columns: 4, label: "3rd displace scale"}) }) const none = Inputs.form({}) if (select_filterMode == "none"){ return none } else if (select_filterMode == "global filter" && select_filter == "shadow") { return shadow } else if (select_filterMode == "global filter" && select_filter == "glow") { return glow } else if (select_filterMode == "global filter" && select_filter == "gooey") { return gooey } else if (select_filterMode == "global filter" && select_filter == "pencil") { return pencil } else if (select_filterMode == "filter variable along path" && select_filter == "pencil") { return pencil_along_path } else if (select_filterMode == "dots along path" && select_filter == "pencil") { return pencil_along_dots } else if (select_filterMode == "dots along path" && select_filter == "dots only") { return dots_only } else if (select_filterMode == "dots along path" && select_filter == "gooey") { return dots_gooey } else { return "filter config not implemented" } }35:T733,{ const pencil = md` effect | 1 turburlence | 2 turburlence | 3 displacement | 4 turburlence | 5 displacement | 6 turburlence | 7 displacement --- | --- | --- | --- | --- | --- | --- | --- pencil | 0.3 | 0.3 | 5 | 0.3| 5 | 0.3 | 3 watercolor | 0.02 | 0.04 | 20 | 0.04 | 20 | 0.04 | 20 squiggle | 0.3 | 0.02 | 8 | 0.02 | 8 | 0.02 | 8 unskilled | 0.3 | 0.01 | 20 | 0.01| 20 | 0.01 | 20 noisy | 0.3 | 0.11 | 15 | 0.1 | 15 | 0.09 | 15 noisy | 0.3 | 0.21 | 10 | 0.2 | 10 | 0.19 | 10 ` const shadow = md` effect | opacity | intensity --- | --- | --- shadow | 0.4 | 3 ` const glow = md` effect | intensity --- | --- glow | depends on size (2) ` const gooey = md` effect | intensity --- | --- gooey | depends on size (5) ` const pencil_along_path = md`` const pencil_along_dots = md`` const dots_only = md`` const dots_gooey = md`` const none = md`` if (select_filterMode == "none"){ return none } else if (select_filterMode == "global filter" && select_filter == "shadow") { return shadow } else if (select_filterMode == "global filter" && select_filter == "glow") { return glow } else if (select_filterMode == "global filter" && select_filter == "gooey") { return gooey } else if (select_filterMode == "global filter" && select_filter == "pencil") { return pencil } else if (select_filterMode == "filter variable along path" && select_filter == "pencil") { return pencil_along_path } else if (select_filterMode == "dots along path" && select_filter == "pencil") { return pencil_along_dots } else if (select_filterMode == "dots along path" && select_filter == "dots only") { return dots_only } else if (select_filterMode == "dots along path" && select_filter == "gooey") { return dots_gooey } else { return "filter config not implemented" } }36:T477,viewof color_selector_back = { const gradient = Inputs.form({ num_colors: Inputs.range([1,4], {step: 1, label: "active colors", value: 2}), color: list([Inputs.color({ value: "#0e1d24"}), Inputs.color({ value: "#27343a"}), Inputs.color({ value: "#ffeaf9"}), Inputs.color({ value: "#ffeaf9"})], {columns: 4, label: "colors 1 to 4"}), position: list([Inputs.range([0, 1], {step: 0.05, value: 0}), Inputs.range([0, 1], {step: 0.05, value: 1}), Inputs.range([0, 1], {step: 0.05, value: 1}), Inputs.range([0, 1], {step: 0.05, value: 1})], {columns:4, label: "position 1 to 4"}) }) const unicolor = Inputs.form({ color: Inputs.color({label: "color", value: "#9755f3"}) // #F4F3E8 }) if (select_gradient_back == "linear color gradient"){ return gradient } else if (select_gradient_back == "radial color gradient") { return gradient } else if (select_gradient_back == "unicolor") { return unicolor } else { return "filter config not implemented" } }37:T653,viewof gradient_config_back = { const linear_gradient = Inputs.form({ lin_start: list([Inputs.range([0,1], {step: 0.05, value: 0}), Inputs.range([0,1], {step: 0.05, value: 0})], {columns: 2, label: "start position x, y"}), lin_end: list([Inputs.range([0,1], {step: 0.05, value: 1}), Inputs.range([0,1], {step: 0.05, value: 1})], {columns: 2, label: "end position x, y"}), lin_spreadMethod: Inputs.radio(["pad", "reflect", "repeat"], {value: "pad", label: "spread method"}), }) const radial_gradient = Inputs.form({ rad_end: list([Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0.5})], {columns: 3, label: "end circle x, y, rad"}), rad_start: list([Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0.5}), Inputs.range([0,1], {step: 0.05, value: 0})], {columns: 3, label: "start circle x, y, rad"}), rad_spreadMethod: Inputs.radio(["pad", "reflect", "repeat"], {value: "pad", label: "spread method"}), }) const none = Inputs.form({}) if (select_gradient_back == "linear color gradient"){ return linear_gradient } else if (select_gradient_back == "radial color gradient") { return radial_gradient } else if (select_gradient_back == "unicolor") { return none } else { return "filter config not implemented" } }38:T487,backgroundLayer_filter = (svg, defs) => { const active = select_backgroundLayer == "global filter" const customBackgroundFilter = defs.append('filter') .attr('id', 'customBackgroundFilter') .attr('width','1400%') .attr('height','1400%') .attr('x','-200%') .attr('y','-200%') .attr('filterUnits','objectBoundingBox') customBackgroundFilter.append('feTurbulence') .attr('type', active ? backgroundLayer_config.freq_1_noiseType[1] : null) .attr('baseFrequency', active ? backgroundLayer_config.freq_1_noiseType[0] : null) .attr('numOctaves', 7) .attr('stitchTiles', 'stitch') .attr('result', 't1') customBackgroundFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1 1') .attr('result','t2') customBackgroundFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') svg.append('rect') .attr('width', size) .attr('height', size) .attr('fill', color_selector_backgroundLayer.color) .attr('filter', 'url(#customBackgroundFilter)') }39:T27d4,function filter_along_path(path, svg, color, id) { // longer path mean quite some computation time with lower precision const precision = filter_config.path_precision[1] ? filter_config.path_precision[0] * 10 : filter_config.path_precision[0] const num_periods = filter_config.path_periods[0] ? filter_config.path_periods[1] : 1 const reflected = filter_config.path_periods[2] const stroke_width = path.attr('stroke-width') const stroke_dasharray = path.attr('stroke-dasharray') const stroke_linejoin = path.attr('stroke-linejoin') const stroke_linecap = path.attr('stroke-linecap') color = color || path.attr('stroke') const defs = svg.append('defs') const data = quads(samples(path.node(), precision)) createFilter(defs, data, id) path.remove() svg.append('g') .selectAll("path") .data(quads(samples(path.node(), precision))) .join("path") .style("fill", choose_color(color)) .style("stroke", choose_color(color)) .attr('stroke-dasharray', stroke_dasharray) .attr('stroke-linejoin', stroke_linejoin) .attr('stroke-linecap', stroke_linecap) .attr("d", d => lineJoin(d[0], d[1], d[2], d[3], stroke_width)) .attr('filter', (d,i) => 'url(#PencilPath-'+ i + id +')') // limnited to pencil until more is required // choose color mode function choose_color(color) { if(typeof color == "function"){ return d => reflected == true ? color(d.reflect_t) : color(d.t) } else { return color } } // Sample the SVG path uniformly with the specified precision. function samples(path, precision) { var N = path.getTotalLength(), dt = precision var T = [0], k = 0 while ((k += dt) < N) T.push(k) T.push(N) const n = N / num_periods return T.map(function(T) { var p = path.getPointAtLength(T), a = [p.x, p.y] a.T = T / N a.t = (T / n) % 1 // for repeating periods a.reflect_t = Math.floor(T / n) % 2 == 1 ? 1 - a.t : a.t // for reflected periods return a }) } // Compute quads of adjacent points [p0, p1, p2, p3]. function quads(points) { return d3.range(points.length - 1).map(function(i) { var a = [points[i - 1], points[i], points[i + 1], points[i + 2]] a.T = (points[i].T + points[i + 1].T) / 2 a.t = points[i].t // + (points[0].t + points[1].t) / 2 a.reflect_t = points[i].reflect_t return a }) } // Compute stroke outline for segment p12. function lineJoin(p0, p1, p2, p3, width) { var u12 = perp(p1, p2), r = width / 2, a = [p1[0] + u12[0] * r, p1[1] + u12[1] * r], b = [p2[0] + u12[0] * r, p2[1] + u12[1] * r], c = [p2[0] - u12[0] * r, p2[1] - u12[1] * r], d = [p1[0] - u12[0] * r, p1[1] - u12[1] * r]; if (p0) { // clip ad and dc using average of u01 and u12 var u01 = perp(p0, p1), e = [p1[0] + u01[0] + u12[0], p1[1] + u01[1] + u12[1]] a = lineIntersect(p1, e, a, b) d = lineIntersect(p1, e, d, c) } if (p3) { // clip ab and dc using average of u12 and u23 var u23 = perp(p2, p3), e = [p2[0] + u23[0] + u12[0], p2[1] + u23[1] + u12[1]] b = lineIntersect(p2, e, a, b) c = lineIntersect(p2, e, d, c) } return "M" + a + "L" + b + " " + c + " " + d + "Z" } // Compute intersection of two infinite lines ab and cd. function lineIntersect(a, b, c, d) { var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3, y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3, ua = (x43 * (y1 - y3) - y43 * (x1 - x3)) / (y43 * x21 - x43 * y21) return [x1 + ua * x21, y1 + ua * y21] } // Compute unit vector perpendicular to p01. function perp(p0, p1) { var u01x = p0[1] - p1[1], u01y = p1[0] - p0[0], u01d = Math.sqrt(u01x * u01x + u01y * u01y) return [u01x / u01d, u01y / u01d] } // get piecewise interpolator with four basis function interpolate(position) { const base_one = {position: 0, // fix feTurbulence_baseFrequency_1: filter_config.feTurbulence_baseFrequency_1[0], feTurbulence_baseFrequency_2: filter_config.feTurbulence_baseFrequency_2[0], feDisplacementMap_scale_3: filter_config.feDisplacementMap_scale_3[0], feTurbulence_baseFrequency_4: filter_config.feTurbulence_baseFrequency_4[0], feDisplacementMap_scale_5: filter_config.feDisplacementMap_scale_5[0], feTurbulence_baseFrequency_6: filter_config.feTurbulence_baseFrequency_6[0], feDisplacementMap_scale_7: filter_config.feDisplacementMap_scale_7[0],} const base_two = {position: filter_config.position[1], feTurbulence_baseFrequency_1: filter_config.feTurbulence_baseFrequency_1[1], feTurbulence_baseFrequency_2: filter_config.feTurbulence_baseFrequency_2[1], feDisplacementMap_scale_3: filter_config.feDisplacementMap_scale_3[1], feTurbulence_baseFrequency_4: filter_config.feTurbulence_baseFrequency_4[1], feDisplacementMap_scale_5: filter_config.feDisplacementMap_scale_5[1], feTurbulence_baseFrequency_6: filter_config.feTurbulence_baseFrequency_6[1], feDisplacementMap_scale_7: filter_config.feDisplacementMap_scale_7[1],} const base_three = {position: filter_config.position[2], feTurbulence_baseFrequency_1: filter_config.feTurbulence_baseFrequency_1[2], feTurbulence_baseFrequency_2: filter_config.feTurbulence_baseFrequency_2[2], feDisplacementMap_scale_3: filter_config.feDisplacementMap_scale_3[2], feTurbulence_baseFrequency_4: filter_config.feTurbulence_baseFrequency_4[2], feDisplacementMap_scale_5: filter_config.feDisplacementMap_scale_5[2], feTurbulence_baseFrequency_6: filter_config.feTurbulence_baseFrequency_6[2], feDisplacementMap_scale_7: filter_config.feDisplacementMap_scale_7[2],} const base_four = {position: 1, // fix feTurbulence_baseFrequency_1: filter_config.feTurbulence_baseFrequency_1[3], feTurbulence_baseFrequency_2: filter_config.feTurbulence_baseFrequency_2[3], feDisplacementMap_scale_3: filter_config.feDisplacementMap_scale_3[3], feTurbulence_baseFrequency_4: filter_config.feTurbulence_baseFrequency_4[3], feDisplacementMap_scale_5: filter_config.feDisplacementMap_scale_5[3], feTurbulence_baseFrequency_6: filter_config.feTurbulence_baseFrequency_6[3], feDisplacementMap_scale_7:filter_config.feDisplacementMap_scale_7[3],} return d3.scaleLinear() .domain([base_one.position, base_two.position, base_three.position, base_four.position].slice(0, filter_config.num_base)) .range([base_one, base_two, base_three, base_four].slice(0, filter_config.num_base)) (position) } // create and append filter function createFilter(defs, data, id) { for (let i = 0; i < data.length; i++) { // let position = i / (data.length - 1) let position = reflected == true ? data[i].reflect_t : data[i].t let pencilFilter = defs.append('filter') .attr('id', 'PencilPath-' + i + id) .attr('width','1400%') .attr('height','1400%') .attr('x','-200%') .attr('y','-200%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', interpolate(position).feTurbulence_baseFrequency_1) .attr('numOctaves', 3) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', interpolate(position).feTurbulence_baseFrequency_2) .attr('numOctaves', 3) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', interpolate(position).feDisplacementMap_scale_3) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', interpolate(position).feTurbulence_baseFrequency_4) .attr('numOctaves', 3) .attr('seed', '100') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', interpolate(position).feDisplacementMap_scale_5) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', interpolate(position).feTurbulence_baseFrequency_6) .attr('numOctaves', 3) .attr('seed', '10') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', interpolate(position).feDisplacementMap_scale_7) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') } } }3a:Te4f,function gradient_along_path(path, svg, color, id) { // with little deviations taken from https://bl.ocks.org/mbostock/4163057 // longer path mean quite some computation time with lower precision // const color = createScale(color_selection) const precision = gradient_config.grad_precision[1] ? gradient_config.grad_precision[0] * 10 : gradient_config.grad_precision[0] const num_periods = gradient_config.grad_periods[0] ? gradient_config.grad_periods[1] : 1 const reflected = gradient_config.grad_periods[2] const stroke_width = path.attr('stroke-width') const stroke_dasharray = path.attr('stroke-dasharray') const stroke_linejoin = path.attr('stroke-linejoin') const stroke_linecap = path.attr('stroke-linecap') const filter = path.attr('filter') path.remove() svg.append('g') .selectAll("path") .data(quads(samples(path.node(), precision))) .join("path") .style("fill", d => reflected== true ? color(d.reflect_t) : color(d.t)) .style("stroke", d => reflected== true ? color(d.reflect_t) : color(d.t)) .attr("d", d => lineJoin(d[0], d[1], d[2], d[3], stroke_width)) .attr('filter', filter) .attr('stroke-dasharray', stroke_dasharray) .attr('stroke-linejoin', stroke_linejoin) .attr('stroke-linecap', stroke_linecap) // Sample the SVG path uniformly with the specified precision. function samples(path, precision) { var N = path.getTotalLength(), dt = precision var T = [0], k = 0 while ((k += dt) < N) T.push(k) T.push(N) const n = N / num_periods return T.map(function(T) { var p = path.getPointAtLength(T), a = [p.x, p.y] a.T = T / N a.t = (T / n) % 1 // for repeating periods a.reflect_t = Math.floor(T / n) % 2 == 1 ? 1 - a.t : a.t // for reflected periods return a }) } // Compute quads of adjacent points [p0, p1, p2, p3]. function quads(points) { return d3.range(points.length - 1).map(function(i) { var a = [points[i - 1], points[i], points[i + 1], points[i + 2]] a.T = (points[i].T + points[i + 1].T) / 2 a.t = points[i].t // + (points[0].t + points[1].t) / 2 a.reflect_t = points[i].reflect_t return a }) } // Compute stroke outline for segment p12. function lineJoin(p0, p1, p2, p3, width) { var u12 = perp(p1, p2), r = width / 2, a = [p1[0] + u12[0] * r, p1[1] + u12[1] * r], b = [p2[0] + u12[0] * r, p2[1] + u12[1] * r], c = [p2[0] - u12[0] * r, p2[1] - u12[1] * r], d = [p1[0] - u12[0] * r, p1[1] - u12[1] * r]; if (p0) { // clip ad and dc using average of u01 and u12 var u01 = perp(p0, p1), e = [p1[0] + u01[0] + u12[0], p1[1] + u01[1] + u12[1]] a = lineIntersect(p1, e, a, b) d = lineIntersect(p1, e, d, c) } if (p3) { // clip ab and dc using average of u12 and u23 var u23 = perp(p2, p3), e = [p2[0] + u23[0] + u12[0], p2[1] + u23[1] + u12[1]] b = lineIntersect(p2, e, a, b) c = lineIntersect(p2, e, d, c) } return "M" + a + "L" + b + " " + c + " " + d + "Z" } // Compute intersection of two infinite lines ab and cd. function lineIntersect(a, b, c, d) { var x1 = c[0], x3 = a[0], x21 = d[0] - x1, x43 = b[0] - x3, y1 = c[1], y3 = a[1], y21 = d[1] - y1, y43 = b[1] - y3, ua = (x43 * (y1 - y3) - y43 * (x1 - x3)) / (y43 * x21 - x43 * y21) return [x1 + ua * x21, y1 + ua * y21] } // Compute unit vector perpendicular to p01. function perp(p0, p1) { var u01x = p0[1] - p1[1], u01y = p1[0] - p0[0], u01d = Math.sqrt(u01x * u01x + u01y * u01y) return [u01x / u01d, u01y / u01d] } }3b:T8ab,function dots_along_path(path, svg, color, id) { // inpsired by https://observablehq.com/@daformat/distributing-circles-around-a-shape path.remove() const frequency = filter_config.frequency[1] ? filter_config.frequency[0] * 10 : filter_config.frequency[0] const width = path.attr('stroke-width') / 2 const filter = path.attr('filter') color = color || path.attr('stroke') const random_radius = SmoothRandom(filter_config.smooth_factor) const random_opacity = d3.randomNormal.source(d3.randomLcg(filter_config.seed))(filter_config.opacity_mu_sigma[0], filter_config.opacity_mu_sigma[1]) const random_position = d3.randomNormal.source(d3.randomLcg(filter_config.seed))(0, filter_config.position_sigma) svg.append('g') .attr('filter', select_filter == "gooey" ? filter : null) .selectAll('circle') .data(data(path.node(), frequency)) .join('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('r', d => d.r) .attr('filter', select_filter == "pencil" ? filter : null) .attr('fill', d => typeof color == "function" ? color(d.t) : color) .attr('stroke', d => typeof color == "function" ? color(d.t) : color) .attr('fill-opacity', d => d.o) .attr('stroke-opacity', d => d.o) function data(path, precision) { var n = path.getTotalLength(), t = [0], i = 0, dt = precision while ((i += dt) < n) t.push(i) var array = t.map(function(t) { const p = path.getPointAtLength(t) const vector = vec(p, path.getPointAtLength(t + 1)) const radius = random_radius() * filter_config.radius_max_mu_sigma[0] var a = [] for(let w = -width; w < width; w++) { const translatedCenter = translate(p, vector.normal, w, 1) let dot = {} dot.x = translatedCenter.x + random_position() * width dot.y = translatedCenter.y + random_position() * width dot.t = t / n dot.r = radius dot.o = random_opacity() a.push(dot) } return a }) return _.flatten(array) } }3c:T47e,function linearGradient(defs, size, id, settings = [1, 1]) { const colors = _.range(0,1,0.01).map(d => createScale(color_selection)(d)) const linearGradient = defs.append('linearGradient') .attr('id', 'linear-gradient-' + id) .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', select_gradient == "linear color gradient" ? gradient_config.lin_start[0] * size * settings[0] : null) .attr('y1', select_gradient == "linear color gradient" ? gradient_config.lin_start[1] * size * (1 + settings[1]) / 2 + size * (1 - settings[1]) / 2 : null) .attr('x2', select_gradient == "linear color gradient" ? gradient_config.lin_end[0] * size * settings[0] : null) .attr('y2', select_gradient == "linear color gradient" ? gradient_config.lin_end[1] * size * (1 + settings[1]) / 2 + size * (1 - settings[1]) / 2 : null) .attr('spreadMethod', gradient_config.lin_spreadMethod) .selectAll('stop') .data(colors) .join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) }3d:T4c4,function linearGradient_back(defs, size, id, settings = [1, 1]) { const colors = _.range(0,1,0.01).map(d => createScale_back(color_selection_back)(d)) const linearGradient_back = defs.append('linearGradient') .attr('id', 'linear-gradient-back-' + id) .attr('gradientUnits', 'userSpaceOnUse') .attr('x1', select_gradient_back == "linear color gradient" ? gradient_config_back.lin_start[0] * size * settings[0] : null) .attr('y1', select_gradient_back == "linear color gradient" ? gradient_config_back.lin_start[1] * size * (1 + settings[1]) / 2 + size * (1 - settings[1]) / 2 : null) .attr('x2', select_gradient_back == "linear color gradient" ? gradient_config_back.lin_end[0] * size * settings[0] : null) .attr('y2', select_gradient_back == "linear color gradient" ? gradient_config_back.lin_end[1] * size * (1 + settings[1]) / 2 + size * (1 - settings[1]) / 2 : null) .attr('spreadMethod', gradient_config_back.lin_spreadMethod) .selectAll('stop') .data(colors) .join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) }3e:T4ae,function radialGradient(defs, id) { const colors = _.range(0,1,0.01).map(d => createScale(color_selection)(d)) const radialGradient = defs.append('radialGradient') .attr('id', 'radial-gradient-' + id) .attr('gradientUnits', 'userSpaceOnUse') .attr('cx', select_gradient == "radial color gradient" ? `${gradient_config.rad_end[0] * 100}%` : null) .attr('cy', select_gradient == "radial color gradient" ? `${gradient_config.rad_end[1] * 100}%` : null) .attr('r', select_gradient == "radial color gradient" ? `${gradient_config.rad_end[2] * 100}%` : null) .attr('fx', select_gradient == "radial color gradient" ? `${gradient_config.rad_start[0] * 100}%` : null) .attr('fy', select_gradient == "radial color gradient" ? `${gradient_config.rad_start[1] * 100}%` : null) .attr('fr', select_gradient == "radial color gradient" ? `${gradient_config.rad_start[2] * 100}%` : null) .attr('spreadMethod', gradient_config.spreadMethod) .selectAll('stop') .data(colors) .join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) }3f:T508,function radialGradient_back(defs, id) { const colors = _.range(0,1,0.01).map(d => createScale_back(color_selection_back)(d)) const radialGradient_back = defs.append('radialGradient') .attr('id', 'radial-gradient-back-' + id) .attr('gradientUnits', 'userSpaceOnUse') .attr('cx', select_gradient_back == "radial color gradient" ? `${gradient_config_back.rad_end[0] * 100}%` : null) .attr('cy', select_gradient_back == "radial color gradient" ? `${gradient_config_back.rad_end[1] * 100}%` : null) .attr('r', select_gradient_back == "radial color gradient" ? `${gradient_config_back.rad_end[2] * 100}%` : null) .attr('fx', select_gradient_back == "radial color gradient" ? `${gradient_config_back.rad_start[0] * 100}%` : null) .attr('fy', select_gradient_back == "radial color gradient" ? `${gradient_config_back.rad_start[1] * 100}%` : null) .attr('fr', select_gradient_back == "radial color gradient" ? `${gradient_config_back.rad_start[2] * 100}%` : null) .attr('spreadMethod', gradient_config_back.spreadMethod) .selectAll('stop') .data(colors) .join('stop') .attr('offset', (d,i) => `${Math.floor(i * 100 / (colors.length - 1))}%`) .attr('stop-color', d => d) .attr('stop-opactity', d => d.opacity > -1 ? d.opacity : 1) }40:Ta98,function pencilFilter(defs) { const active = (select_filterMode == "global filter" || select_filterMode == "dots along path") && select_filter == "pencil" const pencilFilter = defs.append('filter') .attr('id', 'pencil') .attr('width','1400%') .attr('height','1400%') .attr('x','-200%') .attr('y','-200%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type', active ? filter_config.freq_1_noiseType[1] : null) .attr('baseFrequency', active ? filter_config.freq_1_noiseType[0] : null) .attr('numOctaves', 3) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1 1') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', active ? filter_config.freq_2_displace_3[0] : null) .attr('numOctaves', 3) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', active ? filter_config.freq_2_displace_3[1] : null) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', active ? filter_config.freq_4_displace_5[0] : null) .attr('numOctaves', 3) .attr('seed', '100') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', active ? filter_config.freq_4_displace_5[1] : null) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', active ? filter_config.freq_6_displace_7[0] : null) .attr('numOctaves', 3) .attr('seed', '10') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', active ? filter_config.freq_6_displace_7[1] : null) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') } 41:[{"id":"2c07354084f7cc1b3c96b5e830c76ebe3b6c1d0a2b77a230992b393c4c49658ff1be677f04855286110345dc82ca58619aa41b4ea760eaaab366837e5def33d9","href":"https://static.observableusercontent.com/files/2c07354084f7cc1b3c96b5e830c76ebe3b6c1d0a2b77a230992b393c4c49658ff1be677f04855286110345dc82ca58619aa41b4ea760eaaab366837e5def33d9","name":"instagram_logo.png","type":"image/png","lastModified":1678542098258.349,"size":6908}] 2d:{"id":"cb3970d245f55414","slug":null,"title":"Phyllotaxis","thumbnail":"143062295fe0d9ebbee684edce8b921f3fbff87da7818b92405b8f2a968cdf8a","access_level":"public","create_time":"$D2023-02-08T19:12:55.484Z","update_time":"$D2024-11-28T18:41:35.451Z","view_time":null,"first_public_time":"$D2023-02-08T19:12:55.484Z","fork":{"id":"9e8b4002134796c1","slug":null,"title":"Harmonograph 2","owner":{"id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund"}},"stars":7,"starred":false,"owner":{"type":"team","id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":"starter_2024"},"version":4098,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc548c62f8872cf2","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":null}],"members":[{"type":"individual","id":"bc548c62f8872cf2","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"3b3f5f582a4fa5fd","slug":"block","title":"Kunstwerke","owner":{"id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund"}},"type":"notebook","body":{"title":"Phyllotaxis","cells":[{"id":4,"value":"# Phyllotaxis\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":159,"value":"In botany, phyllotaxis is the arrangement of leaves on a plant stem.\nInspired by the spiral arrangement of sunflower florets (H. Vogel's model), I connected some of the points to form curves.\n\nInspired by https://observablehq.com/@ershov/fillotaxis and https://observablehq.com/@fil/phyllotaxis-explained\n\nThis basically is some kind of configurator to play with parameters of the algo and design elements.\nOn my [

](https://www.instagram.com/saschaxsiegmund/) you can find all the pictures I created on this topic: \nhttps://www.instagram.com/p/CplS_NGsMGV/ \nhttps://www.instagram.com/p/CplTFBAswFq/ \nhttps://www.instagram.com/p/CplTB5kMubL/ \nhttps://www.instagram.com/p/CplTH1bsrTd/ ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":80,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"viewof settings = Inputs.form({\n ratio: list([Inputs.radio([1, 4/5, 2/3], {value: 4/5}),\n Inputs.radio([1, 4/5, 2/3], {value: 4/5})],\n {columns: 2, label: \"aspect ratio of figure X,Y\"}),\n layout: list([Inputs.radio([\"none\", \"middle\", \"right\"], {value: \"right\"}),\n Inputs.radio ([4/5, 2/3], {value: 4/5})],\n {columns: 2, label: \"layout position, width\"}),\n margin: list([Inputs.range([0,100], {step: 10, value: 0}),\n Inputs.range([0,100], {step: 10, value: 0}),\n Inputs.range([0,100], {step: 10, value: 0}),\n Inputs.range([0,100], {step: 10, value: 0}),],\n {columns: 4, label: \"margin top, bottom, left, right\"}),\n shift: list([Inputs.range([-100,100], {step: 10, value: -60}),\n Inputs.range([-100,100], {step: 10, value: 0}),],\n {columns: 4, label: \"shift vertical, horizontal\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":218,"value":"## first a beautiful figure","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":59,"value":"viewof params = Inputs.form({\n selection: Inputs.checkbox([\"first curve\", \"second curve\", \"dots\", \"landscape\"], {value: [\"first curve\", \"landscape\", \"dots\"]}),\n step: Inputs.range([0, 360], {step: 0.001, label: \"Angle step\", value:105}),\n number: Inputs.range([1, 5000], {step: 1, label: \"Size data\", value:1000}),\n nSpirals: Inputs.range([0, 250], {step: 1, label: \"Number spirals\", value: 1}),\n spiralStep: Inputs.range([1, 3000], {step: 1, label: \"Steps first curve\", value: 1}), // max steps < params.number\n spiralStep2: Inputs.range([1, 3000], {step: 1, label: \"Steps second curve\", value: 418}) // max steps < params.number\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2833,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4012,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"List of beautiful figures found so far:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":211,"value":"angle step | size data | num spirals | step curve\n--- | --- | --- | ---\n137.42 | 500 | 1 | 7 \n176.3 | 2783 | 14 | 415\n176.2 | 2783 | 30 | 415\n105 | 1000 | 1 | 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":220,"value":"## second step is color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1081,"value":"drawColors(8, createScale(color_selection))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1118,"value":"ramp(createScale(color_selection))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"viewof select_classes = Inputs.radio([\n \"distinct set of colors\",\n \"continuous color gradient\",\n], {value: \"continuous color gradient\", label: \"color settings\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1150,"value":"viewof classes_config = { \n\n const equi_distant = Inputs.form({\n classes: Inputs.range([2,50], {step: 1, label: \"number of classes\", value: 2}),\n })\n \n const none = Inputs.form({})\n \n if (select_classes == \"distinct set of colors\"){\n return equi_distant \n } else if (select_classes == \"continuous color gradient\") {\n return none\n } else {\n return \"filter config not implemented\"\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"viewof color_selector = Inputs.form({\n num_colors: Inputs.range([1,4], {step: 1, label: \"active colors\", value: 1}),\n color: list([Inputs.color({ value: \"#fff500\"}),\n Inputs.color({ value: \"#0074c3\"}),\n Inputs.color({ value: \"#213323\"}),\n Inputs.color({ value: \"#848d75\"})],\n {columns: 4, label: \"colors 1 to 4\"}),\n position: list([Inputs.range([0, 1], {step: 0.05, value: 0}),\n Inputs.range([0, 1], {step: 0.05, value: 1}),\n Inputs.range([0, 1], {step: 0.05, value: 0.5}),\n Inputs.range([0, 1], {step: 0.05, value: 1})],\n {columns:4, label: \"position 1 to 4\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1029,"value":"viewof color_config = Inputs.form({\n mode: Inputs.radio([\"lch\", \"hsl\", \"rgb\", \"lab\", \"lrgb\", \"oklab\", \"oklch\"], {value: \"lch\", label: \"mode\"}),\n saturation: Inputs.range([-3, 3], {step: 1, label: \"saturation\", value: 0}),\n darken: Inputs.range([-5, 5], {step: 1, label: \"darken\", value: 0}),\n alpha: Inputs.range([0, 1], {step: 0.1, label: \"alpha\", value: 1}),\n correctLightness: Inputs.toggle({label: \"correct lightness\"}),\n bezier_interpolation: Inputs.toggle({label: \"bezier\"}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1092,"value":"viewof select_gradient = Inputs.radio([\n \"linear color gradient\",\n \"radial color gradient\",\n \"color gradient along curve\",\n \"no gradient\"\n], {value: \"no gradient\", label: \"gradient settings\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"{\n const size = 250\n const svg = d3.create('svg')\n .attr('height', size)\n .attr('width', size)\n\n const defs2 = svg.append('defs')\n linearGradient(defs2, size, 'preview')\n radialGradient(defs2, 'preview')\n\n if (select_gradient == \"linear color gradient\"){\n svg.append('rect')\n .attr('height', size)\n .attr('width', size)\n .attr('fill', 'url(#linear-gradient-preview)')\n } else if (select_gradient == \"radial color gradient\"){\n svg.append('rect')\n .attr('height', size)\n .attr('width', size)\n .attr('fill', 'url(#radial-gradient-preview)')\n } else if (select_gradient == \"color gradient along curve\") {\n var path = svg.append('path')\n .attr('id', 'test_path')\n .attr('fill', 'none')\n .attr('stroke-width', 20)\n .attr('stroke', 'black')\n .attr('d', test_path)\n\n gradient_along_path(path, svg, createScale(color_selection)) // (path, svg, color, id)\n } \n\n return select_gradient == 'no gradient' ? md`` : svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1357,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1623,"value":"{\n if (select_gradient == \"color gradient along curve\") {\n return md`Longer paths mean quite some computation time with lower precision values. So start with a high value for precision if you still fiddle around.`\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"## now some filters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1817,"value":"viewof select_filterMode = Inputs.radio([\n \"global filter\",\n \"filter variable along path\",\n \"dots along path\",\n \"none\"\n], {value: \"none\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"viewof select_filter = {\n const global = Inputs.radio([\n \"pencil\",\n \"shadow\",\n \"glow\",\n \"gooey\"\n], {value: \"pencil\", label: \"choose a filter\"})\n\n const alongPath = Inputs.radio([\n \"pencil\",\n], {value: \"pencil\", label: \"choose a filter\"})\n\n const alongDots = Inputs.radio([\n \"dots only\",\n \"pencil\",\n \"gooey\",\n], {value: \"dots only\", label: \"choose a filter\"})\n\n const none = Inputs.radio({})\n\n if (select_filterMode == \"none\"){\n return none \n } else if (select_filterMode == \"global filter\") {\n return global\n } else if (select_filterMode == \"filter variable along path\") {\n return alongPath\n } else if (select_filterMode == \"dots along path\") {\n return alongDots\n } else {\n return \"filter config not implemented\"\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":714,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":779,"value":"## last the background","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1697,"value":"viewof select_gradient_back = Inputs.radio([\n \"unicolor\",\n \"linear color gradient\",\n \"radial color gradient\",\n], {value: \"unicolor\", label: \"background color\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1676,"value":"drawColors(8, createScale_back(color_selection_back))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1679,"value":"ramp(createScale_back(color_selection_back))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1690,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1682,"value":"viewof select_classes_back = {\n \n const gradient = Inputs.radio([\n \"distinct set of colors\",\n \"continuous color gradient\",\n ], {value: \"distinct set of colors\"})\n\n const none = Inputs.form({})\n\n if (select_gradient_back == \"linear color gradient\"){\n return gradient \n } else if (select_gradient_back == \"radial color gradient\") {\n return gradient\n } else if (select_gradient_back == \"unicolor\") {\n return none\n } else {\n return \"filter config not implemented\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1687,"value":"viewof classes_config_back = { \n\n const equi_distant = Inputs.form({\n classes: Inputs.range([2,50], {step: 1, label: \"number of classes\", value: 12}),\n })\n \n const none = Inputs.form({})\n \n if (select_classes_back == \"distinct set of colors\"){\n return equi_distant \n } else if (select_classes_back == \"continuous color gradient\") {\n return none\n } else if (select_gradient_back == \"unicolor\") {\n return none\n } else {\n return \"filter config not implemented\"\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1694,"value":"viewof color_config_back = {\n\n const gradient = Inputs.form({\n mode: Inputs.radio([\"lch\", \"hsl\", \"rgb\", \"lab\", \"lrgb\", \"oklab\", \"oklch\"], {value: \"lch\", label: \"mode\"}),\n saturation: Inputs.range([-3, 3], {step: 1, label: \"saturation\", value: 0}),\n darken: Inputs.range([-5, 5], {step: 1, label: \"darken\", value: 0}),\n alpha: Inputs.range([0, 1], {step: 0.1, label: \"alpha\", value: 1}),\n correctLightness: Inputs.toggle({label: \"correct lightness\"}),\n bezier_interpolation: Inputs.toggle({label: \"bezier\"}),\n })\n\n const none = Inputs.form({})\n\n if (select_gradient_back == \"linear color gradient\"){\n return gradient \n } else if (select_gradient_back == \"radial color gradient\") {\n return gradient\n } else if (select_gradient_back == \"unicolor\") {\n return none\n } else {\n return \"filter config not implemented\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1700,"value":"{\n const size = 250\n const svg = d3.create('svg')\n .attr('height', size)\n .attr('width', size)\n\n const defs2 = svg.append('defs')\n linearGradient_back(defs2, size, 'preview')\n radialGradient_back(defs2, 'preview')\n\n if (select_gradient_back == \"linear color gradient\"){\n svg.append('rect')\n .attr('height', size)\n .attr('width', size)\n .attr('fill', 'url(#linear-gradient-back-preview)')\n } else if (select_gradient_back == \"radial color gradient\"){\n svg.append('rect')\n .attr('height', size)\n .attr('width', size)\n .attr('fill', 'url(#radial-gradient-back-preview)')\n } \n\n return select_gradient_back == 'unicolor' ? md`` : svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1705,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3763,"value":"viewof select_backgroundLayer = Inputs.radio([\n \"global filter\",\n \"none\"\n], {value: \"none\", label: \"background layer\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3780,"value":"viewof color_selector_backgroundLayer = {\n const unicolor = Inputs.form({\n color: Inputs.color({label: \"color\", value: \"#3f060f\"})\n })\n\n const none = Inputs.form({})\n\n if (select_backgroundLayer == \"none\"){\n return none \n } else if (select_backgroundLayer == \"global filter\") {\n return unicolor\n } else {\n return \"filter config not implemented\"\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3794,"value":"viewof backgroundLayer_config = { \n const pencil = Inputs.form({\n freq_1_noiseType: list([Inputs.range([0,0.5], {step: 0.01, value: 0.3}),\n Inputs.radio([\"fractalNoise\", \"turbulence\"], {value: \"turbulence\"})],\n {columns: 2, label: \"ground noise freq\"}),\n })\n\n const none = Inputs.form({})\n \n if (select_backgroundLayer == \"none\"){\n return none \n } else if (select_backgroundLayer == \"global filter\") {\n return pencil\n } else {\n return \"filter config not implemented\"\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"### code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2958,"value":"function line_data(spiralStep) {\n var lines = []\n spiralStep = Math.min(spiralStep, params.number)\n for (let i = 0, idx = Math.min(topIdx+Math.floor(params.nSpirals/2), params.number-1); i < params.nSpirals && idx > 0; i++, idx--) {\n lines.push(data.filter((v, i) => !(Math.abs(idx - i)%spiralStep)))\n }\n return lines\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2949,"value":"line = d3.line().x(d => x(d.x)).y(d => y(d.y)).curve(d3[params2.lineOptions])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2939,"value":"y = d3.scaleLinear()\n .domain([max_r,-max_r])\n .range([settings.shift[0] + settings.margin[0] + size * (1 - settings.ratio[1]) / 2, size * (1 + settings.ratio[1]) / 2 - settings.margin[1] + settings.shift[0]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2942,"value":"x = d3.scaleLinear()\n .domain([max_r,-max_r])\n .range([size * settings.ratio[0] - settings.margin[3] + settings.shift[1], settings.shift[1] + settings.margin[2] + 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3966,"value":"areaLand = (lower, upper) => d3.area()\n .curve(d3.curveNatural)\n .x(d => xLand(d.x))\n .y0(size)\n .y1(d => yLand(lower, upper)(d.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3957,"value":"xLand = d3.scaleLinear()\n .domain([0,1])\n .range([size * settings.ratio[0] - settings.margin[3] + settings.shift[1], settings.shift[1] + settings.margin[2] + 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3961,"value":"yLand = (lower, upper) => d3.scaleLinear()\n .domain([0,1])\n .range([settings.shift[0] + settings.margin[0] + lower, upper - settings.margin[1] + settings.shift[0]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2851,"value":"data = [...new Array(params.number)].map((_,i) => {\n let a = params.step*i / 180 * Math.PI % (2*Math.PI);\n let r = Math.sqrt(i);\n return ({\n i: i,\n r: r,\n a: a,\n x: r * Math.cos(a),\n y: r * Math.sin(a),\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2855,"value":"max_r = Math.sqrt(params.number)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2858,"value":"topIdx = data.reduce((r, v, i, a) => a[r].y > v.y ? r : i, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3047,"value":"function dot_opacity() {\n return d3.randomNormal.source(d3.randomLcg(params2.seed))(params2.opacity_mu_sigma[0],\n params2.opacity_mu_sigma[1])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3079,"value":"function dot_radius(random_dotRadius) {\n return random_dotRadius() * params2.radius_max_mu_sigma[0] // also possible depedend on circular angle\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3039,"value":"// from http://bl.ocks.org/telic/9376360\nfunction SmoothRandom_dotRadius(factor, start) {\n const random_radius = d3.randomNormal.source(d3.randomLcg(params2.seed))(params2.radius_max_mu_sigma[1],\n params2.radius_max_mu_sigma[2])\n var last = (start!==undefined)?start:random_radius();\n var halfEnvelope = (1/factor)/2;\n return function() {\n // clamp output range to [0,1] as Math.random()\n var max = Math.min(1, last + halfEnvelope);\n var min = Math.max(0, last - halfEnvelope);\n // return a number within halfRange of the last returned value\n return last = random_radius()*(max-min)+min;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3618,"value":"color_custom_alternatig = (d,i) => {\n const color_selection1 = [color_selector.color[1], \n color_selector.color[0]]\n .map(color => chroma(color)\n .saturate(color_config.saturation)\n .darken(color_config.darken)\n .alpha(color_config.alpha)\n )\n const color_selection2 = [color_selector.color[2], \n color_selector.color[3]]\n .map(color => chroma(color)\n .saturate(color_config.saturation)\n .darken(color_config.darken)\n .alpha(color_config.alpha)\n )\n\n const c1 = createScale(color_selection1)\n const c2 = createScale(color_selection2)\n\n return i % 2 == 0 ? c1(i/data.length) : c2(i/data.length)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3850,"value":"// inspired by https://observablehq.com/@ambassadors/whats-that-noise\nlandscape = (resolution, octaves, seed, y) => {\n const instance = tooloud.Perlin.create(seed)\n const sample = octave(\n (x, y) => (instance.noise(x * resolution, y * resolution, 0) + 1) / 2,\n octaves\n )\n const num_samples = 1000\n const points = Array.from({ length: num_samples }, (_, i) => {\n const x = i / (num_samples - 1);\n return {x: x, y: sample(x, y)};\n });\n \n return points\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3855,"value":"// from https://observablehq.com/@mbostock/perlin-noise\nfunction octave(noise, octaves) {\n return function(x, y, z) {\n let total = 0;\n let frequency = 1;\n let amplitude = 1;\n let value = 0;\n for (let i = 0; i < octaves; ++i) {\n value += noise(x * frequency, y * frequency, z * frequency) * amplitude;\n total += amplitude;\n amplitude *= 0.5;\n frequency *= 2;\n }\n return value / total;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":731,"value":"### utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3756,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3489,"value":"color_in = (d, i, shape) => {\n const c = createScale(color_selection)\n const angle = shape == \"path\" ? d[0].a : d.a\n const length = shape == \"path\" ? params.nSpirals : data.length\n \n switch(select_gradient){\n case \"linear color gradient\": return 'url(#linear-gradient-main)'; break;\n case \"radial color gradient\": return 'url(#radial-gradient-main)'; break;\n }\n switch(params2.unicolor){\n case \"angle\": return c(angle / (2 * Math.PI)); break;\n case \"index\": return c(i / length); break;\n }\n\n return 'none'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3539,"value":"color_out = (path, svg) => {\n switch(select_gradient){\n case \"color gradient along curve\": return group_to_path(gradient_along_path, path, svg, createScale(color_selection)); break; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3450,"value":"filter_in = () => {\n switch(select_filterMode){\n case \"global filter\": return `url(#${select_filter})`; break;\n case \"dots along path\": return select_filter == \"dots only\" ? 'none' : `url(#${select_filter})`; break;\n default: return 'none'\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3461,"value":"filter_out = (path, svg) => {\n switch(select_filterMode){\n case \"filter variable along path\": return group_to_path(filter_along_path, path, svg, createScale(color_selection), 'main'); break;\n case \"dots along path\": return group_to_path(dots_along_path, path, svg, createScale(color_selection), 'main'); break;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":857,"value":"color_selection = [color_selector.color[0], \n color_selector.color[1], \n color_selector.color[2], \n color_selector.color[3]]\n.slice(0, color_selector.num_colors)\n.map(color => chroma(color)\n .saturate(color_config.saturation)\n .darken(color_config.darken)\n .alpha(color_config.alpha)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1656,"value":"color_selection_back = [select_gradient_back != \"unicolor\" ? color_selector_back.color[0] : null, \n select_gradient_back != \"unicolor\" ? color_selector_back.color[1] : null, \n select_gradient_back != \"unicolor\" ? color_selector_back.color[2] : null, \n select_gradient_back != \"unicolor\" ? color_selector_back.color[3] : null]\n.slice(0, color_selector_back.num_colors ?? 1)\n.map(color => chroma(color ?? color_selector_back.color)\n .saturate(color_config_back.saturation ?? 0)\n .darken(color_config_back.darken ?? 0)\n .alpha(color_config_back.alpha ?? 1)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":549,"value":"createScale = (colors) => {\n let domain = [color_selector.position[0],\n color_selector.position[1],\n color_selector.position[2],\n color_selector.position[3]].slice(0, color_selector.num_colors)\n\n var scale = null\n if(color_config.bezier_interpolation == true) {\n scale = chroma.bezier(colors)\n .scale() \n .mode(color_config.mode)\n .domain(domain)\n .correctLightness(color_config.correctLightness)\n } else {\n scale = chroma.scale(colors)\n .mode(color_config.mode)\n .domain(domain)\n .correctLightness(color_config.correctLightness)\n }\n\n if(select_classes == \"distinct set of colors\") {\n scale.classes(classes_config.classes)\n }\n \n\n return scale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1661,"value":"createScale_back = (colors) => {\n let domain = [select_gradient_back != \"unicolor\" ? color_selector_back.position[0] : null,\n select_gradient_back != \"unicolor\" ? color_selector_back.position[1] : null,\n select_gradient_back != \"unicolor\" ? color_selector_back.position[2] : null,\n select_gradient_back != \"unicolor\" ? color_selector_back.position[3] : null]\n .slice(0, color_selector_back.num_colors ?? 1)\n\n var scale = null\n if(color_config_back.bezier_interpolation == true) {\n scale = chroma.bezier(colors)\n .scale() \n .mode(color_config_back.mode)\n .domain(domain)\n .correctLightness(color_config_back.correctLightness)\n } else {\n scale = chroma.scale(colors)\n .mode(color_config_back.mode)\n .domain(domain)\n .correctLightness(color_config_back.correctLightness)\n }\n\n if(select_classes_back == \"distinct set of colors\") {\n scale.classes(classes_config_back.classes)\n }\n \n\n return scale\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"function drawColors(count, scale) {\n const colors = scale.colors(count)\n \n const perRow = Math.min(count || 8, 8);\n const svg = DOM.svg(800, Math.ceil(count / perRow) * 100);\n \n const size = 100;\n const g = d3.select(svg).selectAll('g')\n .data(colors).enter().append('g')\n .attr('transform', (d, i) => {\n const x = (i % perRow + 0.5) * size;\n const y = (Math.floor(i / perRow) + 0.5) * size;\n return 'translate(' + [x, y] + ')';\n }).attr('fill', d => d);\n\n g.append('circle')\n .attr('r', size / 4);\n\n g.append('text')\n .attr('y', size / 4 + 15)\n .attr('text-anchor', 'middle')\n .attr('dy', '.35em')\n .text((d, i) => `\"${d}\", `);\n \n return svg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1130,"value":"function ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = \"calc(100% + 28px)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"-moz-crisp-edges\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3258,"value":"function group_to_path(func, paths, svg, color, id) {\n for(var j = 0; j < paths._groups[0].length; j++) \n func(paths.filter((d,i) => i == j), svg, color, id)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1911,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1436,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2200,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1245,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1665,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1373,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1668,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":959,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"function shadowFilter(defs) {\n const shadowFilter = defs.append('filter')\n .attr('id', 'shadow')\n shadowFilter.append('feColorMatrix')\n .attr('type', 'matrix')\n .attr('values', `0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ${filter_config.shadow_opacity} 0`)\n shadowFilter.append('feGaussianBlur')\n .attr('stdDeviation', filter_config.shadow_intensity)\n .attr('result', 'coloredBlur')\n \n const shadowFeMerge = shadowFilter.append('feMerge')\n shadowFeMerge.append('feMergeNode').attr('in', 'coloredBlur')\n shadowFeMerge.append('feMergeNode').attr('in', 'SourceGraphic')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":977,"value":"function glowFilter(defs) {\n const glowFilter = defs.append('filter')\n .attr('id', 'glow')\n glowFilter.append('feGaussianBlur')\n .attr('stdDeviation', filter_config.glow_intensity)\n .attr('result', 'coloredBlur')\n \n const glowFeMerge = glowFilter.append('feMerge')\n glowFeMerge.append('feMergeNode').attr('in', 'coloredBlur')\n glowFeMerge.append('feMergeNode').attr('in', 'SourceGraphic')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":979,"value":"function gooeyFilter(defs) {\n const gooeyFilter = defs.append('filter')\n .attr('id', 'gooey')\n gooeyFilter.append('feGaussianBlur')\n .attr('in', 'SourceGraphic')\n .attr('stdDeviation', filter_config.gooey_intensity)\n .attr('result', 'blur')\n gooeyFilter.append('feColorMatrix')\n .attr('in', 'blur')\n .attr('mode', 'matrix')\n .attr('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7')\n .attr('result', 'gooey')\n gooeyFilter.append('feComposite')\n .attr('in', 'SourceGraphic')\n .attr('in2', 'gooey')\n .attr('operator', 'atop')\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2289,"value":"function vec(p1, p2) {\n // Returns a ( p1 o-> p2 ) vector object\n // given p1 and p2 objects with the shape {x: number, y: number}\n\n // horizontal and vertical vector components\n const dx = p2.x - p1.x;\n const dy = p2.y - p1.y;\n \n // magnitude of the vector (distance)\n const mag = Math.hypot(dx, dy); \n \n // unit vector\n const unit = (\n mag !== 0 \n ? { x: dx / mag, y: dy / mag }\n : { x: 0, y: 0 }\n );\n \n // normal vector\n const normal = rotate(\n unit,\n { x: 0, y: 0 },\n Math.PI /2\n );\n \n // Angle in radians\n const radians = Math.atan2(dy, dx);\n // Normalize to clock-wise circle\n const normalized = 2 * Math.PI + Math.round(radians) % (2 * Math.PI)\n // Angle in degrees\n const degrees = 180 * radians / Math.PI;\n const degreesNormalized = ( 360 + Math.round(degrees) ) % 360; \n\n return {\n dx, dy,\n mag, unit, normal,\n p1: {...p1},\n p2: {...p2},\n angle: {\n radians,\n normalized,\n degrees,\n degreesNormalized\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2292,"value":"function translate(point, vec, length = 1, direction = 1) {\n const resultingPoint = {}\n resultingPoint.x = point.x + vec.x * direction * length;\n resultingPoint.y = point.y + vec.y * direction * length;\n return resultingPoint\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2295,"value":" function rotate(point, center, radians) {\n const cos = Math.cos(radians),\n sin = Math.sin(radians),\n nx = (cos * (point.x - center.x)) + (sin * (point.y - center.y)) + center.x,\n ny = (cos * (point.y - center.y)) - (sin * (point.x - center.x)) + center.y;\n return {x: nx, y: ny};\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2380,"value":"// from http://bl.ocks.org/telic/9376360\nfunction SmoothRandom(factor, start) {\n const random_radius = d3.randomNormal.source(d3.randomLcg(filter_config.seed))(filter_config.radius_max_mu_sigma[1],\n filter_config.radius_max_mu_sigma[2])\n var last = (start!==undefined)?start:random_radius();\n var halfEnvelope = (1/factor)/2;\n return function() {\n // clamp output range to [0,1] as Math.random()\n var max = Math.min(1, last + halfEnvelope);\n var min = Math.max(0, last - halfEnvelope);\n // return a number within halfRange of the last returned value\n return last = random_radius()*(max-min)+min;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":621,"value":"test_circ = [\n {x: 10, y: 10},\n {x: 10, y: 35},\n {x: 10, y: 60},\n {x: 10, y: 85},\n {x: 35, y: 10},\n {x: 35, y: 35},\n {x: 35, y: 60},\n {x: 35, y: 85},\n {x: 60, y: 10},\n {x: 60, y: 35},\n {x: 60, y: 60},\n {x: 60, y: 85},\n {x: 85, y: 10},\n {x: 85, y: 35},\n {x: 85, y: 60},\n {x: 85, y: 85},\n {x: 110, y: 10},\n {x: 110, y: 35},\n {x: 110, y: 60},\n {x: 110, y: 85},\n {x: 135, y: 10},\n {x: 135, y: 35},\n {x: 135, y: 60},\n {x: 135, y: 85},\n {x: 160, y: 10},\n {x: 160, y: 35},\n {x: 160, y: 60},\n {x: 160, y: 85},\n {x: 185, y: 10},\n {x: 185, y: 35},\n {x: 185, y: 60},\n {x: 185, y: 85},\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1181,"value":"test_path = \"M 50 10 C -57 10 159 240 50 240 C -34 238 261 10 120 10 C -20 10 308 240 159 240 C 50 240 321 10 216 10\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1897,"value":"test_path2 = \"M 40 70 C 317 179 584 6 860 70\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"size = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3844,"value":"### import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3847,"value":"tooloud = (await import(\"https://cdn.skypack.dev/tooloud@2.0.4\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2038,"value":"import { list } from \"@stwind/input-list\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 2e:"$2d:body"