2016-08-30 3 views
9

संपादित करें JS12 तत्वों को विज़ुअलाइज़ करें संपादित करें: मैं अभी भी वहां नहीं हूं। मैंने इस सवाल पर एक बक्षीस रखा है क्योंकि मैं वास्तव में जवाब के साथ कर सकता था। मैंने उन तत्वों के विचार के साथ किया है जो ग्रहों का प्रतिनिधित्व करते हैं जो केंद्र के चारों ओर घूमते नहीं हैं। इस वजह से, आप चरण 1 & 2 छोड़ सकते हैं और मेरी सहायता करने के लिए सीधे 3 पर जा सकते हैं।कुछ गणित

मूल: मैं एक मजेदार छोटी परियोजना पर काम कर रहा हूं। यह एक सौर प्रणाली है जिसमें ग्रह सूर्य के चारों ओर घूमते हैं। मैं इसे एक सिमुलेशन मानता हूं जो 3 बड़े चरणों के अनुरूप है।

पहला चरण: 8 ग्रहों के साथ एक कार्यात्मक घूमने वाला सौर प्रणाली बनाएं।

दूसरा कदम:, एक समारोह है कि एक ही सूर्य के चारों ओर घूमने नए ग्रहों कहते हैं बनाने के अपने विशेष बेतरतीब ढंग से किया जा रहा आधारित के साथ एक बटन के क्लिक के साथ (यानी: सूर्य, ग्रह के रंग, के आकार से दूरी ग्रह, आदि)

मैं तीसरे चरण पर हूं, और मैं नहीं चाहता कि चीजें अब यादृच्छिक हों। मेरे लिए तीसरा कदम मेरे लिए सबसे कठिन है क्योंकि मुझे JSON के साथ थोड़ा सा अनुभव नहीं है। मेरे पास नासा वेबसाइट से हमारे सौर मंडल से परे सभी एक्सप्लानेट्स का डेटा है, और मैं इन व्यक्तिगत वस्तुओं (ग्रहों) को सिमुलेशन में जोड़ना चाहता हूं जो ऑब्जेक्ट जोड़ता है।

आप मेरे सवाल यह है: कैसे मेरे कोड, प्रत्येक व्यक्ति के रिकॉर्ड तुम यहाँ मेरे कोड में JSON सारणी में देखें तो देखने के लिए की आवश्यकता होगी एक तत्व है कि के केंद्र पर काले दाग से दूर रखा गया है के रूप में एक यादृच्छिक कोण में स्क्रीन (पहेली देखें), इसलिए यह सब समान नहीं है। अंत में, मैं हजारों छोटे specks चाहता हूं जो स्क्रीन पर दिखाए गए ग्रहों का प्रतिनिधित्व करते हैं, जहां वर्तमान में केवल काले रंग का काला दिखता है, सूरज होना है।

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

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

यह मेरा कोड है, लेकिन यह सब नहीं है। यह सब देखने के लिए, इस कोड के तहत पोस्ट किए गए लिंक पर क्लिक करें।

 //this is an array that holds all of the json data 
      var arr= [ 
       { 
        "rowid": 1, 
       "Host name": "11 Com", 
       "Number of Planets in System": 1, 
       "Planet Mass or M*sin(i)[Jupiter mass]": 19.4, 
       "Planet Radius [Jupiter radii]": null, 
       "Planet Density [g": { 
        "cm**3]": null 
       }, 
       "Distance [pc]": 110.62, 
       "Effective Temperature [K]": 4742, 
       "Date of Last Update": "5/14/2014" 
      }, 
      { 
       "rowid": 2, 
       "Host name": "11 UMi", 
       "Number of Planets in System": 1, 
       "Planet Mass or M*sin(i)[Jupiter mass]": 10.5, 
       "Planet Radius [Jupiter radii]": null, 
       "Planet Density [g": { 
        "cm**3]": null 
       }, 
       "Distance [pc]": 119.47, 
       "Effective Temperature [K]": 4340, 
       "Date of Last Update": "5/14/2014" 
      }, 
      { 
       "rowid": 3, 
       "Host name": "14 And", 
       "Number of Planets in System": 1, 
       "Planet Mass or M*sin(i)[Jupiter mass]": 4.8, 
       "Planet Radius [Jupiter radii]": null, 
       "Planet Density [g": { 
        "cm**3]": null 
       }, 
       "Distance [pc]": 76.39, 
       "Effective Temperature [K]": 4813, 
       "Date of Last Update": "5/14/2014" 
      }, 
      { 
       "rowid": 4, 
       "Host name": "14 Her", 
       "Number of Planets in System": 1, 
       "Planet Mass or M*sin(i)[Jupiter mass]": 4.64, 
       "Planet Radius [Jupiter radii]": null, 
       "Planet Density [g": { 
        "cm**3]": null 
       }, 
       "Distance [pc]": 18.15, 
       "Effective Temperature [K]": 5311, 
       "Date of Last Update": "5/14/2014" 
      }]; 

//these variables hold specific properties 
    var distance; 
    var planetRadius; 
    var rowid; 
    var hostName; 

    for(var i=0;i<arr.length;i++){ 

     rowid= arr[i]["rowid"]; 
     distance= arr[i]["Distance [pc]"]; 
     hostName= arr[i]["Host name"]; 
     planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea 
     // Do what ever you want with individual object 
      if(planetRadius !== null){ 
       // If planet radius not null do whatever you want. 
      } 
    } 

यह fiddle आवश्यक कोड रखता है। नोट: इस लिंक में कोड के सभी 3000+ ग्रह हैं, इसलिए यह लोड होने के मामले में आपके ऊपर कार्य कर सकता है। यूआरएल में बस 2 में से 2 में ड्राफ्ट पर जाने के लिए टाइप करें जिसमें एचटीई ग्रहों के कुछ उदाहरण हैं, यदि आपका ब्राउज़र आपके ऊपर काम कर रहा है।

+0

आप ऑब्जेक्ट की सरणी से प्रत्येक ऑब्जेक्ट के साथ क्या करना चाहते हैं ?? –

+0

मेरा मतलब है कि आप कहीं जगह लेना चाहते हैं या कुछ ऑपरेशन करने की आवश्यकता है –

+0

क्षमा करें अगर मैं अस्पष्ट हूं, लेकिन मैं प्रत्येक वस्तु का आकार और सूर्य तत्व से दूरी रखना चाहता हूं "ग्रह त्रिज्या [बृहस्पति त्रिडी]" (यदि कोई मूल्य शून्य नहीं है) और "दूरी [पीसी]"। ओह मुझे अभी एहसास हुआ कि मैंने जो उदाहरण दिए हैं, वे सभी शून्य हैं। यह सरणी में सभी ग्रहों के केवल 10% की तरह प्रतिनिधित्व करता है। मैं इसके बारे में एक संपादन कर दूंगा। – Zhyohzhy

उत्तर

1

मुझे इस आजमाइए करते हैं:

इस fiddle देखें। दूरी लॉगरिदमिक है ताकि सभी ग्रह स्क्रीन पर फिट हो जाएं।

var arr= [ 
    { 
     "rowid": 1, 
     "Host name": "11 Com", 
     "Number of Planets in System": 1, 
     "Planet Mass or M*sin(i)[Jupiter mass]": 19.4, 
     "Planet Radius [Jupiter radii]": null, 
     "Planet Density [g": { 
      "cm**3]": null 
     }, 
     "Distance [pc]": 110.62, 
     "Effective Temperature [K]": 4742, 
     "Date of Last Update": "5/14/2014" 
    }, 
    { 
     "rowid": 2, 
     "Host name": "11 UMi", 
     "Number of Planets in System": 1, 
     "Planet Mass or M*sin(i)[Jupiter mass]": 10.5, 
     "Planet Radius [Jupiter radii]": null, 
     "Planet Density [g": { 
      "cm**3]": null 
     }, 
     "Distance [pc]": 119.47, 
     "Effective Temperature [K]": 4340, 
     "Date of Last Update": "5/14/2014" 
    }, 
    { 
     "rowid": 3, 
     "Host name": "14 And", 
     "Number of Planets in System": 1, 
     "Planet Mass or M*sin(i)[Jupiter mass]": 4.8, 
     "Planet Radius [Jupiter radii]": null, 
     "Planet Density [g": { 
      "cm**3]": null 
     }, 
     "Distance [pc]": 76.39, 
     "Effective Temperature [K]": 4813, 
     "Date of Last Update": "5/14/2014" 
    }, 
    { 
     "rowid": 4, 
     "Host name": "14 Her", 
     "Number of Planets in System": 1, 
     "Planet Mass or M*sin(i)[Jupiter mass]": 4.64, 
     "Planet Radius [Jupiter radii]": null, 
     "Planet Density [g": { 
      "cm**3]": null 
     }, 
     "Distance [pc]": 18.15, 
     "Effective Temperature [K]": 5311, 
     "Date of Last Update": "5/14/2014" 
    }]; 
var distance; 
var planetRadius; 
var rowid; 
var hostName; 


var svg=document.getElementById("Layer_1"); 
for(var i=0;i<arr.length;i++){ 

    rowid= arr[i]["rowid"]; 
    distance= arr[i]["Distance [pc]"]; 
    hostName= arr[i]["Host name"]; 
    planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea 
    // Do what ever you want with individual object 
     if(planetRadius !== null){ 
      // If planet radius not null do whatever you want. 
      var circle=document.createElementNS("http://www.w3.org/2000/svg","circle"); 
      circle.setAttribute("class","fillblack"); 
      circle.setAttribute("cx","0"); 
      circle.setAttribute("cy","0"); 
      circle.setAttribute("r",planetRadius.toString()); 
      var logDist=Math.log(distance+1)*50; 
      var angle=0; // change this based on the current time, if you would like an animation 
      circle.setAttribute("transform","translate(500 300.8) rotate("+angle+") translate("+logDist+")"); 
      svg.appendChild(circle); 
     } 
} 
window.requestAnimationFrame(function(){ 
    // do your animations here 
}); 

आप चाहते हैं, तो आप में वर्तमान समय के आधार बदलने angle चर बदलकर एक एनीमेशन जोड़ सकते हैं। एसवीजी ट्रांसफॉर्म गणित को बहुत सरल बनाते हैं क्योंकि आप ट्रांसफॉर्म को जोड़ सकते हैं।

हालांकि, मुझे संदेह है कि 3000+ ग्रहों को वर्तमान कंप्यूटर के साथ <svg> के साथ 60 एफपीएस पर एनिमेटेड किया जा सकता है। यदि आप एक चिकनी एनीमेशन चाहते हैं, तो आप <canvas> पर देखना चाहेंगे।

संपादित करें: यह आसानी से चिकनी है, लेकिन मुझे 60 एफपीएस की तरह दिखता नहीं है। fiddle

0

यदि आपको ऑपरेशन करने के लिए प्रत्येक व्यक्तिगत ऑब्जेक्ट की आवश्यकता होती है तो लूप के लिए उपयोग करें।

 var arr= [ 
     { 
      "rowid": 1, 
      "Host name": "11 Com", 
      "Number of Planets in System": 1, 
      "Planet Mass or M*sin(i)[Jupiter mass]": 19.4, 
      "Planet Radius [Jupiter radii]": null, 
      "Planet Density [g": { 
       "cm**3]": null 
      }, 
      "Distance [pc]": 110.62, 
      "Effective Temperature [K]": 4742, 
      "Date of Last Update": "5/14/2014" 
     }, 
     { 
      "rowid": 2, 
      "Host name": "11 UMi", 
      "Number of Planets in System": 1, 
      "Planet Mass or M*sin(i)[Jupiter mass]": 10.5, 
      "Planet Radius [Jupiter radii]": null, 
      "Planet Density [g": { 
       "cm**3]": null 
      }, 
      "Distance [pc]": 119.47, 
      "Effective Temperature [K]": 4340, 
      "Date of Last Update": "5/14/2014" 
     }, 
     { 
      "rowid": 3, 
      "Host name": "14 And", 
      "Number of Planets in System": 1, 
      "Planet Mass or M*sin(i)[Jupiter mass]": 4.8, 
      "Planet Radius [Jupiter radii]": null, 
      "Planet Density [g": { 
       "cm**3]": null 
      }, 
      "Distance [pc]": 76.39, 
      "Effective Temperature [K]": 4813, 
      "Date of Last Update": "5/14/2014" 
     }, 
     { 
      "rowid": 4, 
      "Host name": "14 Her", 
      "Number of Planets in System": 1, 
      "Planet Mass or M*sin(i)[Jupiter mass]": 4.64, 
      "Planet Radius [Jupiter radii]": null, 
      "Planet Density [g": { 
       "cm**3]": null 
      }, 
      "Distance [pc]": 18.15, 
      "Effective Temperature [K]": 5311, 
      "Date of Last Update": "5/14/2014" 
     }]; 
var distance; 
var planetRadius; 

for(var i=0;i<arr.length;i++){ 

    distance= arr[i]["Distance [pc]"]; 
    planetRadius=arr[i]["Planet Radius [Jupiter radii]"];//This is the idea how we should access the json objects, as your operations are not clear to us just I'm giving the idea 
    // Do what ever you want with individual object 
     if(planetRadius !== null){ 
      // If planet radius not null do whatever you want. 
     } 
} 
+0

हाय, आपके उत्तर के लिए धन्यवाद! हालांकि मुझे इसे लागू करने में परेशानी हो रही है। यह लाइन मेरे कोड से ठीक है "आर: parseFloat (document.getElementById (" new-r ")। मान)" यह तय करता है कि ग्रह कहां स्थित है। आपके द्वारा लिखे गए दूरी चर को कैसे प्रतिस्थापित करने की आवश्यकता होगी? बस अपने जेएसएफडल में अपना कोड कॉपी करने का कोई प्रभाव नहीं पड़ता है। क्या आप उत्तर के साथ अपना JSfiddle अपडेट कर सकते हैं? https://jsfiddle.net/zxfqLsc9/ – Zhyohzhy

+0

क्या आप "आर" तक पहुंचना चाहते हैं ?? "आर: parseFloat (document.getElementById (" new-r ")। मान)" –

+0

ठीक है, अब मैं इसके बारे में सोचता हूं कि यह कार्य अप्रचलित है। जैसा कि कोड अब है, ताकि आप सूरज के चारों ओर ग्रहों को स्वतंत्र रूप से जोड़ सकें, लेकिन मैं अब और पसंद नहीं करना चाहता हूं। सरणी में 4 ग्रह हैं, मैं चाहता हूं कि पृष्ठ लोड होने पर उन ग्रहों को स्वचालित रूप से जोड़ा जाए। इसलिए जब मैं सरणी में पांचवां ग्रह जोड़ता हूं, तो सौर मंडल उस ग्रह के साथ गतिशील रूप से अद्यतन होता है, जो स्थिति और आकार आपकी दूरी और ग्रह त्रिज्या चर पर निर्भर होता है। – Zhyohzhy

0

मैं आपके लिए कोड लिखने वाला नहीं हूं, लेकिन मैं आपको संकेत देता हूं कि कैसे करें।

पहली समस्या - स्क्रीन पर फ़िटिंग: केंद्र बिंदु से सबसे दूर का किनारा खोजें, और फिर सभी दूरी को परिवर्तित करें ताकि वे उस दूरी के भीतर फिट हो जाएं, लेकिन सापेक्ष दूरी को सटीक बनाए रखें। इसके लिए, आपको 3 इनपुट नंबर और आप जो खोज रहे हैं:

  • R'max = स्क्रीन पर सबसे दूर किनारे तक दूरी (संभवतः पिक्सल में) की आवश्यकता है।
  • डी अधिकतम = सूर्य से अपने जेसन में सबसे दूर के ग्रह से दूरी।
  • डी ग्रह = दूरी जिसे आप सापेक्ष दूरी में परिवर्तित करना चाहते हैं।
  • R'planet = स्क्रीन पर ग्रह की दूरी जिसे आपको ढूंढने की आवश्यकता है (संभवतः पिक्सल में)।

सूत्र:

R'planet = D'planet/(R'max/D'max); 

दूसरा समस्या - स्क्रीन पर जगह ग्रह: आप स्क्रीन पर सूर्य से ग्रह के दूरी की जरूरत है (R'planet - आप इसे पिछले चरण से है), और साथ सूरज से कोण के रूप में (0 - 360 डिग्री - आपने कहा कि आप यादृच्छिक कर सकते हैं)। फिर आप इस तरह के स्क्रीन निर्देशांक की गणना कर सकते हैं:

  • R'planet - स्क्रीन पर दूरी।
  • एप्लानेट - सूरज से स्क्रीन कोण।
  • एक्सप्लानेट - ग्रह का एक्स समन्वय (माना जाता है कि सूर्य [0,0] है)।
  • Y'planet - ग्रह का वाई समन्वय (माना जाता है कि सूर्य [0,0] है)।

सूत्र:

X'planet = cos(A'planet)/R'planet; 
Y'planet = sin(A'planet)/R'planet; 

याद रखें कि ये निर्देशांक सत्य हैं, तो सूरज [0,0] पर है। तो, स्क्रीन पर ग्रह को रखने के लिए, आपको X'planet को X'sun में जोड़ना होगा, और Y'planet को Y'sun में जोड़ना होगा।

तीसरी समस्या - स्क्रीन पर ग्रह का आकार: फिर, ऊपर की पहली समस्या के समान, बस तय करें कि स्क्रीन पर अधिकतम ग्रह आकार क्या है, और उसके बाद वास्तविक आकार को अनुपात से विभाजित करें।

Radius'screen = Radius'actual/(Radius'actualmax/Radius'maxpx); 

इसे खींचने के कई तरीके हैं, या तो svg या बस div छवि को इसके साथ ग्रह छवि के साथ रखें और उसके अनुसार आकार दें।

यह होना चाहिए।