🙅🏼 🔲 👦🏾 JSXGraph - परिचय 🛅 🥌 👇🏻

यह आलेख JSXGraph, एक वेब ब्राउज़र में ज्यामितीय चित्र प्रदर्शित करने के लिए एक जावास्क्रिप्ट पुस्तकालय के बारे में है।

इंटरएक्टिव ज्यामितीय वातावरण

ज्यामिति पढ़ाने के दौरान हल किए जाने वाले कार्यों में से एक, दृश्यता सुनिश्चित करने के लिए है, विशेष रूप से, ज्यामितीय चित्र की दृश्यता। ज्यामितीय चित्रण की दृश्यता सुनिश्चित करने के दो आधुनिक तरीके हैं गतिशीलता और अन्तरक्रियाशीलता:

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

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

पहली इंटरएक्टिव ज्यामितीय वातावरण ज्योमेट्रिक सपोसर कार्यक्रम था, जो पिछली सदी के अस्सी के दशक के शुरुआती वर्षों में Apple II कंप्यूटरों के लिए जूड एल। श्वार्ट्ज के नेतृत्व में मैसाचुसेट्स इंस्टीट्यूट ऑफ टेक्नोलॉजी की एक टीम द्वारा विकसित किया गया था। इस कार्यक्रम का विकास इजरायल में विंडोज के लिए जारी है, लेकिन इसके बारे में बहुत कम जानकारी है।

इस तरह का दूसरा कार्यक्रम कैबरी था, जिसे 1986 में विकसित किया गया था। यह अभी भी सक्रिय रूप से विकसित हो रहा है और सबसे आम में से एक है।

तीसरा इंटरेक्टिव जियोमेट्रिक माहौल द जियोमेटर्स स्केचपैड था, जिसे 1991 में निक जैकी द्वारा विकसित किया गया था। यह सक्रिय रूप से भी विकसित हो रहा है और संयुक्त राज्य अमेरिका में सबसे लोकप्रिय है।

मैं सभी ज्यामितीय मीडिया के बारे में बात नहीं करूंगा - उनमें से कई हैं, उनमें से कई बहुत आम नहीं हैं, और मैं उन सभी के बारे में नहीं जानता हूं। मैं जिक्र भी करूंगा , GEONExT , Cinderella , TracenPoche । क्यों ठीक है, यह बाद में स्पष्ट हो जाएगा। खैर, देशभक्ति के कारणों के लिए मैं एक और 1C का उल्लेख करूंगा : गणितीय निर्माता । इसकी विशेषताओं के अनुसार, यह दूसरों की तुलना में बदतर नहीं है। सच है, मेरी राय में, और बेहतर नहीं है। एक ही वर्ग।

जोगेब्रा का विकास 2001 में मार्कस होहेनवार्टर द्वारा साल्ज़बर्ग विश्वविद्यालय में शुरू किया गया था और अब लिनज़ में जोहान्स केपलर विश्वविद्यालय में माइकल बोरचर्ड्स जारी है।

GEONExT को GEONET कार्यक्रम (http://did.mat.uni-bayreuth.de/geonet/index.html) के आधार पर अल्फ्रेड वस्सर्मन द्वारा विकसित किया गया था, जिसका एक प्रोटोटाइप 1997 में बनाया गया था।

सिंड्रेला कार्यक्रम को 1998 में उलरिच कोर्टेंकैंप और जुरगेन रिक्टर-गेबर्ट ने लिखा था।

TracenPoche जीन-फिलिप वेनरोएन और इमैनुएल ओस्टेन द्वारा लिखा गया था, किस वर्ष में, यह स्थापित करना संभव नहीं था।

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

JSXGraph

JSXGraph एक वेब ब्राउज़र में ज्यामितीय चित्र प्रदर्शित करने के लिए जावास्क्रिप्ट लाइब्रेरी है। यह एक पेज पर ज्योमेट्री ड्राइंग फाइल आयात करने वाली लिपियों में प्रयुक्त एपीआई प्रदान करता है। JSXGraph, GEONExT की तरह, बायरट विश्वविद्यालय में विकसित किया गया था। दरअसल, JSXGraph अभी मुख्य रूप से GEONExT में बनाई गई ड्राइंग को प्रदर्शित करने के लिए है। इसलिए, यह फोटोमैट लगभग पूरी तरह से समर्थित है। इसके अलावा, प्रारूप जप, सिंड्रेला, ट्रेकेन पोचे (यही कारण है कि मैंने पिछले अनुभाग में इन कार्यक्रमों का उल्लेख किया है) और इंटरगेओ समर्थित हैं। इंटरगेओ एक पैन-यूरोपीय परियोजना है जिसका लक्ष्य ज्यामितीय ड्राइंग फ़ाइल के लिए एक सार्वभौमिक प्रारूप विकसित करना है। इस प्रकार, यह पता चला है कि यह पुस्तकालय शब्द के हर अर्थ में समान रूप से सर्व-प्लेटफ़ॉर्म है।

उसी एपीआई का उपयोग खरोंच से चित्र बनाने या लोड किए गए तैयार किए गए चित्र को संशोधित करने के लिए किया जा सकता है, अर्थात्, एक पूर्ण ऑनलाइन इंटरैक्टिव ज्यामितीय वातावरण बनाने के लिए।

प्रारंभ

तो, एक वेब पेज में एक इंटरैक्टिव ज्यामितीय ड्राइंग को शामिल करने के लिए क्या करने की आवश्यकता है? तीन कार्यों की आवश्यकता है:

JSXGraph फ़ाइलों को शामिल करें। ये jsxgraph.css और jsxgraphcore.js फाइलें हैं। हम इसे हमेशा की तरह करते हैं:
```
<link rel="stylesheet" type="text/css" href="domain/jsxgraph.css"/> <script type="text/javascript" src="domain/jsxgraphcore.js"></script> 
```
domain JSXGraph फ़ाइलों का स्थान है। यह एक स्थानीय निर्देशिका या jsxgraph.uni-bayreuth.de/distrib हो सकती है
ड्राइंग वाला एक HTML तत्व बनाएं:
```
 <div id="elementID"></div>, 
```
जहां elementID तत्व का elementClass है, elementClass तत्व का वर्ग है। स्वाभाविक रूप से, तत्व की शैली को किसी भी ज्ञात तरीके से सेट किया जा सकता है।
"ड्राइंग बोर्ड" की शुरुआत करें:
```
 var brd = JXG.JSXGraph.initBoard('elementClass',{attributes}), 
```
जहां elementClass तत्व का वर्ग है, attributes "बोर्ड" की attributes हैं जो इसके गुणों को निर्धारित करती हैं: आयाम, अनुपात का संरक्षण, अक्षों की दृश्यता, ग्रिड, नेविगेशन बटन और अधिकारों की अधिसूचना।

ज्यामितीय वस्तुओं का निर्माण

दो मुख्य आदेश हैं:

आइटम निर्माण आदेश
```
 var el = brd.create('type',[parents],{attributes}); 
```
वस्तु का type कहां है (बिंदु, रेखा और इसी तरह),
[parents] - मूल तत्वों की एक सरणी (उदाहरण के लिए, एक पंक्ति के लिए दो बिंदु),
attributes - विशेषताएँ (हम बाद में उन पर विचार करेंगे)।
आइटम गुण सेट करने के लिए आदेश
```
 el.setProperty({key1:value1,key2:value2,...}); 
```
जहाँ keyN nth प्रॉपर्टी का नाम है, valueN nth प्रॉपर्टी का मूल्य है।

बिंदु

सबसे सरल बिंदु निर्माण आदेश इस तरह दिखता है:

 var el = brd.create('point',[x, y]);

नाम का name विशेषता (उदाहरण के लिए, {name:'A'} ) का उपयोग करके निर्दिष्ट किया गया है।

अंक मुक्त हो सकते हैं (उन्हें माउस के साथ स्थानांतरित किया जा सकता है), फिक्स्ड (उन्हें माउस के साथ नहीं ले जाया जा सकता है) और आश्रित (उनका आंदोलन किसी अन्य ऑब्जेक्ट के आंदोलन पर निर्भर करता है, लेकिन माउस के साथ उन्हें स्थानांतरित करना भी असंभव है)।

डिफ़ॉल्ट रूप से, एक नि: शुल्क बिंदु बनाया जाता है:

 var p0 = board.create('point',[-1, 1], {name:'A'});

यदि fixed विशेषता सही पर सेट true , तो एक निश्चित बिंदु बनाया जाएगा:

 var pl = board.create('point',[1, -1], {name:'B', fixed:true});

यदि आप बिना पैरामीटर के एक फ़ंक्शन सेट करते हैं, जो बिंदु के निर्देशांक के कम से कम एक निर्देश के मूल्य के रूप में एक संख्या देता है, तो एक आश्रित बिंदु बनाया जाएगा:

 var p2 = board.create('point',[function(){return p0.X()}, -2], {name:''});

जेस्फ़ल्ड में यह कैसा दिखता है: jsfiddle.net/AndreyDolgov/fbha4/embedded/result%2Chtml%2Cjs ।
ड्राइंग में, बिंदु A मुक्त है, बिंदु B तय है, बिंदु C बिंदु A पर निर्भर है A

सीधे, किरण, खंड

एक लाइन को दो तरीकों से परिभाषित किया जा सकता है:

दो अंक
```
 board.create('line',[point1, point2]) 
```
बिंदुओं को वस्तुओं के नाम से या सीधे निर्देशांक द्वारा निर्दिष्ट किया जा सकता है (इस मामले में, बिंदु अदृश्य है)।
समीकरण ax+by+c=0 (कमांड में गुणांक के आदेश पर ध्यान दें)
```
  board.create('line',[c, a, b]) 
```

उदाहरण:

 var p1 = board.create('point',[0,0],{name:'A'}); var p2 = board.create('point',[3,2],{name:'B'}); var l1 = board.create('line',[p1,p2]); var l2 = board.create('line',[p1,[1,5]]);

JSFiddle में: fiddle.jshell.net/AndreyDolgov/tybTW/show/light ।

 var l3 = board.create('line',[-1.0,-2.0,1.0]);

JSFiddle में: fiddle.jshell.net/AndreyDolgov/2A8Xa/show/light ।

JSXGraph के दृष्टिकोण से बीम और रेखा समान सीधी रेखाएं हैं, लेकिन विभिन्न विशेषताओं के साथ straightFirst और straightLast । यदि इनमें से एक विशेषता false , तो हमें एक किरण मिलेगी, यदि दोनों - एक खंड।

एक उदाहरण:

 var p1 = board.create('point',[-2,-1],{name:'A'}); var p2 = board.create('point',[3,-2],{name:'B'}); var p3 = board.create('point',[-3,2],{name:'C'}); var l1 = board.create('line',[p1,p2],{straightFirst:false}); var l2 = board.create('line',[p1,p3],{straightLast:false}); var l3 = board.create('line',[p2,p3],{straightFirst:false,straightLast:false});

JSFiddle में: fiddle.jshell.net/AndreyDolgov/yKxku/show/light ।

वृत्त

एक सर्कल का निर्माण चार तरीकों से किया जा सकता है:

केंद्र में और सर्कल पर इंगित करें।
```
 board.create('circle',[centerPoint,pointOnCircle]); 
```
यदि दो तर्क हैं, तो उन्हें केंद्र और सर्कल पर बिंदु के रूप में व्याख्या की जाती है।
उदाहरण के लिए:
```
 var center = board.create('point',[3,3],{name:'O'}); var ptOnCir = board.create('point',[4,5],{name:'A'}); var  = board.create('circle',[center,ptOnCir]); 
```
JSFiddle में: fiddle.jshell.net/AndreyDolgov/A3JMq/show/light ।
हमेशा की तरह, एक बिंदु को एक चर नाम या सीधे निर्देशांक द्वारा निर्दिष्ट किया जा सकता है। यदि बिंदु सीधे निर्देशांक द्वारा निर्धारित किया जाता है, तो यह दिखाई नहीं देता है।
उदाहरण के लिए:
```
 var theCircle = board.create('circle',[[3,3],[4,5]]); 
```
JSFiddle में: fiddle.jshell.net/AndreyDolgov/9FgfW/show/light ।
केंद्र और त्रिज्या में।
```
 board.create('circle',[centerPoint,radiusOfCircle]); 
```
जब दूसरा तर्क एक संख्या है, तो इसे त्रिज्या के रूप में व्याख्या किया जाता है।
उदाहरण के लिए:
```
 var center = board.create('point',[3,3]);var theCircle = board.create('circle',[center,1]); 
```
JSFiddle में: fiddle.jshell.net/AndreyDolgov/VSRUx/show/light ।
एक ज्ञात त्रिज्या के साथ केंद्र और एक अन्य सर्कल में।
```
 board.create('circle',[centerPoint,circleWithDesiredRadius]); 
```
यदि दूसरा तर्क एक सर्कल है, तो इसका दायरा एक नया सर्कल बनाने के लिए उपयोग किया जाता है।
उदाहरण के लिए:
```
 var circle1 = board.create('circle',[[0,1],[0,2]]);var circle2 = board.create('circle',[[0,3],circle1]); 
```
JSFiddle में: fiddle.jshell.net/AndreyDolgov/aYezn/show/light ।
तीन बिंदुओं पर।
```
 board.create('circle',[point1,point2,point3]); 
```
यदि तीन तर्क हैं, तो उन्हें तीन बिंदुओं के रूप में व्याख्या की जाती है, जिसके माध्यम से सर्कल बनाया जाता है।
उदाहरण के लिए :
```
 var p1 = board.create('point',[2,1],{name:'p1',size:2}); var p2 = board.create('point',[2,5],{name:'p2',size:2}); var p3 = board.create('point',[4,3],{name:'p3',size:2}); var c = board.create('circle',[p1,p2,p3]); 
```
JSFiddle में: fiddle.jshell.net/AndreyDolgov/vRW3z/show/light

बहुभुज

बहुभुज को वर्टिस की एक सरणी द्वारा परिभाषित किया गया है।

 board.create('polygon',[ptVertex1,ptVertex2,...]);

इस मामले में, सरणी का पहला और अंतिम तत्व एक ही शीर्ष होना चाहिए। यदि ऐसा नहीं किया जाता है, तो पहले शीर्ष को स्वचालित रूप से पिछले एक के रूप में दोहराया जाता है।
एक उदाहरण:

 p1 = board.create('point',[0,0],{name:''}); p2 = board.create('point',[1,3],{name:''}); p3 = board.create('point',[5,5],{name:''}); p4 = board.create('point',[4,2],{name:''}); board.create('polygon',[p1,p2,p3,p4]);

JSFiddle में: jsfiddle.net/AndreyDolgov/Fp3VM/show/light ।

शंक्वाकार खंड

इसे दो तरीकों से सेट किया जा सकता है:

पाँच अंक

 board.create('conic',[point1,point2,point3,point4,point5]);

छह मैट्रिक्स तत्व

 board.create('conic',[a11,a22,a33,a21,a31,a32]);

उदाहरण:

 p1 = board.create('point',[0,0],{name:'p1'}); p2 = board.create('point',[1,1],{name:'p2'}); board.create('line',[p1,p2],{strokeWidth:1, color:'yellow'}); p3 = board.create('point',[2,3],{name:'p3'}); p4 = board.create('point',[3,4],{name:'p4'}); p5 = board.create('point',[4,1],{name:'p5'}); board.create('conic',[p1,p2,p3,p4,p5], {strokeWidth:4,strokeColor:'green'});

Get (JSFiddle): jsfiddle.net/AndreyDolgov/DdqvM/show/light

 board.create('conic',[9,4,-11,0,-9,-8]);

हमें मिलता है : jsfiddle.net/AndreyDolgov/4jTQY/show/light ।

वक्र

तीन प्रकार के वक्र होते हैं:

पैरामीट्रिक घटता है।
```
 board.create('curve',[x,y,a,b]); 
```
जहाँ x और y एक पैरामीटर के साथ फ़ंक्शंस होते हैं जो एक नंबर लौटाते हैं, a और b पैरामीटर मानों का अंतराल निर्दिष्ट करते हैं।
ध्रुवीय घटता है।
```
 board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]); 
```
जहाँ functionOfTheta एक फ़ंक्शन है जिसका तर्क कोण है और जो ध्रुव से दूरी लौटाता है;
[xOrigin,yOrigin] - ध्रुव निर्देशांक;
optBegValTheta और optEndValTheta कोण सीमा निर्दिष्ट करें।
टूटी हुई रेखा के रूप में डेटा का चित्रमय प्रतिनिधित्व।
```
 board.create('curve',[xArray,yArray]); 
```
जहाँ xArray और yArray , x का एक सरणी और खेल का एक सरणी हैं।

उदाहरण:

 board.create('curve', [function(t){return 3*Math.cos(t);}, function(t){ return 3*Math.sin(t);}, 0, Math.PI/2]);

जेस्फ़ल्ड में यह कैसा दिखेगा: jsfiddle.net/AndreyDolgov/9mcAs/show रोशनी।

 board.create('curve', [function(theta){return theta/17;}, [-2,-1], -8*Math.PI, 8*Math.PI]);

जेस्फ़ल्ड में यह कैसा दिखेगा: jsfiddle.net/AndreyDolgov/XKH6Q/show/light ।

 x = [-4,-3,-2,-1,0,1,2,3,5]; y = [-3,2,3,-1,0,2,1,4,0]; board.create('curve',[x,y]);

यह जेस्फ़ल्ड में कैसा दिखेगा: jsfiddle.net/AndreyDolgov/uKFFV/show-light ।

फंक्शन ग्राफ

 board.create('functiongraph',[functionRule,a,b]);

जहां functionRule एक तर्क का एक फ़ंक्शन है जो एक नंबर लौटाता है,
a और b उस अंतराल को निर्दिष्ट करते हैं जिस पर फ़ंक्शन परिभाषित होता है।
एक उदाहरण:

 board.create('functiongraph', [function(x){ return (x+1)%(x-1);},1,3]);

यह इस तरह दिखेगा: jsfiddle.net/AndreyDolgov/gkfqj/show/light ।

टेक्स्ट

 board.create('text',[x,y,stringText]);

जहां पहले दो तर्क पाठ क्षेत्र के निचले बाएं कोने की स्थिति को निर्दिष्ट करते हैं, स्ट्रिंग एक स्ट्रिंग या फ़ंक्शन है जो एक स्ट्रिंग लौटाता है।
एक उदाहरण:

 board.create('text',[-5, 2, "<span style='color:yellow;background-color:blue; font-size:50px;'><br>.</span>"]);

हमें मिलता है : jsfiddle.net/AndreyDolgov/YpQkL/show/light ।

खैर, हम जेएसएक्सग्राफ पुस्तकालय का उपयोग करके बनाए गए ज्यामितीय चित्र के सरल तत्वों से परिचित हुए। मुझे लगता है कि यह परिचय के लिए पर्याप्त है।
एग्जाम्पल सीरीज़ में अगला जेएसएक्सग्राफ है।

JSXGraph - परिचय

इंटरएक्टिव ज्यामितीय वातावरण

JSXGraph

प्रारंभ

ज्यामितीय वस्तुओं का निर्माण

बिंदु

सीधे, किरण, खंड

वृत्त

बहुभुज

शंक्वाकार खंड

वक्र

फंक्शन ग्राफ

टेक्स्ट

More articles: