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 |
|