एचटीएमएल 5 कैनवस ट्री जनरेशन

हेलो हब्र!
आज मैं जावास्क्रिप्ट का उपयोग करके एचटीएमएल 5 कैनवस पर पेड़ पैदा करने के बारे में बात करना चाहता हूं। मैं तुरंत समझाता हूं कि यह संदर्भ पेड़ों या बी-पेड़ों के बारे में नहीं है, बल्कि उन पेड़ों के बारे में है जो हम हर दिन खिड़की से बाहर देखते हैं, जो हमारे वायु क्लीनर और ऑक्सीजन के साथ समृद्ध होते हैं, जो शरद ऋतु में पीले हो जाते हैं और सर्दियों में पत्तियों को खो देते हैं। , उन बहुत ही जीवित, वन, असली पेड़ों के बारे में सामान्य तौर पर, केवल कैनवस पर चित्रित और हम बात करेंगे।


ऐसे पेड़ निकलते हैं

मुझे अपने खेल के लिए ट्री जनरेशन की जरूरत थी। लेकिन मुझे कुछ पर्याप्त एल्गोरिदम नहीं मिले। इसलिए मैंने अपना जनरेटर लिखा ...


मैं कुछ भी पढ़ना नहीं चाहता, मैं तुरंत परिणाम चाहता हूं!

और इसलिए कालिख के नीचे क्या है?

सब कुछ कुख्यात बेजियर घटता काम करता है, उनके लिए धन्यवाद, ट्रंक और शाखाएं गोल होती हैं और जीवित लगती हैं। मैंने कई तरीकों की कोशिश की, सबसे अधिक उत्पादक और सबसे आसान था घटता का उपयोग। वे निर्माण करना आसान है, उनसे सही दिशा प्राप्त करना आसान है, और आप उनके प्रक्षेपवक्र प्रोग्राम की गणना भी कर सकते हैं।

जनरेटर की संरचना इस प्रकार है:



TreeGenerator वर्ग (जेनरेटर आरेख में) शाखाओं और ट्रंक को उत्पन्न करने के लिए शाखा ऑब्जेक्ट का उपयोग करता है, और पत्तियों को उत्पन्न करने के लिए, TreeGenerator दराज से विधि को कॉल करता है। शाखा एक अमूर्तता है जो प्रत्येक शाखा को एक वस्तु के रूप में उजागर करती है। यह भी प्रतिपादन के लिए दराज का उपयोग करता है।

चरण 1. एक शाखा उत्पन्न करें

ड्रॉअर क्लास कैनवास एपीआई और ब्रांच के बीच की परत है। यह वर्ग निर्दिष्ट मापदंडों के अनुसार पत्तियों और शाखाओं को खींचता है।
और यहाँ दराज से शाखाओं को खींचने का कार्य है:

//x  y -   , leng -  , w - , deform -  , rotate -  DrawStick = function(x, y, leng, w, deform, rotate) { // canvas   . this.c.save(); this.c.translate(x, y); this.c.rotate(rotate.degree()); // degree     // x  y  . x = 0; y = w / -2; //       this.c.beginPath(); //  x  y this.c.moveTo(x, y); //        xy    (  w/BRANCH_CONSTRICTION) this.c.bezierCurveTo(x, y, x + leng / 2, y + deform, x + leng, y + (w - (w / BRANCH_CONSTRICTION)) / 2); //     this.c.lineTo(x + leng, y + w / BRANCH_CONSTRICTION + (w - (w / BRANCH_CONSTRICTION)) / 2); //     this.c.bezierCurveTo(x + leng, y + w / BRANCH_CONSTRICTION + (w - (w / BRANCH_CONSTRICTION)) / 2, x + leng / 2, y + w + deform, x, y + w); //   this.c.lineTo(x, y); this.c.closePath(); // ,     this.c.arc(x + leng, y + w / BRANCH_CONSTRICTION / 2 + (w - (w / BRANCH_CONSTRICTION)) / 2, w / BRANCH_CONSTRICTION / 2, 0 * Math.PI, 2 * Math.PI, false); //  this.c.fillStyle = BRANCH_COLOR; this.c.fill(); // canvas this.c.restore(); } 

कोड से, आप शायद यह नहीं समझ पाए कि शाखा के शीर्ष बिंदु कैसे सेट किए जाते हैं। जैसा कि आप जानते हैं, शुरुआत में पेड़ की शाखा शुरुआत से थोड़ी संकीर्ण होती है। जहाँ तक, यह BRANCH_CONSTRICTION स्थिरांक द्वारा निर्धारित है। डिफ़ॉल्ट रूप से, यह 1.5 है। BRANCH_COLOR - रंग सेट करता है। मान को रंगों की एक सरणी से यादृच्छिक रूप से चुना जाता है।

इस फ़ंक्शन का परिणाम कुछ इस शाखा की तरह होगा:



सच कहूं, तो जब तक यह बहुत कुछ वैसा ही है जैसा हमें चाहिए। इसलिए, आगे बढ़ते हैं!

चरण 2. शाखाओं से एक पेड़ पैदा करना

यदि आपने कभी छोटे, केवल बीज-अंकुरित पेड़ों को करीब से देखा, तो आप देख सकते हैं कि वे पत्तियों के साथ एक एकल शाखा हैं, फिर अन्य इस शाखा से अंकुरित होते हैं, और यह भी बढ़ता है और फैलता है। मैं क्यों हूँ? और तथ्य यह है कि ट्रंक अनिवार्य रूप से एक बड़ी शाखा है जिसमें से अन्य शाखाएं बढ़ती हैं, और इन शाखाओं से अभी भी पलकें हैं, और इसलिए ...

इसके आधार पर, हमारे लिए प्रत्येक शाखा को एक वस्तु के रूप में प्रस्तुत करना अधिक सुविधाजनक होगा जो मापदंडों और विधियों और प्रक्रियाओं और शाखाओं के बारे में जानकारी संग्रहीत करेगा। इसके लिए, जैसा कि मैंने कहा, शाखा वर्ग:

 var Branch = function(x, y, leng, width, deformation, rotate) { this.params = { x: x, y: y, leng: leng, width: width, deformation: deformation, rotate: rotate, }; this.parent = null; // ,  ,     this.children = []; // ,   . //   canvas   this.render = function() { drawer.DrawStick(this.params.x, this.params.y, this.params.leng, this.params.width, this.params.deformation, this.params.rotate); } //       this.getEndPoints = function() { var ex = this.params.x + this.params.leng * Math.cos(this.params.rotate.degree()), ey = this.params.y + this.params.leng * Math.sin(this.params.rotate.degree()); return [ex, ey]; } // ,     this.createChild = function(leng, width, deform, rotate) { var exy = this.getEndPoints(); //  //          children this.children.push(new Branch(exy[0], exy[1], leng, width, deform, rotate)); //     this.children[this.children.length - 1].parent = this; return this.children[this.children.length - 1]; } this.render(); //    } 

आइए एक नई कक्षा का प्रयास करें। हम कहते हैं:

 new Branch(100,300,200,20,-60,-50).createChild(100,20/1.5,30,-60); 

परिणाम इस प्रकार होगा:


ठीक है, दूर से एक शाखा जैसा दिखता है, है ना? हालांकि, पेड़ों की शाखा और हर समय सूर्य की ओर खिंचाव। बनाने के लिए, हमें एक तरह के ऐड-इन बनाने की जरूरत है, क्रिएट डिडिवेंशन फंक्शन। प्रकृति में, ज्यादातर अक्सर 2 प्रक्रियाओं में शाखा विभाजन होते हैं, जिनमें से एक मुख्य है, इसलिए यह मोटा है, और दूसरा पतला है। कुछ परीक्षणों और चयनों के परिणामस्वरूप, मुझे एहसास हुआ कि सबसे अच्छा अनुपात 1.9: 1.4 है। आप अपने पेड़ों के लिए एक अलग दृष्टिकोण का उपयोग कर सकते हैं।
और यहाँ createDivarication फ़ंक्शन कोड है:

 // branches -  c   [{leng:,deform:,rotate:},{}] main -    createDivarication = function(branches, main) { //   var wi = this.params.width / BRANCH_CONSTRICTION / 2; for (var i = 0; i < 2; i++) { bi = branches[i]; //     branches         this.createChild(bi.leng, (i == main) ? (1.9 * wi) : wi * 1.4, bi.deform, this.params.rotate - bi.rotate //     ); } return this.children; } 

यहाँ हमें क्या मिला है:



ठीक है, हाथ से खींचना संभव है, लेकिन हमें यादृच्छिक पेड़ों की आवश्यकता है। यह बिल्कुल वैसा ही है जैसा ट्रीजेनरेटर क्लास के लिए है। तो वह खुद:

 var TreeGenerator = function(){ //    - branch this.genF=function(branch) { if (branch.params.width > 1) { //      var divarications = [], //    dfm = BRANCH_DEFORMATION * branch.params.width / branch.params.leng; //      //    for (var di = 0; di <= 2; di++) { divarications.push({ leng: rand(40, branch.params.leng), //       deform: rand(-dfm, dfm), //      rotate: (di == 0) ? (rand(-20, -10)) : (rand(10, 20)) //     }); } //    var chld = branch.createDivarication(divarications, Math.floor(rand(0, 2))); //     for (var ci = 0; ci < 2; ci++) { this.genF(chld[ci]); } } else { //   ,        } } //  ,    this.genT=function(x,y){ //         var mainTreeBranch = new Branch(x, y, rand(70, BRANCH_MAXLENGTH), rand(10, BRANCH_MAXWIDTH), rand(-40, 40), rand(-120, -70)); //    this.genF(mainTreeBranch); // ()   drawer.DrawHill(x,y+20); return mainTreeBranch; } } 

कोड पढ़ते समय, आपने संभवतः नए BRANCH_DEFORMATION स्थिरांक - शाखाओं की विकृति (वक्रता) (ट्रंक नहीं) को देखा, BRANCH_MAXLENGTH - ट्रंक की अधिकतम लंबाई और BRCHCH_MAXWIDTH - ट्रंक की चौड़ाई। शाखाओं की विकृति में, चौड़ाई के सापेक्ष उनकी मोटाई भी एक भूमिका निभाती है, शाखा को पतला करता है, परिणामस्वरूप विचलन कम होता है, क्योंकि यह शुरू में पिक्सल में सेट होता है। लंबाई के लिए, शाखा उस से अधिक लंबी नहीं हो सकती है जहां से वह बड़ा हुआ है। मैंने ड्राहिल फ़ंक्शन का कोड नहीं दिखाया क्योंकि इसमें केवल छह लाइनें हैं, और बिंदु x और y पर अर्धवृत्त खींचती है।

ठीक है, तो यह जनरेटर का प्रयास करने का समय है। आवश्यक मापदंडों के साथ जीन फ़ंक्शन को कॉल करके, हमें कुछ इस तरह मिलता है:



सहमत हूँ, पेड़ बढ़ रहा है! कोई भी इसे समाप्त कर सकता है और पेड़ों के अंधेरे सिल्हूट का आनंद ले सकता है, सभी अधिक अगर हम मानते हैं कि अब सर्दी और खिड़की के बाहर, पेड़ बेहतर नहीं हैं, और कभी-कभी बहुत बुरा होता है, हालांकि, मैं नहीं रुकूंगा और पेड़ों को और अधिक बनाने के लिए जनरेटर में सुधार जारी रखा। अधिक जीवंत और दिलचस्प। यदि आप मेरे साथ हैं, तो हमें अगले बिंदु पर जाना चाहिए।

चरण 3. शाखाओं से शूटिंग की पीढ़ी

जब पेड़ पत्ते के बिना खड़े होते हैं, तो आप देख सकते हैं कि वे न केवल लैकोनिक, मोटी शाखाओं से मिलकर, बल्कि उन शाखाओं के शीर्ष से भी बढ़ रहे हैं, लेकिन उन छोटी और बहुत शाखाओं से नहीं जो मनमानी स्थानों में मुख्य शाखाओं से बढ़ती हैं। वे ऐसा इसलिए करते हैं ताकि पेड़ में अधिक पत्ते हों, क्योंकि पत्ते हमारे ग्रह के लिए बहुत महत्वपूर्ण काम करते हैं - यह नमी को वाष्पित करता है और कार्बन डाइऑक्साइड को ऑक्सीजन में परिवर्तित करता है। इस पोस्ट में इन शाखाओं को स्प्राउट्स कहा जाएगा। वास्तव में, वे भी शाखाएं हैं, जैसा कि मैंने कहा, मनमाने स्थानों से बढ़ता है, न कि केवल ऊपर से। और हमारे बेजियर घटता पर शाखाएं! कैसे गणना करें कि शूट कहाँ स्थित होगा? बेज़ियर वक्र सूत्र स्वयं हमारी सहायता करेगा:


Js पर, यह इस तरह होगा:

 //    Branch. pointPos       getPointOnCurve = function(pointPos) { //       var ex = this.params.x + this.params.leng / 2 * Math.cos((this.params.rotate + this.params.deformation).degree()), ey = this.params.y + this.params.leng / 2 * Math.sin((this.params.rotate + this.params.deformation).degree()); //t -  t   [0,1] t = pointPos / 100; //    ep = this.getEndPoints(); //    x,y x = [this.params.x, ep[0]]; y = [this.params.y, ep[1]];   x,y p1 = [ex, ey]; //  par1 = Math.pow((1 - t), 2) * x[0] + (1 - t) * 2 * t * p1[0] + Math.pow(t, 2) * x[1]; // x par2 = Math.pow((1 - t), 2) * y[0] + (1 - t) * 2 * t * p1[1] + Math.pow(t, 2) * y[1]; // y return [par1, par2]; } 

वक्र शाखा के केंद्र में चलेगा। नेत्रहीन, यह इस तरह होगा:



और अब शूटिंग को उत्पन्न करने का समय है: शाखा में एक नया फ़ंक्शन बनाएं

 //branches -      this.createOutgrowth = function(leng, width, pos, deform, rotate) { var startXY = this.getPointOnCurve(pos); //  outgrowths( )      this.outgrowths.push(new Branch(startXY[0], startXY[1], leng, width, deform, this.params.rotate + rotate)); return this.outgrowths.reverse()[0]; } 

हम जनरेटर का विस्तार भी करते हैं:

 this.genO = function(branch) { if (branch.params.width > 1) { //   1 var outgrowthsCount = rand(0, BRANCH_OUTGROWTH); //  BRANCH_OUTGROWTH - .   for (var io = 0; io < outgrowthsCount; io++) { //        this.genF(branch.createOutgrowth(rand(10, branch.params.leng), rand(1, branch.params.width), rand(1, 100), rand(-10, 10), rand(-40, 40))); } } } 

और इसके स्थान पर जीन फंक्शन का विस्तार करें:

 //     for (var ci = 0; ci < 2; ci++) { this.genF(chld[ci]); } 

इस पर:

 //        for (var ci = 0; ci < 2; ci++) { if (OUTGROWTH_ISSHOWN) { //OUTGROWTH_ISSHOWN   ,   true if (chld[ci].params.width < OUTGROWTH_BRANCH_WIDTH) { //OUTGROWTH_BRANCH_WIDTH -       this.genO(chld[ci]); //   } } this.genF(chld[ci]); } 

चलो इसे आज़माएं? यहाँ एक पेड़ है:



यह बहुत सुंदर नहीं दिखता है, पर्याप्त पत्ते नहीं हैं। अगला कदम उनके बारे में है।

स्टेप 4. लीफ जनरेशन

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

 [[ [100, 0], // (  -  ) [70, 40] //   ]], 

ड्राअर से ड्रा फंक्शन पर भी विचार करें:

 this.DrawLeaf = function(x, y, leafPoints, colors, scale, rotate) { //  x  y lx = x; ly = y; //    for (var io = 0; io < 2; io++) { this.c.save(); //  this.c.translate(x, y); // this.c.rotate((rotate).degree()); //  this.c.scale(scale, scale); //    if (io == 1) { //    this.c.setTransform(-1, 0, 0, 1, x, y); this.c.scale(scale, scale); this.c.rotate((-180 - (rotate)).degree()); } x = 100 / -2; y = 0; this.c.beginPath(); this.c.moveTo(x, y); var lastPair = [0, 0]; //  -    for (var bi in leafPoints) { var bp = leafPoints[bi]; //   this.c.bezierCurveTo(x + lastPair[0], y + lastPair[1], x + bp[1][0], y + bp[1][1], x + bp[0][0], y + bp[0][1]); //      lastPair = [bp[0][0], bp[0][1]]; } //    this.c.lineTo(x + LEAF_LENG, y); // LEAF_LENG -  .   100 this.c.closePath(); this.c.fillStyle = colors[1]; //  this.c.fill(); this.c.strokeStyle = colors[0]; //   this.c.stroke(); this.c.restore(); x = lx; y = ly; } } 

और अब इसे जनरेटर से संलग्न करने का समय है। चलो एक जीनल फ़ंक्शन लिखते हैं

 this.genL = function(branch) { leafCount = branch.params.leng / (LEAF_LENG * LEAF_SCALE) * LEAF_DENSITY; //   : LEAF_SCALE - , LEAF_DENSITY -   for (var li = 1; li < leafCount; li++) { // var lxy=branch.getPointOnCurve(branch.params.leng/leafCount*li); //    //  drawer.DrawLeaf(lxy[0], lxy[1], LeafMaps[LEAF_TYPE], ['#353', 'green'], LEAF_SCALE, branch.params.rotate - 180 ); } } 

हम इस फ़ंक्शन को जेनएफएल पर फास्ट करते हैं, टिप्पणी की जगह "अतिरिक्त कोड होगा, जिसे अगले चरणों में चर्चा की जाएगी" जीनएल के लिए कॉल के साथ - इस तरह:

 if(LEAF_ISSHOWN){ //LEAF_ISSHOWN - ,   .   true this.genL(branch); } 

खैर, वह पेड़ बड़ा हो गया है!



और आपके ध्यान के लिए धन्यवाद, सभी कोड GitHub पर है ,
मेरे मजदूरों का परिणाम, आप इसे यहां महसूस कर सकते हैं