इंटरपोलेशन: हम PHP और GD का उपयोग करके चिकनी ग्राफिक्स बनाते हैं

एक प्रोग्रामर के लिए एक सामान्य कार्य रेखांकन बनाना है। इनपुट बिंदुओं की एक सरणी है (x _i ; y _i )। एक नियम के रूप में, हम ग्राफ में कुछ बिंदुओं पर - केवल कुछ मूल्यों को जानते हैं। वक्र के निरंतर ग्राफ का निर्माण करने के लिए, आपको प्रक्षेप या सन्निकटन का सहारा लेना चाहिए।



प्रक्षेप - दिए गए बिंदुओं से गुजरने वाली वक्र का निर्माण।
उत्पीड़न मूल के लिए एक वक्र का सन्निकटन है, लेकिन जरूरी नहीं कि दिए गए बिंदुओं से गुजर रहा हो।

इस विषय में, मैं PHP के लिए अपनी लाइब्रेरी का प्रदर्शन करना चाहता हूं, जो लैग्रेग बहुपद, सी-स्लाइन और अकीमा स्लाइन का उपयोग करके प्रक्षेपित करता है, साथ ही साथ बेजियर वक्र का एक अनुमान भी है। इसके अतिरिक्त, यह एक सेगमेंट को स्मूथिंग (एंटी-अलियासिंग) के साथ लागू करता है।

हम संक्षेप में प्रक्षेप और सन्निकटन विधियों पर विचार करते हैं।

टुकड़े-टुकड़े रैखिक प्रक्षेप

पहली बात जो दिमाग में आती है वह है बिंदुओं को खंडों से जोड़ना:



गति के लिए सबसे अच्छा समाधान, लेकिन परिणामी अनुसूची टूट गई है - यह वह नहीं है जो हमें चाहिए।

लैग्रेंज इंटरपोलेशन पोलिनोमियल

एन + 1 अंक के लिए डिग्री एन का एक बहुपद। इसका सूत्र बहुत सरल है:



लागू करने के लिए आसान है, लेकिन दो गंभीर कमियां हैं:
1) गणना की एक महत्वपूर्ण राशि की आवश्यकता है
2) दिए गए बिंदुओं (नोड्स) के बीच अप्रत्याशित व्यवहार करता है

क्यूबिक स्पलाइन (सी-स्पलाइन)

क्यूब स्‍पलाइन पिछली पद्धति की कमियों से मुक्‍त है। नोड्स के बीच प्रत्येक अंतराल के लिए, अधिकतम 3 पर एक बहुपद की डिग्री निर्दिष्ट है, जबकि फ़ंक्शन का पहला और दूसरा डेरिवेटिव निरंतर होना चाहिए। एक ओर, यह गणना को सरल करता है, और दूसरी ओर, यह वक्रता में अचानक कूदता से बचता है।



मैंने विकिपीडिया से लिए गए C # कोड से क्यूबिक स्पलाइन के कार्यान्वयन को चित्रित किया।

अकीमों को चिन्हित करें

क्यूबिक स्प्लिन में एक खामी है: पड़ोसियों से एक बिंदु के आसपास के क्षेत्र में, ऐसे स्प्लिन अप्रत्याशित "आउटलेयर" बना सकते हैं। हिरोशी अकीम द्वारा प्रस्तावित स्प्लिन का उपयोग करके इस समस्या को हल किया जा सकता है। कृपया ध्यान दें - अकीमा तख़्ता अधिक स्थिर है:



मैंने डेविड फ्रे के डेबियन एस्पलाइन प्रोग्राम सी कोड से अकीमा तख़्ती के कार्यान्वयन को चित्रित किया।

बेज़ियर वक्र सन्निकटन

कभी-कभी यह उपयोगी होता है कि दिए गए बिंदुओं के माध्यम से वक्र न बनाएं, बल्कि उन्हें संदर्भ बिंदुओं के रूप में उपयोग करें। बेज़ियर वक्र विधि हमें इसमें मदद करेगी (मैंने C # से तोल्ग बर्डल उदाहरण को चित्रित किया)। वक्र पहले और आखिरी बिंदु से गुजरता है

प्रदर्शन परीक्षण

इसे एक्सॉन 5560 2.8GHz सर्वर, प्रयोगों की संख्या = 1000 पर रेंडर किए बिना 500x500 आकार के ग्राफ के लिए किया गया था। औसत निष्पादन समय, एस:

अंकों की संख्या:	5	15	50
विचित्र बहुपद	1.789	5664	20,446
घनचक्र	0.153	0.230	0.313
अकीमों को चिन्हित करें	0.017	0.024	0.049
बेजियर वक्र	0.244	0.276	0.304

नीचे दी गई तालिका से निम्नलिखित निष्कर्ष निकाले जा सकते हैं:
1) लैग्रेंज बहुपद की गणना का समय बढ़ती संख्या के साथ तेजी से बढ़ता है।
2) अकीमा तख़्ता क्यूबिक से तेज़ काम करता है।
3) बेज़ियर कर्व का निर्माण खारेपन की तुलना में धीमा है।

विधि चयन

पहले सोचें: क्या आपको अंकों के बीच एक वक्र खींचने की भी आवश्यकता है? यदि कुछ बिंदु हैं, तो क्या तालिका का उपयोग करना बेहतर हो सकता है? यदि आप ग्रुपिंग रेंज (उदाहरण के लिए, दीर्घकालिक डेटा पर महीनों के लिए औसत तापमान) पर आंकड़ों के साथ काम कर रहे हैं, तो हिस्टोग्राम का उपयोग करना बेहतर है।

यदि आपको ज्ञात बिंदुओं के माध्यम से एक वक्र खींचने की आवश्यकता है, तो मैं अकीमा तख़्ता का उपयोग करने की सलाह दूंगा। यदि अंक स्वयं एक बड़ी भूमिका नहीं निभाते हैं, तो मैं बेज़ियर वक्र के ग्राफ का अनुमान लगाऊंगा।

एंटीलायज़िंग़

जीडी लाइब्रेरी में एक वक्र बनाना सेगमेंट में किया जा सकता है। ऐसा करने के लिए, वक्र को एक निश्चित चरण (कम से कम 1 पिक्सेल) के साथ अनुभागों में विभाजित किया जाता है और अनुभाग की शुरुआत और अंत के बीच हम इमेजिन फ़ंक्शन के साथ एक खंड खींचते हैं। हालांकि, PHP का यह सेगमेंट एंटी-अलियासिंग के बिना रेंडर करेगा। स्क्रीन स्मूथिंग के साथ एक सेगमेंट खींचने के लिए एल्गोरिदम सहायता के लिए आता है - वू एल्गोरिदम। वू एल्गोरिदम केवल so 45 ° के कोण पर सेगमेंट खींच सकता है, इसलिए अन्य मामलों में इसे "घुमाया" जाना चाहिए। आंकड़ा एंटी-अलियासिंग के बिना फ़ंक्शन पाप (x) का एक ग्राफ दिखाता है, और एंटी-अलियासिंग के साथ नीचे कुछ भी नहीं है।

पुस्तकालय

प्रत्येक प्रक्षेप / सन्निकटन विधि के लिए, मैंने एक अलग वर्ग लिखा: लैग्रेंजपॉलिनोमियल, क्यूबिकस्पलाइन, अकिमास्पेलिन, बेजियर कर्व। प्रत्येक वर्ग के 3 सार्वजनिक तरीके हैं:
setCoords (& निर्देशांक, चरण, [x_min, [x_max]]) - प्रारंभिक निर्देशांक और वक्र निर्माण के मापदंडों को सेट करता है, एक त्रुटि के मामले में गलत है
प्रक्रिया () - वक्र बनाने के लिए निर्देशांक की एक सरणी देता है
getError () - एक त्रुटि संदेश देता है
निर्देशांक एक सरणी सरणी (X1 => y1, x2 => y2 ... xn => yn) के रूप में स्थानांतरित किए जाते हैं

प्लॉट करने के लिए, सहायक वर्ग प्लॉट लागू किया जाता है। इसकी क्षमताएं बहुत मामूली हैं (उदाहरण के लिए, कोई स्केलिंग नहीं है - ग्राफ 1: 1 प्लॉट किया गया है), इसलिए इसके बजाय आप किसी अन्य वर्ग या मूल PHP फ़ंक्शन का उपयोग कर सकते हैं। विधि:
कंस्ट्रक्टर निर्देशांक की एक सरणी प्राप्त करता है।
drawLine (छवि, रंग, [x0, [y0]]) - एक टूटी हुई रेखा खींचता है, छवि संसाधन पहचानकर्ता है, रंग को imagecolorallocate पर सेट किया जाना चाहिए, x0 और y0 मूल ऑफसेट (छवि के निचले बाएं कोने में डिफ़ॉल्ट रूप से) है
drawAALine (छवि, रंग, [x0, [y0]]) - antialiasing खंडों के साथ एक टूटी हुई रेखा खींचता है, पैरामीटर drawLine के समान हैं
ड्राडॉट्स (छवि, रंग, [x0, [y0, [आकार]]]) - खंडों को जोड़ने के बिना अंक खींचता है, पैरामीटर ड्रालाइन के समान हैं, आकार बिंदुओं का व्यास है
ड्राअक्सिस (छवि, रंग, [x0, [y0, [1sq]]]] - अक्ष खींचता है, पैरामीटर ड्रालाइन के समान होते हैं, यदि 1sq = true (डिफ़ॉल्ट), तो अक्ष केवल प्रथम चतुर्थांश के लिए खींचे जाते हैं - सकारात्मक दिशा में

उदाहरण (फ़ंक्शन पाप (x)):

<? php
// सुविधा के लिए, हम पहले से आकार निर्धारित करते हैं
परिभाषित ( 'GRAPH_WIDTH' , 490 ) ;
परिभाषित ( 'GRAPH_HEIGHT' , 150 ) ;

// सामान्य सार वर्ग SmoothCurve
शामिल करें_ऑनसे ( 'स्मूथचुरवे.क्लास.फैप' ) ;

// क्यूबिक स्पलाइन क्लास
शामिल हैं_ऑनस ( 'क्यूबिकस्पलाइन.क्लास.फ्प' ) ;

// आप भी उपयोग कर सकते हैं
// शामिल हैं_सांस ('अकीमास्पलाइन.क्लास.फ्प');
// शामिल_ओनस ('बेजिएरक्वे.क्लास.फ्प');

// चार्टिंग के लिए हेल्पर क्लास
// इसके बजाय, आप अपने स्वयं के या देशी PHP कार्यों का उपयोग कर सकते हैं
शामिल_नहीं ( 'प्लॉट.क्लास . एफपी' ) ;

// सरणी में निर्देशांक सेट करें (X1 => y1, x2 => y2 ... xn => yn)
$ TestCoords [ - 215 ] = - 24.2705098312 ;
$ testCurds [ - 180 ] = 28.5316954889 ;
$ TestCoords [ - 145 ] = - 9.27050983125 ;
$ testCurds [ - 110 ] = - 17.6335575688 ;
$ testCurds [ - 75 ] = 30 ;
$ TestCoords [ - 40 ] = - 17.6335575688 ;
$ TestCoords [ - 5 ] = - 9.27050983125 ;
$ testCurds [ 30 ] = 28.5316954889 ;
$ टेस्टक्रेड्स [ 65 ] = - 24.2705098312 ;
$ testCurds [ 100 ] = 0 ;
$ testCurds [ 135 ] = 24.2705098312 ;
$ testCurds [ 170 ] = - 28.5316954889 ;
$ TestCoords [ 205 ] = 9.27050983125 ;
$ testCurds [ 240 ] = 17.6335575688 ;
$ टेस्टकार्ड्स [ 275 ] = - 30 ;

// एक ट्रिकोलर इमेज बनाएं (एंटी-अलियासिंग के लिए)
$ im = imagecreatetruecolor ( GRAPH_WIDTH , GRAPH_HEIGHT ) ;

// रंग सेट करें
$ bgColor = imagecolorallocate ( $ im , 224 , 223 , 223 ) ;
$ textColor = imagecolorallocate ( $ im , 0 , 0 , 0 ) ;
$ एक्सिसकलर = इमेजकोलरलॉकेट ( $ im , 64 , 64 , 64 ) ;
$ dotColor = imagecolorallocate ( $ im , 192 , 64 , 64 ) ;
$ ग्रेफेलर = इमेजकोलरलॉकेट ( $ im , 64 , 64 , 192 ) ;

// पृष्ठभूमि
imagefill ( $ im , 0 , 0 , $ bgColor ) ;

// एक चार्ट ऑब्जेक्ट बनाएं
$ testGraph = नया प्लॉट ( $ testCoords ) ;
// वैकल्पिक: ज्ञात बिंदुओं को ड्रा करें
// पासिंग GRAPH_WIDTH / 2 और GRAPH_HEIGHT / 2 हम छवि के केंद्र में मूल को स्थानांतरित करते हैं
$ testGraph -> drawDots ( $ im , $ dotColor , GRAPH_WIDTH / 2 , GRAPH_HEIGHT / 2 , 5 ) ;

// एक तख़्ता वस्तु बनाएँ
$ वक्र = नया क्यूबिकस्पेलिन ( ) ;
// पास इसे निर्देशांक देता है, चरण = 5 प्रदान करता है
$ वक्र -> सेटक्रेड्स ( $ टेस्टचर्ड्स , 5 ) ;
अगर ( $ वक्र -> getError ( ) )
{
// वक्र के निर्देशांक की गणना
$ वक्र = $ वक्र -> प्रक्रिया ( ) ;
अगर ( $ r )
{
// एक और चार्ट ऑब्जेक्ट
$ कर्टग्राफ = नया प्लॉट ( $ करकट ) ;
// कर्व ड्रा
$ क्यूरग्राफ -> ड्रालाइन ( $ im , $ ग्रेफेलर , GRAPH_WIDTH / 2 , GRAPH_HEIGHT / 2 ) ;
}
}

// उपयोगकर्ता को दें
हेडर ( "सामग्री-प्रकार: छवि / पीएनजी" ) ;
imagepng ( $ im ) ;
imagedestroy ( $ im ) ;
?>

लाइब्रेरी और डेमो संस्करण डाउनलोड करें

यह करें

• आप एक विधि में setCoords और प्रक्रिया () को जोड़ सकते हैं - उन्हें अलग करने में कोई फायदा नहीं है।
• त्रुटि से निपटने में सुधार करें।
• Antialiasing कभी-कभी बहुत अच्छी तरह से काम नहीं करता है - एक "सीढ़ी" एक छोटी पिच के साथ ऊर्ध्वाधर लाइनों पर दिखाई देती है।
• एक बेज़ियर वक्र के लिए एक X के लिए कई Y मान दें।
• प्लॉट ऑब्जेक्ट को पुन: प्रयोज्य बनाया जाना चाहिए - कंस्ट्रक्टर को निर्देशांक पास न करें, जैसा कि अभी है।
• कोड और प्रलेखन में टिप्पणियाँ जोड़ें

साहित्य

ईपी कुज़मिन, डी.वी. कंप्यूटर ग्राफिक्स के इवानोव एल्गोरिथ्म मूल बातें (व्याख्यान संख्या 4)
प्रक्षेप प्रक्षेप
मूल लेख Akims द्वारा
क्यूबिक और स्पाइन की तुलना अकीमा
बेज़ियर कर्व्स मेड सिंपल

विकिपीडिया:
विचित्र बहुपद ।
घनचक्र
बेजियर घटता है