{"id":2236,"date":"2019-06-19T10:59:11","date_gmt":"2019-06-19T09:59:11","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=2236"},"modified":"2022-07-25T08:35:43","modified_gmt":"2022-07-25T07:35:43","slug":"bezier-curves","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/bezier-curves\/","title":{"rendered":"Javascript bezier curves"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.jasondavies.com\/animated-bezier\/\">https:\/\/www.jasondavies.com\/animated-bezier\/<\/a><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ @NK: converted the code below to ES6 function\nconst pow = Math.pow;\nconst calc = (x0, x1, x2, x3) => {\n    const c = 3 * (x1 - x0),\n          b = 3 * (x2 - x1) - c,\n          a = x3 - x0 - c - b;\n    return (t) => (a * pow(t, 3)) + (b * pow(t, 2)) + (c * t) + x0;\n};\nconst bezier = (p0, p1, p2, p3) => {\n    const xfn = calc(p0.x, p1.x, p2.x, p3.x), \n          yfn = calc(p0.y, p1.y, p2.y, p3.y);\n    return t => ({\n        x: xfn(t),\n        y: yfn(t)\n    });\n};<\/pre>\n\n\n\n<p><a href=\"https:\/\/javascript.info\/bezier-curve\">https:\/\/javascript.info\/bezier-curve<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/stackoverflow.com\/a\/16227479\/1052129\">https:\/\/stackoverflow.com\/a\/16227479\/1052129<\/a><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    bezier = function(t, p0, p1, p2, p3){\n      var cX = 3 * (p1.x - p0.x),\n          bX = 3 * (p2.x - p1.x) - cX,\n          aX = p3.x - p0.x - cX - bX;\n            \n      var cY = 3 * (p1.y - p0.y),\n          bY = 3 * (p2.y - p1.y) - cY,\n          aY = p3.y - p0.y - cY - bY;\n            \n      var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;\n      var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;\n            \n      return {x: x, y: y};\n    },\n\n    (function(){\n      var accuracy = 0.01, \/\/this'll give the bezier 100 segments\n          p0 = {x: 10, y: 10}, \/\/use whatever points you want obviously\n          p1 = {x: 50, y: 100},\n          p2 = {x: 150, y: 200},\n          p3 = {x: 200, y: 75},\n          ctx = document.createElement('canvas').getContext('2d');\n\n      ctx.width = 500;\n      ctx.height = 500;\n      document.body.appendChild(ctx.canvas);\n      \n      ctx.moveTo(p0.x, p0.y);\n      for (var i=0; i&lt;1; i+=accuracy){\n         var p = bezier(i, p0, p1, p2, p3);\n         ctx.lineTo(p.x, p.y);\n      }\n  \n      ctx.stroke()\n    })()<\/pre>\n\n\n\n<p><a href=\"http:\/\/jsfiddle.net\/fQYsU\/\">http:\/\/jsfiddle.net\/fQYsU\/<\/a><\/p>\n\n\n\n<p>Approximate SINE function:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i.stack.imgur.com\/lBn8K.png\" alt=\"cubic bezier approximation compared with sinusoidal\"\/><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cubic-bezier(0.364212423249, 0, 0.635787576751, 1)<\/pre>\n\n\n\n<p><a href=\"https:\/\/stackoverflow.com\/a\/50596945\">https:\/\/stackoverflow.com\/a\/50596945<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/www.jasondavies.com\/animated-bezier\/ https:\/\/javascript.info\/bezier-curve https:\/\/stackoverflow.com\/a\/16227479\/1052129 http:\/\/jsfiddle.net\/fQYsU\/ Approximate SINE function: https:\/\/stackoverflow.com\/a\/50596945<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4,1],"tags":[],"class_list":["post-2236","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=2236"}],"version-history":[{"count":11,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2236\/revisions"}],"predecessor-version":[{"id":6063,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2236\/revisions\/6063"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=2236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=2236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=2236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}