برنامه نویسی خلاقانه نقطه تلاقی خلاقیت ، هنر و برنامه نویسی محسوب میشه. در واقع شاید تفاوت اصلیش با برنامه نویسی در اینه که در این شاخه هدف کاربردی مستقیمی وجود نداره و برنامه نویس برای ابراز احساسات و افکار و یا فقط برای سرگرمی برنامه ای مینویسه که به چیز جالبی منتهی میشه.
Processing اسم یک زبان برنامه نویسیه که باش میشه کد نویسی خلاقانه کرد. مثلا می تونید یک سری اشکال در فضای سه بعدی طراحی کنید و بشون حرکت بدی
میتونید فیلم رو واردش کنید و داخل اون فیلم یک سری تغییرات بدید. یا مثلا موزیک رو تحلیل کنید و با فوریه اون یک سری شکل رو به رقص دربیارید.
مجموعه کار هایی که با پروسسنیگ میشه انجام داد قطعا به اینا محدود نمیشه و پیشنهاد میکنم با یک سرچ ساده تو یوتیوب نمونه کارهایی که باش انجام دادند رو ببینید.
در این پست یک انیمیشن ساده رو توضیح میدم که یک ایده کلی درباره قسمت های اصلی پروسسینگ میده.
کل کد ها رو میتونید از داخل گیت‌هاب بگیرید. همچنین ی سر به سایت پروسسینگ بزنید. کلی محتوای خوب داخل سایتشون وجود داره.
ساختار اصلی:
در پروسسینگ شما برنامه ی شما دو قسمت اصلی دارد. یکی setup و دیگری draw.
در قسمت setup شما کد هایی را قرار میدهید که تنها یکبار در اول برنامه قصد دارید اجرا شوند.
در قسمت draw هر کدی قرار دهید در طول برنامه به شکل یک حلقه اجرا میشود.
قصد من اینه که ابتدا یک تعداد مشخص نقطه تصادفی روی سطح کره پیدا کنم. سپس این نقاط رو به هم متصل کنم. بعد از اون با استفاده از تکنیک دوربین در فضا حرکت کنم و برم سمت کره و داخلش.
ساخت نقاط تصادفی:
برای اینکه نقاط تصادفی روی یک سطح کره پیدا کنیم راه های مختلفی وجود داره. من ابتدا یک عدد تصادفی روی محور x و در بازه ی مثبت و منفی شعاع کره دلخواهم تولید میکنم. بعد با استفاده از نقطه تولید شده نقطه تصادفی روی y و به همین شکل روی z رو پیدا میکنم.
این مجموعه نقاط رو داخل آرایه های RX RY RZ ذخیره میکنم.
R = 100;
RX = new float[density];
RY = new float[density];
RZ = new float[density];
for(int i = 0; i < density ; i++){
RX[i] = random(-R,+R);
RY[i] = random(-sqrt(pow(R,2)-pow(RX[i],2)),+sqrt(pow(R,2)-pow(RX[i],2)));
if(random(0,1) < 0.5) {
RZ[i] = +sqrt( pow(R,2) - pow(RX[i],2) - pow(RY[i],2) );
} else {
RZ[i] = -sqrt( pow(R,2) - pow(RX[i],2) - pow(RY[i],2) );
}
}
ترسیم نقاط:
بعد از اینکه نقاط روی کره آماده شدن حالا باید اون ها رو ترسیم کنیم.
برای ترسیم نقاط باید حلقه ای داخل draw بنویسیم که داخل آرایه ها حرکت کنه و سه جفت عدد رو در نقاط مختلف ترسیم کنه.
for(int i = 0; i < density-1 ; i++){
stroke(150);
strokeWeight(3);
point(RX[i],RY[i],RZ[i]);
stroke(40);
strokeWeight(0.7);
line(RX[i],RY[i],RZ[i],RX[i+1],RY[i+1],RZ[i+1]);
}
تابع point سه ورودی میگیرد که به ترتیب مختصات ایکس ، وای و زد هست. با استفاده از stroke رنگ نقاط رو مشخص میکنیم. اگر یک ورودی به این تابع بدهید طیف رنگ شما بین سفید تا سیاه خواهد بود. اگر سه تا ورودی بدهید نقاطی RGB خواهید داشت.
strokeWeight قطر نقاط و خطوط را مشخص میکند.
line از شما مختصات نقطه ابتدای خط و مختصات نقطه انتهایی خط را دریافت میکند. در اینجا ما ابتدا نقاط را ترسیم کردیم و سپس هر نقطه را به نقطه بعدی با یک خط کمرنگ متصل میکنیم.
حالا برای اینکه کره ی ساخته شده را در طول برنامه بچرخوانیم از دستورات rotate استفاده میکنیم. در واقع در طول حلقه اصلی برنامه متغیر x را هر بار کمی افزایش میدهیم. سپس با استفاده از این متغیر هم کره را میچرخانیم و هم دوربین را داخل صحنه حرکت میدهیم.
برای چرخواندن کره باید قبل ترسیم آن دستورات rotate را وارد کنیم. در واقع rotate صفحه مختصات رو میچرخواند و شما هر چیزی بخواهید ترسیم میکنید. سپس دوباره صفحه مختصات رو به نقطه ی اصلی بر میگردانید.
x += 0.009;
pushMatrix();
rotateZ(x/2);
rotateX(x/2);
for(int i = 0; i < density-1 ; i++){
stroke(150);
strokeWeight(3);
point(RX[i],RY[i],RZ[i]);
stroke(40);
strokeWeight(0.7);
line(RX[i],RY[i],RZ[i],RX[i+1],RY[i+1],RZ[i+1]);
}
popMatrix();
pushMatrix صفحه مختصات را ذخیره میکنید. سپس دستورات rotate را وارد میکنیم تا ترسیمات جدید که در واقع نقاط و خطوط هستند را در دستگاه جدید انجام دهیم. پس از ترسیم دستگاه را به نقطه اصلی برگردانیم که اگر بخواهیم در ادامه چیزی ترسیم کنیم به شکل عادی ترسیم شود.
حرکت کردن در صحنه با دوربین:
و در نهایت با استفاده از دوربین camera در صحنه حرکت میکنیم.
دوربین در نرم افزار های سه بعدی کاربرد بسیاری دارد. در واقع ایده اصلی پیاده سازی چیزی شبیه به دوربین در واقعیت هست.
تابع دوربین در پروسسینگ از شما سه چیز دریافت میکند.
۱- جهت برداری که دوربین صحنه را میگیرد.
۲- مختصات مرکز صحنه (جایی که قصد دارید ازش تصویر بگیرید.)
۳- جهت مثبت دوربین. (دوربین را برعکس بگیره یا در جهت بالا یا …)
background(0);
camera(0, 0, 400-x*60, 0, 0, -x*60, 0, 1, 0);
در اینجا هم مرکز دوربین در حال تغییر است و هم جهت دوربین.
اگر دقت کنید بالای کد background(0) قرار دارد. این دستور در واقع هر بار که این حلقه اجرا میشود صفحه را سیاه میکنه. (تمام اشکال و … از تو صفحه پاک میشه.)
کل کد کنار هم و نتیجه نهایی رو در تارنورد ببینید.
