{"id":"6770991f9c9579d3","slug":"recursive-bezier","trashed":false,"description":"","likes":9,"publish_level":"public","forks":0,"fork_of":null,"has_importers":false,"update_time":"2019-10-12T18:04:19.960Z","first_public_version":null,"paused_version":null,"publish_time":"2019-10-11T00:31:55.141Z","publish_version":215,"latest_version":215,"thumbnail":"efb0572a7f5c159c009a29d12b3d366d405f69355dc4f04b2e260e44a77e70ed","default_thumbnail":"efb0572a7f5c159c009a29d12b3d366d405f69355dc4f04b2e260e44a77e70ed","roles":[],"sharing":null,"owner":{"id":"8e8363b14a130065","avatar_url":"https://avatars.observableusercontent.com/avatar/a3c8cec3733471c90bab096a990da9cfb3c5a02d8abcaaf3335550b6ff9e4234","login":"timhau","name":"tau","bio":"math animations, geometric visuals, always learning ","home_url":"https://twitter.com/_timhau","type":"team","tier":"starter_2024"},"creator":{"id":"98fc0e4faeb2889d","avatar_url":"https://avatars.observableusercontent.com/avatar/a3c8cec3733471c90bab096a990da9cfb3c5a02d8abcaaf3335550b6ff9e4234","login":"timhau","name":"tau","bio":"math animations, geometric visuals, always learning ","home_url":"https://twitter.com/_timhau","tier":"public"},"authors":[{"id":"98fc0e4faeb2889d","avatar_url":"https://avatars.observableusercontent.com/avatar/a3c8cec3733471c90bab096a990da9cfb3c5a02d8abcaaf3335550b6ff9e4234","name":"tau","login":"timhau","bio":"math animations, geometric visuals, always learning ","home_url":"https://twitter.com/_timhau","tier":"public","approved":true,"description":""}],"collections":[{"id":"ffea95499049c8c3","type":"public","slug":"learning-geometry","title":"learning Geometry","description":"","update_time":"2019-12-16T22:32:54.697Z","pinned":false,"ordered":true,"custom_thumbnail":null,"default_thumbnail":"bb5d49c11a990adef379b908080155f5931b4df1636cda28b5bda39338e5a588","thumbnail":"bb5d49c11a990adef379b908080155f5931b4df1636cda28b5bda39338e5a588","listing_count":42,"parent_collection_count":0,"owner":{"id":"8e8363b14a130065","avatar_url":"https://avatars.observableusercontent.com/avatar/a3c8cec3733471c90bab096a990da9cfb3c5a02d8abcaaf3335550b6ff9e4234","login":"timhau","name":"tau","bio":"math animations, geometric visuals, always learning ","home_url":"https://twitter.com/_timhau","type":"team","tier":"starter_2024"}}],"files":[],"comments":[],"commenting_lock":null,"suggestion_from":null,"suggestions_to":[],"version":215,"title":"recursive Bézier","license":null,"copyright":"","nodes":[{"id":0,"value":"md`# recursive Bézier\n\nI know this is probably known to most of you and nothing new. But it is still beautiful.\n\nInspired by [jason davies](https://www.jasondavies.com/animated-bezier/) and [this tweet](https://twitter.com/FreyaHolmer/status/1180596435575689217)`","pinned":false,"mode":"js","data":null,"name":null},{"id":86,"value":"points = [\n  [0.02, 0.85],\n  [0.28, 0.9],\n  [0.58, 0.8],\n  [0.88, 0.5],\n  [0.7, 0.2],\n  [0.6, 0.6],\n  [0.5, 0.3],\n  [0.3, 0.4],\n  [0.2, 0.7],\n  [0.07, 0.38],\n  [0.15, 0.12],\n  [0.4, 0.1]\n].map(([x, y]) => [x * width, y * width])","pinned":false,"mode":"js","data":null,"name":null},{"id":2,"value":"{\n  const context = DOM.context2d(width, width);\n\n  const lines = [];\n  for (let i = 0; i < points.length - 1; ++i) {\n    lines.push([points[i], points[i + 1]]);\n  }\n\n  yield context.canvas;\n\n  let t = 0;\n  let trace = [];\n  while (true) {\n    await Promises.delay(50);\n    context.clearRect(0, 0, width, width);\n    t = (t + 0.01) % 1;\n\n    for (let l of lines) {\n      line(...l, context);\n    }\n\n    const l = drawIteration(lines, points.length - 1, t, context);\n    const pt = pointOnLine(...l, t);\n    circle([...pt, 4], context, { color: \"red\" });\n    trace.push(pt);\n\n    if (t >= 0.99) trace = [];\n\n    for (let i = 0; i < trace.length - 1; ++i) {\n      line(trace[i], trace[i + 1], context, { color: \"red\", lineWidth: 2 });\n    }\n  }\n}","pinned":true,"mode":"js","data":null,"name":null},{"id":55,"value":"function drawIteration(lines, n, t, context) {\n  if (n <= 1) return lines;\n\n  const c = 100 + (points.length - 1 - n) * points.length;\n  const color = `rgb(${c}, ${c}, ${c})`;\n\n  const p1s = [];\n  for (let l of lines) {\n    circle([...l[0], 3], context, { color });\n    const p1 = pointOnLine(l, t);\n    circle([...p1, 3], context, { color });\n    p1s.push(p1);\n  }\n  circle([...lines[lines.length - 1][1], 3], context, { color });\n\n  const nextLines = [];\n  for (let i = 0; i < p1s.length - 1; ++i) {\n    const nl = line(p1s[i], p1s[i + 1], context, { color });\n    nextLines.push(nl);\n  }\n\n  return drawIteration(nextLines, n - 1, t, context);\n}","pinned":true,"mode":"js","data":null,"name":null},{"id":3,"value":"import { circle, line, pointOnLine } from '@timhau/geometry'","pinned":false,"mode":"js","data":null,"name":null}],"resolutions":[],"schedule":null,"last_view_time":null}