👩🏾‍🌾 🐳 🏴 Box2D, कैनवस, ट्विटर, और कैसे यह सब जुड़ा हुआ है की कहानी 👨🏼‍🎤 🙀 ⌛️

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

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

अध्याय 1. हम Box2DJS से कैसे मिले

तो, मुझे एक भौतिकी इंजन की आवश्यकता है। एक संक्षिप्त खोज के बाद, Box2D मेरे पंजे में गिर गया। इसका संस्करण भाषाओं और प्लेटफार्मों के एक पूरे समूह के लिए है, जावास्क्रिप्ट के लिए एक संस्करण भी पाया गया, इसके होम पेज पर उदाहरणों ने ठीक काम किया, और स्थापना निर्देश सरल और सीधे थे:

डाउनलोड करें और संग्रह को अनज़िप करें।
स्क्रिप्ट को अपनी परियोजना में स्थानांतरित करें
उदाहरण से <head> टैग की सामग्री को कॉपी करके लाइब्रेरी को अपने पेज से कनेक्ट करें।

मैं केवल तब तक खुश था जब तक कि मैं तीसरे बिंदु पर नहीं पहुंच गया, जहां उन्होंने सुझाव दिया कि मैं पृष्ठ पर निम्नलिखित की प्रतिलिपि बनाता हूं:

<!--=============================--> <!-- Copy this part to your app. --> <!-- START --> <!--=============================--> <!-- libs --> <!--[if IE]><script type="text/javascript" src="lib/excanvas.js"></script><![endif]--> <script src="lib/prototype-1.6.0.2.js"></script> <!-- box2djs --> <script src='js/box2d/common/b2Settings.js'></script> <script src='js/box2d/common/math/b2Vec2.js'></script> <script src='js/box2d/common/math/b2Mat22.js'></script> <script src='js/box2d/common/math/b2Math.js'></script> <script src='js/box2d/collision/b2AABB.js'></script> <script src='js/box2d/collision/b2Bound.js'></script> <script src='js/box2d/collision/b2BoundValues.js'></script> <script src='js/box2d/collision/b2Pair.js'></script> <script src='js/box2d/collision/b2PairCallback.js'></script> <script src='js/box2d/collision/b2BufferedPair.js'></script> <script src='js/box2d/collision/b2PairManager.js'></script> <script src='js/box2d/collision/b2BroadPhase.js'></script> <script src='js/box2d/collision/b2Collision.js'></script> <script src='js/box2d/collision/Features.js'></script> <script src='js/box2d/collision/b2ContactID.js'></script> <script src='js/box2d/collision/b2ContactPoint.js'></script> <script src='js/box2d/collision/b2Distance.js'></script> <script src='js/box2d/collision/b2Manifold.js'></script> <script src='js/box2d/collision/b2OBB.js'></script> <script src='js/box2d/collision/b2Proxy.js'></script> <script src='js/box2d/collision/ClipVertex.js'></script> <script src='js/box2d/collision/shapes/b2Shape.js'></script> <script src='js/box2d/collision/shapes/b2ShapeDef.js'></script> <script src='js/box2d/collision/shapes/b2BoxDef.js'></script> <script src='js/box2d/collision/shapes/b2CircleDef.js'></script> <script src='js/box2d/collision/shapes/b2CircleShape.js'></script> <script src='js/box2d/collision/shapes/b2MassData.js'></script> <script src='js/box2d/collision/shapes/b2PolyDef.js'></script> <script src='js/box2d/collision/shapes/b2PolyShape.js'></script> <script src='js/box2d/dynamics/b2Body.js'></script> <script src='js/box2d/dynamics/b2BodyDef.js'></script> <script src='js/box2d/dynamics/b2CollisionFilter.js'></script> <script src='js/box2d/dynamics/b2Island.js'></script> <script src='js/box2d/dynamics/b2TimeStep.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactNode.js'></script> <script src='js/box2d/dynamics/contacts/b2Contact.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactConstraint.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactConstraintPoint.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactRegister.js'></script> <script src='js/box2d/dynamics/contacts/b2ContactSolver.js'></script> <script src='js/box2d/dynamics/contacts/b2CircleContact.js'></script> <script src='js/box2d/dynamics/contacts/b2Conservative.js'></script> <script src='js/box2d/dynamics/contacts/b2NullContact.js'></script> <script src='js/box2d/dynamics/contacts/b2PolyAndCircleContact.js'></script> <script src='js/box2d/dynamics/contacts/b2PolyContact.js'></script> <script src='js/box2d/dynamics/b2ContactManager.js'></script> <script src='js/box2d/dynamics/b2World.js'></script> <script src='js/box2d/dynamics/b2WorldListener.js'></script> <script src='js/box2d/dynamics/joints/b2JointNode.js'></script> <script src='js/box2d/dynamics/joints/b2Joint.js'></script> <script src='js/box2d/dynamics/joints/b2JointDef.js'></script> <script src='js/box2d/dynamics/joints/b2DistanceJoint.js'></script> <script src='js/box2d/dynamics/joints/b2DistanceJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2Jacobian.js'></script> <script src='js/box2d/dynamics/joints/b2GearJoint.js'></script> <script src='js/box2d/dynamics/joints/b2GearJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2MouseJoint.js'></script> <script src='js/box2d/dynamics/joints/b2MouseJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2PrismaticJoint.js'></script> <script src='js/box2d/dynamics/joints/b2PrismaticJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2PulleyJoint.js'></script> <script src='js/box2d/dynamics/joints/b2PulleyJointDef.js'></script> <script src='js/box2d/dynamics/joints/b2RevoluteJoint.js'></script> <script src='js/box2d/dynamics/joints/b2RevoluteJointDef.js'></script> <!--=============================--> <!-- Copy this part to your app. --> <!-- END --> <!--=============================-->

हो सकता है कि कोई ऐसा व्यक्ति हो जो वास्तव में पचास से अधिक लिपियों को पेज से जोड़ने के लिए तैयार हो, लेकिन मैंने ऐसा नहीं किया।
मुझे लगता है कि आप केवल वही लोड कर सकते हैं जो आपको चाहिए, मैंने सोचा था, लेकिन साइट पर थोड़ा घूमने के बाद, मुझे एक विज्ञापन मिला:

"प्रत्येक स्क्रिप्ट पर निर्भरता की एक जटिल प्रणाली होती है, और यहां तक कि उन्हें गलत क्रम में लोड करने से घातक त्रुटि हो सकती है"

ठीक है, स्पष्ट रूप से, यह एक बुरा विचार था, और हमने ऐसा नहीं किया। तुरंत एक दूसरा विकल्प दिखाई दिया - पूरे बॉक्स 2 डी कोड को एक फ़ाइल में मर्ज करें और ग्रंथियों द्वारा इसे कम करें।
मुझे यह विचार पहले की तुलना में अधिक पसंद आया, और, जैसा कि यह निकला, मेरे लिए अकेले नहीं।
आवश्यक स्रोत पहले से ही यहां हैं , और उनके पाठ में परिचित उपनाम mr.Doob मिले (उन्होंने इसे बॉल पूल किया), जिसका मतलब है कि मैं सही रास्ते पर हूं।
मैंने इसे डाउनलोड और इंस्टॉल किया। उरा, अब मेरे पास मेरे पृष्ठ पर भौतिकी है!

अध्याय 2. भौतिकी है, लेकिन वास्तव में इसके साथ क्या करना है?

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

अध्याय 3. अदृश्य दुनिया शांत है, लेकिन फिर भी किसी कारण से मैं इसे आकर्षित करना चाहता हूं

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

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

यह अच्छा लग रहा है, लेकिन किसी कारण से मुझे यह पसंद नहीं है कि दुनिया का आकार ब्राउज़र विंडो के आकार के बराबर है, आपको इसे बदलने की आवश्यकता है - मैं इसे उस div के आकार में बेहतर रूप से बाँधूंगा जिसमें सब कुछ खींचा गया है।

अध्याय 4. दुनिया का अंत। दुनिया ऊंचाई तक शून्य हो जाती है। घबराहट में बॉल्स :)

तो, यह व्यर्थ लगता है मैंने इसे किया। और यदि आप पिक्सेल में div की ऊंचाई निर्धारित करते हैं? दुनिया वापस आ गई है - सब कुछ शायद इतना बुरा नहीं है, लेकिन मैं ऐसा नहीं करना चाहता - मुझे स्क्रॉलबर्स या अतिरिक्त खाली स्थान का एक गुच्छा पसंद नहीं है।
समस्या का एक समाधान जल्द ही एक मंच पर पाया गया और सामान्य तौर पर, कोई तार्किक रूप से इसके बारे में सोच सकता है:

(नीचे काल्पनिक और मेरे बहुत अधिक जानकारों के बीच संवाद का एक अंश है, जो मेरी अपनी आंतरिक आवाज के साथ मंच पर नहीं दिखता था)

आवाज (छ): ऊंचाई का क्या मतलब है 70%? 70% क्या?
मुझे: मूल तत्व की ऊंचाई से।
g: हाँ, और अब उसकी ऊंचाई क्या है?
I: तो <body> के माता-पिता के पास इसमें कोई सामग्री नहीं है, और आकार के बाद से, अगर यह सेट नहीं है, तो सामग्री पर निर्भर करता है, अब यह = 0;

सामान्य तौर पर, यह सब इस प्रकार हल किया जाता है:

 html{ height: 100% } body{ height: 100% }

फिर html की ऊँचाई व्यूपोर्ट की ऊँचाई के बराबर होगी और फिर सब कुछ स्पष्ट है। जाँच करें, शुरू करें, और यहाँ एक ऐसी तस्वीर है:

हाँ, स्पष्ट रूप से, हमारे यहाँ विशालकाय गेंदों का आक्रमण है - एक और बार मैं दुनिया के आकार के आधार पर उनके आकार को बदलना नहीं भूलूंगा:

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

मैं जाँचता हूँ, खेलता हूँ, आनन्द मनाता हूँ और ...

अध्याय 5. स्क्रीन अचानक छोड़ देता है ...

क्रोम में। नहीं, वास्तव में - इस तरह:

यह तब होता है जब माउस ब्राउज़र की सीमा से परे चला जाता है। अतिप्रवाह के रूप में एक एम्बुलेंस: शरीर या HTML में छिपी स्थिति को नहीं बचाती है, समाधान Google में भी जल्दी नहीं मिलता है। ठीक है, हम इसका पता लगाएंगे।

आधे घंटे के बाद, मुझे निम्नलिखित का पता चला:
Chrome उस तत्व के साथ सही तरीके से काम नहीं करता है जिसकी ऊँचाई: 100% और उसी समय ऊर्ध्वाधर गद्दी हो; सिद्धांत रूप में, यह भी स्पष्ट है कि त्रुटि के कान कहाँ बढ़ते हैं: इस तरह की शैलियों से यह निम्नानुसार है कि ऊँचाई यथासंभव अधिक से अधिक + 10 अधिक पिक्सेल होनी चाहिए। यह अजीब है कि ff सिर्फ इस सामान्य रूप से काम करता है :)
इस समस्या को निम्नानुसार हल किया गया है:

 #menu{ … padding: 0px 10px; /*padding     margin      -    */ … } html { ... overflow: hidden; /*     padding   chrome             .      */ ... }

हुर्रे, आखिरकार सब कुछ काम करता है।

अध्याय 6. ट्विटर एपीआई और एक ही मूल नीति

अब आइए जानें एपी ट्विटर। सब कुछ सरल और स्पष्ट है - हम जवाब jQuery.ajax के माध्यम से लोड करते हैं और मानते हैं कि कुछ भी कैसे काम करता है, क्योंकि कोने के चारों ओर से एक ही मूल नीति दिखाई देती है।
किसी तरह मैं उसके बारे में पूरी तरह से भूल गया। सामान्य तौर पर, मैंने इन प्रतिबंधों को कभी पसंद नहीं किया - उनके आसपास पाने के लिए 1001 तरीके हैं, लेकिन वे अभी भी जीवन में हस्तक्षेप करते हैं।
ट्विटर डेवलपर्स, मेरे विपरीत, निश्चित रूप से इसके बारे में याद करते हैं - उनकी साइटें jsonp का समर्थन करती हैं। खैर, इसका मतलब है कि हम उन्हें इस तरह से संदर्भित कर सकते हैं:

 <script src="http://search.twitter.com/search.json?q=%40twitterapi&callback=process"></script>

और ऐसा ही कुछ

 process({ /*data*/ })

और यह, वैसे, जावास्क्रिप्ट सही है, और यही मूल नीति इस पर लागू नहीं होती है।
सबसे अच्छी बात यह है कि jQuery के साथ jQuery अच्छी तरह से और सही तरीके से काम कर सकता है:

 $.getJSON("http://api.twitter.com/1/trends/1.json?callback=?", function () { alert("wooohooo! it works!") });

चाल यह है कि यदि jQuery कॉलबैक = देखता है? क्वेरी स्ट्रिंग में पैरामीटर, तो jsonp का उपयोग किया जाएगा, और प्रश्न चिह्न के बजाय, jQuery अपने स्वयं के प्रसंस्करण फ़ंक्शन को प्रतिस्थापित करता है।
हम अभी भी एक छोटा कोड लिख रहे हैं - हम ट्वीट टेक्स्ट, सभी प्रकार की छोटी चीज़ों को प्रदर्शित करने के लिए बड़े फ़ॉन्ट सेट करते हैं, और यह इस तरह से निकलता है:

क्या वह सब है? ठीक है, वास्तव में अभी तक :) खिड़की को कम करने, कम करने, कम करने और ... नहीं, किसी भी तरह यह सब अब गलत दिखता है:

यह अफ़सोस की बात है कि सीएसएस को जल्दी नहीं कहा जा सकता है: "कृपया एक फ़ॉन्ट आकार चुनें जैसे कि div में सभी पाठ फिट बैठता है, लेकिन सीमाओं से परे नहीं जाता है।"
हां, मानव भाषा में भी यह किसी भी तरह से लंबे समय से कहा जाता है। सामान्य तौर पर, इस प्रभाव को प्राप्त करने का सबसे आसान तरीका यदि हम jQuery का उपयोग करते हैं तो TextFill प्लगइन का उपयोग करना है। यह घुटने पर बेशक लिखा है, लेकिन यह भी काम करता है।

होस्टिंग पर सब कुछ भरें और जांचें। लानत है, किसी तरह यह सब लोड करने के लिए एक लंबा समय लगता है, होस्टिंग निश्चित रूप से तेज नहीं है, लेकिन यह इस तरह से धीमा करने का कारण नहीं है।
हाँ। box2d, jquery, इसके लिए प्लगइन्स, फिर भी कुछ कचरा, सामान्य रूप से, बहुत अधिक फाइलें हैं, और इसके साथ कुछ करने की आवश्यकता है।

अध्याय 7. नमस्ते स्क्विश

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

 <%= Bundle.JavaScript() .Add("~/Scripts/Shared/jquery-1.6.2.min.js") .Add("~/Scripts/Shared/jQueryRotate.2.1.js") .Add("~/Scripts/Shared/JCanvas.js") .Add("~/Scripts/Shared/jquery-textfill-0.1.js") .Add("~/Scripts/Shared/Box2d-singlefiled-jsmined.js") .Add("~/Scripts/Shared/World.js") .Add("~/Scripts/Tweets_life.js") .Render("~/Scripts/combined_#.js") %>

मुझे किसी स्पष्टीकरण की भी आवश्यकता नहीं है। सब कुछ बस काम करता है। जैसे Apple :)

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

Box2D, कैनवस, ट्विटर, और कैसे यह सब जुड़ा हुआ है की कहानी