Curve Control

Once upon a time, I wished one day I'll figure how to make a curve go straight through the control points. What a nerdy wish. But well, all this while, the curve only nears it. So today... somehow... ما شاء الله tada! (◠oo◠) Oh Allah SWT, thank you so much - I feel like Cinderella back from the palace. .:(◠v◠):. الحمد لله


Of course, even Bezier isn't perfect - the curve has its moments ha ha... The left one curves inward. But simply rearrange the controls, from clockwise to counter clockwise, & walla the right one curves outward. OK I honestly don't know the maths. All I care - it goes straight through the controls. (◠v◠) الحمد لله



And for a smooth curve, there's a variable smooth. But I can't figure how to calculate it... (◠v◠)'
Update: actually, this variable arcs the curve | photo

<style> div { position: fixed; } </style>

smooth = 0.7;        // this controls the curves smoothness - but I dunno how to figure it

point = function (x,y)
{    this.x = x;
      this.y = y;
};

c = new Array(       // the control points
      new point(100,400), new point(200,100), new point(100,250),
      new point(500,100), new point(300,200), new point(500,400)
);    nctrls = c.length;

p = new Array(        // the curve points
      new point(0,0), new point(0,0), new point(0,0), new point(0,0), new point(0,0),
      new point(0,0), new point(0,0), new point(0,0), new point(0,0), new point(0,0)
);    npoints = p.length;

function drawcurve()
{
      for (i=0; i<(nctrls-1); i++)
      {    for (j=0; j<npoints; j++)
            {
                 spanx = (c[i].x - c[i+1].x)/npoints*j;
                 spany = (c[i].y - c[i+1].y)/npoints*j;

                 p[j].x = c[i].x - spanx;
                 p[j].y = c[i].y - spany;

                 for (np=0; np<npoints; np++)
                 {    p[np].y -= spanx/npoints*(npoints-np)/smooth;
                       p[np].x += spany/npoints*(npoints-np)/smooth;
                 }

                document.write ("<div style='left:" + p[j].x + "; top:" + p[j].y + ";'>★</div>");
          }
     }
}

So here's the code in HTML JavaScript. .:\(◠v◠)/:. الحمد لله

---

Bezier

Computer Graphic

Visible Invisible

Crystal Pattern

Yummy Pie