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


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


Bat Zion

REMEMBER


קרן  .:💡:.  قرن
now in the cave

Blog Archive




قربان

明 NIRVANA


يا غلام إني أعلمك كلمات
احفظ الله يحفظك
احفظ الله تجده تجاهك

إذا سألت فاسأل الله
وإذا استعنت فاستعن بالله

واعلم‏‏ أن الأمة لو اجتمعت
على أن ينفعوك بشيء
لم ينفعوك إلا بشيء
قد كتبه الله لك

وإن اجتمعوا
على أن يضروك بشيء
لم يضروك بشيء
إلا بشيء قد كتبه الله عليك

رفعت الأقلام وجفت الصحف



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