mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-11 13:10:57 +00:00
Merge pull request #340 from ahmaderfani12/Persian_translation
Persian translation
This commit is contained in:
Patricio Gonzalez Vivo
GitHub
commit
d029de1446
@ -4,7 +4,7 @@
|
||||
|
||||
عکس های بالا بطور گوناگون ساخته شده اند. مورد اول توسط ون گوگ با استفاده از لایه های رنگ ساخته شده . ساعت ها وقتش را گرفته. تصویر دومی در عرض ثانیه ای با ترکیب چهار ماتریس تولید شده: یکی برای فیروزه ای دیگری سرخابی، دیگری زرد و در آخر سیاه . تفاومت اصلی این است که تصویر دومی به صورت همزمان(غیر سریالی) تولید میشود (یعنی مرحله به مرحله نیست و همه در یک زمان تولید میشود).
|
||||
|
||||
این کتاب در مورد روش محاسباتی که انقلابی بر پا کرد, *fragment shaders* است. این روش تولید تصاویر دیجیتالی را به سطح دیگری برد. میتوان آن را مانند پرس گوتنبرگ برای گرافیک تصور کرد.
|
||||
این کتاب در مورد روش محاسباتی *fragment shaders* است که انقلابی بر پا کرد. این روش تولید تصاویر دیجیتالی را به سطح دیگری برد. میتوان آن را مانند پرس گوتنبرگ برای گرافیک تصور کرد.
|
||||
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
این کتاب برای کد نویسان خلاق، توسعه دهنده های بازی و کسانی که با برنامه نویسی آشنا هستند و و دانش اولیه از جبر خطی و مثلثات دارند مناسب است, و کسانی که میخواهند سطح کار خود را یک مرحله از نظر گرافیکی و هیجان انگیز بودن بالا بببرند. (اگر می‌خواهید کد نویسی یاد بگیرید, پیشنهاد می‌کنم با [Processing](https://processing.org/) شروع کنید و وقتی با کار کردن با آن اشنا شدید، برگردید)
|
||||
|
||||
این کتاب به شما نحوه استفاده و ادغام شیدر ها در پروژه هارا یاد می‌دهد,برای افزایش کارایی و گرافیک آن ها. چون GLSL (OpenGL Shading Language) روی پلتفرم های مختلفی اجرا می‌شوند, هرآنچه در اینجا یاد بگیرید رو هر محیطی که از OpenGl استفاده میکند می‌توانید اجرا کنید . به عبارت دیگر, با استفاده از دانش خود می‌توانید از محیط های مقابل استفاده کنید: [Processing](https://processing.org/) sketches, [openFrameworks](http://openframeworks.cc/) applications, [Cinder](http://libcinder.org/) interactive installations, [Three.js](http://threejs.org/) websites or iOS/Android games.
|
||||
این کتاب به شما نحوه استفاده و ادغام شیدر ها در پروژه ها را یاد می‌دهد. چون GLSL (OpenGL Shading Language) روی پلتفرم های مختلفی اجرا می‌شوند, هرآنچه در اینجا یاد بگیرید رو هر محیطی که از OpenGl استفاده میکند می‌توانید اجرا کنید . به عبارت دیگر, با استفاده از دانش خود می‌توانید از محیط های مقابل استفاده کنید: [Processing](https://processing.org/) sketches, [openFrameworks](http://openframeworks.cc/) applications, [Cinder](http://libcinder.org/) interactive installations, [Three.js](http://threejs.org/) websites یا iOS/Android games.
|
||||
|
||||
## این کتاب چه چیز هایی را پوشش می‌دهد؟
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
اگر تجربه نقاشی در کامپیوتر را داشته باشید میدانید که در این فرایند، دایره، مستطیل و خط هارا یکی پس از دیگری می‌کشید تا شکل مورد نظر خود را نهایی کنید، این فرایند شبیه نوشتن کتاب است، در واقع این کار ها مجموعه ای از دستور العمل ها هستند که وظایف را یکی پس از دیگری انجام می‌دهند.
|
||||
|
||||
شیدر ها هم مجموعه ای از دستور العمل ها هستند، اما دستور المل هایی که به یکباره برای هر پیکسل روی صفحه اجرا میشود. این بدان معناست، کدی که می‌نویسید بسته به موقعیت پیکسل روی صفحه نمایش باید رفتار متفاوتی انجام دهد. برنامه شما مانند تابعی کار میکند که موقعیت را دریافت میکند و یک رنگ را بر می‌گرداند، زمانی که کد شما کامپایل میشود، این عملیات بسیار سریع انجام میشود.
|
||||
شیدر ها هم مجموعه ای از دستورالعمل ها هستند، اما دستورالعمل هایی که به یکباره برای هر پیکسل روی صفحه اجرا میشود. این بدان معناست، کدی که می‌نویسید بسته به موقعیت پیکسل روی صفحه نمایش باید رفتار متفاوتی انجام دهد. برنامه شما مانند تابعی کار میکند که موقعیت را دریافت میکند و یک رنگ را بر می‌گرداند، زمانی که کد شما کامپایل میشود، این عملیات بسیار سریع انجام میشود.
|
||||
|
||||
|
||||
|
||||
@ -21,14 +21,14 @@
|
||||
|
||||
بازی های ویدئویی و سایر برنامه های گرافیکی به پردازش بیشتری نسبت به برنامه های معمول نیاز دارند. به دلیل محتویات زیاد، آن ها باید باید مقادیر زیادی عملیات پیکسل به پیکسل انجام دهند. هر یک از پیکسل ها باید محاسبه شوند، همچنین در بازی های سه بعدی باید عملیات های بیشتری مثل محاسبات هندسی و پرسپکتیو هم انجام شود.
|
||||
|
||||
بیاید به استعاره خود در مورد لوله ها و تسک ها برگردیم، هر پیکسل رو صفحه نمایش یک تسک کوچک و ساده را نشان می‌دهد، به طور جداگانه تسک هر پیکسل برای CPU مسئله ای نیست. اما اینکه این تسک های کوچک باید برای هر پیکسل انجام شود برای CPU مشکل ساز است. این یعنی در صفحات قدیمی 800x600 باید 480,000 پیکسل در هر فریم پردازش شود که به معنی 14,400,000 محاسبه در ثانیه است! بله این مقدار به قدری بزرگ هست که یک ریزپردازنه را سرریز کند. در یک نمایشگر مدرن 2880x1800 با نرخ 60 فریم بر ثانیه، این محاسبات به 311,040,000 محاسبه در ثانیه می‌رسد. چگونه مهندسان گرافیک این مشکل را حل می‌کنند؟
|
||||
بیایید به استعاره خود در مورد لوله ها و تسک ها برگردیم، هر پیکسل رو صفحه نمایش یک تسک کوچک و ساده را نشان می‌دهد، به طور جداگانه تسک هر پیکسل برای CPU مسئله ای نیست. اما اینکه این تسک های کوچک باید برای هر پیکسل انجام شود برای CPU مشکل ساز است. این یعنی در صفحات قدیمی 800x600 باید 480,000 پیکسل در هر فریم پردازش شود که به معنی 14,400,000 محاسبه در ثانیه است! بله این مقدار به قدری بزرگ هست که یک ریزپردازنه را سرریز کند. در یک نمایشگر مدرن 2880x1800 با نرخ 60 فریم بر ثانیه، این محاسبات به 311,040,000 محاسبه در ثانیه می‌رسد. چگونه مهندسان گرافیک این مشکل را حل می‌کنند؟
|
||||
|
||||
|
||||
|
||||
این زمانی است که پردازش موازی به یک راه حل خوب تبدیل میشود، منطقی است که به جای داشتن چند ریز پردازنده بزرگ یا قدرتمند(لوله)، ریزپردازنده های کوچکتری و بیشتری به صورت موازی کار کنند.واحد پردازنده گرافیکی(GPU) همین طور عمل میکند.
|
||||
|
||||
|
||||
ریز پردازنده های کوچک را مانند جدولی از لوله ها وداده های هر پیکسل را مانند یک توپ تصور کنید، 14,400,000 توپ می‌تواند هر لوله های را مسدود کند، اما میتوان یک جدول از 800x600 لوله کوچک را که 30 موج 480,000 تایی پیکسل در ثانیه دریافت میکند را به راحتی کنترل کرد. در وضوح بالاتر هم به همین صورت عمل میکند. هرچه سخت افزار های موازی بیشتری داشته باشید، به همان نسبت جریان بیشتری را می‌توانید مدیریت کنید.
|
||||
ریز پردازنده های کوچک را مانند جدولی از لوله ها وداده های هر پیکسل را مانند یک توپ تصور کنید، 14,400,000 توپ می‌تواند هر لوله ای را مسدود کند، اما میتوان یک جدول از 800x600 لوله کوچک را که 30 موج 480,000 تایی پیکسل در ثانیه دریافت میکند را به راحتی کنترل کرد. در وضوح بالاتر هم به همین صورت عمل میکند. هرچه سخت افزار های موازی بیشتری داشته باشید، به همان نسبت جریان بیشتری را می‌توانید مدیریت کنید.
|
||||
|
||||
از دیگر قدرت های فوق العاده GPU عملکرد های ویژه ریاضی آن است که از طریق سخت افزار سریع تر میشود، یعنی این عملیات ریاضی به جای استفاده از نرم افزار مستقیما توسط میکرو تراشه حل می‌شوند، به عبارتی عملکرد های مثلثاتی و ماتریسی به سرعت الکتریسیته می‌توانند سریع باشند.
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
5. یکی از دیگر ویژگی های مشابه C مثال بالا وجود ماکرو ها هستند. با استفاده از آنان میتوان متغیر های جهانی را تعریف کرد و یا برخی عملیات شرطی اساسی را انجام داد(ifdef and #endif#). تمام دستورات کلان(ماکرو) با هشتگ شروع می‌شوند. ماکرو ها قبل از کامپایل اجرا می‌شوند، شرایط را بررسی میکند(ifdef and #endif#) و ارجاعات به defines# را کپی میکند. مثلا در مثال بالا ما خط 2 را در صورت تعریف GL_ES وارد میکنیم. که معمولا در هنگام کامپایل این کد در تلفن های همراه و مرورگر ها اتفاق می‌افتد.
|
||||
|
||||
6. شناور ها(float) در شیدر ها حیاتی هستند، بنابراین سطح دقت بسیار مهم است. دقت پایین تر به معنای رندر سریع تر است، همچنین کیفیت کمتر. می‌توانید مثل من خط دو مثال بالا متغیر ها را شناور با دقت متوسط درنظر بگیرید(precision mediump float)، همچنین می‌توانید متغیر شناور با دقت پایین(precision lowp float) یا بالا(precision highp float)هم در نظر بگیرید.
|
||||
6. شناور ها(float) در شیدر ها حیاتی هستند، بنابراین سطح دقت بسیار مهم است. دقت پایین تر به معنای رندر سریع تر است، همچنین کیفیت کمتر. می‌توانید مثل من خط دو مثال بالا متغیر های شناور را با دقت متوسط درنظر بگیرید(precision mediump float)، همچنین می‌توانید متغیر شناور با دقت پایین(precision lowp float) یا بالا(precision highp float)هم میتوان در نظر گرفت.
|
||||
|
||||
7. آخرین و شاید مهمترین نکته در مثال بالا اینکه در GLSL تضمین نمی‌شود که متغیر ها به طور خودکار تغییر نوع داده(casting) رویشان اعمال شود. این به چه معناست؟ تولید کنندگان رویکرد های مختلفی برای سرعت بخشیدن روند پردازش کارت های گرافیکی دارند، و مجبورند حداقل مشخصات را تضمین کنند. کستینگ ازین رویکرد ها نیست. در مثال بالا vect4 دارای نقطه شناور است و برای آن انتظار می‌رود که به متغیر های شناور انتساب شود. اگر می‌خواهید کد سازگار خوبی ایجاد کنید و ساعت ها وقت صرف دیبگ کردن آن نکنید، عادت کنید در float ها از نقطه(.) استفاده کنید.
|
||||
|
||||
@ -50,4 +50,4 @@ vec4 red(){
|
||||
vec4 color = vec4(vec3(1.0,0.0,1.0),1.0);
|
||||
```
|
||||
|
||||
اگرچه این مثال خیلی هیجان انگیز نیست، اما ابتدایی ترین مثال است. ما تمام پیکسل های داخل کنوس(canvas) را به یک رنگ تغییر می‌دهیم. در فصل بعد نحوه تغییر رنگ پیکسل را با استفاده از دو نوع ورودی دیگر می‌بینیم. فضا(محل و مختصات پیکسل روی صفحه) و زمان(مقدار زمان از لحظه بارگیری صفحه بر حسب ثانیه).
|
||||
اگرچه این مثال خیلی هیجان انگیز نیست، اما ابتدایی ترین مثال است. ما تمام پیکسل های داخل کنوس(canvas) را به یک رنگ تغییر دادیم. در فصل بعد نحوه تغییر رنگ پیکسل را با استفاده از دو نوع ورودی دیگر می‌بینیم. فضا(محل و مختصات پیکسل روی صفحه) و زمان(مقدار زمان از لحظه بارگیری صفحه بر حسب ثانیه).
|
||||
|
||||
@ -30,7 +30,7 @@ uniform float iTime; // shader playback time (in seconds)
|
||||
|
||||
همانطور که می‌بینید GLSL سورپرایز های بیشتری دارد. GPU دارای عملکرد های زاویه شتاب همچنین توابع نمایی و مثلثاتی هست. برخی ازین توابع عبارتند از: [`sin()`](../glossary/?search=sin), [`cos()`](../glossary/?search=cos), [`tan()`](../glossary/?search=tan), [`asin()`](../glossary/?search=asin), [`acos()`](../glossary/?search=acos), [`atan()`](../glossary/?search=atan), [`pow()`](../glossary/?search=pow), [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt), [`abs()`](../glossary/?search=abs), [`sign()`](../glossary/?search=sign), [`floor()`](../glossary/?search=floor), [`ceil()`](../glossary/?search=ceil), [`fract()`](../glossary/?search=fract), [`mod()`](../glossary/?search=mod), [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) و [`clamp()`](../glossary/?search=clamp).
|
||||
|
||||
اکنون زمان آن است که دوباره با کد با بازی کنیم.
|
||||
اکنون زمان آن است که دوباره با کد بازی کنیم.
|
||||
|
||||
* فرکانس را کم کنید تا زمانی که تغییر رنگ نامحسوس شود.
|
||||
|
||||
@ -46,7 +46,7 @@ uniform float iTime; // shader playback time (in seconds)
|
||||
|
||||
در مثال بالا ما با تقسیم gl_FragCoord بر u_resolution مختصات نرمالایز شده(بین 0 و 1) را در st ذخیره میکنیم. با این کار به راحتی میتوان مقادیر x را به قرمز و مقادیر y را به سبز مپ کرد.
|
||||
|
||||
در شیدر نویسی ما منابع زیادی برای دیباگ کردن نداریم، خواهید فهمید که گاهی اوقات کد نویسی در GLSL مانند قراردادن کشتی در داخل بطری است. به همان اندازه سخت زیبا و خوشایند.
|
||||
در شیدر نویسی منابع زیادی برای دیباگ کردن نداریم، خواهید فهمید که گاهی اوقات کد نویسی در GLSL مانند قراردادن کشتی در داخل بطری است. به همان اندازه سخت زیبا و خوشایند.
|
||||
|
||||
|
||||
|
||||
|
||||
@ -129,7 +129,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput
|
||||
|
||||
### در **Processing**
|
||||
|
||||
ساخته شده توسط [Ben Fry](http://benfry.com/) و [Casey Reas](http://reas.com/) in 2001, [Processing](https://processing.org/) یک محیط فوق العاده ساده و قدرتمند است که می‌توانید در آن اولین قدم های کد زنی خود را بردارید. (حداقل برای من اینگونه بود). [Andres Colubri](https://codeanticode.wordpress.com/) بروزرسانی های مهمی به OpenGl و پردازش ویدئو آن اضافه کرده است, که استفاده از شیدر های GLSL را در این محیط دوستانه بسیار آسان میکند. این برنامه به دنبال فایل `"shader.frag"` در پوشه `data` داخل `sketch` می‌گردد. مطمئن شوید که نمونه هایی که از اینجا در آن پوشه کپی می‌کنید، تغییر نام دهید.
|
||||
[Processing](https://processing.org/) ساخته شده توسط [Ben Fry](http://benfry.com/) و [Casey Reas](http://reas.com/) , یک محیط فوق العاده ساده و قدرتمند است که می‌توانید در آن اولین قدم های کد زنی خود را بردارید. (حداقل برای من اینگونه بود). [Andres Colubri](https://codeanticode.wordpress.com/) بروزرسانی های مهمی به OpenGl و پردازش ویدئو آن اضافه کرده است, که استفاده از شیدر های GLSL را در این محیط دوستانه بسیار آسان میکند. این برنامه به دنبال فایل `"shader.frag"` در پوشه `data` داخل `sketch` می‌گردد. مطمئن شوید که نمونه هایی که از اینجا در آن پوشه کپی می‌کنید، تغییر نام دهید.
|
||||
|
||||
```cpp
|
||||
PShader shader;
|
||||
|
||||
@ -79,9 +79,9 @@ vec4({{rn}},{{gn}},{{bn}},1.0)
|
||||
|
||||
|
||||
|
||||
* گرادیانی شبیه غروب خورشید ویلیام ترنر بسازید
|
||||
* گرادیانی شبیه غروب خورشید ویلیام ترنر بسازید.
|
||||
|
||||
* با استفاده از `u_time` انتقال بین طلوع و غروب را متحرک کنید..
|
||||
* با استفاده از `u_time` انتقال بین طلوع و غروب را متحرک کنید.
|
||||
|
||||
* آیا با استفاده از آنچه تا کنون یاد گرفته اید، می‌توانید رنگین کمان بسازید؟
|
||||
|
||||
@ -99,7 +99,7 @@ vec4({{rn}},{{gn}},{{bn}},1.0)
|
||||
|
||||
### HSB در مختصات قطبی
|
||||
|
||||
HSB در ابتدا برای مختصاب قطبی(بر اساس زاویه و شعاع) به جای مختصات دکارتی طراحی شده است. برای ترسیم عملکرد HSB در مختصات قطبی، نیاز به فاصله و زاویه ار مرکز بیلبورد تا مختصات پیکسل مورد نظر داریم. برای این منظور نیاز به استفاده از تابع [`length()`](../glossary/?search=length) و تابع [`atan(y,x)`](../glossary/?search=atan) داریم.
|
||||
HSB در ابتدا برای مختصاب قطبی(بر اساس زاویه و شعاع) به جای مختصات دکارتی طراحی شده است. برای ترسیم عملکرد HSB در مختصات قطبی، نیاز به فاصله و زاویه از مرکز بیلبورد تا مختصات پیکسل مورد نظر داریم. برای این منظور نیاز به استفاده از تابع [`length()`](../glossary/?search=length) و تابع [`atan(y,x)`](../glossary/?search=atan) داریم.
|
||||
|
||||
هنگام استفاده از بردار ها مثل vect2, 3, 4 حتی اگر نمایانگر رنگ باشند، باز هم به عنوان بردار با آنان رفتار میشود. ما در مورد رنگ ها و بردار ها به طور مشابه رفتار میکنیم، شما خواهید دید این انعطاف پذیری مفهمومی بسیار مفید است.
|
||||
|
||||
|
||||
231
07/README-fa.md
Normal file
231
07/README-fa.md
Normal file
@ -0,0 +1,231 @@
|
||||
|
||||
|
||||
## اشکال
|
||||
|
||||
بالاخره! برای این لحظه آماده شده ایم، شما بیشتر مبانی و توابع GLSL را آموخته اید. معادلات شکلی دهی را تمرین کرده اید، اکنون زمان جمع بندی است. شما برای این چالش آماده هستید! در این قسمت شما نحوه رسم اشکل ساده را بصورت موازی می‌آموزید.
|
||||
|
||||
### مستطیل
|
||||
|
||||
تصور کنید کاغذی شبکه ای مانند آنچه در کلاس ریاضیات داشتیم در اختیار داریم، و تکلیف ما رسم مربع است، اندازه کاغذ 10x10 و مربع باید 8x8 باشد. شما چه کار خواهید کرد؟
|
||||
|
||||
|
||||
|
||||
شما به جز سطر های اول و اخر و ستون اول و آخر همه را رنگ می‌زنید، اینطور نیست؟
|
||||
|
||||
این مثال چه ربطی به شیدر ها دارد؟ هر مربع کوچک از کاغد شبکه مان مانند یک ترد(پیکسل) است. همچنین هر مربع کوچک مانند صفحات شطرنج مختصات خودر را می‌داند. در قسمت های قبلی ما رنگ های قرمز و سبز را به مقادیر x,y مپ کردیم، و یاد گرفتیم چگونه در مسائل دو بعدی از مقادیر بین 0.0 تا 1.0 استفاده کنیم، چگونه میتوان از این موضوع برای ترسیم یک مربع در وسط صفحه کنوس استفاده کرد؟
|
||||
|
||||
بیایید با استفاده از دستورات شبه کد شروع کنیم، یعنی دستورات if را استفاده کنیم. اصول انجام این کار به طرز چشم گیری شبیه سناریوی کاغذ شبکه ای است.
|
||||
```glsl
|
||||
if ( (X GREATER THAN 1) AND (Y GREATER THAN 1) )
|
||||
paint white
|
||||
else
|
||||
paint black
|
||||
```
|
||||
|
||||
حالا که می‌دانیم چگونه کار میکند بیاید بجای استفاده از دستور شرطی از [`step()`](../glossary/?search=step) استفاده کنیم, و همچنین بجای استفاده از 10*10 از مقادیر بین 0.0 و 1.0 استفاده کنیم.:
|
||||
|
||||
```glsl
|
||||
uniform vec2 u_resolution;
|
||||
|
||||
void main(){
|
||||
vec2 st = gl_FragCoord.xy/u_resolution.xy;
|
||||
vec3 color = vec3(0.0);
|
||||
|
||||
// Each result will return 1.0 (white) or 0.0 (black).
|
||||
float left = step(0.1,st.x); // Similar to ( X greater than 0.1 )
|
||||
float bottom = step(0.1,st.y); // Similar to ( Y greater than 0.1 )
|
||||
|
||||
// The multiplication of left*bottom will be similar to the logical AND.
|
||||
color = vec3( left * bottom );
|
||||
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
```
|
||||
|
||||
تابع [`step()`](../glossary/?search=step) پیکسل های زیر 0.1 را به سیاه تبدیل میکند (`vec3(0.0)`) و بقیه تبدیل به سفید می‌شوند (`vec3(1.0)`) . ضرب بین left و bottom مانند عمکرد and کار میکند، جایی که هردو باید 1.0 باشند، 1.0 برمی‌گرداند. این عمل باعث کشیدن دو خط در پایین و سمت چپ کنوس میشود..
|
||||
|
||||
|
||||
|
||||
در کد قبلی ما ساختار را برای قسمت پایین و چپ تکرار کردیم. میتوان با پاس دادن یک بردار دو بعدی یه [`step()`](../glossary/?search=step) چند خط در کد صرفه جویی کنیم. به این صورت :
|
||||
|
||||
```glsl
|
||||
vec2 borders = step(vec2(0.1),st);
|
||||
float pct = borders.x * borders.y;
|
||||
```
|
||||
|
||||
تا الان فقط دو حاشیه پاین و چپ مستطیل را رسم کرده ایم. بیایید دو مورد دیگر را هم انجام دهیم. کد زیر را بررسی کنید:
|
||||
|
||||
<div class="codeAndCanvas" data="rect-making.frag"></div>
|
||||
|
||||
خطوط 21 و 22 را از کامنت خارج کنید و دقت کنید که چگونه مختصات St را معکوس کردیم و عملکرد Step را بصورت مشابه روی آن اعمال شد. در این حالت `vec2(0.0,0.0)` بالا سمت راست کنوس خواهد بود. این یک مثال دیجیتالی از برگرداندن ورق کاغذ و استفاده مجدد عملیات است..
|
||||
|
||||
|
||||
|
||||
توجه کنید در خط 18 و22 تمام طرفین در هم ضرب می‌شوند که معادل نوشتن عبارت زیر است:
|
||||
|
||||
```glsl
|
||||
vec2 bl = step(vec2(0.1),st); // bottom-left
|
||||
vec2 tr = step(vec2(0.1),1.0-st); // top-right
|
||||
color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
```
|
||||
|
||||
جالب بود؟ این تکنک تماما در مورد استفاده از[`step()`](../glossary/?search=step) و ضرب و برگرداندن مختصات است.
|
||||
|
||||
قبل از ادمه دادن سعی کنید تمرینات زیر را انجام دهید:
|
||||
|
||||
* اندازه و نسبت مستطیل را تغییر دهید.
|
||||
|
||||
* با استفاده از همین کد از [`smoothstep()`](../glossary/?search=smoothstep) بجای [`step()`](../glossary/?search=step) استفاده کنید. توجه کنید با تغییر مقادیر می‌توانید از لبه های بلوری به حاشیه های صاف و ظریف بروید.
|
||||
|
||||
* عملیات دیگری انجام دهید که از [`floor()`](../glossary/?search=floor) استفاده کند.
|
||||
|
||||
* یک شکل مورد علاقه خود را پیاده سازی کنید، و تابعی در آن ایجاد کنید که در آینده هم بتوانید از آن استفاده مجدد کنید، عملکرد خود را انعطاف پذیر و کارامد کنید.
|
||||
|
||||
* ِیک تابع دیگر بسازید که فقط اضلاع مستطیل را نمایش دهد.
|
||||
|
||||
* فکر می‌کنید چگونه میتوان مستطیل های بیشتری در بیلبورد قرار داد و آن ها را متحرک ساخت? اگر راهش را پیدا کردید ترکیبی از مستطیل ها و رنگ های مختلف شبیه نقاشی [Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian) بکشید.
|
||||
|
||||
|
||||
|
||||
### دایره ها
|
||||
|
||||
ترسیم مربع و مستطیل روی کاغذ شبکه و مختصات دکارتی آسان بود. اما دایره ها به روشی دیگر احتیاج دارند، به خصوص که ما الگوریتمی لازم داریم که روی هر پیکسل به صورت جدا اجرا میشود. یک راه این است که مختصات را تغییر دهیم و از تابع[`step()`](../glossary/?search=step) برای ترسیم دایره استفاده کنیم.
|
||||
|
||||
چگونه? بیایید برگردیم به کلاس ریاضی و کاغذ شبکه ای مان, زمانی که پرگار را به اندازه شعاع دایره مان باز می‌کردیم, یکی از نقاط پرگار را به وسط دایره فشار می‌دادیم و بقیه را در امتداد آن دایره می‌چرخاندیم.
|
||||
|
||||
|
||||
|
||||
در شیدر ما برای هر پیکسل این سوال را می‌پرسیم، که آیا این پیکسل یا همان ترد در داخل منطقه دایره مورد نظر ما هست یا خیر. این کار را با محاسبه فاصله پیکسل تا مرکر دایره میتوان انجام داد..
|
||||
|
||||
|
||||
|
||||
راه های زیادی برای محاسبه فاصله وجود دارد. راحت ترین آن استفاده از [`distance()`](../glossary/?search=distance) است, که همان طول [`length()`](../glossary/?search=length) بین دو نقطه را محاسبه میکند (در مثال ما فاصله بین پیکسل مورد نظر و مرکز دایره). تابع `length()` کوتاه شده [hypotenuse equation](http://en.wikipedia.org/wiki/Hypotenuse) است، از جزر ([`sqrt()`](../glossary/?search=sqrt)) استفاده میکند.
|
||||
|
||||
|
||||
|
||||
برای محاسبه فاصله می‌توانید از هر کدام از [`distance()`](../glossary/?search=distance), [`length()`](../glossary/?search=length) یا [`sqrt()`](../glossary/?search=sqrt) استفاده کنید. کد زیر حاوی هر 3 این عملکرد ها است، همانطور که پیش بینی می‌کنید هر یک نتیجه مشابهی را بر می‌گردانند.
|
||||
|
||||
* خطوط را از حالت کامت خارج کنید و روش های دیگر را کامنت کنید تا نتیجه یکسان را مشاهده کنید .
|
||||
|
||||
<div class="codeAndCanvas" data="circle-making.frag"></div>
|
||||
|
||||
در مثال قبلی فاصله پیکسل تا مرکز کنوس میزان روشنایی را ترسیم میکند. هرچه پیکسل به مرکز نزدیکتر باشد، مقدار آن تیره و کمتر است. توجه کنید که مقادیر خیلی زیاد نمی‌شوند زیرا فاصله یک پیکسل از مرکز حداکثر کمی بیش از 0.5 است. این را در نظر بگیرید و فکر کنید:
|
||||
|
||||
* چه چیزی از آن می‌توانید استنباط کنید?
|
||||
|
||||
* چگونه از این روش برای کشیدن دایره میتوان استفاده کرد?
|
||||
|
||||
* کد بالا را طوری تغییر دهید که تمام گرادیان دایره داخل کنوس باشد..
|
||||
|
||||
### Distance field
|
||||
|
||||
میتوان مثال بالا را مانند یک نقشه ارتفاع در نظر گرفت، جایی که هر چه تاریک تر باشد یعنی بلند تر است. گرادیان تولید شده الگویی مانند مخروط را به ما نمایش می‌دهد، خود را در بالای آن مخروط در نظر بگیرید، فاصله افقی تا لبه ی مخروط برابر 0.5 است، این عدد از همه جهات ثابت است، با انتخاب محل برش مخروط، میتوان یک دایره در آن سطح بدست آورد.
|
||||
|
||||
|
||||
|
||||
اساس ما برای ساخت اشکال از تفسیر مجدد فضا در این مثال بر اساس فاصله تا مرکز، استفاده میکنیم. این تکنیک بعنوان“distance field” و به روش های گوناگون در outLine فونت ها تا گرافیک سه بعدی از آن استفاده میشود.
|
||||
|
||||
تمرین های زیر را انجام دهید:
|
||||
|
||||
* از تابع [`step()`](../glossary/?search=step) استفاده کنید تا همه چیز بیش تر از 0.5 را به سفید و کمتر از 0.5 را به سایه 0.0 تبدیل کند.
|
||||
|
||||
* رنگ بکگراند و فورگراند را عوض کنید.
|
||||
|
||||
* از تابع[`smoothstep()`](../glossary/?search=smoothstep), با مقادیر مختلف استفاده کنید تا یک مرز نرم برای دایره بسازید.
|
||||
|
||||
* وقتی از نتیجه راضی بودید، از آن یک تابع بسازید تا بعدا بتوانبد استفاده کنید.
|
||||
|
||||
* به دایره رنگ اضافه کنید.
|
||||
|
||||
* آیا می‌تواندی مانند یک قلب تپنده، دایره خود را کوچک و بزرگ کنید؟ می‌تواندی از انیمیشن های فصل قبل الهام بگیرید.
|
||||
|
||||
* آیا می‌توانید دایره را حرکت دهید؟ اضافه کردن دایره های بیشتر چطور؟
|
||||
|
||||
* اگر فیلد فاصله را با عملکرد های دیگر ترکیب کنید چه اتفاقی می‌افتد؟
|
||||
|
||||
```glsl
|
||||
pct = distance(st,vec2(0.4)) + distance(st,vec2(0.6));
|
||||
pct = distance(st,vec2(0.4)) * distance(st,vec2(0.6));
|
||||
pct = min(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
||||
pct = max(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
||||
pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
||||
```
|
||||
|
||||
* با استفاده از این تکنیک سه ترکیب بسازید، اگر به حالت انیمیشنی باشد که چه بهتر!
|
||||
|
||||
#### جعبه ابزار
|
||||
|
||||
بار محاسباتی تابع [`sqrt()`](../glossary/?search=sqrt) و توابعی که از آن استفاده می‌کنند، زیاد است. این یک راه دیگر برای ساخت فیلد فاصله دایره ای با استفاده از ضرب داخلی [`dot()`](../glossary/?search=dot) است.
|
||||
|
||||
<div class="codeAndCanvas" data="circle.frag"></div>
|
||||
|
||||
### فواید دیگر فیلد(میدان) فاصله
|
||||
|
||||
|
||||
|
||||
با استفاده از فیلد فاصله تقریبا میتوان هر چیزی کشید. مشخصا هر چه شکل پیچیده تر باشد، معادله آن پیچیده تر خواهد بود، اما وقتی فرمول فیلد فاصله برای رسم یک شکل را بدست آورید، خیلی ساده میتوان آن را با افکت های دیگر ترکیب یا اضافه کرد، مانند لبه های نرم یا outLine ها . برای همین استفاده از فیلد فاصله در رندر کردن فونت ها بسیار رایج است, مانند [Mapbox GL Labels](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) و [as is described on Chapter 7 of iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921).
|
||||
|
||||
نگاهی به کد زیر بیاندازید.
|
||||
|
||||
<div class="codeAndCanvas" data="rect-df.frag"></div>
|
||||
|
||||
برای شروع مختصات را به مرکز انتقال دادیم و برای مپ کردن مقادیر بین 1 و -1 آن را به نصف فشرده کردیم. همچنین در خط 24 ما فیلد فاصله را با استفاده از تابع [`fract()`](../glossary/?search=fract) نشان می‌دهیم، این تابع پترن ساخته شده را راحتر به نماش می‌گذارد. الگوی میدان فاصله مانند حلقه های باغ zen مکررا تکرار می‌شوند.
|
||||
|
||||
بیایید نگاهی به فرمول فاصله فیلد در خط 19 بیاندازیم. در آنجا ما فاصله تا مکان (.3و.3) را در هر چهار ربع مختصات محاسبه میکنیم (به همین علت از قدر مطلق [`abs()`](../glossary/?search=abs) استفاده کردیم).
|
||||
|
||||
اگر خط 20 را از کامنت خارج کنید، ترکیب تابع فاصله با این چهار نقطه به همراه[`min()`](../glossary/?search=min) استفاده کردیم و الگویی جالب را بدست آوردیم.
|
||||
|
||||
حال خط 21 را از کامنت خارج کنید، همان کار را انجام می‌دهیم اما اینبار توسط تابع [`max()`](../glossary/?search=max) . نتیجه مستطیل هایی با گوشه های خمیده است. توجه کنید که حلقه ها هر چه دورتر هستند، نرم تر می‌شوند.
|
||||
|
||||
خطوط 27 تا 29 را یک به یک از حالت کامنت خارج کنید و کاربرد های مختلف الگوی فاصله فیلد را درک کنید..
|
||||
|
||||
### اشکال قطبی
|
||||
|
||||
|
||||
|
||||
در فصل رنگ ها با محاسبه شعاع و زاویه مختصات دکارتی را به قطبی تبدیل کردیم، از فرمول زیر استفاده کرده بودیم:
|
||||
|
||||
```glsl
|
||||
vec2 pos = vec2(0.5)-st;
|
||||
float r = length(pos)*2.0;
|
||||
float a = atan(pos.y,pos.x);
|
||||
```
|
||||
|
||||
در اول این فصل از قسمتی از این فرمول برای رسم دایره استفاده کردیم. با استفاده از [`length()`](../glossary/?search=length) فاصله پیکسل تا مرکز را محاسبه می‌کردیم. حالا که در مورد فیلد فاصله می‌دانیم، میتوان از راه دیگری برای رسم اشکال در مختصاب قطبی استفاده کرد.
|
||||
|
||||
این روش کمی محدود کننده، اما بسیار ساده است. این روش از تغییر شعاع دایره بسته به زاویه برای رسم اشکال مختلف استفاده میکند. اما چگونه؟ با استفاده از توابع شکل دهی.
|
||||
|
||||
در خطوط 21 تا 25 مثال زیر همان توابع در مختصات دکارتی را در مختصات قطبی مشاهده می‌کنید. یک به یک خط ها را از حالت کامنت خارج کنید، به رابطه بین مختصات های مختلف توجه کنید.
|
||||
|
||||
<div class="simpleFunction" data="y = cos(x*3.);
|
||||
//y = abs(cos(x*3.));
|
||||
//y = abs(cos(x*2.5))*0.5+0.3;
|
||||
//y = abs(cos(x*12.)*sin(x*3.))*.8+.1;
|
||||
//y = smoothstep(-.5,1., cos(x*10.))*0.2+0.5;"></div>
|
||||
|
||||
<div class="codeAndCanvas" data="polar.frag"></div>
|
||||
|
||||
سعی کنید:
|
||||
|
||||
* این اشکال را انیمیت کنید.
|
||||
* توابع مختلف شکل دهی را ترکیب کنید تا برشی وسط شکل بتوانید ایجاد و اشکالی مثل گل، دانه برف و چرخ دنده ایجاد کنید.
|
||||
* از تابع `plot()` که در فصل توابع شکل دهی ساختیم استفاده کنید تا فقط حد فاصل دور اشکال را رسم کنید.
|
||||
|
||||
### ترکیب قدرت ها
|
||||
اکنون که با استفاده از [`atan()`](../glossary/?search=atan) یاد گرفتیم چگونه شعاع دایره را با استفاده از زاویه آن تنظیم کنیم و اشکال مختلف بسازیم, حال میتوان از `atan()` با فیلد فاصله استفاده کرد و تکنیک های که یاد گرفیم روی آن استفاده کرد..
|
||||
|
||||
این ترفند از لبه های چند ضلعی برای ساخت فیلد فاصله با استفاده از مختصات قطبی استفاده میکند. [این کد](http://thndl.com/square-shaped-shaders.html) از [Andrew Baldwin](https://twitter.com/baldand) را نگاهی بیاندازید.
|
||||
|
||||
<div class="codeAndCanvas" data="shapes.frag"></div>
|
||||
|
||||
* با استفاده از این مثال تابعی ایجاد کنید، که مقدار گوشه ها و موقعیت یک شکل را دریافت و یک فیلد فاصله برگرداند.
|
||||
|
||||
* فیلد های فاصله را با استفاده از [`min()`](../glossary/?search=min) و [`max()`](../glossary/?search=max) با هم ترکیب کنید.
|
||||
|
||||
* یک لوگو هندسی را انتخاب کنید، و سعی کنید آن را با استفاده از فیلد فاصله بسازید.
|
||||
|
||||
تبریک! بخش سختی را گذراندید! کمی استراحت کنید و اجازه دهید این مفاهیم جا بیوفتد، ساخت اشکال در نرم افزار Processing آسان است، ولی اینجا خیر. در سرزمین شیدر ها طراحی شکل پیچیده است، و سازگاری با این الگوی جدید می‌تواند طاقت فرسا باشد!
|
||||
|
||||
در آخر این صفحه به شما [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) معرفی شده. این کارت ها به شما توابع شکل دهی را بخوبی یاد می‌دهند. از آن ها در طرح ها و شیدر های خودتان استفاده کنید. این دسته کارت دارای یک منحنی یادگیری تدریجی است. بنابر این تمرین کردن یک کارت در هر روز می‌تواند تا 30 روز شما را به چالش بکشد.
|
||||
|
||||
اکنون که میدانید چگونه اشکال را رسم کنید، مطمئنم ایده های جدید در ذهنتان ایجاد میشود. در فصل بعدی، نحوه حرکت، چرخش و مقیاس پذیری اشکال را خواهید آموخت. و امکان ترکیب آنان را خواهید داشت.
|
||||
101
08/README-fa.md
Normal file
101
08/README-fa.md
Normal file
@ -0,0 +1,101 @@
|
||||
## ماتزیس های 2D
|
||||
|
||||
<canvas id="custom" class="canvas" data-fragment-url="matrix.frag" width="700px" height="200px"></canvas>
|
||||
|
||||
### انتقال
|
||||
|
||||
در قسمت های قبل یاد گرفتیم چگونه اشکل مختلف بسازیم - در اصل ترفند برای حرکت دادن اشکال، حرکت دادن خود محور های مختصات است. میتوان با اضافه کردن یک بردار به ```st``` که مقدار محل هر پیکسل را در خود نگه داشته است، این ترفند را انجام داد. با این کار تمام فضای مختصاتی حرکت میکند.
|
||||
|
||||
|
||||
|
||||
دیدن شکل بالا آسان تر از توضیح است، پس خودتان ببینید.:
|
||||
|
||||
* خط 35 را از حالت کامنت خارج کنید، تا ببینید چگونه فضا خود به خود حرکت میکند.
|
||||
|
||||
<div class="codeAndCanvas" data="cross-translate.frag"></div>
|
||||
|
||||
حالا تمرین زیر را انجام دهید:
|
||||
|
||||
* از ```u_time``` همراه با توابع شکل دهی، طوری استفاده کنید، که شکل بالا به طور جالبت تری حرکت بکند. حرکت خاصی که در نظر دارید را جستجو کنید و سعی کنید حرکت شکل بالا را مثل آن شبیه یازی کنید. ایده گرفتن از حرکات دنیای واقعی می‌تواند مفید باشد، مثلا حرکت آونگ، توپ، شتاب گرفتن ماشین یا توقف دوچرخه.
|
||||
|
||||
### چرخش
|
||||
|
||||
برای چرخاندن یک شکل، باز هم نیاز است تمام فضا را بچرخانیم. برای این کار از [matrix](http://en.wikipedia.org/wiki/Matrix_%28mathematics%29) استفاده میکنیم. ماتریس مجموعه ای متشکل از اعداد در سطر ها ستون هاست. بردار ها با قوانین خاصی در ماتریس ها می‌توانند ضرب شوند تا مقادیر آن بردار اصلاح و عوض شود.
|
||||
|
||||
[](https://en.wikipedia.org/wiki/Matrix)
|
||||
|
||||
در GLSL پشتیبانی از ماتریس های 2و 3 و 4 بعدی تعبیه شده است: [```mat2```](../glossary/?search=mat2) (2x2), [```mat3```](../glossary/?search=mat3) (3x3) and [```mat4```](../glossary/?search=mat4) (4x4). همچنین GLSL از ضرب ماتریس ها پشتیبانی میکند (```*```) همچنین از تابع خاص ([```matrixCompMult()```](../glossary/?search=matrixCompMult)).
|
||||
|
||||
بر اساس رفتار ماتریس ها، می‌توانیم ماتریس هایی تولید کنیم که رفتار خاصی انجام می‌دهند، مثلا از ماتریس میتوان برای حرکت یک بردار استفاده کرد :
|
||||
|
||||
|
||||
|
||||
جالب تر اینکه از یک ماتریس برای چرخش سیستم مختصات می‌توانیم استفاده کنیم:
|
||||
|
||||
|
||||
|
||||
به تابعی که چرخش دو بعدی را انجام می‌دهد نگاهی بیاندازید، این تابع برای چرخش مختصات حول نقطه 0و0 از فرمول فوق پیروی میکند [formula](http://en.wikipedia.org/wiki/Rotation_matrix) .
|
||||
|
||||
```glsl
|
||||
mat2 rotate2d(float _angle){
|
||||
return mat2(cos(_angle),-sin(_angle),
|
||||
sin(_angle),cos(_angle));
|
||||
}
|
||||
```
|
||||
|
||||
با توجه که روشی که در رسم اشکال داشتیم، این دقیقا آن چیزی نیست که میخواهیم. شکل ضربدری ما در مرکز کنوس کشیده شده است، پس قبل از چرخواندن فضا باید شکل را از مرکز به نقظه 0و0 انتقال دهیم، فضا را بچرخوانیم، سپس در نهایت شکل را به مکان اصلی آن برگردانیم.
|
||||
|
||||
|
||||
|
||||
مانند کد زیر:
|
||||
|
||||
<div class="codeAndCanvas" data="cross-rotate.frag"></div>
|
||||
|
||||
تمرین های زیر را انجام دهید:
|
||||
|
||||
* خط 45 را از حالت کامنت خارج کنید و ببینید چه اتفاقی در حال رخ دادن است.
|
||||
|
||||
* انتقال در خط های 37 و 39 را قبل و بعد از چرخش را کامنت کنید و ببینید چه اتفاقی می‌افتد.
|
||||
|
||||
* برای بهبود انیمیشن در در تمرین انتقال، از چرخش استفاده کنید.
|
||||
|
||||
### اندازه
|
||||
|
||||
دیدم که چگونه ماتریس ها کمک به جابه جایی و چرخش در فضا کمک می‌کنند. (یا به طور دقیق تر، انتقال سیستم مختصات برای چرخش و انتقال) اگر با نرم افزار های سه بعدی یا توابع push و pop در نزم افزار processing کار کرده باشید، میدانید که ماتریس ها برای تغییر اندازه اشکال هم استفاده می‌شوند.
|
||||
|
||||
|
||||
|
||||
طبق فرمول قبلی میتوان نحوه ساخت ماتریس مقیاس دو بعدی را فهمید:
|
||||
|
||||
```glsl
|
||||
mat2 scale(vec2 _scale){
|
||||
return mat2(_scale.x,0.0,
|
||||
0.0,_scale.y);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="codeAndCanvas" data="cross-scale.frag"></div>
|
||||
|
||||
تمرینات زیر را انجام دهید تا عمیق تر نحوه عملکرد آن را متوجه شوید..
|
||||
|
||||
* خط 42 را از کامنت خارج کنید و تغییرات فضای مختصات را مشاهده کنید.
|
||||
|
||||
* کد های انتقال در خطوط 37 و 39 را کامنت کنید و ببینید چه اتفاقی رخ می‌دهد.
|
||||
|
||||
* سعی کنید ماتریس انتقال را با ماتریس اندازه(مقیاس) ترکیب کنید، توجه داشته باشید که ترتیب مهم است. ابتدا ماتریس ها را با هم ضرب کنید و سپس آنان در بردار مختصات ضرب کنید.
|
||||
|
||||
* حالا که نحوه کشیدن و انتقال و چرخش شکل های مختلف را میدانید، وقت آن است که یک شیدر ترکیبی با آن ها بسازید. یک UI مثل [fake UI or HUD (heads up display)](https://www.pinterest.com/patriciogonzv/huds/) بسازید. از این مثال داخل shader toy هم می‌توانید ایده و انگیزه بگیرید [Ndel](https://www.shadertoy.com/user/ndel).
|
||||
|
||||
<iframe width="800" height="450" frameborder="0" src="https://www.shadertoy.com/embed/4s2SRt?gui=true&t=10&paused=true" allowfullscreen></iframe>
|
||||
|
||||
### سایر کاربرد های ماتریس: YUV رنگ
|
||||
|
||||
[YUV](http://en.wikipedia.org/wiki/YUV) یک فضای رنگی است، که برای رمز گذاری آنالوگ عکس و فیلم است، و برای کاهش پهنای باند رنگی از دامنه درک انسان استفاده میکند.
|
||||
|
||||
کد زیر این عملیات ماتریسی را در GLSL برا تبدیل رنگ ها از حالتی به حالت دیگر نشان می‌دهد.
|
||||
|
||||
<div class="codeAndCanvas" data="yuv.frag"></div>
|
||||
|
||||
همانطور که می‌بینید با رنگ ها مانند بردار رفتار میکنیم و آنان را در هم ضرب میکنیم به این صورت ما مقادیر را به اطراف منتقل میکنیم.
|
||||
|
||||
در این قسمت یاد گرفتیم، چگونه با استفاده از ماتریس ها انتقال، تغییر مقیاس و چرخش انجام دهید. این انتقال ها برای ساخت ترکیب هایی از شکل های که قبلا آموختیم ضروری خواهند بود. در فصل بعد از آنچه تا کنون آموختیم برای ساخت پترن های رویه ای procedural patterns استفاده خواهیم کرد، و متوجه خواهید شد تکرار و تغییر کد نویسی می‌تواند یک تمرین هیجان انگیز باشد.
|
||||
120
09/README-fa.md
Normal file
120
09/README-fa.md
Normal file
@ -0,0 +1,120 @@
|
||||
## الگو ها
|
||||
|
||||
از آنجا که شیدر ها پیکسل به پیکسل اجرا می‌شوند، مهم نیست که چقد یک شکل را تکرار کنید. محاسبات ثابت است. این به معنی آن است که شیدر ها برای الگو ها و پترن های تکرار شونده مناسب هستند.
|
||||
|
||||
[  ](../edit.php#09/dots5.frag)
|
||||
|
||||
در این فصل قصد داریم آنچه تا کنون آموخته ایم را بکار ببریم و در امتداد کنوس اشکال را تکرار کنیم. مانند فصل های قبلی استراتژی ما مبتی بر عملیات رو مختصات فضای بین 0.0 و 1.0 است، به این ترتیب شکل هایی که بین 0.0 و 1.0 کشیده بودیم تکرار می‌شوند.
|
||||
|
||||
*"شبکه بندی چارچوبی را فراهم میکند که به انسان ها قدرت شهود و اختراع می‌دهد. در هرج و مرج های الگو های طبیعی هم یک انعطاف و نظم نهفته است، از الگو های اولیه روی سفال گرفته تا موزاییک های هندسی در حمام های رومی، مدت هاست مردم از شبکه ها برای بهبود و تزئیین زندگی خود استفاده می‌کنند "* [*10 PRINT*, Mit Press, (2013)](http://10print.org/)
|
||||
|
||||
بیایید اول تابع [```fract()```](../glossary/?search=fract) را بیاد بیاوریم. قسمت اعشاری یک عدد را بر می‌گرداند, ```fract()``` مانند ([```mod(x,1.0)```](../glossary/?search=mod)) است. به عبارت دیگر, [```fract()```](../glossary/?search=fract) عدد بعد از نقطه اعشار را بر می‌گرداند. سیستم محتصات نرمالایز شده ما (```st```) بین 0.0 و 1.0 است، پس منطقی نیست همچین کاری انجام دهم:
|
||||
|
||||
```glsl
|
||||
void main(){
|
||||
vec2 st = gl_FragCoord.xy/u_resolution;
|
||||
vec3 color = vec3(0.0);
|
||||
st = fract(st);
|
||||
color = vec3(st,0.0);
|
||||
gl_FragColor = vec4(color,1.0);
|
||||
}
|
||||
```
|
||||
|
||||
اما اگر سیستم مختصات را به بالا اسکیل کنیم - مثلا سه برابر - ما سه توالی درون خطی بین 0و1 داریم: اولی بین 0و1 است, بعد از آن مربوط به نقاط شناور بین 1 و 2 و همچنین بعد از آن نقاط شناور بین 2 و 3.
|
||||
|
||||
<div class="codeAndCanvas" data="grid-making.frag"></div>
|
||||
|
||||
حال وقت آن است با برداشتن خط 27 در هر زیر فضا، شکلی ترسیم کنیم. (از آنجا که x,y ما به یک اندازه ضرب می‌شوند، نسبت ابعاد فضا تغییری نمی‌کند و اشکال مطابق انتظار تغییر می‌کنند.)
|
||||
|
||||
برخی از تمرینات زیر را امتحان کنید تا درک عمیق تری پیدا کنید:
|
||||
|
||||
* فضا را در اعداد مختلف ضرب کنید، با مقادیر اعشاری و همچنین مقادیر مختلف برای x و y.
|
||||
|
||||
* از عملکرد فوق، تابعی که قابل استفاده مجدد باشد بسازید.
|
||||
|
||||
* فضا را به سه ردیف و سه ستون تقسیم کنید، راهی پیدا کنید که بفهمید هر ترد در کدام ستون و ردیف است، از آن برای تغییر شکل و نشان دادن آن استفاده کنید. سعی کنید شکل یک بازی دوز را بسازید.
|
||||
|
||||
### اعمال ماتریس داخل الگو ها
|
||||
|
||||
از آنجا که هر سلول نسخه کوچکتری ار سیستم مختصات نرمال شده است، میتوان مثل قبل برای چرخش و انتقال از ماتریس ها استفاده کرد.
|
||||
|
||||
<div class="codeAndCanvas" data="checks.frag"></div>
|
||||
|
||||
* به روش های جالب تری برای متحرک سازی این الگو ها فکر کنید، رنگ و شکل و و حرکت را می‌توانید انیمیت کنید، سه انیمیشن متفاوت بسازید.
|
||||
|
||||
* با ترکیب اشکال مختلف الگو های پیچیده تر را از نو بسازید.
|
||||
|
||||
|
||||
[](../edit.php#09/diamondtiles.frag)
|
||||
|
||||
* لایه های مختلف پترن را با هم ترکیب کنید و سعی کنید [الگوی اسکاتلندی](https://www.google.com/search?q=scottish+patterns+fabric&tbm=isch&tbo=u&source=univ&sa=X&ei=Y1aFVfmfD9P-yQTLuYCIDA&ved=0CB4QsAQ&biw=1399&bih=799#tbm=isch&q=Scottish+Tartans+Patterns) خود را بسازید.
|
||||
|
||||
[  ](http://graphicriver.net/item/vector-pattern-scottish-tartan/6590076)
|
||||
|
||||
### جابجایی الگو ها
|
||||
|
||||
فرض کنیم میخواهیم یک دیوار آجری بسازیم. با نگاه کردن به دیوار می‌فهمید هر ردیف، نصف اندازه آجر جابه جا شده است چگونه می‌توانیم این کار را انجام دهیم?
|
||||
|
||||
|
||||
|
||||
برای اولین قدم باید بفهمیم ردیف ترد ما یک عدد زوج است یا فرد. چون می‌توانیم با دانستن آن، مقدار x را در آن ردیف جابجا کنیم.
|
||||
|
||||
____دو پاراگراف بعدی را با کمک هم باید اصلاح کنیم____
|
||||
|
||||
برای تعیین این که نخ ما در ردیف زوج یا فرد است از تابع باقیمانده [```mod()```](../glossary/?search=mod) بر عدد 2 استفاده میکنیم و سپس مشاهده کنیم که آیا نتیجه زیر 1.0 است یا خیر. به فرمول زیر نگاهی بیاندازید و دو خط آخر را از حالت کامنت خارج کنِد.
|
||||
|
||||
<div class="simpleFunction" data="y = mod(x,2.0);
|
||||
// y = mod(x,2.0) < 1.0 ? 0. : 1. ;
|
||||
// y = step(1.0,mod(x,2.0));"></div>
|
||||
|
||||
همانطور که در خط دوم مثال بالا دیدید، می‌توانیم از [اپراتور سه گانه](https://en.wikipedia.org/wiki/%3F:) استفاده کنیم و چک کنیم اگر [```mod()```](../glossary/?search=mod) بر 2 زیر 1 است یا بطور مشابه در خط سوم از تابع [```step()```](../glossary/?search=step) استفاده کنیم, روش دوم سریع تر است، اما چرا؟ می‌دانیم دانستن عملیات اجرا و بهینه سازی هر نوع کارت گرافیک دشوار است، اما توابع داخلی سریعتر اجرا می‌شوند، پس هر موقع می‌توانستید از توابع داخلی استفاده کنید، حتما بجای کد های شرطی از آنان استفاده کنید.
|
||||
|
||||
بنابراین اکنون که فرمول اعداد فرد خود را داریم، میتوان برای ردیف های فرد عملیات جابه جایی را انجام دهیم، خط 14 در مثال زیر جایی است که ردیف های فرد را شناسایی میکنیم و آنان را نیم واحد جابجا میکنیم. توجه داشته باشید که برای ردیف های زوج نتیجه عملکرد ما 0.0 است و ضرب 0.0 در مقدار جابه جایی 0.5 هیچ مقداری را جابجا نمی‌کند. اما در ردیف های فرد با ضرب 1.0 در مقدار جابجایی 0.5، آن ردیف را در محور مختصات 0.5 واحد جابجا میکنیم.
|
||||
|
||||
حال سعی کنید خط 32 را از کامنت خارج کنید، این کار نسبت ابعاد مختصات را می‌کشد تا شکل آجر مانند را تقلید کند. با خارج کردن حالت کامنت خط 40 می‌توانید ببینید چگونه سیستم مختصات به رنگ قرمز و سبز ترسیم شده است.
|
||||
|
||||
<div class="codeAndCanvas" data="bricks.frag"></div>
|
||||
|
||||
* سعی کنید جابجایی را بر حسب زمان متحرک سازی کنید.
|
||||
|
||||
* انیمیشن های دیگری بسازید که ردیف های زوج به سمت چپ و ردیف های فرد به سمت راست حرکت کنند.
|
||||
|
||||
* آیا این کار را برای ستون ها می‌توانید انجام دهید؟
|
||||
|
||||
* سعی کنید جابجایی در x و y را ترکیب کنید و چیزی مثل شکل زیر بسازید:
|
||||
|
||||
<a href="../edit.php#09/marching_dots.frag"><canvas id="custom" class="canvas" data-fragment-url="marching_dots.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
## کاشی های Truchet
|
||||
|
||||
حال که می‌توانیم بفهمیم سلول هایمان در ستون ها و ردیف های زوج یا فرد هستند, پس بسته به موقعیت سلول ها میتوان یک طراحی واحد را چندین بار استفاده کرد. الگوی [Truchet Tiles](http://en.wikipedia.org/wiki/Truchet_tiles) را در نظر بگیرید، که در آن از یک عنصر طراحی واحد میتوان به چهار روش زیر استفاده کرد:
|
||||
|
||||
|
||||
|
||||
با تغییر الگو در میان کاشی ها، میتوان مجموعه ای بینهایت از طرح های مختلف و پیچیده ساخت.
|
||||
|
||||
|
||||
|
||||
به تابع ```rotateTilePattern()``` خوب دقت کنید, که چگونه فضا را به چهار سلول تقسیم میکند و به هر کدام زاویه چرخشی اختصاص می‌دهد.
|
||||
|
||||
<div class="codeAndCanvas" data="truchet.frag"></div>
|
||||
|
||||
* خط های 69 تا 72 را از حالت کامنت خارج کنید، تا طرح های جدید را ببینید.
|
||||
|
||||
* الگوی مثلث سیاه و سفید را با الگویی دیگری مثل نیم دایره، مربع یا خطوط تغییر دهید.
|
||||
|
||||
* الگو های دیگری که عناصر آن با توجه به موقعیتشان می‌چرخند بسازید.
|
||||
|
||||
* الگویی بسازید که سایز خواص را با توجه به موقعیت سلول ها تغییر دهد.
|
||||
|
||||
* به چیز دیگری فکر کنید. چیزی که لزوما الگویی و پترنی نباشد تا بتوانید اصول این بخش را کامل یاد بگیرید چیزی مثل: (I Ching hexagrams)
|
||||
|
||||
<a href="../edit.php#09/iching-01.frag"><canvas id="custom" class="canvas" data-fragment-url="iching-01.frag" width="520px" height="200px"></canvas></a>
|
||||
|
||||
## قوانین خودتان را بسازید
|
||||
|
||||
ایجاد الگو های رویه ای یک نوع تمرین ذهنی برای یافتن حداقل عناصر قابل استفاده مجدد است، این یک عمل قدیمی است; انسان ها برای مدت طولانی است که از شبکه ها و الگو ها برای تزئین پارچه، کف زمین و اطراف اشیا استفاده می‌کنند، از الگو های داری پیچ و خم در یونان باستان، تا طراحی مشبک چینی، لذت تکرار و تغییر عناصر، چشم ما را جلب میکند. نگاهی به [decorative](https://archive.org/stream/traditionalmetho00chririch#page/130/mode/2up) [patterns](https://www.pinterest.com/patriciogonzv/paterns/) بیاندازید و ببینید که چگونه هنرمندان و طراحان سابقه طولانی در پیمیاش مرز بین قابل پیش بینی بودن و تنوع و هرج و مرج دارند. از الگو های هندسی عربی گرفته تا طرح های پارچه ای و زیبای آفریقایی، الگو های زیادی برای یادگیری وجود دارد.
|
||||
|
||||
|
||||
|
||||
با اتمام این فصل درس های ما در مورد الگوریتم های شکل دهی پایان یافت، در فصل های بعد می آموزیم چگونه برخی آنتروپی ها را به شیدر خورد اضافه کنیم و طرح های مولد تولید کنیم.
|
||||
@ -3,7 +3,7 @@
|
||||
# The Book of Shaders
|
||||
*by [Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) and [Jen Lowe](http://jenlowe.net/)*
|
||||
|
||||
این یک راهنمای گام به گام برای ورود به دنیای انتزاعی و پیچیده فرگمنت(خرد) شیدر هاست.
|
||||
این یک راهنمای گام به گام برای ورود به دنیای انتزاعی و پیچیده فرگمنت شیدر هاست.
|
||||
|
||||
<div class="header">
|
||||
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=B5FSVSHGEATCG" style="float: right;"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt=""></a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user