जावास्क्रिप्ट: बेज़ियर कर्व्स के साथ ड्रा

शुभ दिन, ह्रज़ितली!
मुझे वास्तव में बारोक तत्व पसंद हैं। एक बार फिर, साइटों में से एक पर इसी तरह के पैटर्न को पूरा करने के बाद, मैंने कल्पना की कि एनीमेशन में यह कितना अद्भुत लगेगा, तस्वीर जीवन में आ जाएगी। विशेष रूप से HTML5 के आगमन के साथ, पुनरोद्धार को लागू करना बहुत आसान हो जाना चाहिए। लेकिन बिंदुओं पर वक्र कैसे खींचना है? फिर, वैसे, मैंने बेजियर वक्र को याद किया!

वेक्टर ग्राफिक्स के पाठों में, मैंने बेज़ियर कर्व्स से जमकर नफरत की। उसके काम का सिद्धांत जादुई, समझ से बाहर और कम से कम असभ्य, अतार्किक कहा गया था। एक को लग रहा था कि वक्र खुद नहीं जानता कि कैसे चकमा देना है, और एक अभेद्य बिल्ली कैसे फैल गई क्योंकि यह उसके लिए अधिक सुविधाजनक था, और मेरी ज़रूरत के अनुसार नहीं।

वास्तव में, हमेशा की तरह, सिद्धांत के लिए थोड़ा समय समर्पित करना आवश्यक था। सब कुछ सरल और काफी रोचक निकला। परिणाम कैनवास का उपयोग करके जावास्क्रिप्ट में घटता का एक कार्यान्वयन है।
कौन परवाह करता है कि यह घुमावदार जानवर कैसे बनाया गया है, कटौती के तहत आपका स्वागत है!

सिद्धांत की बिट

आइए निर्माण के सिद्धांत से शुरू करें। बेजियर वक्र कई संदर्भ बिंदुओं पर बनाया गया है। आंकिक रूप से बोलना: वक्र शून्य संदर्भ बिंदु पर शुरू होता है, पहले की ओर बढ़ना शुरू करता है, लेकिन अचानक दूसरा नोटिस करता है - इसके लिए गुरुत्वाकर्षण शुरू करता है, धीरे-धीरे उसकी दिशा में अपना मार्ग बदलता है, और फिर एक तिहाई, और भी अधिक आकर्षक, क्षितिज पर दिखाई देता है ... और इसलिए, हर किसी द्वारा पारित बिंदु, वक्र अंतिम संदर्भ बिंदु पर रुकता है, जहां यह आता है। रास्ता एक शराबी की तरह निकलता है जो सुबह घर जा रहा होता है।


चलिए गीत से कठोर गणित की ओर बढ़ते हैं।

सिद्धांत अहंकार से विकिपीडिया से उधार लिया गया है :

बेजियर वक्र बर्नस्टीन बहुपद का एक विशेष मामला है, एक पैरामीट्रिक वक्र का प्रतिनिधित्व करता है और इसे अभिव्यक्ति द्वारा दिया गया है:

जहाँ

n संदर्भ बिंदुओं की संख्या है;
i - संदर्भ बिंदु संख्या;
t वह चरण है जिस पर हम वक्र की स्थिति पर विचार करते हैं। उदाहरण के लिए, जब 100 बिंदुओं का उपयोग करके एक वक्र का निर्माण किया जाता है, तो कदम 0.01 होगा (संदर्भ बिंदु नहीं, बल्कि वक्र पर ही बिंदु);
पी - हमारे मामले में, संदर्भ बिंदु का समन्वय;
b (t) बेज़ियर वक्र का आधार कार्य है। यह गुणांक संदर्भ बिंदु के वजन को निर्धारित करता है। यह वास्तव में बर्नस्टीन बहुपद है:



जहाँ N के संयोजन की संख्या i है , जहां n बहुपद की डिग्री है, मैं समर्थन शीर्ष की क्रम संख्या है।

पहले और आखिरी चरणों में, बर्नस्टीन बहुपद का मूल्य 1 है, स्पष्टीकरण यहाँ है । मध्य बिंदु का वक्र के मध्य में सबसे बड़ा प्रभाव है, पहले तीसरे में, पहले तीसरे का समर्थन बिंदु, और इसी तरह। बर्नस्टीन बहुपद 0 से 1 तक मान लेता है।

और इसलिए, बेजियर वक्र के समन्वय की गणना करने के लिए, हमें आवश्यकता है:

1. संदर्भ बिंदु के वजन की गणना करें;
2. इस संदर्भ बिंदु के समन्वय से वजन को गुणा करें;
3. सभी नियंत्रण बिंदुओं के लिए चरण 1-2 दोहराएं;
4. परिणामी मूल्यों को जोड़ें - यह वक्र का समन्वय होगा।

हम सिद्धांत को सुलझाते हैं, अभ्यास के लिए आगे बढ़ते हैं।

हुर्रे! अभ्यास।

हम मूल कार्य पर विचार करते हैं:

// i -  , n -  , t -   ( 0  1) function getBezierBasis(i, n, t) { //  function f(n) { return (n <= 1) ? 1 : n * f(n - 1); }; //  i-    return (f(n)/(f(i)*f(n - i)))* Math.pow(t, i)*Math.pow(1 - t, n - i); } 

आगे हमें वक्र के निर्देशांक मिलते हैं।
आप तीन-आयामी, चार-आयामी स्थान, और इसी तरह एक बेजियर वक्र का निर्माण कर सकते हैं, लेकिन हम विमान पर रोक देंगे।

 // arr -   .  -  , (x = arr[0], y = arr[1]) // step -     (0 < step < 1),   0.01 function getBezierCurve(arr, step) { if (step == undefined) { step = 0.01; } var res = new Array() for (var t = 0; t < 1 + step; t += step) { if (t > 1) { t = 1; } var ind = res.length; res[ind] = new Array(0, 0); for (var i = 0; i < arr.length; i++) { var b = getBezierBasis(i, arr.length - 1, t); res[ind][0] += arr[i][0] * b; res[ind][1] += arr[i][1] * b; } } return res; } 

हम एक वक्र बनाते हैं:

 // ctx - rendering context , arr -       // delay -     , pause -    , function drawLines(ctx, arr, delay, pause) { if (delay == undefined) { delay = 10; } if (pause == undefined) { pause = delay; } var i = 0; function delayDraw() { if (i >= arr.length - 1) { return; } ctx.moveTo(arr[i][0],arr[i][1]); ctx.lineTo(arr[i+1][0],arr[i+1][1]); ctx.stroke(); ++i; setTimeout(delayDraw, delay); } setTimeout(delayDraw, pause); } 

यह प्रयास करने का समय है:

 drawC = document.getElementById('bezier'); drawC.width = document.width - 30; drawC.height = document.height - 30; if (drawC && drawC.getContext) { ctx = drawC.getContext('2d'); ctx.fillStyle="#33CC99"; ctx.lineWidth=0.1; var flow; //    var arr = new Array(); arr[0] = new Array(0, 100); arr[1] = new Array(100, 80); arr[2] = new Array(150, 150); arr[3] = new Array(200, 155); flow = getBezierCurve(new Array(arr[0], arr[1], arr[2], arr[3]), 0.01); drawLines(ctx, flow, 10); } 

Jsfiddle उदाहरण

संबंधित लिंक:
Javascript.ru पर अनुच्छेद

अपडेट: एचटीएमएल 5 मानक तीन और चार बिंदुओं पर क्रमशः बेज़ियर कर्व्स के निर्माण के लिए क्वाड्रैटिक कर्वटो और बेज़ियर कर्वटो विधियों का समर्थन करता है। धन्यवाद lany