שמע ישראל ה' אלהינו ה' אחד
فمن كان يرجوا لقاء ربه فليعمل عملا صالحا ولا يشرك بعبادة ربه أحدا


May 11, 2015

Curve Control

Posted By Snow at 5/11/2015

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◠)/:. الحمد لله

.........................................................................................................................................................................................

1 comments on "Curve Control"

Snow on May 14, 2015, 5:45:00 AM said...

What is the probability of seeing a star during a typhoon ★
Err I mean a rainbow during a tornado... [photo | video] ماشاء الله


Welcome
Peace be upon you

Greetings

عيد اضحى مبارك
وكل عام وانتم بخير


Blog Archive



❤ 2009-2017 Lovely Memoirالحمد لله على نعمة الإسلام
Q Quran . SB Sahih Bukhari . SM Sahih Muslim . AD Abu Dawood . AN An Nasai . IM Ibn Majah . MM Muwatta Malik