All geek questions in one place

Set SVG curve to polynomial

Assuming I have functions like x² or 2x + 3x², how is this done to create an SVG path that is suitable for these functions?

From my limited understanding of SVG and Bezier curves, I believe that looking for is an easy way to build bezier control points that ensure that the resulting graph matches this function. You can safely assume (if you have not guessed this yet) that I am new to graphical programming. I know that frameworks like gnuplot can do this type of interpolation, but I'm looking more for an explanation of how to do this manually using SVG and JavaScript .

EDIT: Exact fit is not a strict requirement, but the resulting graph should be reasonably accurate (for training purposes).

+6
source share
1 answer
<?xml version="1.0" standalone="no"?>

SVG provides Bezier curves of orders 2 and 3, which should be good enough for quadratic and cubic polynomials.

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="20cm" height="20cm" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1"> <style type="text/css"><![CDATA[ .axis { fill: none; stroke: black; stroke-width: 3; } .tick { fill: none; stroke: black; stroke-width: 1; } .fun1 { fill: none; stroke: blue; stroke-width: 2; } .fun2 { fill: none; stroke: red; stroke-width: 2; } ]]></style> <polyline class="axis" points="0,500 1000,500" /> <polyline class="tick" points="0,490 0,510" /> <polyline class="tick" points="100,490 100,510" /> <polyline class="tick" points="200,490 200,510" /> <polyline class="tick" points="300,490 300,510" /> <polyline class="tick" points="400,490 400,510" /> <polyline class="tick" points="600,490 600,510" /> <polyline class="tick" points="700,490 700,510" /> <polyline class="tick" points="800,490 800,510" /> <polyline class="tick" points="900,490 900,510" /> <polyline class="tick" points="1000,490 1000,510" /> <polyline class="axis" points="500,0 500,1000" /> <polyline class="tick" points="490,0 510,0" /> <polyline class="tick" points="490,100 510,100" /> <polyline class="tick" points="490,200 510,200" /> <polyline class="tick" points="490,300 510,300" /> <polyline class="tick" points="490,400 510,400" /> <polyline class="tick" points="490,600 510,600" /> <polyline class="tick" points="490,700 510,700" /> <polyline class="tick" points="490,800 510,800" /> <polyline class="tick" points="490,900 510,900" /> <polyline class="tick" points="490,1000 510,1000" />

Take y = x² - 4, with endpoints (-3, 5) and (3, 5); tangents y = -6x - 13 and y = 6x - 13. Place one control point Q on both tangents, on (0, -13). This should work easily for any quadratic.

  <path class="fun1" d="M200,0 Q500,1800 800,0" />

Cubes are a little harder. For y = (x³ - 9x) / 16 from (-5, -5) to (5, 5), the tangents are y = (33x + 125) / 8 and y = (33x - 125) / 8. Seeing that the curve should go through (0, 0) with a slope of -9/16, this is a simple calculation to find the control points C (-5/3, 35/4) and (5/3, 35/4). This is probably not manually feasible most of the time, but I think this approach should be numerically feasible for any other cubic two variables, for how far the control points are along each tangent, and two constraints that force a particular point and direction.

  <path class="fun2" d="M0,1000 C333,-375 667,1375 1000,0" />

(The animated Bezier curves were very useful when I worked on them.)

 </svg>

+8
source

Source: https://habr.com/ru/post/905417/

More articles:


All Articles