function flower(appraisal, probeIndex, rotation, scale) { const probe = appraisal.probes[probeIndex]; setupGradients(appraisal, probeIndex); let g = ""; g += grid(); g += ripples(numberOfRipples, scale); g += label(appraisal, probeIndex); let a = ""; a += defs(appraisal); a += ""; probe.scores.forEach((score, i) => { a += layersOfPetals(score.mean / appraisal.max, numberOfRipples, i); if (showRadials) a += ``; }); return `${g}${a}`; function head(appraisal, probeIndex) { let h = ""; h += title(appraisal, probeIndex); return h; function title(appraisal, probeIndex) {} } // Define the global gradients and blurs. function defs(appraisal) { let gradients = ""; appraisal.appearance.forEach(segment => { gradients += `${segment.gradient.value}`; }); let filters = ""; appraisal.appearance.forEach(segment => { filters += `${segment.blur.value}`; }); return `${gradients}${filters}`; } // Draw rippleCount layered petals for a specific segment and in its appropriate segment color, // as a function of the value. function layersOfPetals(value, rippleCount, segment) { let a = ""; a += `transform="rotate(${(segment * 360) / probe.scores.length})"`; a += `fill="${appraisal.appearance[segment].gradient.id}"`; if (!navigator.userAgent.match("HeadlessChrome")) // kludge: avoid rendering blur on thumbnail machine a += `filter="${appraisal.appearance[segment].blur.id}"`; return `${petals(rippleCount)}`; // Draw each petal at its approprate scale as a function of the number of ripples. function petals(rippleCount) { let a = ""; for (let i = rippleCount; i >= 0; i--) { // rippleCount layers, smaller ones on top of larger ones let scale = (i + 1) / rippleCount < value ? (i + 1) / rippleCount : value; a += ` { // loop colors if appraisal.length > appearance.length const appearance = appraisal.appearance[i % appraisal.appearance.length]; const guid = DOM.uid("gradient"); appearance.gradient = { id: guid, value: `` + `` + `` + `` }; const buid = DOM.uid("blur"); appearance.blur = { id: buid, value: `` + `` + `` }; }); return appraisal; } function label(appraisal, probeIndex) { const probe = appraisal.probes[probeIndex]; const center = [0, 0]; let a = ""; probe.scores.forEach((b, i) => { const dotColor = appraisal.appearance[i].color; const alpha = 2 * Math.PI * (i / probe.scores.length + rotation / 360); const bend = dotOnCircle(labelCenterDistance, alpha); const side = bend[0] > 0 ? +1 : -1; const edgePoint = [side * 100, bend[1]]; const textAnchor = [edgePoint[0] + side * 5, edgePoint[1]]; const statAnchor = [textAnchor[0], textAnchor[1] + 5]; const stats = `avg = ${b.mean.toFixed(1)} / σ = ${b.sigma.toFixed(1)}`; a += polyline([center, bend, edgePoint]); a += text("label", textAnchor, side, appraisal.appearance[i].category); if (showStatistics) a += text("stats", statAnchor, side, stats); a += dot(bend, dotColor); a += dot(center, "darkred"); }); return `${a}`; function polyline(l, kind = "ray") { let a = ""; const start = l.shift(); if (start) a += `M${start[0]} ${start[1]}`; l.forEach(p => { a += ` L${p[0]} ${p[1]}`; }); return ``; } function text(kind, [x, y], anchor, t) { const a = anchor == 1 ? "start" : "end"; return ` ${t}`; } function dotOnCircle(radius, angle) { return [radius * Math.cos(angle), radius * Math.sin(angle)]; } } function ripples(numberOfRipples, scale) { if (showRipples) { const ripple = numberOfRipples => { let a = ""; for (let r = numberOfRipples; r > 0; r--) a += ``; return a; }; return `${ripple( numberOfRipples )}`; } } function dot([x, y], color) { const a = x.toFixed(1); const b = y.toFixed(1); let z = ""; if (showHandles) z += ``; if (showCoordinates) z += `(${a}, ${b})`; return z; } }