ডিজাইনারের জন্য আকর্ষণীয় প্রোগ্রামিং গাইডেন্স-আপনার ছবি চলমান করুন (প্রথম পর্ব): 16 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:03

দৌড়! দৌড়! দৌড়!

প্রোগ্রামিং এত কঠিন নয়। মূল বিষয় হল আপনার ছন্দ খুঁজে বের করা এবং একে একে এটি করা।

এই অধ্যায়টি পড়ার আগে, আমি আশা করি আপনি ইতিমধ্যে মৌলিক ফাংশন অঙ্কন পদ্ধতির সাথে পরিচিত হয়েছেন, অথবা আপনি দুটি বড় হেড ফাংশন দ্বারা মাথা ঘোরা এবং বিভ্রান্ত বোধ করবেন: সেটআপ এবং ড্র।

যেহেতু আমরা গতিশীল গ্রাফিক্স তৈরি করতে চাই, তাই আমাদের জানতে হবে কিভাবে অ্যানিমেশন তৈরি হয়।

উপরের ছবিটি বেশ আকর্ষণীয় মনে হচ্ছে এবং অ্যানিমেশনের বাস্তবায়ন নীতিটি দৃশ্যত প্রকাশ করে।

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

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

ধাপ 1: পরিবর্তনশীল

ভেরিয়েবল হল ডেটার জন্য ধারক। এটি একটি প্রোগ্রামের মধ্যে বারবার ব্যবহার করা যেতে পারে।

উদাহরণ স্বরূপ:

[cceN_cpp থিম = "ভোর"] আকার (500, 500); উপবৃত্ত (100, 250, 50, 50); উপবৃত্ত (200, 250, 50, 50); উপবৃত্ত (300, 250, 50, 50); উপবৃত্ত (400, 250, 50, 50);

[/cceN_cpp]

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

একটি ভেরিয়েবল যোগ করার পরে কোডটি এখানে:

[cceN_cpp থিম = "ভোর"] আকার (500, 500); int a = 50; উপবৃত্ত (100, 250, a, a); উপবৃত্ত (200, 250, a, a); উপবৃত্ত (300, 250, a, a); উপবৃত্ত (400, 250, a, a);

[/cceN_cpp]

আমরা একটি সম্পূর্ণ একই ফলাফল পেতে!

যেহেতু আমরা পরিবর্তনশীল a সংজ্ঞায়িত করেছি, আমরা সুবিধামত প্যারামিটার পরিবর্তন করতে পারি। যদি আমরা a = 50 কে a = 100 এ পরিবর্তন করি, তাহলে সমস্ত বৃত্তের প্রস্থ এবং উচ্চতা 100 সমান হয়ে যাবে। সুতরাং আমাদের একে একে প্যারামিটার পরিবর্তন করতে হবে না। পরিবর্তনশীল সত্যিই একটি ভাল আবিষ্কার।

ধাপ 2: ভেরিয়েবলের সৃষ্টি

ভেরিয়েবল ব্যবহার করার আগে, আমাদের বিবৃতি দিতে হবে এবং এর ডেটা টাইপ নির্ধারণ করতে হবে।

int i;

আমি ＝ 50;

কোডের প্রথম বাক্য একটি পরিবর্তনশীল i এর জন্য একটি বিবৃতি দিয়েছে। int হল একটি প্রতীক যা মূলত পরিবর্তনশীল ঘোষণা করতে ব্যবহৃত হয়। ঘোষণার সময়, এটি কম্পিউটার মেমরিতে একটি কক্ষ খুলে দেবে, যা একটি "বাক্স" তৈরির সমতুল্য, বিশেষ করে পূর্ণসংখ্যা ডেটা পুনরুদ্ধার করতে ব্যবহৃত হয়। দ্বিতীয় বাক্যটি ভেরিয়েবল i দ্বারা বাস্তবায়িত করা অ্যাসাইনমেন্ট 50 তৈরির জন্য দাঁড়িয়েছে। এই বাক্যটি বাস্তবায়নের পরে, ডেটা ভেরিয়েবল i তে স্থিরভাবে সংরক্ষণ করা হবে। অথবা আপনি উপরের দুটি বাক্যকে এক সাথে একত্রিত করতে এবং বিবৃতি দেওয়ার সময় সম্পূর্ণ অ্যাসাইনমেন্ট করতে অলস হতে পারেন।

int i ＝ 50;

এটি একটি পরিবর্তনশীল নামকরণ তুলনামূলকভাবে বিনামূল্যে। কিন্তু কখনও কখনও আমাদের কোন কিছুর প্রতি মনোযোগ দিতে হয়।

ধাপ 3: ভেরিয়েবলের নামকরণ নিয়ন্ত্রণ

• এটি বর্ণমালা এবং আন্ডারলাইনের সমন্বয় হতে হবে। এটি একটি প্রতীক বা একটি শব্দ হতে পারে।

Sensitive কেস সংবেদনশীল নাম এবং নাম বিভিন্ন ভেরিয়েবলের জন্য দাঁড়াতে পারে।

One এটিকে যতটা সম্ভব সহজ করার চেষ্টা করুন যাতে আপনি এক দৃষ্টিতে বুঝতে পারেন। প্রাথমিক অক্ষরটি একটি সংখ্যা বা একটি বিশেষ অক্ষরের পরিবর্তে একটি বর্ণমালা হতে হবে।

Int কোন মূল শব্দ যেমন int, float

নিম্নলিখিত কিছু ভুল বিবৃতি।

int $ a;

int 89b;

এখানে সঠিক বিবৃতি আছে:

int r;

int super_24;

int openTheDoor;

ধাপ 4: পরিবর্তনশীল প্রকার

পূর্ণসংখ্যা ডেটা ঘোষণা করা ব্যতীত, আমরা কী শব্দ ফ্লোট দিয়ে দশমিক তথ্য (যাকে ভাসমান বিন্দু ডেটাও বলা হয়) ঘোষণা করতে পারি।

ভাসমান বি = 0.5

আমাদের স্টেটমেন্টের জন্য আমরা কোন ধরনের ডেটা টাইপ ব্যবহার করেছি তা আমাদের মনে রাখতে হবে। যদি আমরা মূল শব্দ int ব্যবহার করে থাকি, পরের অ্যাসাইনমেন্ট i ＝ 0.5 বা এরকম কিছু লিখতে পারে না, অথবা প্রোগ্রাম ত্রুটি হয়ে যাবে। কিন্তু যদি আমরা বিপরীতভাবে লিখি, তাহলে সব ঠিক আছে। উদাহরণস্বরূপ, float i = 5 হল সঠিক ব্যাকরণ কিন্তু প্রোগ্রাম এটি দশমিক সংখ্যা হিসেবে স্বীকৃতি দেবে।

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

ধাপ 5: অপারেটর

নিম্নলিখিতগুলি প্রক্রিয়াকরণের অপারেটর:

+ প্লাস

- বিয়োগ

* গুণ

বিভক্ত করা

％ অবশিষ্ট মডুলাস

আপনি %ছাড়া এই সমস্ত অপারেটরের সাথে পরিচিত হতে হবে। এটি বেশ অদ্ভুত বলে মনে হয় কারণ এর ফলাফল বাকি। 9%3 হল 0.

অপারেটর অ্যাসাইনমেন্ট এবং ভেরিয়েবলের মধ্যে ব্যবহার করা যেতে পারে।

[cceN_cpp থিম = "ভোর"] int a = 1; // পূর্ণসংখ্যা ভেরিয়েবল a ঘোষণা করুন, অ্যাসাইনমেন্ট হল 1. int b = 2; // পূর্ণসংখ্যা ভেরিয়েবল b ঘোষণা করুন, অ্যাসাইনমেন্ট হল 2. int c; // পূর্ণসংখ্যা পরিবর্তনশীল ঘোষণা করুন গ। c = a + b; // প্লাস দুটি অ্যাসাইনমেন্ট এবং এর ফলাফল c- এ বরাদ্দ করুন। মুদ্রণ (গ); // আউটপুট পরিবর্তনশীল গ।

[/cceN_cpp]

ধাপ 6: অপারেশন ফলাফল:

আউটপুট ফলাফল উইন্ডোতে প্রদর্শিত হবে না কিন্তু নীচে কনসোলে।

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

পঞ্চম লাইনে প্রিন্ট ফাংশন কনসোলে ভেরিয়েবল প্রিন্ট করতে পারে, যা প্রায়ই ডেটা আউটপুটের অবস্থা পরীক্ষা করতে ব্যবহৃত হয়।

ধাপ 7: অপারেশন রেগুলেশন

প্রক্রিয়াকরণে একটি ঝামেলাপূর্ণ বিষয় হল আমাদের ভেরিয়েবলের ধরন স্পষ্ট করতে হবে। ভাসমান বিন্দু সংখ্যা এবং পূর্ণসংখ্যা টাইপের প্রক্রিয়ায় আমাদের বিশেষ মনোযোগ দিতে হবে।

মুদ্রণ （6/5; // ফলাফল 1

পূর্ণসংখ্যার মধ্যে অপারেশনে একটি নতুন পূর্ণসংখ্যা থাকবে। 6 কে 5 দিয়ে ভাগ করলে 1.2 হয়। কিন্তু প্রোগ্রাম আউটপুট ফলাফল 1. এটা আমাদের অন্তর্দৃষ্টি বিপরীত। প্রোগ্রাম বৃত্তাকার মোকাবেলা করবে না কিন্তু দশমিক বিন্দুর পিছনের সংখ্যাটি মুছে দেবে।

মুদ্রণ (6.0 / 5.0); // ফলাফল 1.2

ভাসমান পয়েন্টগুলির মধ্যে অপারেশনের ফলে একটি নতুন ভাসমান পয়েন্ট নম্বর আসবে। যদি প্রকৃত ফলাফল 1.2 হয়, প্রোগ্রাম আউটপুট ফলাফল একই হবে।

মুদ্রণ (6 / 5.0); // ফলাফল 1.2

মুদ্রণ (6.0 / 5); // ফলাফল 1.2

অবশেষে এটি পূর্ণসংখ্যা এবং ভাসমান বিন্দু সংখ্যার মিশ্রণ। চূড়ান্ত আউটপুট ফলাফল 1.2 হবে।

• প্রকৃতপক্ষে, আপনাকে মনে রাখতে হবে যে এই নিয়ন্ত্রক নকশার লক্ষ্য হল ডেটার নির্ভুলতা নষ্ট না করা। সুতরাং যদি একটি উপাদান একটি ভাসমান বিন্দু সংখ্যা হয়, তাহলে ফলাফলটিও ভাসমান বিন্দু সংখ্যা হবে।

ধাপ 8: ফাংশন সেট করুন এবং ফাংশন আঁকুন

পূর্বে আমরা গ্রাউন্ডিং জ্ঞানের একটি স্ট্যাকের কথা বলেছি। এখন, আমরা অবশেষে আকর্ষণীয় কিছু খেলতে আসি। ফাংশন সেটআপ এবং ড্র প্রক্রিয়াকরণের প্রধান ফাংশনের সমতুল্য। এই দুটি ফাংশন খুবই বিশেষ। এটি প্রোগ্রামের পদ্ধতি নিয়ন্ত্রণ করতে পারে। তুলনামূলকভাবে জটিল প্রোগ্রামে এই দুটি ফাংশন অন্তর্ভুক্ত থাকবে কারণ এগুলি প্রোগ্রামের জন্য মৌলিক ফ্রেম। বিন্যাস:

অকার্যকর সেটআপ(){

}

অকার্যকর ড্র () {

}

বিশেষ ব্যবহার তাদের আহ্বান বিন্যাস অন্যান্য ফাংশন থেকে ভিন্ন করে তোলে। আমাদের ফাংশন নামের আগে "অকার্যকর" যোগ করতে হবে, যা "ফেরত মান" এর জন্য নয়। ফাংশন নামের পিছনে, আমাদের বন্ধনী এবং বন্ধনী যোগ করতে হবে।

[cceN_cpp থিম = "ভোর"] অকার্যকর সেটআপ () {মুদ্রণ (1); } অকার্যকর ড্র () {মুদ্রণ (2); } [/cceN_cpp]

আসুন একটি উদাহরণ দেখুন:

যখন অপারেশন বোতাম টিপুন, কনসোল প্রথমে "1" আউটপুট করবে এবং তারপরে ক্রমাগত "2" আউটপুট করবে যতক্ষণ না আপনি ডাউন স্টপ বোতাম টিপেন বা উইন্ডো বন্ধ না করেন।

সেটআপ ফাংশনে বন্ধনীগুলির মধ্যে কোড শুধুমাত্র একবারের জন্য প্রয়োগ করা হবে।

এই চরিত্রের কারণে, সেটআপটি সাধারণত পরিবেশগত সম্পত্তি শুরু করতে ব্যবহৃত হয়, যেমন পর্দার প্রস্থ এবং উচ্চতা, পটভূমির রঙ এবং সমস্ত ধরণের ভেরিয়েবলের অ্যাসাইনমেন্ট। ক্রমাগত পরিবর্তিত গ্রাফিক্স তৈরির জন্য আমরা প্রায়ই অঙ্কন ফাংশনগুলিকে ফাংশন ড্রতে রাখি।

ধাপ 9: অনুভূমিক আন্দোলনে বৃত্ত

ফাংশন ড্র দিয়ে, আমরা আমাদের অ্যানিমেশন তৈরি শুরু করতে পারি। প্রক্রিয়াকরণের মাধ্যমে অ্যানিমেশন প্রভাব লেখার পদ্ধতিটি বেশ "বিশ্রী"। এটির কোন অস্তিত্ব নেই। উদাহরণস্বরূপ, বক্ররেখা করার জন্য একটি নির্দিষ্ট আকৃতি নির্ধারণ করুন।

আমাদের নিজেদের দ্বারা এই বিবরণগুলি সংজ্ঞায়িত করতে হবে। আপনাকে অবশ্যই প্রোগ্রামকে বলতে হবে প্রতিটি ফ্রেমে কোন ধরনের গ্রাফিক্স প্রয়োজন।

এটিতে নিম্নলিখিত কোডটি লিখুন (এখন এটি হাত দিয়ে শুরু করা যাক):

[cceN_cpp থিম = "ভোর"] int x; int y; অকার্যকর সেটআপ () {আকার (300, 300); x = 0; y = উচ্চতা/2; } অকার্যকর ড্র () {পটভূমি (234, 113, 107); noStroke (); উপবৃত্ত (x, y, 50, 50); x = x+1; }

[/cceN_cpp]

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

x = x + 1

এটিকে গাণিতিক সমীকরণ হিসেবে দেখবেন না, অথবা এটি খুব অদ্ভুত হবে। এখানে, "＝" হল নিয়োগের প্রতীক। এটি বাম ভেরিয়েবলে ডান সংখ্যা স্থাপনের প্রতিনিধিত্ব করে। ধরুন x 50, কোডটি একবার চালু হলে, "＝" এর ডান দিকটি 50+1, অর্থাৎ 51 এর সমান। সুতরাং x এর মান 51 হয়ে যায়।

প্রোগ্রামের পদ্ধতি অনুসরণ করুন, প্রতিবার ফাংশন ড্র একবারের জন্য কাজ করলে, x এর মান 1 বৃদ্ধি পাবে। তাই প্রতিবার যখন আমরা আঁকবো, বৃত্তটি পূর্ববর্তী ফ্রেমের তুলনায় অনুভূমিকভাবে একটি পিক্সেল দিক সরিয়ে নেবে। অতএব, গ্রাফিক গতিশীল হয়ে ওঠে।

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

Program প্রোগ্রামে ফাঁকা স্থান এবং লাইন বিরতির প্রতীক প্রোগ্রামকে প্রভাবিত করবে না। তাই আমরা যদি এক বা কম টাইপ করি ঠিক আছে।

এটি প্রকাশ করার আরেকটি সহজ উপায়। পরিবর্তনশীল বৃত্তটি স্বয়ংক্রিয়ভাবে 1 বৃদ্ধি করতে, আমাদের এটিকে নিম্নলিখিত বিন্যাসে লিখতে হবে।

বৃত্ত ＝ বৃত্ত 1

বেশ অসুবিধাজনক! যদি ভেরিয়েবলের নাম দীর্ঘ হয়, তাহলে আমাদের আরো শব্দ টাইপ করতে হবে। সুতরাং আমাদের অলস পূর্বসূরিরা এরকম একটি ধারণা বের করে।

বৃত্ত ＋＋

এটা কি খুব সহজ নয়? এর অর্থ হল স্বয়ংক্রিয়ভাবে 1 বৃদ্ধি। এর অনুরূপ, আছে - -, যার অর্থ স্বয়ংক্রিয়ভাবে 1 হ্রাস পায়।

কিন্তু যদি আমরা আশা করি যে স্বয়ংক্রিয় বৃদ্ধির পরিমাণ 2 এর মত অন্য সংখ্যা, তাহলে আমাদের অন্য এক্সপ্রেশন চেষ্টা করতে হবে।

বৃত্ত += 2

এই সমান

বৃত্ত = বৃত্ত + 2

একইভাবে আছে - ＝, /=, *=।

ধাপ 10: আন্দোলনের দিকনির্দেশ

গ্রাফিক কোন দিকে চলে তা নির্ভর করে কিভাবে আপনি আপনার সমন্বয় পরিবর্তন করেন। যদি এটি y -y -1 এ পরিবর্তন করা হয়, তাহলে বৃত্তটি নিচের দিকে চলে যাবে। যদি উভয়এক্স এবং ওয়াই 1 বৃদ্ধি পায়, বৃত্তটি ডান নীচে নীচের দিকে চলে যাবে। যদি আমরা এটিকে একটি বিয়োগ চিহ্ন হিসাবে লিখি, এটি বিপরীত দিকে চলে যাবে।

[cceN_cpp থিম = "ভোর"] int x, y; // একই সময়ে একাধিক ভেরিয়েবল ঘোষণা করতে পারে, আলাদা করতে কমা ব্যবহার করুন। অকার্যকর সেটআপ () {আকার (300, 300); x = 0; y = 0; } অকার্যকর ড্র () {পটভূমি (234, 113, 107); noStroke (); উপবৃত্ত (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

চলাচলের হার

ফাংশন ড্র এর মধ্যে ডিফল্ট 60 ফ্রেম প্রতি সেকেন্ড মনে আছে? এই হার অনুযায়ী, উপরের বৃত্তটি ডান দিকে 60 পিক্সেল প্রতি সেকেন্ডে চলে যাবে।

আমরা যদি গ্রাফিক মুভমেন্ট রেট পরিবর্তন করতে চাই, তাহলে দুটি পদ্ধতি আছে: একটি হল এটি প্রতিবার পরিবর্তিত হওয়ার পর থেকে x মান বৃদ্ধি করা।

x ＝ x ＋ 10

এটি মূলের তুলনায় 10 গুণ গতি বাড়িয়েছে!

অন্য পদ্ধতি হল ক্যানভাস রিফ্রেশ করার ফ্রিকোয়েন্সি পরিবর্তন করা। চক্রের হার()

এই ফাংশনটি ক্যানভাসের সম্প্রচারের ফ্রিকোয়েন্সি পরিবর্তন করতে পারে। ফ্রেমরেট (10) ফাংশন সেটআপে লিখুন, এটি প্রতি সেকেন্ডে আসল 60 ফ্রেম প্রতি সেকেন্ডে 10 ফ্রেমে পরিবর্তন করবে। গতি আগের তুলনায় 6 বার ধীর হয়েছে।

ধাপ 11: উপেক্ষিত পটভূমি

পূর্ববর্তী সমস্ত উদাহরণ ফাংশন ড্রতে ব্যাকগ্রাউন্ড লিখে। আপনি কি কখনও এটি ফাংশন সেটআপ লিখতে চিন্তা করেছেন? এতে কি কোন পার্থক্য থাকবে? এখন, অনুভূমিক আন্দোলনের উদাহরণ আপডেট করা যাক।

[cceN_cpp থিম = "ভোর"] int x, y; অকার্যকর সেটআপ () {আকার (300, 300); পটভূমি (234, 113, 107); x = 0; y = উচ্চতা/2; } অকার্যকর ড্র () {noStroke (); উপবৃত্ত (x, y, 50, 50); x += 1; } [/cceN_cpp]

কি হয়ছে? হয়তো এটা ঠিকমতো সমস্যার উৎপাদনের কারণ বুঝতে পারে না। ফাংশন noStroke মুছুন, আবার স্ট্রোক যোগ করুন, এবং বৃত্তের চলাচলের পথ দেখুন।

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

Repeated এই পুনরাবৃত্তি না অঙ্কন পদ্ধতি খুব বিশেষ প্রভাব তৈরি করতে পারে যদি সঠিকভাবে ব্যবহার করা হয়। আপনি নিচের কোডটি কপি করে দেখতে পারেন।

[cceN_cpp থিম = "ভোর"] অকার্যকর সেটআপ () {সাইজ (400, 400); } void draw () {ellipse (width/2-mouseX, height/2-mouseX, mouseY, mouseY); ellipse (প্রস্থ/2-mouseX, উচ্চতা/2+mouseX, mouseY, mouseY); উপবৃত্ত (প্রস্থ/2+mouseX, উচ্চতা/2-mouseX, mouseY, mouseY); উপবৃত্ত (প্রস্থ/2+mouseX, উচ্চতা/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

এখানে আমরা ম্যাজিক ভেরিয়েবল mouseX এবং mouseY ব্যবহার করেছি। পরবর্তীতে আমরা এটি সম্পর্কে বিস্তারিত আলোচনা করব।

ধাপ 12: কাঁপানো বৃত্ত

আমি যদি বৃত্তের চলাচলের দিক অনিয়মিত করতে চাই? চতুরতার সাথে র্যান্ডম ফাংশনের সাথে, আপনি এই প্রভাবটিও উপলব্ধি করতে পারেন। এলোমেলো একটি ঘন ঘন ব্যবহৃত ফাংশন। এটি এলোমেলো ফাংশন তৈরি করতে ব্যবহার করা যেতে পারে। এটি একটি ট্র্যাকহীন আত্মার মত। একবার ভেরিয়েবলের সাথে সম্পর্কিত হয়ে গেলে, আপনি কল্পনা করতে পারবেন না যে পরবর্তীতে কি হবে।

বিন্যাস আহ্বান:

এলোমেলো (উচ্চ)

উচ্চ এলোমেলো উচ্চ সীমা প্রতিনিধিত্ব করে, এবং ডিফল্ট নীচের সীমা হল 0. উদাহরণস্বরূপ, এলোমেলো (10)। এটি এলোমেলোভাবে 0 থেকে 10 পর্যন্ত একটি সংখ্যা তৈরি করবে (0 অন্তর্ভুক্ত কিন্তু 10 অন্তর্ভুক্ত নয়)।

এলোমেলো (নিম্ন, উচ্চ)

যদি আমরা দুটি প্যারামিটার সেট করি, তাহলে এটি তাদের মধ্যে এলোমেলো মান ফিরে আসবে উদাহরণস্বরূপ, এলোমেলো (5, 10)। এটি এলোমেলোভাবে 5 থেকে 10 পর্যন্ত একটি সংখ্যা তৈরি করবে (5 অন্তর্ভুক্ত কিন্তু 10 অন্তর্ভুক্ত নয়)।

উদাহরণ:

[cceN_cpp থিম = "ভোর"] ফ্লোট এক্স;

x = এলোমেলো (50, 100);

মুদ্রণ (x); [/cceN_cpp]

আমরা যখনই প্রোগ্রামটি চালাব, কনসোলটি বিভিন্ন মান বের করবে।

• দ্রষ্টব্য: র্যান্ডম ফাংশন দ্বারা তৈরি মানগুলি ভাসমান বিন্দু প্রকারের (দশমিক সংখ্যা প্রকার) অন্তর্গত। যদি আমরা পূর্ণসংখ্যা পরিবর্তনশীল একটি মান বরাদ্দ করতে চান, আমরা ফাংশন int () মাধ্যমে এটি রূপান্তর করতে হবে। রূপান্তর বৃত্তাকার মেনে চলে না কিন্তু সরাসরি দশমিক অংশ মুছে ফেলুন। এভাবে int (random (5)) এর আউটপুট আছে মাত্র 5 টি সম্ভাবনা: 0, 1, 2, 3, 4।

আমরা র্যান্ডম ফাংশন ব্যবহারের সাথে পরিচিত হওয়ার পরে, আমরা নীচের ক্ষেত্রে সরাসরি আসতে পারি।

[cceN_cpp থিম = "ভোর"] int x, y; অকার্যকর সেটআপ () {আকার (300, 300); x = প্রস্থ/2; y = উচ্চতা/2; } অকার্যকর ড্র () {পটভূমি (234, 113, 107); noStroke (); x += int (এলোমেলো (-5, 5)); y += int (এলোমেলো (-5, 5)); উপবৃত্ত (x, y, 50, 50); }

[/cceN_cpp]

আগের যোগ করা স্থানাঙ্ক মান স্থির করা হয়। শুধুমাত্র যদি আমরা একটি এলোমেলো মান বৃদ্ধি করি, তাহলে বৃত্তটি অনির্দিষ্ট দিকে চলে যাবে। বড় এলোমেলো পরিসরের সাথে, এটি আরও ঘন ঘন ঝাঁকুনি দেয়। যেহেতু ফ্রেমের মধ্যে মান পরিবর্তন বাউন্স, তাই আন্দোলন আর মসৃণ হবে না। আগের ফ্রেমটি (150, 150) এ থাকলে, পরের ফ্রেমটি এক ঝলকে (170, 170) অবস্থানে চলে যাবে।

ধাপ 13: স্থানান্তর বৃত্ত

স্থানান্তরিত বৃত্ত

এটা কি মসৃণ আন্দোলন তৈরি করবে? ফাংশন শব্দ আমাদের সাহায্য করতে পারে। এটি স্ট্যান্ডার্ড এলোমেলো তুলনায় ভাল ছন্দ আছে। এবং এলোমেলোভাবে উৎপন্ন এলোমেলো সংখ্যা ক্রমাগত হয়।

বিন্যাস আহ্বান:

শব্দ (টি)

ফাংশন শব্দ তার আউটপুট পরিসীমা নির্ধারণ করতে পারে না। প্রোগ্রামটি সংজ্ঞায়িত করে যে এটি শুধুমাত্র 0 থেকে 1 পর্যন্ত ভাসমান বিন্দু সংখ্যা তৈরি করতে পারে এবং নির্দিষ্ট ইনপুট শুধুমাত্র নির্দিষ্ট আউটপুট থাকতে পারে।

[cceN_cpp থিম = "ভোর"] ফ্লোট x = গোলমাল (5); ভাসা y = গোলমাল (5); মুদ্রণ (x, y); [/cceN_cpp]

কারণ উপরের ইনপুট প্যারামিটার 5, তাই আউটপুট ফলাফল একই।তারপর কিভাবে ফলাফল পরিবর্তন করবেন? উত্তর হল গতিশীলভাবে ইনপুট পরামিতি পরিবর্তন করা। প্রকৃতপক্ষে আমরা শব্দকে সীমাহীন ভয়েস ট্র্যাক হিসাবে বিবেচনা করতে পারি, ইনপুট প্যারামিটারগুলি "বর্তমান সময়" এর মতো। যদি প্যারামিটার ইনপুট অবিচ্ছিন্ন হয়, আউটপুটও ধারাবাহিক হবে।

[cceN_cpp থিম = "ভোর"] ফ্লোট x, y; অকার্যকর সেটআপ () {আকার (700, 100); x = 0; পটভূমি (0); } অকার্যকর ড্র () {x += 1; y = গোলমাল (ফ্রেমকাউন্ট/100.0)*100; noStroke (); উপবৃত্ত (x, y, 2, 2); }

[/cceN_cpp]

এই ক্ষেত্রে, আমরা Y এর পরিবর্তনের পথটি আঁকছি যাতে আমরা ফাংশন গোলমালকে আরও ভালভাবে বুঝতে পারি।

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

• frameCount হল পূর্ণসংখ্যা পরিবর্তনশীল। অন্য একটি পূর্ণসংখ্যা ভেরিয়েবল দ্বারা বিভক্ত, প্রোগ্রামটি একটি পূর্ণসংখ্যা হতে ফলাফলটি প্রক্রিয়া করার জন্য ডিফল্ট হবে।ফলাফলের নির্ভুলতা উন্নত করার জন্য, আমাদের 100 থেকে 100.0 পরিবর্তন করতে হবে। একটি ভাসমান বিন্দু সংখ্যা দ্বারা বিভক্ত, আমরা একটি ভাসমান বিন্দু সংখ্যাও পাব।

Ax Y অক্ষকে 0 থেকে 100 এ পরিবর্তন করার জন্য, আমাদের গোলমালের ফলাফল 100 দ্বারা গুণ করতে হবে। এইভাবে আমরা এলোমেলো মান পরিসীমা নিয়ন্ত্রণ করতে পারি।

আপনার মধ্যে কেউ কেউ ভাবতে পারেন "কেন আমাদের ফ্রেমকাউন্টবাই 100 ভাগ করতে হবে? সরাসরি ফ্রেমকাউন্ট লেখা কি ঠিক নয়?" অবশ্যই আপনি করতে পারেন! কিন্তু এখানে, ফাংশন গোলমালের বৈশিষ্ট্যগুলি আরও ভালভাবে প্রদর্শন করার জন্য, আমরা "সম্প্রচারের হার" ধীর করে দিই। নীচের উদাহরণটি বিভিন্ন পরিবর্তনের হারের মধ্যে আউটপুট মান পরিবর্তন দেখায়।

[cceN_cpp থিম = "ভোর"] ফ্লোট x, y1, y2, y3, y4, y5; অকার্যকর সেটআপ () {আকার (700, 500); x = 0; পটভূমি (0); } অকার্যকর ড্র () {x += 1; y1 = গোলমাল (ফ্রেমকাউন্ট)*100; y2 = গোলমাল (frameCount/10.0)*100; y3 = গোলমাল (ফ্রেমকাউন্ট/100.0)*100; y4 = গোলমাল (frameCount/1000.0)*100; y5 = গোলমাল (ফ্রেমকাউন্ট/10000.0)*100; noStroke (); উপবৃত্ত (x, y1, 2, 2); উপবৃত্ত (x, y2+100, 2, 2); উপবৃত্ত (x, y3+200, 2, 2); উপবৃত্ত (x, y4+300, 2, 2); উপবৃত্ত (x, y5+400, 2, 2); স্ট্রোক (80); লাইন (0, 100, প্রস্থ, 100); লাইন (0, 200, প্রস্থ, 200); লাইন (0, 300, প্রস্থ, 300); লাইন (0, 400, প্রস্থ, 400); }

[/cceN_cpp]

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

আপনি যদি উপরের সমস্ত উদাহরণ বুঝতে পারেন, তাহলে আপনি মনে করবেন মাইগ্রেশন বৃত্ত আঁকতে এর চেয়ে সহজ আর কিছু হতে পারে না। আপনি অভ্যন্তরীণ নীতিগুলিও বুঝতে পারেন।

[cceN_cpp থিম = "ভোর"] ফ্লোট x, y; অকার্যকর সেটআপ () {আকার (300, 300); x = 0; } অকার্যকর ড্র () {পটভূমি (234, 113, 107); x = গোলমাল (ফ্রেমকাউন্ট/100.0 + 100)*300; y = গোলমাল (ফ্রেমকাউন্ট/100.0)*300; noStroke (); উপবৃত্ত (x, y, 50, 50); }

[/cceN_cpp]

এখন, আন্দোলনটি একটি ঘোরানো গাইরোর মতো আরও আকর্ষণীয়।

Function ফাংশন নয়েজের মধ্যে ভেরিয়েবল এক্স এর প্লাস 100 এর কারণ হল কারণ তাদের দূরত্বের জন্য আলাদা করা। যদি ফাংশন নয়েজের মধ্যে xy এর প্যারামিটার একই বা বেশ কাছাকাছি হয়, x, y কোঅর্ডিনেটের পরিবর্তন একই বন্ধ হবে। এটি আন্দোলনকে আরও এলোমেলো করে তোলার জন্য।

ধাপ 14: মাউস দ্বারা সরানো বৃত্ত

পরবর্তীতে, আমরা অবশেষে দুটি ভেরিয়েবলে আসি যা আমি সবচেয়ে পছন্দ করি: mouseX এবং mouseY। দুটি ধারণার প্রথম দর্শনে, আমার চোখ আলোতে ঝলমল করছে। কারণ এটি গ্রাফিকের সাথে যোগাযোগের সবচেয়ে সরাসরি উপায়। আমরা এটি দিয়ে অনেক আকর্ষণীয় প্রোগ্রাম তৈরি করতে পারি।

কেস বেশ সহজ:

[cceN_cpp থিম = "ভোর"] int x, y; অকার্যকর সেটআপ () {আকার (300, 300); x = 0; y = 0; } অকার্যকর ড্র () {পটভূমি (234, 113, 107); noStroke (); x = মাউসএক্স; y = mouseY; উপবৃত্ত (x, y, 50, 50); }

[/cceN_cpp]

মাউসএক্স মাউসের এক্স কোঅর্ডিনেট অর্জন করতে পারে, যখন মাউসওয়াই ওয়াই কোঅর্ডিনেট পেতে পারে।

• আসুন ইতিবাচক এবং নেতিবাচক প্রতীক পরিবর্তন করার চেষ্টা করি, অথবা mouseX এবং mouseY বিনিময় করি।

ধাপ 15: শেষ

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

আমাদের পরবর্তী অধ্যায়ে, আমরা আরো প্রচুর উদাহরণ দেখতে পারি। একই সময়ে, আমরা গাণিতিক ফাংশন ব্যবহার করব এবং এটি গ্রাফিক আন্দোলনের সাথে একত্রিত করব।

এই নিবন্ধটি ডিজাইনার ওয়েঞ্জির কাছ থেকে এসেছে।

ধাপ 16: আপেক্ষিক রিডিং:

ডিজাইনারের জন্য আকর্ষণীয় প্রোগ্রামিং গাইডেন্স-প্রক্রিয়াকরণ প্রাথমিক স্পর্শ

ডিজাইনারের জন্য আকর্ষণীয় প্রোগ্রামিং গাইডেন্স-আপনার প্রথম প্রসেসিং প্রোগ্রাম তৈরি করুন

এই নিবন্ধটি থেকে:

যদি আপনার সাহায্যের প্রয়োজন হয়, আপনি যোগাযোগ করতে পারেন: [email protected]।