कोड की कुछ * पंक्तियों में Actionscript3 / Flash पर एक जंगल कैसे विकसित करें

इस टिप्पणी में, मैंने दावा किया कि मैंने एक कार्यक्रम लिखा था जिसने कोड की दो सौ पंक्तियों में "सभ्य-दिखने वाला" जंगल बनाया था। दुर्भाग्य से, वास्तविकता आकार में थोड़ी बड़ी हो गई - खुदाई किए गए स्रोतों में कोड की लगभग 2100 लाइनें हैं, जिनमें से लगभग 700 टिप्पणियाँ, जोर से विचार, पुराने खारिज किए गए कोड और दस्तावेज़ विधियों के प्रयास हैं। SWF निष्पादन योग्य का आकार, हालांकि, 13112 बाइट्स निकला।

यह सब इस तथ्य के साथ शुरू हुआ कि कोंग्रेगेट डॉट कॉम मंच पर, जहां मैं उस समय सक्रिय रूप से लटका हुआ था, प्रतिभागियों में से एक ने कुछ की प्रक्रियात्मक पीढ़ी में प्रतिस्पर्धा करने का सुझाव दिया, पहला विषय "वन" था ।



स्वाभाविक रूप से, हर किसी का अपना विचार था कि जंगल क्या होना चाहिए जिससे वे बढ़ेंगे। उस समय मैंने हर तरह के जादू के बारे में किताबें पढ़ीं, नतीजतन, मैं एक जंगल उगाना चाहता था। जंगल में पेड़ होते हैं - हम वर्ग वृक्ष लिखते हैं {...}। एक पेड़ में शाखाएँ और पत्तियाँ होती हैं - हम वर्ग शाखा लिखते हैं {...} और हम सोचते हैं, क्या हमें वास्तव में पेड़ पर प्रत्येक पत्ती को ध्यान में रखना चाहिए? नतीजतन, "शाखा" ने "पत्तियों के साथ" पैरामीटर का अधिग्रहण किया, और पेड़ ने बनावट की एक जोड़ी, शाखाओं के लिए एक और एक ट्रंक, पत्तियों के लिए एक का अधिग्रहण किया। बनावट "पेड़ के नीचे" बनाने के लिए अपेक्षाकृत सरल था - वहाँ पेर्लिन शोर है, आप इसे खींच सकते हैं, इसे लपेट सकते हैं, इसे पेंट कर सकते हैं, इसे तैयार मान सकते हैं, लेकिन आपको पत्तियों के साथ टिंकर करना पड़ा।

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

private function generateBranch():void { branchBitmap = new BitmapData(512, 512, true, 0xff8080ff); //branchBitmap.perlinNoise(32, 256, 2, 100 + Math.round(Math.random() * 900), true, true, 7, true); var hm:BitmapData = new BitmapData(512, 512, false, 0); var seed:int = 1000 + Math.random() * 2000; hm.perlinNoise(24,192, 2, seed, true, true, BitmapDataChannel.BLUE, false); // blue only. Is a heightmap var i:int; var j:int; for (i = 0; i < 512; i++) { if (Math.abs(i - 256) > 100) r = 0; else r = 200 * Math.sqrt(1 - (i - 256) * (i - 256) / 10000);// square curve //r = 200 * Math.sin(Math.PI * (i - 128) / 256); // sine curve for (j = 0; j < 512; j++) hm.setPixel(i, j, Math.round(r*(500.0 + (hm.getPixel(i, j)-128))*0.002)); // now, r means position on the "log", and initial perlin noise is log's texture. // perlinNoise median 128, highest offset taking as 100, the result offset needs to be ~0.2 in multiplier } var v:Vector.<int> = new Vector.<int>(); var vv:Vector.<Number> = new Vector.<Number>(3); for (i = 1; i < 511; i++) { v.length = 0; v.push(hm.getPixel(0, i-1), hm.getPixel(1, i-1), hm.getPixel(2, i-1), hm.getPixel(0, i), hm.getPixel(1, i), hm.getPixel(2, i), hm.getPixel(0, i+i), hm.getPixel(1, i+1), hm.getPixel(2, i+1)); for (j = 1; j < 510; j++) { var g:int = -1 * v[0] - 2 * v[1] - 1 * v[2] + 1 * v[8] + 2 * v[7] + 1 * v[6]; // gradient by Y var r:int = -1 * v[0] - 2 * v[3] - 1 * v[6] + 1 * v[2] + 2 * v[5] + 1 * v[8]; // gradient by X //if ((i > 50) && (i < 55) && (j > 50) && (j < 55)) trace(g, r); var b:int = v[5]; r += 128; g += 128; var p:uint = r *0x10000 + g*0x100 + b; branchBitmap.setPixel(j, i, p); v.shift(); v.push(hm.getPixel(j + 2, i + 1)); v[2] = hm.getPixel(j + 2, i - 1); v[5] = hm.getPixel(j + 2, i); } } var bf:BlurFilter = new BlurFilter(2,8); // ___ // bevelFilter is not what I need, it bevels a rectangle and just that [___] // dropShadowFilter requires empty alpha I believe // convolution filter works best on self, while it can do what I need branchBitmap.applyFilter(branchBitmap, branchBitmap.rect, P0, bf); hm.copyPixels(branchBitmap, branchBitmap.rect, P0); //branchBitmap.perlinNoise(32, 256, 0, seed, true, true, 7, true); // naked grayscale // 0 octaves means 50% gray filling branchBitmap.fillRect(branchBitmap.rect, 0xff808080); // it looks like I'll have enough details just by perlin-noising the heightmap var inc:Number = Math.PI / 3; var azi:Number = -Math.PI * 1 / 4; var cx:Number = Math.cos(inc) * Math.cos(azi); var cy:Number = Math.cos(inc) * Math.sin(azi); var cz:Number = Math.sin(inc); azi = 1 - 2 * cz; inc = 1 / cz; // cos(lighting) to be normalized into (0..1) via cz for (i = 0; i < 512; i++) for (j = 0; j < 512; j++) { p = branchBitmap.getPixel(j, i); var h:uint = hm.getPixel(j, i); // give a vector here somewhere vv[0]= (h >> 16)-128; vv[1] = ((h >> 8) & 255)-128; vv[2] = 26; // balance constant, a normal is always pointing upwards, Basis.Normalize(vv); var m:Number = inc*(cx * vv[0] + cy * vv[1] + cz * vv[2]); // cos(lightangle) r = (p >> 16) & 255; g = (p >> 8) & 255; b = p & 255; r = Math.max(0,Math.min(255, r * m)); g = Math.max(0,Math.min(255, g * m)); b = Math.max(0,Math.min(255, b * m)); branchBitmap.setPixel(j, i, 0x10000 * r + 0x100 * g + b); } branchBitmap.applyFilter(branchBitmap, branchBitmap.rect, P0,bf); // should be here, without blurring it's liney hm = new BitmapData(192, 512, false); hm.copyPixels(branchBitmap, new Rectangle(160, 0, 192, 512), P0); branchBitmap = hm; } 

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

फिर सबसे मुश्किल हिस्सा यह है कि पेड़ कैसा दिखेगा? यहां मैंने लंबे समय तक सोचा और प्रयोग किया। मैंने पेड़ को वास्तव में बढ़ने का फैसला किया - शाखाएं लंबाई में फैलती हैं (वास्तव में अंत से बढ़ती हैं), कभी-कभी वे शाखाओं को किनारे तक फैलाते हैं, शाखाएं सूर्य तक (ऊपर) और कुछ और स्थितियां। यह एक भयानक हैश निकला, सबसे अच्छा विकल्प जिसे हम साझा करने में कामयाब रहे, वह इस तरह दिखाई दिया:


(विचित्र रूप से पर्याप्त है, diary.ru एक उत्कृष्ट फोटो होस्टिंग सेवा है, अब तक कुछ भी बुरा नहीं हुआ है!)

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

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

इस विकल्प ने उन पेड़ों को प्राप्त करना संभव बना दिया जो अपेक्षाकृत पारदर्शी थे जब उन्हें देखा गया था और गुंजाइश के मामले में अपेक्षाकृत कॉम्पैक्ट था, पहला काम करने वाला संस्करण इस तरह दिखता था:



इस संस्करण में, मैंने अभी भी पेड़ के विकास तंत्र को स्वयं डिबग किया, और पेड़ को सभी तरफ से देखा जा सकता था। एक पेड़ को एक बार में एक शाखा खींची गई थी, शाखाओं का सरणी पहले पर्यवेक्षक से दूरी के अनुसार हल किया गया था, क्योंकि 1996 से तीन आयामी ग्राफिक्स पर अच्छे पुराने वीएमएक्स कोर्स में, मैंने एचएसबी रेंज से कॉस्मेटिक उद्देश्यों के लिए प्रत्येक कॉल के लिए रंगों का चयन किया था "मुझे एक पेड़ बनाएं" ताकि जंगल नीरस न हो, पेड़ का कंकाल भी खींचने के लिए बेतरतीब ढंग से घुमाया जाता है। कुल मिलाकर, ड्राइंग के लिए छह से आठ ट्री मॉडल थे, प्रत्येक अपने स्वयं के आरएनजी प्रभाव के तहत बढ़ रहे थे, पृथ्वी के परिदृश्य ने एक और हॉज़र शोर स्थापित किया, और जिस स्थान पर पेड़ को बढ़ने के लिए यादृच्छिक रूप से चुना गया था, उस तरफ बढ़ने के लिए अनुमत बिंदुओं की एक श्रृंखला का उपयोग करके। दूरी पर्यवेक्षक। यदि पेड़ बिंदु A पर लगाया जाता है, और पेड़ R की त्रिज्या को "बढ़ते" के लिए चुना जाता है, तो मान (AR, A + R) वर्तमान दूरी पर वृद्धि के लिए निषिद्ध हो जाता है, जब अगले (-0.05) पर जा रहा है तो यह अंतराल घट गया 0.1, और हटा दिया गया था जब इसे शून्य तक घटा दिया गया था।

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

परिणाम इस तरह दिखता है:



आप यहां खेल सकते हैं । फ्लैश 10.1 के लिए अनुकूलित (अधिक सटीक, लिखित), सुरक्षा के संदर्भ में फ्लैश अपडेट का एक गुच्छा बहुत धीमी गति से हो सकता है - इस मामले में, मैं आपको एडोब फ्लैश प्लेयर 11.5 के डीबग संस्करण को डाउनलोड करने और इसे ऑफ़लाइन खोलने की सलाह देता हूं। पूरे ड्राइंग में 5-6 मिनट लगते हैं, स्क्रीन पर पहले दो के बाद कुछ हलचल होने लगती है, जिसे देखना दिलचस्प हो सकता है। ड्राइंग के बाद, आप विंडो के आकार की तुलना में चतुर्थ पीएनजी फ़ाइल के रूप में परिणाम को बचाने के लिए Ctrl + क्लिक दबा सकते हैं।