স্প্রকেট বিজ্ঞান: একটি চেইন ড্রাইভ সিস্টেম অ্যানিমেটিং

Question

এই চ্যালেঞ্জের লক্ষ্য একটি একটি অ্যানিমেশন উত্পাদন করা হয় চেইন ড্রাইভ সিস্টেম, একটি সেট গঠিত চক্রদন্ত গিয়ারের একটি একত্রে সংযুক্ত শৃঙ্খল ।

সাধারণ আবশ্যকতা

আপনার প্রোগ্রামটি তিনটি হিসাবে চিহ্নিত স্প্রোককেটের একটি তালিকা দেওয়া হবে (x, y, radius)। ফলে শৃঙ্খল ড্রাইভ সিস্টেম এই sprockets, একটি একত্রে সংযুক্ত গঠিত হয় বদ্ধ টান চেইন তাদের প্রতিটি ওভার ক্ষণস্থায়ী, অনুক্রমে । আপনার লক্ষ্যটি হ'ল একটি গতিতে সিস্টেমটি দেখিয়ে অসীম লুপিং অ্যানিমেশন তৈরি করা । উদাহরণস্বরূপ, ইনপুট দেওয়া

(0, 0, 16),  (100, 0, 16),  (100, 100, 12),  (50, 50, 24),  (0, 100, 12)

, আউটপুট এর মত দেখতে কিছু উচিত

।

তুল্য সিস্টেম যেমন x- অক্ষ ডান পয়েন্ট, এবং Y- অক্ষ পয়েন্ট আপ যে হওয়া উচিত। আপনি ধরে নিতে পারেন যে রেডিয়াই 8 এর চেয়েও বেশি বা সমান (এটি পরে কেন গুরুত্বপূর্ণ তা আমরা দেখতে পাব)) আপনি আরও ধরে নিতে পারেন যে কমপক্ষে দুটি স্প্রোকেট রয়েছে এবং স্প্রোকেটগুলি একে অপরকে ছেদ করে না। ইউনিটইনপুট খুব সমালোচনামূলক নয়। এই পোস্টের সমস্ত উদাহরণ এবং পরীক্ষার কেসগুলি ইনপুট ইউনিট হিসাবে পিক্সেল ব্যবহার করে (সুতরাং উদাহরণস্বরূপ, পূর্ববর্তী চিত্রের মাঝারি স্প্রোকেটের ব্যাসার্ধটি 24 পিক্সেল;) এই ইউনিটগুলি থেকে খুব বেশি বিচ্যুত হওয়ার চেষ্টা করবেন না। বাকি চ্যালেঞ্জের মধ্যে, স্থানগত পরিমাণগুলি ইনপুট হিসাবে একই ইউনিটগুলিতে দেওয়া হবে বলে বোঝা যায় prop অনুপাতটি ঠিক রাখতে নিশ্চিত করুন! দ্যআউটপুট এর মাত্রা সব sprockets এর সীমান্ত বক্স চেয়ে সামান্য বড়, যথেষ্ট বড় হওয়া উচিত, যাতে সম্পূর্ণ সিস্টেম দৃশ্যমান। বিশেষত, স্প্রোককেটের নিখুঁত অবস্থানগুলি আউটপুটকে প্রভাবিত করবে না; কেবল তাদের আপেক্ষিক অবস্থানের উচিত (সুতরাং, উদাহরণস্বরূপ, যদি আমরা উপরের উদাহরণে সমস্ত স্প্রোকেটকে একই পরিমাণে স্থানান্তরিত করি তবে আউটপুট একই থাকবে))

শৃঙ্খল হওয়া উচিত স্পর্শক sprockets এটা যোগাযোগের সব বিন্দুতে পাস, এবং সোজা সর্বত্র অন্য। চেইনটি স্প্রোককেটের উপর দিয়ে যেতে হবে যেমন সংলগ্ন চেইন বিভাগগুলি (যা দুটি স্প্রোকেটের মধ্যে শৃঙ্খলার অংশগুলি, যা একই স্প্রোকেটে মিলিত হয়) একে অপরকে ছেদ না করে।

।

উদাহরণস্বরূপ, উপরের বাম সিস্টেমটি বৈধ থাকাকালীন মাঝেরটিটি নয়, যেহেতু নীচের বাম স্প্রোকেট ছেদ করে দুটি সংলগ্ন চেইন খণ্ডগুলি ছেদ করে। যাইহোক, লক্ষ করুন যে, ডান সিস্টেম হয় বৈধ, যেহেতু দুই ছেদ শৃঙ্খল অংশ সন্নিহিত নয় (এই সিস্টেম যদিও, ব্যতীত অন্য দুই একটি ভিন্ন ইনপুট দ্বারা উত্পাদিত হয়।)

জিনিসগুলি সহজ (আর) রাখার জন্য, আপনি ধরে নিতে পারেন যে কোনও স্প্রোকট তার দুটি প্রতিবেশী স্প্রোকেট বা তার প্রতিবেশী এবং তাদের অন্য প্রতিবেশীর উত্তল হালকে ছেদ করে না । অন্য কথায়, নীচের চিত্রের উপরের স্প্রোকটটি ছায়াযুক্ত অঞ্চলগুলির কোনওটিকে ছেদ না করতে পারে।

চেইন বিভাগগুলি তাদের পাশ দিয়ে যাওয়াগুলি ব্যতীত অন্য স্প্রোকেটগুলিকে ছেদ করতে পারে (যেমন শেষ পরীক্ষার ক্ষেত্রে)। এই ক্ষেত্রে, চেইন সর্বদা স্প্রোককেটের সামনে উপস্থিত হওয়া উচিত।

ভিজ্যুয়াল প্রয়োজনীয়তা

শৃঙ্খলে বিকল্প প্রস্থের কয়েকটি লিংক থাকা উচিত । সরু লিঙ্কটির প্রস্থ প্রায় 2 এবং প্রশস্ত লিঙ্কের প্রস্থ প্রায় 5 হওয়া উচিত । উভয় প্রকারের লিঙ্কের দৈর্ঘ্য প্রায় সমান হওয়া উচিত। দ্যকালচেইনের অর্থাত্, লিঙ্কগুলির প্রশস্ত / সরু জোড়ার মোট দৈর্ঘ্য 4 এর নিকটতম সংখ্যা হওয়া উচিত যা শৃঙ্খলার দৈর্ঘ্যের ক্ষেত্রে পূর্ণসংখ্যার বারের সাথে খাপ খায়। উদাহরণস্বরূপ, যদি শৃঙ্খলার দৈর্ঘ্য 1,000 হয়, তবে এর সময়কাল 12.5 হওয়া উচিত, এটি 4π (12.566 ...) এর নিকটতম সংখ্যা যা 1000 এর মধ্যে পূর্ণসংখ্যার সংখ্যার (80) ফিট করে? পিরিয়ডের জন্য শৃঙ্খলার দৈর্ঘ্যের মধ্যে একটি পূর্ণসংখ্যার বার ফিট করা গুরুত্বপূর্ণ, যাতে চেইনটি প্রায় আবৃত থাকে এমন বিন্দুতে কোনও শৈলী না থাকে।

ব্যাসার্ধ একটি চক্রদন্ত আর একটি কেন্দ্রীয় তিনটি সমকেন্দ্রি অংশ হওয়া উচিত অক্ষ , যা সম্পর্কে ব্যাসার্ধ 3 বৃত্ত হওয়া উচিত; চক্রদন্ত লাশ , অক্ষ, যা সম্পর্কে ব্যাসার্ধ্যের একটি বৃত্ত হওয়া উচিত প্রায় আর - 4.5; এবং স্প্রোকেটের রিম , শরীরের চারপাশে, যা প্রায়
R - 1.5 এর ব্যাসার্ধের বৃত্ত হওয়া উচিত । রিমে স্প্রোকেটের দাঁতও থাকতে হবে , যার প্রস্থ প্রায় 4 টি হওয়া উচিত; দাঁতগুলির আকার এবং ব্যবধানটি চেইন লিঙ্কগুলির আকারগুলির সাথে মিলিত হওয়া উচিত, যাতে তারা ঝরঝরে me

স্প্রোকেটের দাঁতগুলির সময়কাল, অর্থাত্ স্প্রোকটের পরিধি বরাবর দুটি টানা দাঁতের মধ্যবর্তী দূরত্বটি শৃঙ্খলার সময়কালের সাথে মিলিত হওয়া উচিত। যেহেতু সময়কাল প্রায় 4π, এবং যেহেতু স্প্রোকটের ব্যাসার্ধটি সমান হওয়ার গ্যারান্টিযুক্ত তাই সময়টি স্প্রোকটের পরিধিতে প্রায় বারের মতো পূর্ণসংখ্যার সাথে মাপসই করা উচিত, যাতে কোনও নির্দিষ্ট লক্ষণীয় নিদর্শন যাতে না থাকে সেদিকে স্প্রোকেটের দাঁতগুলি প্রায় জড়িয়ে আছে।

আপনি চেইন, স্প্রোকটের বিভিন্ন অংশ এবং পটভূমির জন্য যে কোনও রঙের সংমিশ্রণ ব্যবহার করতে পারবেন যতক্ষণ না তারা সহজেই পৃথকযোগ্য । পটভূমিটি স্বচ্ছ হতে পারে। এই পোস্টের উদাহরণগুলি #202020শৃঙ্খলার #868481জন্য, স্প্রোকটের অক্ষ এবং রিমের #646361জন্য এবং স্প্রোকেটের শরীরের জন্য ব্যবহার করে।

অ্যানিমেশন প্রয়োজনীয়তা

প্রথম চক্রদন্ত ইনপুট তালিকা ঘুরান উচিত ঘড়ির কাঁটার দিকে ; বাকি স্প্রোকেটগুলি সেই অনুযায়ী ঘোরানো উচিত। শৃঙ্খল একটি এ সরানো উচিত গতি 16π সম্পর্কে (প্রায় 50) প্রতি সেকেন্ডে ইউনিট; ফ্রেম রেট আপনার উপর নির্ভর করে তবে অ্যানিমেশনটি যথেষ্ট মসৃণ হওয়া উচিত।

অ্যানিমেশনটি নির্বিঘ্নে লুপ হওয়া উচিত ।

কনফরমেন্স

কিছু ভিজ্যুয়াল অ্যাট্রিবিউট এবং অনুপাতগুলি ইচ্ছাকৃতভাবে কেবল মোটামুটিভাবে নির্দিষ্ট করা হয় — আপনাকে সেগুলির সাথে ঠিক মেলে না । আপনার প্রোগ্রামের আউটপুট এখানে দেওয়া উদাহরণগুলির পিক্সেল থেকে পিক্সেল প্রতিলিপি হতে হবে না, তবে এটি দেখতে অনুরূপ হওয়া উচিত। বিশেষত, চেইনের সঠিক অনুপাত এবং স্প্রোকেটস এবং চেইনের লিঙ্কগুলি এবং স্প্রোকেটের দাঁতগুলির সঠিক আকারটি নমনীয়।

অনুসরণ করার জন্য সবচেয়ে গুরুত্বপূর্ণ বিষয়গুলি হ'ল:

• শৃঙ্খলে সঠিক দিক থেকে ইনপুট ক্রমে স্প্রোককেটের উপর দিয়ে যেতে হবে।
• যোগাযোগের সমস্ত পয়েন্টে চেইনটি স্প্রোকেটগুলিতে স্পর্শকাতর হওয়া উচিত।
• চেইনের লিঙ্কগুলি এবং স্প্রোকেটগুলির দাঁতগুলি ঝরঝরেভাবে ঝাঁকুনি দেওয়া উচিত, কমপক্ষে ব্যবধান এবং পর্যায়টি সঠিক করতে।
• চেইনের লিঙ্কগুলি এবং স্প্রোককেটের দাঁতগুলির মধ্যে ব্যবধানটি এমন হওয়া উচিত যাতে তারা যে মোড় ঘুরিয়ে দেয় সেখানে কোনও লক্ষণীয় নিদর্শন নেই।
• স্প্রোককেটগুলি সঠিক দিকে ঘোরানো উচিত।
• অ্যানিমেশনটি নির্বিঘ্নে লুপ হওয়া উচিত।

একটি চূড়ান্ত নোট হিসাবে, প্রযুক্তিগতভাবে, এই চ্যালেঞ্জের লক্ষ্যটি হ'ল সংক্ষিপ্ততম কোডটি লেখা, যদি আপনি মনে করেন যে সৃজনশীল হয়ে উঠতে এবং আরও বিস্তৃত আউটপুট উত্পাদন করার উপযোগী হয়, তবে এটির জন্য যান!

চ্যালেঞ্জ

একটি প্রোগ্রাম বা একটি ফাংশন লিখুন , স্প্রোকেটগুলির একটি তালিকা গ্রহণ করুন এবং উপরে বর্ণিত অনুসারে সংশ্লিষ্ট চেইন ড্রাইভ সিস্টেম অ্যানিমেশন তৈরি করুন।

ইনপুট এবং আউটপুট

আপনি সময় নিতে পারে ইনপুট মাধ্যমে কমান্ড লাইন মাধ্যমে stdin , যেমন ফাংশন আর্গুমেন্ট , অথবা একটি ব্যবহার সমতুল্য পদ্ধতি । আপনি ইনপুটটির জন্য কোনও সুবিধাজনক বিন্যাস ব্যবহার করতে পারেন তবে এটি আপনার পোস্টে নির্দিষ্ট করে দেওয়ার বিষয়টি নিশ্চিত করুন।

আউটপুট হিসাবে , আপনি অ্যানিমেশনটি সরাসরি প্রদর্শন করতে পারেন , একটি অ্যানিমেশন ফাইল তৈরি করতে পারেন (উদাহরণস্বরূপ, একটি অ্যানিমেটেড জিআইএফ), বা ফ্রেম ফাইলগুলির একটি ক্রম উত্পাদন করতে (তবে, এই ক্ষেত্রে একটি ছোট জরিমানা রয়েছে; নীচে দেখুন)) আপনি যদি ফাইল আউটপুট ব্যবহার করেন, ফ্রেমের সংখ্যা যুক্তিসঙ্গত কিনা তা নিশ্চিত করুন (এই পোস্টের উদাহরণগুলি খুব কম ফ্রেম ব্যবহার করে;) ফ্রেমের সংখ্যা ন্যূনতম হতে হবে না, তবে আপনার অত্যধিক অতিরিক্ত অতিরিক্ত ফ্রেম তৈরি করা উচিত নয়। যদি আপনি ফ্রেমের ক্রম আউটপুট করেন তবে আপনার পোস্টে ফ্রেম রেট নির্দিষ্ট করে দেওয়ার বিষয়টি নিশ্চিত করুন ।

স্কোর

এটি কোড-গল্ফ । সবচেয়ে কম উত্তর , বাইটে, ধিক্কার জানাই।

+ 10% জরিমানা   যদি আপনার প্রোগ্রামটি সরাসরি অ্যানিমেশনটি প্রদর্শন করার বা একক অ্যানিমেশন ফাইল তৈরির পরিবর্তে আউটপুট হিসাবে ফ্রেমের ক্রম উত্পাদন করে তবে আপনার স্কোরের 10% যোগ করুন।

পরীক্ষার মামলা

পরীক্ষা 1

(0, 0, 26),  (120, 0, 26)

পরীক্ষা 2

(100, 100, 60),  (220, 100, 14)

পরীক্ষা 3

(100, 100, 16),  (100, 0, 24),  (0, 100, 24),  (0, 0, 16)

পরীক্ষা 4

(0, 0, 60),  (44, 140, 16),  (-204, 140, 16),  (-160, 0, 60),  (-112, 188, 12),
(-190, 300, 30),  (30, 300, 30),  (-48, 188, 12)

পরীক্ষা 5

(0, 128, 14),  (46.17, 63.55, 10),  (121.74, 39.55, 14),  (74.71, -24.28, 10),
(75.24, -103.55, 14),  (0, -78.56, 10),  (-75.24, -103.55, 14),  (-74.71, -24.28, 10),
(-121.74, 39.55, 14),  (-46.17, 63.55, 10)

পরীক্ষা 6

(367, 151, 12),  (210, 75, 36),  (57, 286, 38),  (14, 181, 32),  (91, 124, 18),
(298, 366, 38),  (141, 3, 52),  (80, 179, 26),  (313, 32, 26),  (146, 280, 10),
(126, 253, 8),  (220, 184, 24),  (135, 332, 8),  (365, 296, 50),  (248, 217, 8),
(218, 392, 30)

---

Comments

এই জিআইএফগুলি খুব সন্তোষজনক +1

— আদনান

কেউ যে কোনও পরিমাণ কোডের সাথে সাফল্যের সাথে উত্তর দিলে আমি মুগ্ধ হব।

— ডেভিডসি

আপনি gifs কিভাবে তৈরি? এবং এই কাজ চলছে কত দিন?

— জে আতকিন

@ জ্যাটকিন অন্য সকলের একইভাবে: আমি একটি সমাধান লিখেছিলাম :) আপনি যদি নির্দিষ্টকরণগুলি সম্পর্কে জিজ্ঞাসা করেন তবে আমি পৃথক ফ্রেমের জন্য কায়রো ব্যবহার করেছি, এবং তারপরে গিফগুলি তৈরি করতে ইমেজম্যাগিক ব্যবহার করেছি (বিটিডাব্লু, যদি কেউ অ্যানিমেশনটি তৈরি করতে চায় তবে) উপায়, অর্থাত্ প্রথমে ফ্রেমগুলি তৈরি করে এবং তারপরে অ্যানিমেশনে রূপান্তরিত করার জন্য একটি বাহ্যিক সরঞ্জাম ব্যবহার করে, আমি এটির সাথে পুরোপুরি ঠিক আছি , যতক্ষণ আপনি আপনার পোস্টের সরঞ্জামটির উপর নির্ভরশীলতা নির্দিষ্ট করেন Just ঠিক পরিষ্কার, এটি আপনার প্রোগ্রাম যা সরঞ্জামটি ডেকে আনতে হবে, ব্যবহারকারী নয় not)

— এলো

@ আঙ্কো সুসংবাদটি হ'ল আপনাকে এটি নিয়ে চিন্তা করতে হবে না: এই পরিস্থিতিটি ইনপুটটিতে না হওয়ার গ্যারান্টিযুক্ত; "কোনও স্প্রকেট উত্তল হাল ... ... অংশটিকে ছেদ করে দেখুন, এটি তিনটি ছায়াযুক্ত অঞ্চলযুক্ত চিত্র সহ। আরও সাধারণভাবে, স্প্রোককেটের ক্রম অনুসারে চেইনটি প্রতিটি স্প্রোকেটকে কেবল একবারই অতিক্রম করে, এমনকি যদি মনে হয় এটি স্প্রোকেটের কাছে একাধিকবার অতিক্রম করে।

— এলো

Answer 1

জাভাস্ক্রিপ্ট (ES6), 2557 1915 1897 1681 বাইট

এটি সুপার- ডুপার সত্যিই গল্ফ নয় ; এটি সংক্ষিপ্ত - আংশিক হাতে হাতে - তবে এটি বিশেষ কিছু নয়। এটি খাটো করার আগে যদি আমি এটি আরও গল্ফ করতাম তবে সন্দেহাতীতভাবে সংক্ষিপ্ত হতে পারে না, তবে ইতিমধ্যে আমি এটির জন্য যথেষ্ট সময় ব্যয় করেছি (বেশি)।

সম্পাদনা: ঠিক আছে, তাই আমি এটিতে আরও বেশি সময় ব্যয় করেছি এবং মিনিফাইং করার আগে কোডটি আরও গল্ফ দিয়েছি (খুব এবার নিজেই)। কোডটি এখনও একই পন্থা এবং সামগ্রিক কাঠামোটি ব্যবহার করছে, তবুও আমি এখনও 64৪২ বাইট সঞ্চয় করে শেষ করেছি। খুব জঞ্জাল নয়, আমি নিজেও যদি তাই বলি। সম্ভবত কিছু বাইট-সেভিংয়ের সুযোগ মিস হয়েছে তবে এই মুহুর্তে আমি নিশ্চিত না যে এটি কীভাবে কাজ করে। আউটপুটের ক্ষেত্রে পৃথক একমাত্র জিনিসটি হ'ল এটি এখন কিছুটা ভিন্ন রঙ ব্যবহার করে যা আরও নিবিড়ভাবে লেখা যেতে পারে।

2 সম্পাদনা করুন (অনেক পরে): 18 বাইট সংরক্ষণ করা হয়েছে। আমি পুরোপুরি মিস হয়ে গেলাম এমন অন্ধভাবে স্পষ্টভাবে নির্দেশ করার জন্য মন্তব্যে কনরও ব্রায়েনকে ধন্যবাদ জানাই।

3 সম্পাদনা করুন: সুতরাং, আমি অনুভব করেছি যে আমি আমার নিজস্ব কোডটি প্রকট করে দেব, কারণ সত্যি বলতে কীভাবে আমি এটি করতে পেরেছি তা মনে করতে পারছিলাম না এবং আমি প্রকৃত সংস্করণগুলি হারিয়েছি। তাই আমি পেরেছি এবং দেখলাম পুনর্গঠন করে কিছু মাইক্রো গল্ফিং করে সংরক্ষণ করতে আরও 316 বাইট পেয়েছি।

R=g=>{with(Math){V=(x,y,o)=>o={x,y,l:sqrt(x*x+y*y),a:v=>V(x+v.x,y+v.y),s:v=>o.a(v.m(-1)),m:f=>V(x*f,y*f),t:r=>V(x*cos(r)-y*sin(r),x*sin(r)+y*cos(r)),c:v=>x*v.y-y*v.x,toString:_=>x+','+y};a='appendChild',b='setAttribute';S=(e,a)=>Object.keys(a).map(n=>e[b](n,a[n]))&&e;T=(t,a)=>S(k.createElementNS('http://www.w3.org/2000/svg',t),a);C=(e,a)=>S(e.cloneNode(),a);P=a=>T('path',(a.fill='none',a));w=h=-(x=y=1/0);G=g.map((a,g)=>(g=V(...a))&&(u=(g.r=a[2])+5,x=min(x,g.x-u),y=min(y,g.y-u),w=max(w,g.x+u),h=max(h,g.y+u))&&g);k=document;I=k[a].bind(k.body[a](T('svg',{width:w-x,height:h-y}))[a](T('g',{transform:`translate(${-x},${h})scale(1,-1)`})));L=(c)=>(h=G.length)&&G.map((g,i)=>c(G[i],G[i?i-1:h-1],G[(i+1)%h]))&&L;l='';L((g,p,n)=>g.f=p.s(g).c(n.s(g))>0)((g,a,n)=>{d=g.s(n),y=x=1/d.l;g.f!=n.f?(a=asin((g.r+n.r)*x),g.f?(x=-x,a=-a):(y=-y)):(a=asin((g.r-n.r)*x),g.f&&(x=y=-x,a=-a));t=d.t(a+PI/2);g.o=t.m(x*g.r).a(g);n.i=t.m(y*n.r).a(n)})((g,p,n)=>{z='#888';d=(l,s,e)=>`A${g.r},${g.r} 0 ${1*l},${1*s} ${e}`;e=(f,r)=>T('circle',{cx:g.x,cy:g.y,r,fill:f});g.k=p.o.s(n.i).l<g.i.s(g.o).l;w=d(g.k,!g.f,g.o);g.j=`${w}L${n.i}`;l+=g.j;I(e(z,g.r-1.5));g.g=I(P({d:`M${g.i}${w}${d(!g.k,!g.f,g.i)}`,stroke:z,'stroke-width':5}));g.h=I(C(g.g,{d:`M${g.i}${g.j}`,stroke:'#222'}));I(e('#666',g.r-4.5));I(e(z,3))});t=e=>e.getTotalLength(),u='stroke-dasharray',v='stroke-dashoffset',f=G[0];l=I(C(f.h,{d:'M'+f.i+l,'stroke-width':2}));s=f.w=t(l)/round(t(l)/(4*PI))/2;X=8*s;Y=f.v=0;L((g,p)=>{g.g[b](u,s);g.h[b](u,s);g==f||(g.w=p.w+t(p.h),g.v=p.v+t(p.h));g.g[b](v,g.w);g.h[b](v,g.v);g.h[a](C(g.g[a](T('animate',{attributeName:v,from:g.w+X,to:g.w+Y,repeatCount:'indefinite',dur:'1s'})),{from:g.v+X,to:g.v+Y}))})}}

উপরের ফাংশনটি নথিতে একটি এসভিজি উপাদান (অ্যানিমেশন সহ) সংযোজন করে। উদাহরণস্বরূপ ২ য় পরীক্ষার কেস প্রদর্শিত হবে:

R([[100, 100, 60],  [220, 100, 14]]);

একটি ট্রিট কাজ করে বলে মনে হচ্ছে - কমপক্ষে এখানে Chrome এ।

নীচের স্নিপেটে এটি ব্যবহার করে দেখুন (বাটনে ক্লিক করে ওপির প্রতিটি পরীক্ষার কেস আঁকবে)।

R=g=>{with(Math){V=(x,y,o)=>o={x,y,l:sqrt(x*x+y*y),a:v=>V(x+v.x,y+v.y),s:v=>o.a(v.m(-1)),m:f=>V(x*f,y*f),t:r=>V(x*cos(r)-y*sin(r),x*sin(r)+y*cos(r)),c:v=>x*v.y-y*v.x,toString:_=>x+','+y};a='appendChild',b='setAttribute';S=(e,a)=>Object.keys(a).map(n=>e[b](n,a[n]))&&e;T=(t,a)=>S(k.createElementNS('http://www.w3.org/2000/svg',t),a);C=(e,a)=>S(e.cloneNode(),a);P=a=>T('path',(a.fill='none',a));w=h=-(x=y=1/0);G=g.map((a,g)=>(g=V(...a))&&(u=(g.r=a[2])+5,x=min(x,g.x-u),y=min(y,g.y-u),w=max(w,g.x+u),h=max(h,g.y+u))&&g);k=document;I=k[a].bind(k.body[a](T('svg',{width:w-x,height:h-y}))[a](T('g',{transform:`translate(${-x},${h})scale(1,-1)`})));L=(c)=>(h=G.length)&&G.map((g,i)=>c(G[i],G[i?i-1:h-1],G[(i+1)%h]))&&L;l='';L((g,p,n)=>g.f=p.s(g).c(n.s(g))>0)((g,a,n)=>{d=g.s(n),y=x=1/d.l;g.f!=n.f?(a=asin((g.r+n.r)*x),g.f?(x=-x,a=-a):(y=-y)):(a=asin((g.r-n.r)*x),g.f&&(x=y=-x,a=-a));t=d.t(a+PI/2);g.o=t.m(x*g.r).a(g);n.i=t.m(y*n.r).a(n)})((g,p,n)=>{z='#888';d=(l,s,e)=>`A${g.r},${g.r} 0 ${1*l},${1*s} ${e}`;e=(f,r)=>T('circle',{cx:g.x,cy:g.y,r,fill:f});g.k=p.o.s(n.i).l<g.i.s(g.o).l;w=d(g.k,!g.f,g.o);g.j=`${w}L${n.i}`;l+=g.j;I(e(z,g.r-1.5));g.g=I(P({d:`M${g.i}${w}${d(!g.k,!g.f,g.i)}`,stroke:z,'stroke-width':5}));g.h=I(C(g.g,{d:`M${g.i}${g.j}`,stroke:'#222'}));I(e('#666',g.r-4.5));I(e(z,3))});t=e=>e.getTotalLength(),u='stroke-dasharray',v='stroke-dashoffset',f=G[0];l=I(C(f.h,{d:'M'+f.i+l,'stroke-width':2}));s=f.w=t(l)/round(t(l)/(4*PI))/2;X=8*s;Y=f.v=0;L((g,p)=>{g.g[b](u,s);g.h[b](u,s);g==f||(g.w=p.w+t(p.h),g.v=p.v+t(p.h));g.g[b](v,g.w);g.h[b](v,g.v);g.h[a](C(g.g[a](T('animate',{attributeName:v,from:g.w+X,to:g.w+Y,repeatCount:'indefinite',dur:'1s'})),{from:g.v+X,to:g.v+Y}))})}}


// ========================
// Test code

var testCases = [
  [[0, 0, 16],  [100, 0, 16],  [100, 100, 12],  [50, 50, 24],  [0, 100, 12]],
  [[0, 0, 26],  [120, 0, 26]],
  [[100, 100, 60],  [220, 100, 14]],
  [[100, 100, 16],  [100, 0, 24],  [0, 100, 24],  [0, 0, 16]],
  [[0, 0, 60],  [44, 140, 16],  [-204, 140, 16],  [-160, 0, 60],  [-112, 188, 12], [-190, 300, 30],  [30, 300, 30],  [-48, 188, 12]],
  [[0, 128, 14],  [46.17, 63.55, 10],  [121.74, 39.55, 14],  [74.71, -24.28, 10], [75.24, -103.55, 14],  [0, -78.56, 10],  [-75.24, -103.55, 14],  [-74.71, -24.28, 10], [-121.74, 39.55, 14],  [-46.17, 63.55, 10]],
  [[367, 151, 12],  [210, 75, 36],  [57, 286, 38],  [14, 181, 32],  [91, 124, 18], [298, 366, 38],  [141, 3, 52],  [80, 179, 26],  [313, 32, 26],  [146, 280, 10], [126, 253, 8],  [220, 184, 24],  [135, 332, 8],  [365, 296, 50],  [248, 217, 8], [218, 392, 30]]
];

function clear() {
  var buttons = document.createElement('div');
  document.body.innerHTML = "";
  document.body.appendChild(buttons);
  testCases.forEach(function (data, i) {
    var button = document.createElement('button');
    button.innerHTML = String(i);
    button.onclick = function () {
      clear();
      R(data);
      return false;
    };
    buttons.appendChild(button);
  });
}

clear();

কোডটি ড্যাশড স্ট্রোক হিসাবে চেইন এবং গিয়ার দাঁত আঁক। এরপরে animateএটি stroke-dashoffsetবৈশিষ্ট্যটি প্রাণবন্ত করতে উপাদানগুলি ব্যবহার করে । ফলে প্রাপ্ত এসভিজি উপাদানটি স্বয়ংসম্পূর্ণ; কোনও জেএস-চালিত অ্যানিমেশন বা সিএসএস স্টাইলিং নেই।

জিনিসগুলি সুন্দরভাবে সাজিয়ে তোলার জন্য, দাঁতগুলির প্রতিটি গিয়ারের রিংটি আসলে দুটি আর্কে সমন্বিত একটি পথ হিসাবে আঁকা হয়, যাতে চেইনটি স্পর্শ করে যেখানে স্পর্শকেন্দ্রটি ঠিক সেই পথটি শুরু করতে পারে। এটি এটি লাইন করা অনেক সহজ করে তোলে।

তদ্ব্যতীত, এসভিজির ড্যাশড স্ট্রোক ব্যবহার করার সময় মনে হয় প্রচুর পরিমাণে ত্রুটি রয়েছে। কমপক্ষে, আমি যা দেখেছি; চেইনটি যত দীর্ঘ হবে তত খারাপ এটি প্রতিটি ক্রমাগত গিয়ারের সাথে জাল লাগবে। সুতরাং সমস্যাটি হ্রাস করতে, চেইনটি আসলে বেশ কয়েকটি পথ দিয়ে তৈরি। প্রতিটি পাথের মধ্যে একটি গিয়ারের চারপাশে একটি আর্সিং বিভাগ এবং পরবর্তী গিয়ারের জন্য একটি সোজা রেখা থাকে। তাদের ড্যাশ-অফসেটগুলি মিলের জন্য গণনা করা হয়। চেইনের পাতলা "অভ্যন্তরীণ" অংশটি অবশ্য একটি একক লুপিং পাথ, কারণ এটি অ্যানিমেটেড নয়।

Comments

দুর্দান্ত লাগছে! একটি পুরাতন (ইশ) চ্যালেঞ্জের জবাব দেওয়ার জন্য কুদোস!

— এলো

-2 বাইট:R=g=>...

— কনর ও'ব্রায়ান

@ ফ্ল্যাম্বিনো, আমি এই চ্যালেঞ্জটির জন্য আপনার সমাধানটি পছন্দ করি এবং আমি সত্যিকার অর্থে দুঃখিত যে আপনি মূল উত্সটি হারিয়েছেন, আমি এটি পুনরুদ্ধার করতে কিছু বিপরীত ইঞ্জিনিয়ারিং তৈরি করেছি, এটি এখানে পাওয়া যাবে: gist.github.com/micnic/6aec085d63320229a778c6775ec7f9aa আমি এটিকেও সংশোধন করেছি ম্যানুয়ালি 1665 বাইটে (এটি আরও

— মিনিমাইজ করা যায়

@ এমনিকিক ধন্যবাদ! আমি এটি পরীক্ষা করে দেখতে হবে! এবং চিন্তা করবেন না, আমি এটিকেও প্রকৌশলীকে বিপরীত করতে পেরেছি, তাই আমার আরও পাঠযোগ্য সংস্করণ রয়েছে। তবে, ডাং, 16 বাইট কম? যশ! আমি সময়টি পেতে পারি আমি অবশ্যই এটির চেহারা দেব

— Flambino

@ ফ্ল্যাম্বিনো, মূলত ফাইলের আকারের সবচেয়ে বড় প্রভাবটি ছিল এসভিজি কাঠামো, আমি কোনও উত্স তৈরি করিনি <g>, তবে এটি সরাসরি এসজিজি রুটে রেখেছি । এছাড়াও আপনি এমন একটি জায়গা পেয়েছিলেন যেখানে আপনি সুইপ ফ্ল্যাগ এবং বৃহত চাপের পতাকাটি ব্যবহার করে 1*x+x

— বুলেটিয়ান

Answer 2

সি # 3566 বাইট

মোটেও গল্ফ হয় না, তবে কাজ করে (আমার মনে হয়)

সম্পাদনা ইতিহাসে অসম্পূর্ণ।

জিআইএফ রেন্ডার করতে Magick.NET ব্যবহার করে।

class S{public float x,y,r;public bool c;public double i,o,a=0,l=0;public S(float X,float Y,float R){x=X;y=Y;r=R;}}class P{List<S>q=new List<S>();float x=float.MaxValue,X=float.MinValue,y=float.MaxValue,Y=float.MinValue,z=0,Z=0,N;int w=0,h=0;Color c=Color.FromArgb(32,32,32);Pen p,o;Brush b,n,m;List<PointF>C;double l;void F(float[][]s){p=new Pen(c,2);o=new Pen(c,5);b=new SolidBrush(c);n=new SolidBrush(Color.FromArgb(134,132,129));m=new SolidBrush(Color.FromArgb(100,99,97));for(int i=0;i<s.Length;i++){float[]S=s[i];q.Add(new S(S[0],S[1],S[2]));if(S[0]-S[2]<x)x=S[0]-S[2];if(S[1]-S[2]<y)y=S[1]-S[2];if(S[0]+S[2]>X)X=S[0]+S[2];if(S[1]+S[2]>Y)Y=S[1]+S[2];}q[0].c=true;z=-x+16;Z=-y+16;w=(int)(X-x+32);h=(int)(Y-y+32);for(int i=0;i<=q.Count;i++)H(q[i%q.Count],q[(i+1)%q.Count],q[(i+2)%q.Count]);C=new List<PointF>();for(int i=0;i<q.Count;i++){S g=q[i],k=q[(i+1)%q.Count];if(g.c)for(double a=g.i;a<g.i+D(g.o,g.i);a+=Math.PI/(2*g.r)){C.Add(new PointF((float)(g.x+z+g.r*Math.Cos(a)),(float)(g.y+Z+g.r*Math.Sin(a))));}else
for(double a=g.o+D(g.i,g.o);a>g.o;a-=Math.PI/(2*g.r)){C.Add(new PointF((float)(g.x+z+g.r*Math.Cos(a)),(float)(g.y+Z+g.r*Math.Sin(a))));}C.Add(new PointF((float)(g.x+z+g.r*Math.Cos(g.o)),(float)(g.y+Z+g.r*Math.Sin(g.o))));C.Add(new PointF((float)(k.x+z+k.r*Math.Cos(k.i)),(float)(k.y+Z+k.r*Math.Sin(k.i))));k.l=E(C);}l=E(C);N=(float)(K(l)/10.0);o.DashPattern=new float[]{N,N};double u=q[0].i;for(int i=0;i<q.Count;i++){S g=q[i];double L=g.l/(N*5);g.a=g.i+((1-(L%2))/g.r*Math.PI*2)*(g.c?1:-1);}List<MagickImage>I=new List<MagickImage>();for(int i=0;i<t;i++){using(Bitmap B=new Bitmap(w,h)){using(Graphics g=Graphics.FromImage(B)){g.Clear(Color.White);g.SmoothingMode=System.Drawing.Drawing2D.SmoothingMode.AntiAlias;foreach(S U in q){float R=U.x+z,L=U.y+Z,d=7+2*U.r;PointF[]f=new PointF[4];for(double a=(i*(4.0/t));a<2*U.r;a+=4){double v=U.a+((U.c?-a:a)/U.r*Math.PI),j=Math.PI/U.r*(U.c?1:-1),V=v+j,W=V+j,r=U.r+3.5;f[0]=new PointF(R,L);f[1]=new PointF(R+(float)(r*Math.Cos(v)),L+(float)(r*Math.Sin(v)));f[2]=new PointF(R+(float)(r*Math.Cos(V)),L+(float)(r*Math.Sin(V)));f[3]=new PointF(R+(float)(r*Math.Cos(W)),L+(float)(r*Math.Sin(W)));g.FillPolygon(n,f);}d=2*(U.r-1.5f);g.FillEllipse(n,R-d/2,L-d/2,d,d);d=2*(U.r-4.5f);g.FillEllipse(m,R-d/2,L-d/2,d,d);d=6;g.FillEllipse(n,R-d/2,L-d/2,d,d);}g.DrawLines(p,C.ToArray());o.DashOffset=(N*2.0f/t)*i;g.DrawLines(o,C.ToArray());B.RotateFlip(RotateFlipType.RotateNoneFlipY);B.Save(i+".png",ImageFormat.Png);I.Add(new MagickImage(B));}}}using(MagickImageCollection collection=new MagickImageCollection()){foreach(MagickImage i in I){i.AnimationDelay=5;collection.Add(i);}QuantizeSettings Q=new QuantizeSettings();Q.Colors=256;collection.Quantize(Q);collection.Optimize();collection.Write("1.gif");}}int t=5;double D(double a,double b){double P=Math.PI,r=a-b;while(r<0)r+=2*P;return r%(2*P);}double E(List<PointF> c){double u=0;for(int i=0;i<c.Count-1;i++){PointF s=c[i];PointF t=c[i+1];double x=s.X-t.X,y=s.Y-t.Y;u+=Math.Sqrt(x*x+y*y);}return u;}double K(double L){double P=4*Math.PI;int i=(int)(L/P);float a=(float)L/i,b=(float)L/(i+1);if(Math.Abs(P-a)<Math.Abs(P-b))return a;return b;}void H(S a,S b,S c){double A=0,r=0,d=b.x-a.x,e=b.y-a.y,f=Math.Atan2(e,d)+Math.PI/2,g=Math.Atan2(e,d)-Math.PI/2,h=Math.Atan2(-e,-d)-Math.PI/2,i=Math.Atan2(-e,-d)+Math.PI/2;double k=c.x-b.x,n=c.y-b.y,l=Math.Sqrt(d*d+e*e);A=D(Math.Atan2(n,k),Math.Atan2(-e,-d));bool x=A>Math.PI!=a.c;b.c=x!=a.c;if(a.r!=b.r)r=a.r+(x?b.r:-b.r);f-=Math.Asin(r/l);g+=Math.Asin(r/l);h+=Math.Asin(r/l);i-=Math.Asin(r/l);b.i=x==a.c?h:i;a.o=a.c?g:f;}}

ক্লাস পি এর একটি ফাংশন রয়েছে F; উদাহরণ:

static void Main(string[]a){
P p=new P();
float[][]s=new float[][]{
new float[]{10,200,20},
new float[]{240,200,20},
new float[]{190,170,10},
new float[]{190,150,10},
new float[]{210,120,20},
new float[]{190,90,10},
new float[]{160,0,20},
new float[]{130,170,10},
new float[]{110,170,10},
new float[]{80,0,20},
new float[]{50,170,10}
};
p.F(s);}

Comments

একটি গল্ফ সংস্করণ পোস্ট করার জন্য ধন্যবাদ! একটি ছোটখাটো বাচ্চা: আপনার জিআইএফের প্রথম স্প্রোকটটি ঘড়ির কাঁটার বিপরীতে ঘোরায়; প্রথম স্প্রোকটটি সর্বদা ঘড়ির কাঁটার দিকে ঘোরানো উচিত।

— Ell

আমি কেবল সি # কে উত্তীর্ণ হতে দেখেছি, তবে publicআপনার ক্লাসের প্রতিটি ক্ষেত্রের আগে আপনার কি সংশোধক প্রয়োজন ?

— জে আতকিন

@ জ্যাটিন প্রকৃতপক্ষে, আমি যতটা বলতে পারি এগুলি সমস্ত অপ্রয়োজনীয়। অন্যান্য বিষয়ে, পয়েন্টএফ সত্যই সিস্টেম.ড্রেইং.পয়েন্টএফএফ (তালিকা, রঙ, এবং গণিতের জন্য অনুরূপ), সুতরাং সম্পর্কিত usingধারাগুলি অন্তর্ভুক্ত করা উচিত, বা ব্যবহৃত হওয়ার সময় সম্পূর্ণরূপে যোগ্য হওয়া উচিত এবং সিস্টেম.ড্রয়িংয়ের রেফারেন্সটি অবশ্যই লক্ষ্য করা উচিত উত্তরে (আমি জানি না এমন স্কোর যুক্ত করা উচিত কিনা)। চিত্তাকর্ষক উত্তর যাইহোক।

— ভিজ্যুমেলন

@ জ্যাটিনের আমার দুটি ক্লাস, এস এবং পি রয়েছে, সুতরাং এস এর ক্ষেত্রগুলি সর্বজনীন। তাদের কঠোরভাবে প্রয়োজন হয় কিনা তা নিশ্চিত নই, তবে আমিও তাই মনে করি ..

— টিফিল্ড

Answer 3

জাভাস্ক্রিপ্ট (ES6) 1626 বাইট

এই সমাধানটি @ ফ্ল্যাম্বিনো এর সমাধানের বিপরীত প্রকৌশল ফলাফল, আমি এটি তার চুক্তি সহ পোস্ট করি।

R=g=>{with(Math){v='stroke';j=v+'-dasharray';q=v+'-dashoffset';m='appendChild';n='getTotalLength';b='setAttribute';z='#888';k=document;V=(x,y,r,o)=>o={x,y,r,l:sqrt(x*x+y*y),a:v=>V(x+v.x,y+v.y),s:v=>o.a(v.m(-1)),m:f=>V(x*f,y*f),t:r=>V(x*cos(r)-y*sin(r),x*sin(r)+y*cos(r)),c:v=>x*v.y-y*v.x,toString:_=>x+','+y};S=(e,a)=>Object.keys(a).map(n=>e[b](n,a[n]))&&e;T=(t,a)=>S(k.createElementNS('http://www.w3.org/2000/svg',t),a);C=(e,a)=>S(e.cloneNode(),a);w=h=-(x=y=1/0);G=g.map((a,g)=>(g=V(...a))&&(u=(g.r=a[2])+5,x=min(x,g.x-u),y=min(y,g.y-u),w=max(w,g.x+u),h=max(h,g.y+u))&&g);f=G[0];w-=x;h-=y;s=T('svg',{width:w,height:h,viewBox:x+' '+y+' '+w+' '+h,transform:'scale(1,-1)'});c='';L=(c)=>(h=G.length)&&G.map((g,i)=>c(G[i],G[(h+i-1)%h],G[(i+1)%h]))&&L;L((g,p,n)=>g.w=(p.s(g).c(n.s(g))>0))((g,p,n)=>{d=g.s(n),y=x=1/d.l;g.w!=n.w?(p=asin((g.r+n.r)*x),g.w?(x=-x,p=-p):(y=-y)):(p=asin((g.r-n.r)*x),g.w&&(x=y=-x,p=-p));t=d.t(p+PI/2);g.o=t.m(x*g.r).a(g);n.i=t.m(y*n.r).a(n)})((g,p,n)=>{l=(p.o.s(n.i).l<g.i.s(g.o).l);d=(l,e)=>`A${g.r} ${g.r} 0 ${+l} ${+!g.w} ${e}`;a=d(l,g.o);e=(f,r)=>T('circle',{cx:g.x,cy:g.y,r,fill:f});c+=a+'L'+n.i;s[m](e(z,g.r-1.5));s[m](e('#666',g.r-4.5));s[m](e(z,3));g.p=s[m](C(g.e=s[m](T('path',{d:'M'+g.i+a+d(!l,g.i),fill:'none',[v]:z,[v+'-width']:5})),{d:'M'+g.i+a+'L'+n.i,[v]:'#222'}))});c=C(f.p,{d:'M'+f.i+c,[v+'-width']:2});g=c[n]();y=8*(x=g/round(g/(4*PI))/2);f.g=x;f.h=0;L((g,p)=>{g!=f&&(g.g=p.g+p.p[n](),g.h=p.h+p.p[n]());S(g.p,{[j]:x,[q]:g.h})[m](C(S(g.e,{[j]:x,[q]:g.g})[m](T('animate',{attributeName:[q],from:g.g+y,to:g.g,repeatCount:'indefinite',dur:'1s'})),{from:g.h+y,to:g.h}))});k.body[m](s)[m](c)}}

অবারিত সংস্করণ:

class Vector {

    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.length = Math.sqrt(x * x + y * y);
    }

    add(vector) {

        return new Vector(this.x + vector.x, this.y + vector.y);
    }

    subtract(vector) {

        return new Vector(this.x - vector.x, this.y - vector.y);
    }

    multiply(scalar) {

        return new Vector(this.x * scalar, this.y * scalar);
    }

    rotate(radians) {

        const cos = Math.cos(radians);
        const sin = Math.sin(radians);

        return new Vector(this.x * cos - this.y * sin, this.x * sin + this.y * cos);
    }

    cross(vector) {

        return this.x * vector.y - this.y * vector.x;
    }

    toString() {

        return `${this.x},${this.y}`;
    }
}

class Gear {

    constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
    }

    getVector() {

        return new Vector(this.x, this.y);
    }
}

const setAttributes = (element, attributes) => {

    Object.keys(attributes).forEach((attribute) => {
        element.setAttribute(attribute, attributes[attribute]);
    });
};

const createElement = (tagName, attributes) => {

    const element = document.createElementNS('http://www.w3.org/2000/svg', tagName);

    setAttributes(element, attributes);

    return element;
};

const cloneElement = (element, attributes) => {

    const clone = element.cloneNode();

    setAttributes(clone, attributes);

    return clone;
};

const createPath = (attributes) => {

    return createElement('path', {
        ...attributes,
        fill: 'none'
    });
};

const createCircle = (cx, cy, r, fill) => {

    return createElement('circle', {
        cx,
        cy,
        r,
        fill
    });
};

const loopGears = (gears, callback) => {

    const length = gears.length;

    gears.forEach((gear, index) => {

        const prevGear = gears[(length + index - 1) % length];
        const nextGear = gears[(index + 1) % length];

        callback(gear, prevGear, nextGear);
    });
};

const arcDescription = (radius, largeArcFlag, sweepFlag, endVector) => {

    return `A${radius} ${radius} 0 ${+largeArcFlag} ${+sweepFlag} ${endVector}`;
};

const renderGears = (data) => {

    let x = Infinity;
    let y = Infinity;
    let w = -Infinity;
    let h = -Infinity;

    const gears = data.map((params) => {

        const gear = new Gear(...params);
        const unit = params[2] + 5;

        x = Math.min(x, gear.x - unit);
        y = Math.min(y, gear.y - unit);
        w = Math.max(w, gear.x + unit);
        h = Math.max(h, gear.y + unit);

        return gear;
    });

    const firstGear = gears[0];

    w -= x;
    h -= y;

    const svg = createElement('svg', {
        width: w,
        height: h,
        viewBox: `${x} ${y} ${w} ${h}`,
        transform: `scale(1,-1)`
    });

    let chainPath = '';

    loopGears(gears, (gear, prevGear, nextGear) => {

        const gearVector = gear.getVector();
        const prevGearVector = prevGear.getVector().subtract(gearVector);
        const nextGearVector = nextGear.getVector().subtract(gearVector);

        gear.sweep = (prevGearVector.cross(nextGearVector) > 0);
    });

    loopGears(gears, (gear, prevGear, nextGear) => {

        const diffVector = gear.getVector().subtract(nextGear.getVector());

        let angle = 0;
        let x = 1 / diffVector.length;
        let y = x;

        if (gear.sweep === nextGear.sweep) {

            angle = Math.asin((gear.radius - nextGear.radius) * x);

            if (gear.sweep) {
                x = -x;
                y = -y;
                angle = -angle;
            }
        } else {

            angle = Math.asin((gear.radius + nextGear.radius) * x);

            if (gear.sweep) {
                x = -x;
                angle = -angle;
            } else {
                y = -y;
            }
        }

        const perpendicularVector = diffVector.rotate(angle + Math.PI / 2);

        gear.out = perpendicularVector.multiply(x * gear.radius).add(gear.getVector());
        nextGear.in = perpendicularVector.multiply(y * nextGear.radius).add(nextGear.getVector());
    });

    loopGears(gears, (gear, prevGear, nextGear) => {

        const largeArcFlag = (prevGear.out.subtract(nextGear.in).length < gear.in.subtract(gear.out).length);
        const arcPath = arcDescription(gear.radius, largeArcFlag, !gear.sweep, gear.out);

        const gearExterior = createCircle(gear.x, gear.y, gear.radius - 1.5, '#888');
        const gearInterior = createCircle(gear.x, gear.y, gear.radius - 4.5, '#666');
        const gearCenter = createCircle(gear.x, gear.y, 3, '#888');

        const gearTeeth = createPath({
            d: `M${gear.in}${arcPath}${arcDescription(gear.radius, !largeArcFlag, !gear.sweep, gear.in)}`,
            stroke: '#888',
            'stroke-width': 5
        });

        const chainParts = cloneElement(gearTeeth, {
            d: `M${gear.in}${arcPath}L${nextGear.in}`,
            stroke: '#222'
        });

        gear.teeth = gearTeeth;
        gear.chainParts = chainParts;

        chainPath += `${arcPath}L${nextGear.in}`;

        svg.appendChild(gearExterior);
        svg.appendChild(gearInterior);
        svg.appendChild(gearCenter);
        svg.appendChild(gearTeeth);
        svg.appendChild(chainParts);
    });

    const chain = cloneElement(firstGear.chainParts, {
        d: 'M' + firstGear.in + chainPath,
        'stroke-width': 2
    });

    const chainLength = chain.getTotalLength();
    const chainUnit = chainLength / Math.round(chainLength / (4 * Math.PI)) / 2;
    const animationOffset = 8 * chainUnit;

    loopGears(gears, (gear, prevGear) => {

        if (gear === firstGear) {
            gear.teethOffset = chainUnit;
            gear.chainOffset = 0;
        } else {
            gear.teethOffset = prevGear.teethOffset + prevGear.chainParts.getTotalLength();
            gear.chainOffset = prevGear.chainOffset + prevGear.chainParts.getTotalLength();
        }

        setAttributes(gear.teeth, {
            'stroke-dasharray': chainUnit,
            'stroke-dashoffset': gear.teethOffset
        });

        setAttributes(gear.chainParts, {
            'stroke-dasharray': chainUnit,
            'stroke-dashoffset': gear.chainOffset
        });

        const animate = createElement('animate', {
            attributeName: 'stroke-dashoffset',
            from: gear.teethOffset + animationOffset,
            to: gear.teethOffset,
            repeatCount: 'indefinite',
            dur: '1s'
        });

        const cloneAnimate = cloneElement(animate, {
            from: gear.chainOffset + animationOffset,
            to: gear.chainOffset
        });

        gear.teeth.appendChild(animate);
        gear.chainParts.appendChild(cloneAnimate);
    });

    svg.appendChild(chain);
    document.body.appendChild(svg);
};

var testCases = [
    [[0, 0, 16],  [100, 0, 16],  [100, 100, 12],  [50, 50, 24],  [0, 100, 12]],
    [[0, 0, 26],  [120, 0, 26]],
    [[100, 100, 60],  [220, 100, 14]],
    [[100, 100, 16],  [100, 0, 24],  [0, 100, 24],  [0, 0, 16]],
    [[0, 0, 60],  [44, 140, 16],  [-204, 140, 16],  [-160, 0, 60],  [-112, 188, 12], [-190, 300, 30],  [30, 300, 30],  [-48, 188, 12]],
    [[0, 128, 14],  [46.17, 63.55, 10],  [121.74, 39.55, 14],  [74.71, -24.28, 10], [75.24, -103.55, 14],  [0, -78.56, 10],  [-75.24, -103.55, 14],  [-74.71, -24.28, 10], [-121.74, 39.55, 14],  [-46.17, 63.55, 10]],
    [[367, 151, 12],  [210, 75, 36],  [57, 286, 38],  [14, 181, 32],  [91, 124, 18], [298, 366, 38],  [141, 3, 52],  [80, 179, 26],  [313, 32, 26],  [146, 280, 10], [126, 253, 8],  [220, 184, 24],  [135, 332, 8],  [365, 296, 50],  [248, 217, 8], [218, 392, 30]]
];

function clear() {
    var buttons = document.createElement('div');
    document.body.innerHTML = "";
    document.body.appendChild(buttons);
    testCases.forEach(function (data, i) {
        var button = document.createElement('button');
        button.innerHTML = String(i);
        button.onclick = function () {
            clear();
            renderGears(data);
            return false;
        };
        buttons.appendChild(button);
    });
}

clear();

Comments

আপনি এই সরঞ্জামটি ব্যবহার করে 250 টিরও বেশি বাইট সংরক্ষণ করতে পারেন ।