एक सर्कल के चारों ओर एक छाया को स्थानांतरित करना

Question

मेरे पास एक सर्कल है जो हर 10 सेकंड में कक्षा करता है। और मैं कैमरे के कोण को ध्यान में रखते हुए कक्षा मूल (प्रकाश स्रोत) की तरफ एक छाया डालने की कोशिश कर रहा हूं।

छाया कुछ कोणों के लिए काम करती है लेकिन जैसे ही कैमरा अधिक बढ़त पर या अधिक ऊपर जाता है, यह कम सटीक दिखता है और मुझे नहीं पता कि इसके लिए कैसे सही किया जाए - यह एक जटिल गणित के मुद्दे की तरह लगता है कि मैं हल करने के तरीके को समझने के लिए संघर्ष कर रहे हैं। http://jsfiddle.net/8y2bm88w/

और छाया के लिए मेरे ड्रा कोड:

ctx.beginPath(); 

//rotate shadow with the planet 
ctx.translate(originX + obj[i].x, originY + obj[i].y); 
ctx.rotate(obj[i].angle); //rotate around origin 
ctx.translate(-(originX + obj[i].x), -(originY + obj[i].y)); 


var offsetX = -(10 * Math.sin(obj[0].angle)); //i feel this is the issue 
var offsetY = 0; //this too 

ctx.rect(originX + obj[i].x + offsetX, originY + obj[i].y + offsetY - 10, 20, 20); 
ctx.fillStyle = 'rgba(213,0,0,0.9)'; //red shadow - easier to see 
ctx.fill(); 

कोड के रूप में यह अधिक संदर्भ में कोड डालता JSFiddle माध्यम से और अधिक समझ में आता है

इस एनीमेशन है।

तो मुझे लगता है कि यह offsetX और offsetY चर के लिए गणित के साथ करना है, क्योंकि उपयोगकर्ता कैमरे कोण को ऑफ़सेट की आवश्यकता को समायोजित करने और जिस तरह से छाया चलता है उसे बदलने के लिए बदलता है। लेकिन, यह वास्तव में भ्रमित करने में उलझन में है।

Answer 1

आप इस वजह से अपने obj[i].angle (अंडाकार निर्देशांक और नहीं xy निर्देशांक ऊपर से नीचे देखने के पर आधारित है जो वास्तव में है कम पड़ रहा है कि तुम क्या से सब कुछ पैदा कर रहे हैं ताकि हम नहीं इसके लिए गणना करने की आवश्यकता है)।

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

obj[i].trueAngle = angle; 

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

// centre on planet 
ctx.translate(originX + obj[i].x, originY + obj[i].y); 
ctx.rotate(obj[i].angle - Math.PI/2); 
// semicircle dark side 
ctx.arc(0, 0, 12, 0, Math.PI, false); 
// path along terminator 
var offset_terminator = -20 * Math.sin(obj[0].trueAngle) * (1 - camera.angle); 
ctx.bezierCurveTo(-7, offset_terminator, 7, offset_terminator, 12, 0); 
//fill 
ctx.fillStyle = 'rgba(213,0,0,0.9)'; //red shadow - easier to see 
ctx.fill(); 

यहाँ मैं भी छाया पिक्सल ग्रह से भी बड़ा की एक जोड़ी, मैं सिर्फ जब तक मैं कुछ है कि अच्छा लग रहा था पाया संख्या के साथ खेला जाता बना दिया।

कृपया ध्यान दें मैं की स्थापना की रोटेशन तो 0, 0 ग्रह के बीच और x- अक्ष टर्मिनेटर साथ चाल

DEMO