31:T15b2,blobs = { /* /!\ Code is still quite messy /!\ */ const boxWidth = 1000; const boxHeight = 520; const xmlns = 'http://www.w3.org/2000/svg'; const svg = document.createElementNS(xmlns, 'svg'); svg.setAttributeNS(null, 'viewBox', `0 0 ${boxWidth} ${boxHeight}`); svg.setAttributeNS(null, 'width', boxWidth); svg.setAttributeNS(null, 'height', boxHeight); svg.setAttributeNS(null, 'style', `width: 100%; height: auto; max-width: ${boxWidth}; box-sizing: border-box`); const centerX = boxWidth / 2; const centerY = boxHeight / 2; const offsetX = centerX - radius * 1.55; const offsetY = centerY - radius * 0.4; const offsetX2 = centerX - radius * 0.95; const offsetY2 = centerY - radius * 1.5; const offsetX3 = centerX - radius * 1.3; const offsetY3 = centerY - radius * 1.1; const amplitude = radius / Math.max(Math.min(totalNodes, 7), 4) * amplitudeFactor; const debugOpacity = debug ? '44' : '00'; const defs = document.createElementNS(xmlns, 'defs'); svg.appendChild(defs); defs.appendChild(createGradient(xmlns, 'gradient1', '#50F6C2', '#80FFF2')); defs.appendChild(createGradient(xmlns, 'gradient2', '#1E2CEF', '#4E5CFF')); defs.appendChild(createGradient(xmlns, 'gradient3', '#FF2CEFee', '#FF74FFee')); if (shadow) { defs.appendChild(createDropshadowFilter(xmlns, 'shadow1', '#80FFF2')); defs.appendChild(createDropshadowFilter(xmlns, 'shadow2', '#4E5CFF')); defs.appendChild(createDropshadowFilter(xmlns, 'shadow3', '#FF74FF')); } const g2 = document.createElementNS(xmlns, 'g'); g2.setAttributeNS(null, 'transform', `scale(1.25)`); g2.setAttributeNS(null, 'style', `mix-blend-mode: multiply;`); svg.appendChild(g2); const path2 = document.createElementNS(xmlns, 'path'); path2.setAttributeNS(null, 'fill', `url(${window.location.href}#gradient1)`); shadow && path2.setAttributeNS(null, 'style', `filter: url(${window.location.href}#shadow1)`); g2.appendChild(path2); const nodes2 = ( this && totalNodes * radius === this.hash && this.nodes2 ) || createNodes(radius, offsetX2, offsetY2, amplitude); const controlPoints2 = ( this && totalNodes * radius === this.hash && this.controlPoints2 ) || createControlPoints(nodes2, radius, offsetX2, offsetY2); appendNodes(nodes2, controlPoints2, g2, xmlns, debugOpacity); appendControlPoints(nodes2, controlPoints2, g2, xmlns, debugOpacity); const g3 = document.createElementNS(xmlns, 'g'); g3.setAttributeNS(null, 'transform', `scale(0.6)`); g3.setAttributeNS(null, 'style', `mix-blend-mode: multiply;`); svg.appendChild(g3); const path3 = document.createElementNS(xmlns, 'path'); path3.setAttributeNS(null, 'fill', `url(${window.location.href}#gradient3)`); shadow && path3.setAttributeNS(null, 'style', `filter: url(${window.location.href}#shadow3)`); g3.appendChild(path3); const nodes3 = ( this && totalNodes * radius === this.hash && this.nodes3 ) || createNodes(radius, offsetX3, offsetY3, amplitude); const controlPoints3 = ( this && totalNodes * radius === this.hash && this.controlPoints3 ) || createControlPoints(nodes3, radius, offsetX3, offsetY3); appendNodes(nodes3, controlPoints3, g3, xmlns, debugOpacity); appendControlPoints(nodes3, controlPoints3, g3, xmlns, debugOpacity); const g = document.createElementNS(xmlns, 'g'); g.setAttributeNS(null, 'opacity', '0.9'); g.setAttributeNS(null, 'style', `mix-blend-mode: multiply;`); svg.appendChild(g); const path = document.createElementNS(xmlns, 'path'); path.setAttributeNS(null, 'fill', `url(${window.location.href}#gradient2)`); shadow && path.setAttributeNS(null, 'style', `filter: url(${window.location.href}#shadow2)`); // path.setAttributeNS(null, 'stroke', '#1F4DF0'); // path.setAttributeNS(null, 'stroke-width', radius/20); g.appendChild(path); const nodes = ( this && totalNodes * radius === this.hash && this.nodes ) || createNodes(radius, offsetX, offsetY, amplitude); const controlPoints = ( this && totalNodes * radius === this.hash && this.controlPoints ) || createControlPoints(nodes, radius, offsetX, offsetY); appendNodes(nodes, controlPoints, g, xmlns, debugOpacity); appendControlPoints(nodes, controlPoints, g, xmlns, debugOpacity); drawBlobPath(nodes, controlPoints, path); // path.setAttributeNS(null, 'stroke-dashoffset', path.getTotalLength()); // const triangle = document.createElementNS(xmlns, 'path'); // triangle.setAttributeNS(null, 'fill', '#ffffffdd'); // triangle.setAttributeNS(null, 'd', `M${radius / 2 + offsetX} ${0 + offsetY}L${offsetX - radius / 2 }${offsetY - radius / 2}L${offsetX - radius / 2 } ${offsetY + radius / 2}Z`); // triangle.setAttributeNS(null, 'transform', `translate(${radius * 1.15} ${radius * 1.15}) scale(0.75)`); // svg.appendChild(triangle); svg.nodes = nodes; svg.controlPoints = controlPoints; svg.nodes2 = nodes2; svg.controlPoints2 = controlPoints2; svg.nodes3 = nodes3; svg.controlPoints3 = controlPoints3; svg.hash = totalNodes * radius; while(true) { // path.setAttributeNS(null, 'stroke-dasharray', path.getTotalLength() / 12); // path.setAttributeNS(null, 'stroke-dashoffset', path.getAttributeNS(null, 'stroke-dashoffset') - 1); update(nodes, controlPoints, amplitude); drawBlobPath(nodes, controlPoints, path); update(nodes2, controlPoints2, amplitude); drawBlobPath(nodes2, controlPoints2, path2); update(nodes3, controlPoints3, amplitude); drawBlobPath(nodes3, controlPoints3, path3); yield svg; } }32:T960,function createDropshadowFilter(xmlns, id, color) { const filter = document.createElementNS(xmlns, 'filter'); filter.setAttributeNS(null, 'id', id); filter.setAttributeNS(null, 'height', '200%'); filter.setAttributeNS(null, 'width', '200%'); filter.setAttributeNS(null, 'x', '-30%'); filter.setAttributeNS(null, 'y', '-30%'); filter.setAttributeNS(null, 'overflow', 'visible'); const blur = document.createElementNS(xmlns, 'feGaussianBlur'); blur.setAttributeNS(null, 'in', 'SourceAlpha'); blur.setAttributeNS(null, 'stdDeviation', '16'); blur.setAttributeNS(null, 'result', 'offsetblur'); filter.appendChild(blur); const flood = document.createElementNS(xmlns, 'feFlood'); flood.setAttributeNS(null, 'flood-color', color); flood.setAttributeNS(null, 'flood-opacity', '1'); filter.appendChild(flood); // const flood2 = document.createElementNS(xmlns, 'feFlood'); // flood2.setAttributeNS(null, 'flood-color', color); // flood2.setAttributeNS(null, 'flood-opacity', '1'); // filter.appendChild(flood2); const composite = document.createElementNS(xmlns, 'feComposite'); composite.setAttributeNS(null, 'in2', 'offsetblur'); composite.setAttributeNS(null, 'operator', 'in'); filter.appendChild(composite); const offset = document.createElementNS(xmlns, 'feOffset'); offset.setAttributeNS(null, 'dx', '4'); offset.setAttributeNS(null, 'dy', '4'); offset.setAttributeNS(null, 'result', 'offsetblur'); filter.appendChild(offset); const componentTransfer = document.createElementNS(xmlns, 'feComponentTransfer'); const funcA = document.createElementNS(xmlns, 'feFuncA'); funcA.setAttributeNS(null, 'type', 'linear'); funcA.setAttributeNS(null, 'slope', '0.8'); componentTransfer.appendChild(funcA); filter.appendChild(componentTransfer); const merge = document.createElementNS(xmlns, 'feMerge'); const mergeNode1 = document.createElementNS(xmlns, 'feMergeNode'); const mergeNode2 = document.createElementNS(xmlns, 'feMergeNode'); const mergeNode3 = document.createElementNS(xmlns, 'feMergeNode'); const mergeNode4 = document.createElementNS(xmlns, 'feMergeNode'); mergeNode4.setAttributeNS(null, 'in', 'SourceGraphic'); merge.appendChild(mergeNode1); // merge.appendChild(mergeNode2); // merge.appendChild(mergeNode3); merge.appendChild(mergeNode4); filter.appendChild(merge); return filter; }33:T762,function update(nodes, controlPoints, amplitude) { nodes.forEach((n, i) => { if (Math.abs(nodes[i].nextX - nodes[i].x) < 10) { const shiftX = (~~(Math.random() * 5) - 2) * Math.random() * amplitude / 2; nodes[i].prevX = nodes[i].x; nodes[i].nextX = nodes[i].baseX + shiftX; } if (Math.abs(nodes[i].nextY - nodes[i].y) < 10) { const shiftY = (~~(Math.random() * 5) - 2) * Math.random() * amplitude / 2; nodes[i].prevY = nodes[i].y; nodes[i].nextY = nodes[i].baseY + shiftY; } const distanceX = nodes[i].nextX - nodes[i].prevX; const distanceY = nodes[i].nextY - nodes[i].prevY; const remainingDistanceX = nodes[i].nextX - nodes[i].x; const remainingDistanceY = nodes[i].nextY - nodes[i].y; let tX = 1 - remainingDistanceX / distanceX; let tY = 1 - remainingDistanceY / distanceY; const shiftX = ease(tX > 0 ? tX : 0.2) * distanceX; const shiftY = ease(tY > 0 ? tY : 0.2) * distanceY; // const shiftX = 0; // const shiftY = 0; // console.log({tX, x: nodes[i].x, nextX: nodes[i].nextX, y: nodes[i].y, prevX: nodes[i].prevX, distanceX, remainingDistanceX}); nodes[i].x += shiftX; nodes[i].y += shiftY; controlPoints[i].c1x += shiftX; controlPoints[i].c1y += shiftY; controlPoints[i].c2x += shiftX; controlPoints[i].c2y += shiftY; n.debug.cpLine.setAttributeNS(null, 'd', ` M${controlPoints[i].c1x} ${controlPoints[i].c1y} L${controlPoints[i].c2x} ${controlPoints[i].c2y} `); n.debug.node.setAttributeNS(null, 'cx', n.x); n.debug.node.setAttributeNS(null, 'cy', n.y); n.debug.cp1.setAttributeNS(null, 'cx', controlPoints[i].c1x); n.debug.cp1.setAttributeNS(null, 'cy', controlPoints[i].c1y); n.debug.cp2.setAttributeNS(null, 'cx', controlPoints[i].c2x); n.debug.cp2.setAttributeNS(null, 'cy', controlPoints[i].c2y); }); }34:T8a1,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); if (title) form.append( html`${title}` ); form.append( html`` ); if (description) form.append( html`

${description}

` ); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }35:T11d9,html`

CSS is form,
form follows function[s],
indeed, that is a pun

`36:[] 2f:{"title":"Drawing and animating blobs with svg and javascript","cells":[{"id":0,"value":"md`\n# Drawing and animating blobs with svg and javascript\nOne way to create a blob shape it is to draw a circle with a bezier curve svg path ([it can only be an approximation of a circle](https://spencermortensen.com/articles/bezier-circle/), but it's good enough for our purposes). Once the circular path is drawn, we then can simply animate its anchor points and control points (the handles in a vector software) over time.\n\nThe result is a convincing enough approximation of a jello-like blob wiggling forever, without any other computation than transitioning the anchor points and control points positions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":963,"value":"md`## The blob wiggling animation\nPlay with settings below to change the number of anchor points, the amplitude of their displacement, the radius of the blob, and the speed of the animation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":815,"value":"viewof speed = slider({\n min: 0.5,\n max: 5,\n step: 0.1,\n value: 1,\n title: \"Speed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"viewof amplitudeFactor = slider({\n min: 0.8,\n max: 2,\n step: 0.1,\n value: 1.2,\n title: \"Amplitude\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"viewof radius = slider({\n min: 100,\n max: 200,\n step: 1,\n value: 120,\n title: \"Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"viewof totalNodes = slider({\n min: 3,\n max: 10,\n step: 1,\n value: 5,\n title: \"Anchor points\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"viewof shadow = checkbox({\n description: \"Apply coloured shadow svg filter to the blobs\",\n options: [{ value: \"toggle\", label: \"Glow (disable for performance)\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"viewof debug = checkbox({\n description: \"Draw vector anchor points and control points\",\n options: [{ value: \"toggle\", label: \"Draw anchors and handles\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"function createGradient(xmlns, id, color1, color2) {\n const radialGradient = document.createElementNS(xmlns, 'radialGradient');\n radialGradient.setAttributeNS(null, 'id', id);\n const stop1 = document.createElementNS(xmlns, 'stop');\n stop1.setAttributeNS(null, 'offset', '0%');\n stop1.setAttributeNS(null, 'stop-color', color1);\n radialGradient.appendChild(stop1);\n const stop2 = document.createElementNS(xmlns, 'stop');\n stop2.setAttributeNS(null, 'offset', '100%');\n stop2.setAttributeNS(null, 'stop-color', color2);\n radialGradient.appendChild(stop2);\n return radialGradient;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"function ease (t) {\n return -(Math.cos(Math.PI / 2 * t * 5) - 2) / 256 * speed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":" function rotate(cx, cy, x, y, radians) {\n const cos = Math.cos(radians),\n sin = Math.sin(radians),\n nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,\n ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;\n return [nx, ny];\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"function createNodes (radius, offsetX, offsetY) {\n let num = totalNodes,\n nodes = [], \n width = (radius * 2),\n height = (radius * 2),\n angle,\n x,\n y;\n for (let i = 0; i < num; i++) {\n angle = (i / (num / 2)) * Math.PI; // Angle at which the node will be placed\n x = (radius * Math.cos(angle)) + (width / 2);\n y = (radius * Math.sin(angle)) + (width / 2);\n nodes.push({\n id: i,\n x: x + offsetX,\n y: y + offsetY,\n prevX: x + offsetX,\n prevY: y + offsetY,\n nextX: x + offsetX,\n nextY: y + offsetY,\n baseX: x + offsetX,\n baseY: y + offsetY,\n angle,\n debug: {}\n });\n }\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"function appendNodes(nodes, controlPoints, svg, xmlns, debugOpacity) {\n nodes.forEach((n, i) => {\n const line = document.createElementNS(xmlns, 'path');\n line.setAttributeNS(null, 'stroke', `#000000${debugOpacity}`);\n line.setAttributeNS(null, 'stroke-width', '1');\n line.setAttributeNS(null, 'd', `\n M${controlPoints[n.id].c1x} ${controlPoints[n.id].c1y}\n L${controlPoints[n.id].c2x} ${controlPoints[n.id].c2y}\n `);\n svg.appendChild(line);\n nodes[i].debug.cpLine = line;\n\n const circle = document.createElementNS(xmlns, 'circle');\n circle.setAttributeNS(null, 'fill', `#000000${debugOpacity}`);\n circle.setAttributeNS(null, 'cx', n.x);\n circle.setAttributeNS(null, 'cy', n.y);\n circle.setAttributeNS(null, 'r', 3);\n svg.appendChild(circle);\n nodes[i].debug.node = circle;\n });\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"function createControlPoints(nodes, radius, offsetX, offsetY) {\n // https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves\n const idealControlPointDistance = (4 / 3) * Math.tan(Math.PI / (2 * totalNodes)) * radius;\n\n const cp0 = {\n c1x: nodes[0].x,\n c1y: nodes[0].y - idealControlPointDistance,\n c2x: nodes[0].x,\n c2y: nodes[0].y + idealControlPointDistance\n };\n\n return nodes.map(\n (n, i) => {\n if (i === 0) {\n return cp0;\n } else {\n const angle = -n.angle;\n const rotatedC1 = rotate(radius + offsetX, radius + offsetY, cp0.c1x, cp0.c1y, angle);\n const rotatedC2 = rotate(radius + offsetX, radius + offsetY, cp0.c2x, cp0.c2y, angle);\n return {\n c1x: rotatedC1[0],\n c1y: rotatedC1[1],\n c2x: rotatedC2[0],\n c2y: rotatedC2[1]\n };\n }\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"function appendControlPoints(nodes, controlPoints, svg, xmlns, debugOpacity) {\n controlPoints.forEach((n, i) => {\n const circle = document.createElementNS(xmlns, 'circle');\n circle.setAttributeNS(null, 'fill', `#000000${debugOpacity}`);\n circle.setAttributeNS(null, 'cx', n.c1x);\n circle.setAttributeNS(null, 'cy', n.c1y);\n circle.setAttributeNS(null, 'r', 2);\n svg.appendChild(circle);\n nodes[i].debug.cp1 = circle;\n \n const circle2 = document.createElementNS(xmlns, 'circle');\n circle2.setAttributeNS(null, 'fill', `#000000${debugOpacity}`);\n circle2.setAttributeNS(null, 'cx', n.c2x);\n circle2.setAttributeNS(null, 'cy', n.c2y);\n circle2.setAttributeNS(null, 'r', 2);\n svg.appendChild(circle2);\n nodes[i].debug.cp2 = circle2;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"function drawBlobPath(nodes, controlPoints, path) {\n path.setAttributeNS(null, 'd', `\n M${nodes[nodes.length - 1].x} ${nodes[nodes.length - 1].y}\n ${nodes.map((n, i) => `\nC ${i === 0\n ? controlPoints[controlPoints.length - 1].c2x\n : controlPoints[i - 1].c2x\n} ${i === 0\n ? controlPoints[controlPoints.length - 1].c2y\n : controlPoints[i - 1].c2y\n}, ${controlPoints[i].c1x} ${controlPoints[i].c1y}, ${n.x} ${n.y}\n`).join('')}\n Z\n `);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"md`\n## Want some more?\nLearn [how to create a pendulum simulation with canvas + javascript](https://observablehq.com/@daformat/pendulum-pendulus-flexibile), complete with adjustable friction, gravity, reaction to velocity, moustachiness and much more!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":996,"value":"html`\n \n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}