🧠 🗞️ 🤴🏼 कैनवस पर यथार्थवादी धुआँ। 🧑🏽‍🤝‍🧑🏻 🐆 🐁

परिचय

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

तो पेज लेआउट:

<html> <head> <title>smoke</title> <meta charset="utf-8"/> </head> <body bgcolor = "#000"> <div id = "info" style = "color: #fff"></div> <canvas id = "canvas" width = "500px" height = "500px"></canvas> <script> ... </script> </body> </html>

इससे सब कुछ स्पष्ट है। एक कैनवास है, कणों की संख्या प्रदर्शित करने के लिए div, और एक काले रंग की पृष्ठभूमि के साथ एक शरीर - एक सफेद पृष्ठभूमि पर, प्रभाव इतना सुंदर नहीं है।

स्क्रिप्ट टुकड़ा द्वारा:

इसके साथ शुरू करने के लिए, हमें पृष्ठ पर आवश्यक तत्वों को खोजने की जरूरत है, और यादृच्छिक मूल्यों को प्राप्त करने के लिए एक सुविधाजनक फ़ंक्शन लिखें।

 info = document.getElementById('info'); canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); function random(min,max){ return Math.random() * (max - min) + min; }

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

संख्या
पारदर्शिता
त्रिज्या
कोण
x समन्वय करें
y समन्वय करें
स्वयं प्रतिपादन समारोह

इसके अलावा, इन गुणों में से प्रत्येक के लिए एक मूल्य है जो इस संपत्ति को बदलता है (टोटोलॉजी के लिए खेद है)।
प्रत्येक कण एक वस्तु से अधिक कुछ नहीं है, और प्रत्येक यह वस्तु कणों के सरणी का एक तत्व है।

 function addParticle(){ particles.push({ num: particles.length, // op: random(0,0.5), // dop: random(0.002,0.008), //   r: random(3,10), // dr: random(0.5,1.5), //   a: random(0,180), // da: random(-3,3), //   x: random(249,251), //- dx: random(-0.2,0.2), //    y: random(349,351), //- dy: random(0.5,1), //    draw: /*       */ }); }

उपरोक्त कोड के साथ, मुझे लगता है कि सब कुछ स्पष्ट है। अब मज़ेदार हिस्सा प्रदान कर रहा है।
प्रौद्योगिकी यह है: प्रत्येक कण स्वतंत्र रूप से अपने सभी नए मापदंडों (निर्देशांक, त्रिज्या, आदि) की गणना करता है। उसके बाद, कैनवास की पारदर्शिता बदल जाती है (ctx.globalAlpha = ...)। इसके अलावा, अनुकूलन के लिए, हम यह देखते हैं कि पिछले रेंडरिंग के बाद कितना समय बीत चुका है, और अगर यह समय फ्रेम समय से कम है, तो रेंडरिंग किया जाता है, अन्यथा, तदनुसार, केवल पैरामीटर गणना की जाती है ताकि कण एक बड़े भार के साथ स्थिर न रहें। यही है, यह इस तरह के एक स्व-लिखित फ्रेम स्किपिंग सिस्टम को चालू करता है। खैर, प्रतिपादन खुद, जिसमें कण (ctx.translate) के सही रोटेशन के लिए प्रारंभिक निर्देशांक बदलना शामिल है, सीधे एक्स और वाई निर्देशांक (ctx.rotate (रेडियन में कोण)) के चारों ओर कैनवास को घुमाते हुए, और प्रतिपादन (ctx.drawImage)। मैं इस तथ्य पर ध्यान आकर्षित करता हूं कि आप निर्देशांक के सापेक्ष चित्र को केंद्र में रखते हैं, आपको इसे "शून्य से आधे त्रिज्या" में खींचने की आवश्यकता है, और डिग्री को रेडियन (कोण * गणित.पु. / 180) में परिवर्तित करना भी मत भूलना।

 draw: function(timer){ this.op -= this.dop; //   if(this.op > 0){ //   0,       ,     ? this.r += this.dr; //  this.a -= this.da; //  ( !) this.x -= this.dx; // - this.y -= this.dy; // - ctx.globalAlpha = this.op; //   if(window.performance.now() - time < 28){ //    "",      ,      ctx.save(); //   ctx.translate(this.x,this.y); //   ctx.rotate(this.a*Math.PI/180); //  ctx.drawImage(img,-this.r/2,-this.r/2,this.r,this.r); //  ctx.restore(); //    } } }

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

 function draw(){ time = window.performance.now(); //   addParticle(); //  info.innerHTML = particles.length; //  div   canvas.width = canvas.width; //  for(var i = 0; i < particles.length; i++){ //   ,      if(particles[i].op <= 0 || particles[i].x < -100 || particles[i].x > 600 || particles[i].y < -100){ particles[i].op = 0; particles[i] = null; delete particles[i]; particles.splice(i,1); } particles[i].draw(); //    .       else,         ,      "" } setTimeout(draw, 30); //... }

यहाँ कोड की वर्तनी है और यह खत्म हो गया है। यह केवल चित्र को इनिशियलाइज़ करने और "कण पथ" फ़ंक्शन के लिए पहला कॉल करने के लिए रहता है। वैसे, यहाँ तस्वीर है:

और यहाँ कोड है:

 img = new Image(); img.src = 'smoke.png'; img.onload = draw();

लाइव लिंक - स्पष्टता के लिए, विभिन्न ब्राउज़रों में, मैंने स्पष्टता के लिए window.performance.now () को Date.now () में बदल दिया। अब बड़े उपकरणों पर काम करना चाहिए।
पीएस ईमानदारी से - मैंने केवल क्रोम में काम की जाँच की है, अगर यह काम नहीं करता है - लिखो।
स्रोत - F12
मुझे इस बात की पर्याप्त आलोचना का इंतजार है कि आपके लिए क्या अच्छा है और क्या फैसला करना बुरा है, लेकिन मुझे उम्मीद है कि हर पंक्ति स्पष्ट और सही है। फिर मिलते हैं!

कैनवस पर यथार्थवादी धुआँ।

परिचय

तो पेज लेआउट:

स्क्रिप्ट टुकड़ा द्वारा:

More articles: