mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-11 13:10:57 +00:00
Translate Chapter 5,6 to Persian(fa)
This commit is contained in:
Ahmad
parent
0cb9f1762c
commit
1f3daf0282
139
05/README-fa.md
Normal file
139
05/README-fa.md
Normal file
@ -0,0 +1,139 @@
|
||||
# رسم الگوریتمی
|
||||
## توابع شکلی
|
||||
|
||||
این قسمت از آموزش را می‌توان درس حصار آقای میاگی نامگذاری کرد. در قسمت قبل ما موقعیت نرمالایز شده x و y را به کانال قرمز و سبز مپ کردیم. اساسا ما تابعی ایجاد کردیم که دو بردار x و y می‌گیرد و یک بردار چهار بعدی r,g,b,a بر می‌گرداند. اما قبل از اینکه به تبدیل داده ها بین بعد ها بپردازیم، باید از خیلی ساده تر شروع کنیم...خیلی ساده تر. یعنی چگونگی ساخت تابع یک بعدی. هرچه زمان و انرژی بیشتری برای تسلط و یادگیری آن صرف کنید، قدرت شیدر نویسی شما بهتر می‌شود.
|
||||
|
||||
|
||||
|
||||
|
||||
ساختار کد زیر حصار ما خواهد بود. در آن ما مقدار نرمالایز شده x را (st.x) به دو روش نمایش می‌دهیم. یکی با روشنایی (گرادیان سیاه به سفید) و دیگری با ترسیم خط سبز (مقدار x برابر y). خیلی روی تابع plot تمرکز نکنید. بزودی در مورد آن بیشتر می‌فهمید.
|
||||
<div class="codeAndCanvas" data="linear.frag"></div>
|
||||
|
||||
**نکته**: کانستراکتور vect3 در مثال بالا می‌فهمد میخواهید 3 کانال آن را با یک مقدار پر کنید، همچنین vect4 می‌فهمد میخواهید یک بردار 4 بعدی با استفاده از یک بردار سه بعدی و یک ورودی دیگر بسازید. در این مورد عدد چهارم آلفا هست.
|
||||
|
||||
این کد حصار شماست. مهم است که آن را مشاهده و درک کنید.، شما بارها و بار ها به این فضا باز خواهید گشت. شما استاد ترکیب و نقش دادن این شکل می‌شوید.
|
||||
|
||||
این رابطه یک به یک بین x, y یا همین روشنایی به عنوان درون یابی خطی (linear interpolation) شناخته می‌شود. در این مثال می‌توان با کمی ریاضیات به خط شکل بدهیم. برای مثال می‌توان x را به توان 5 رساند و یک خط منحنی تشکیل داد.
|
||||
|
||||
<div class="codeAndCanvas" data="expo.frag"></div>
|
||||
|
||||
جالب است، اینطور نیست؟ در خط 22 عدد های مختلف را امتحان کنید مثل : 20.0 ,0.02, 2.0, 1.0, 0.0, 0.2 . درک رابطه بین مقدار و توان بسیار مفید خواهد بود. استفاده از این نوع توابع ریاضی در جاهای متخلف به شما امکان کنترل جریان مقادیر را امکان می‌سازد.
|
||||
|
||||
[`توان()`](../glossary/?search=pow) یکی از تابع های تعبیه شده در GLSL هست. بیشتر این توابع در سطح سخت افزار شتابدهی می‌شوند. به این معنا که اگر درست استفاده شوند، کد شما را سریع می‌کنند.
|
||||
|
||||
عملکرد توان در خط 22 را با عملکرد های مقابل جایگزین کنید: [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt). بعضی از این توابع را اگر با عدد پی ترکیب کنید بسیار جالب می‌شوند. در خط 8 می‌بینید که بجای استفاده از خود عدد PI،
|
||||
من یک ماکرو تعریف کرده ام.
|
||||
### Step و Smoothstep
|
||||
|
||||
GLSL همچنین دارای چندین تابع خاص تعبیه شده است که توسط سخت افزار شتاب دهی می‌شوند.
|
||||
|
||||
[`step()`](../glossary/?search=step) دو پارامتر دریافت می‌کند. اولی حد یا همان آستانه است و دومی مقداریست که میخواهیم بررسی کنیم یا عبور دهیم. اگر مقدار ورودی در این حد باشید، مقدار 0 را بر می‌گرداند، در حالی که بقیه مقادیر بالای حد مجاز مقدار 1 را بر می‌گردانند.
|
||||
|
||||
مقدار حد را در خط 20 سعی کنید تغییر دهید و نتیجه را مشاهده کنید.
|
||||
|
||||
<div class="codeAndCanvas" data="step.frag"></div>
|
||||
|
||||
تابع دیگر در این مورد [`smoothstep()`](../glossary/?search=smoothstep) یک دامنه دو عددی را دریافت و ورودی سوم را با آن ها مقایسه می‌کند. اگر وردی بین آن دو عدد بود مقدار پخش شده بین 0 و 1 برگردانده می‌شود ولی اگر مقدار ورودی سوم کوچکتر یا بزرگتر از بازه بود مقادیر 0 یا 1 برگردانده می‌شود.
|
||||
|
||||
<div class="codeAndCanvas" data="smoothstep.frag"></div>
|
||||
|
||||
در خط 12 مثال قبل ما از smoothstep برای کشیدن خط سبز در تابع 'plot' استفاده کردیم. برای هر مقدار x تابع ما یک مقدار خاص y تولید می‌کند اما چگونه؟ با اتصال دو smoothstep به هم. به تابع زیر نگاه کنید، در خط 20 کد را جایگزین کنید، پس زمینه شبیه یک خط شد؟
|
||||
|
||||
```glsl
|
||||
float y = smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x);
|
||||
```
|
||||
|
||||
### Sine and Cosine
|
||||
|
||||
اگر میخواهید برای انیمیت، شکل دهی، یا ترکیب مقادیر از ریاضیات استفاده کنید، هیچ چیز بهتر از دوست شدن با سینوس و کسینوس نیست.
|
||||
|
||||
این دو عملکرد اساسی مثلثاتی با هم کار می‌کنند تا دایره هایی را بسازند که به اندازه چاقوی ارتش سوئیس مفید باشند. بسیار مهم است که بدانید چگونه رفتار می‌کنند و چگونه می‌توان آنان را ترکیب کرد. به طور خلاصه، آنان با توجه به زاویه، موقعیت ([cosine](../glossary/?search=cos)) یا همان x و ([sine](../glossary/?search=sin)) یا همان y یک نقطه را در لبه دایره با شعاع 1 بر می‌گردانند. این واقعیت که آنان مقادیر نرمالایز شده بین -1 و 1 به طور نرم برمی‌گردانند، آنان را به ابزاری باور نکردنی تبدیل می‌کند.
|
||||
|
||||
|
||||
|
||||
اگرچه توصیف تمام روابط مثلثاتی و دایره ها دشوار است اما انیمیشن فوق خلاصه ای از این روابط را به شما نمایش می‌دهد.
|
||||
|
||||
<div class="simpleFunction" data="y = sin(x);"></div>
|
||||
|
||||
نگاهی دقیق به این موج سینوسی بیاندازید که چگونه مقادیر y به طور نرم و پیوسته بین -1 و 1 در جریان است. همانطور که در مثال های قسمت قبل دیدیم شما می‌توانید از این رفتار سینوسی برای انیمیت مقادیر استفاده کنید. اگر این مثال را روی مرورگر می‌خوانید پس می‌توانید کد فرمول بالا را تغییر دهید و نحوه تغییر موج را مشاهده کنید. توجه: نقطه ویرگول را در آخر سطر ها فراموش نکنید.
|
||||
|
||||
این تمرین ها را انجام دهید و نتیجه را ببینید:
|
||||
|
||||
* قبل از محاسبه سینوس به x مقدار u_time را اضافه کنید. در امتداد x حرکت خواهد کرد.
|
||||
|
||||
* قبل از محسبه سینوس x را در عدد PI ضرب کنید. می‌بینید که چگونه .نمودار جمع می‌شود و در هر دو مقدار صحیح یک چرخه اتفاق می‌افتد
|
||||
|
||||
* اینبار u_time را قبل از محاسبه سینوس در x ضرب کنید، مشاهده می‌کنید که فرکانس بیشتر و بیشتر فشرده می‌شود، توجه کنید شاید u_time عدد خیلی بزرگی باشد و نتوانید نموادار را مشاده کنید. در این صورت صفحه را دوباره بارگذاری کنید.
|
||||
|
||||
* 1.0 را به سینوس x اضافه کنید. تمام نمودار یک واحد بالا می‌رود و مقادیر بین 0 و 2 نوسان می‌کنند.
|
||||
|
||||
* سینوس x را در 2.0 ضرب کنی، و تغییرات را ببینید
|
||||
|
||||
* مقدار قدر مطلق ([`abs()`](../glossary/?search=abs)) سینوس را سعی کنید مشاهده کنید، مانند اثرات جهش توپ خواهد شد.
|
||||
|
||||
* قسمتی کسری ([`fract()`](../glossary/?search=fract)) سینوس X را مشاهده کنید.
|
||||
|
||||
* بزرگترین عدد صحیح ([`ceil()`](../glossary/?search=ceil)) و کوچکترین عدد صحیح ([`floor()`](../glossary/?search=floor)) را به نتیجه [`sin(x)`](../glossary/?search=sin) اعمال کنید، تا یک موج دیجیتال از مقادیر 1 و -1 ببینید.
|
||||
|
||||
### برخی توابع مفید دیگر
|
||||
در این انتها توابع جدیدی را معرفی کرده ایم. اکنون زمان آن است که یکی یکی آنان را امتحان کنید. این عملکرد ها را بشناسید و نحوه رفتار آنان را مطالعه کنید، شاید تعجب کرده این و می‌گویید چرا؟ یک جستجوی گوگل در مورد "generative art" شما را آگاه می‌کند. حواستان باشد این توابع حصار های ما هستند. ما در یک بعد در حال استاد شدن هستیم، بزودی نوبت به ابعاد دو و سه و چهار می‌شود.
|
||||
|
||||
|
||||
|
||||
<div class="simpleFunction" data="y = mod(x,0.5); // return x modulo of 0.5
|
||||
//y = fract(x); // return only the fraction part of a number
|
||||
//y = ceil(x); // nearest integer that is greater than or equal to x
|
||||
//y = floor(x); // nearest integer less than or equal to x
|
||||
//y = sign(x); // extract the sign of x
|
||||
//y = abs(x); // return the absolute value of x
|
||||
//y = clamp(x,0.0,1.0); // constrain x to lie between 0.0 and 1.0
|
||||
//y = min(0.0,x); // return the lesser of x and 0.0
|
||||
//y = max(0.0,x); // return the greater of x and 0.0 "></div>
|
||||
|
||||
### توابع شکل دهی پیشرفته
|
||||
|
||||
[Golan Levin](http://www.flong.com/) دارای داکیومنت عالی از عملکرد های پیچیده تر شکل دهی است، که فوق العاده مفید هستند. برای ساخت منابع کد خودتان، انتقال آنان به GLSL حرکتی بسیار هوشمندانه است
|
||||
|
||||
* توابه شکل دهنده چند جمله ای: [www.flong.com/archive/texts/code/shapers_poly](http://www.flong.com/archive/texts/code/shapers_poly/)
|
||||
|
||||
* توابه شکل دهنده نمایی: [www.flong.com/archive/texts/code/shapers_exp](http://www.flong.com/archive/texts/code/shapers_exp/)
|
||||
|
||||
* توابه شکل دهنده دایره ای و بیضوی: [www.flong.com/archive/texts/code/shapers_circ](http://www.flong.com/archive/texts/code/shapers_circ/)
|
||||
|
||||
* توابع Bezier و سایر پارامتر های شکل دهنده: [www.flong.com/archive/texts/code/shapers_bez](http://www.flong.com/archive/texts/code/shapers_bez/)
|
||||
|
||||
<div class="glslGallery" data="160414041542,160414041933,160414041756" data-properties="clickRun:editor,hoverPreview:false"></div>
|
||||
|
||||
مانند سرآشپز ها که ادویه و مواد مختلف و عجیب را جمع آوری می‌کنند، هنرمندان دیجیتال و برنامه نویسان خلاق هم، علاقه خاصی به استفاده از تابع های مخصوص به خود دارند.
|
||||
|
||||
[Iñigo Quiles](http://www.iquilezles.org/) مجموعه ای عالی از [توابع مفید](http://www.iquilezles.org/www/articles/functions/functions.htm) دارد. بعد از خواندن [این مقاله](http://www.iquilezles.org/www/articles/functions/functions.htm) نگاهی به توابع ترجمه شده به GLSL آن بیاندازید. به تغییرات کوچکی که لازم هستند دقت کنید مانند نقطه در اعداد شناور و استفاده از نام GLSL برای توابع C، برای مثال بجای `powf()` از `pow()` استفاده شده.
|
||||
|
||||
<div class="glslGallery" data="05/impulse,05/cubicpulse,05/expo,05/expstep,05/parabola,05/pcurve" data-properties="clickRun:editor,hoverPreview:false"></div>
|
||||
|
||||
برای بالا بردن انگیزه تان در اینجا یک مثال از ([Danguafer](https://www.shadertoy.com/user/Danguafer)) آوردم. که نشان دهنده توانایی بالا او در توابع شکل دهنده است.
|
||||
|
||||
<iframe width="800" height="450" frameborder="0" src="https://www.shadertoy.com/embed/XsXXDn?gui=true&t=10&paused=true" allowfullscreen></iframe>
|
||||
|
||||
در قسمت بعد چیز های جدیدی را یاد می‌گیریم، ابتدا مخلوط کردن نگ ها و سپس ترسیم اشکال را مرور خواهیم کرد.
|
||||
|
||||
#### تمرین
|
||||
|
||||
به جدول معادلات زیر که توسط [Kynd](http://www.kynd.info/log/) ساخته شده است، نگاه بیاندازید. ببینید چگونه او توابع وخصوصیات آنان را برای کنترل مقادیر بین 0.0 تا 1.0 ترکیب می‌کند. حال نوبت شما است که این توابع را تکرار و تمرین کنید. به یاد داشته باشید هر چه بیشتر تمرین کنید کاراته شما بهتر خواهد شد.(اشاره به موضوع اول این بخش)
|
||||
|
||||
|
||||
|
||||
#### جعبه ابزار
|
||||
|
||||
در اینجا چند ابزار آورده شده که تجسم نوع عملکرد و توابع را برای شما آسان می‌کند.
|
||||
|
||||
* Grapher: اگر یک سیستم مک دارید در اسپات لایت خود grapher را تایپ کنید تا ازین ابزار بسیار مفید استفاده کنید.
|
||||
|
||||
|
||||
|
||||
* [GraphToy](http://www.iquilezles.org/apps/graphtoy/): دوباره [Iñigo Quilez](http://www.iquilezles.org) او ابزاری برای تجسم توابع GLSL در WEBGL ساخته است.
|
||||
|
||||
|
||||
|
||||
* [Shadershop](http://tobyschachman.com/Shadershop/): این ابزار شگفت انگیز توسط [Toby Schachman](http://tobyschachman.com/) ساخته شده است که به شما می آموزد چگونه توابع پیچیده را به روش بصری به طور باورنکردنی بسازید.
|
||||
|
||||
|
||||
140
06/README-fa.md
Normal file
140
06/README-fa.md
Normal file
@ -0,0 +1,140 @@
|
||||
|
||||
|
||||
## رنگ ها
|
||||
|
||||
خیلی زمان زیادی برای صحبت در مورد بردار های GLSL نداریم، اما قبل از ادامه دادن، یادگیری آنان مهم است و رنگ ها راهی خوب برای فهمیدن و کسب اطلاعات بیشتر در مورد آنان است.
|
||||
|
||||
آگر با برنامه نویسی شی گرا آشنا هستید مشاهده کردید که ما مانند ساختار های استراکت زبان C به مقادیر داخل بردار ها دسترسی داریم.
|
||||
|
||||
```glsl
|
||||
vec3 red = vec3(1.0,0.0,0.0);
|
||||
red.x = 1.0;
|
||||
red.y = 0.0;
|
||||
red.z = 0.0;
|
||||
```
|
||||
|
||||
تعریف مقادیر رنگ با x, y, z می‌تواند گمراه کننده باشد، برای همین روش های دیگری برای دسترسی به این مقادیر وجود دارند، مقادیر x ,y ,z را می‌توان با r ,g ,b هم صدا زد. و حتی s, t, p (معمولا برای مختصات فضای یک تکستچر ازین نام ها استفاده می‌شود، در فصل بعدی خواهید دید). حتی با مکان مقدار مورد نظرتان هم می‌توان از آنان استفاده کرد مثلا [1] , [2], [3].
|
||||
|
||||
مقدار های داخل هر خط در مثال زیر با هم برابر هستند:
|
||||
|
||||
```glsl
|
||||
vec4 vector;
|
||||
vector[0] = vector.r = vector.x = vector.s;
|
||||
vector[1] = vector.g = vector.y = vector.t;
|
||||
vector[2] = vector.b = vector.z = vector.p;
|
||||
vector[3] = vector.a = vector.w = vector.q;
|
||||
```
|
||||
|
||||
این روش های مختلف برای دسترسی به داده ها، برای کمک به شما در نوشتن کد های واضح تر است. این منعطف بودن زبان شیدر ها دریچه ای برای شماست که در مورد مختصات رنگ و فضا تفکر کنید.
|
||||
|
||||
از دیگر ویژگی های GLSL این است که می‌توان، این مقادیر را به هر ترتیبی استفاده کرد. این ویژگی باعث می‌شود، مقادیر به راحتی ترکیب شوند.اسم این قابلیت swizzle هست.
|
||||
|
||||
```glsl
|
||||
vec3 yellow, magenta, green;
|
||||
|
||||
// Making Yellow
|
||||
yellow.rg = vec2(1.0); // Assigning 1. to red and green channels
|
||||
yellow[2] = 0.0; // Assigning 0. to blue channel
|
||||
|
||||
// Making Magenta
|
||||
magenta = yellow.rbg; // Assign the channels with green and blue swapped
|
||||
|
||||
// Making Green
|
||||
green.rgb = yellow.bgb; // Assign the blue channel of Yellow (0) to red and blue channels
|
||||
```
|
||||
|
||||
#### ابزار کمکی شما
|
||||
احتمالا عادت ندارید با استفاده از مقادیر عددی رنگ خودر را انتخاب کنید، خیلی عقلانی هم نیست. خوشبختانه بسیاری از برنامه ها به صورت هوشمند این کار را انجام می‌دهند، یکی را که مناسب خودتان می‌بینید را ، پیدا و از آن بردار های رنگی خود را استخراج کنید. من از این الگو ها در [Spectrum](http://www.eigenlogik.com/spectrum/mac) استفاده می‌کنم:
|
||||
|
||||
```
|
||||
vec3({{rn}},{{gn}},{{bn}})
|
||||
vec4({{rn}},{{gn}},{{bn}},1.0)
|
||||
```
|
||||
|
||||
### ترکیب رنگ ها
|
||||
|
||||
اکنون که می‌دانید رنگ ها چگونه تعریف می‌شوند، وقت آن است، از دانش های قبلیمان استفاده کنیم. در GLSL فانکشن مفیدی به نام [mix()](../glossary/?search=mix) وجود دارد، که به شما این امکان را می‌دهد دو مقدار را با درصد خاصی با هم مخلوط کنید. آیا می‌توانید حدس بزنید دامنه مقدار چقدر است؟ بله بین 0.0 تا 1.0 . بعد از تمرین های گذشته که آن ها هم با اعداد بین 0 تا 1 مرتبط بودند. وقت آن است دوباره از آنان استفاده کنید.
|
||||
|
||||
|
||||
|
||||
به خط 18 نگاه بیاندازید که چگونه، از قدر مطلق مقادیر سینوس برا ترکیب رنگ A و B استفاده شده است.
|
||||
|
||||
<div class="codeAndCanvas" data="mix.frag"></div>
|
||||
|
||||
مهارت های خود را توسط نکته زیر به نمایش بگزارید:
|
||||
|
||||
* ِیک طیف رنگی ایجاد کنید. به یک احساس خاص فکر کنید. چه رنگی به ذهنتان می‌آید؟ چگونه محو و ظاهر می‌شود؟ به احساسی دیگر و رنگ متناسب با آن فکر کنید. ابتدا و انتهای کد بالا را تغییر دهید تا با آن احساس مطابقت داشته باشد، سپس این طیف را با استفاده از توابع دیگر متحرک کنید. رابرت پنر مجموعه توابع شکل دهی معروفی را برای انیمیشن و متحرک سازی ایجاد کرده است، که به عنوان توابع ease شناخته می‌شوند [easing functions](http://easings.net/), می‌توانید از [این مثال](../edit.php#06/easing.frag) برای آموزش و الهام استفاده کنید، اما قطعا بهترین نتیجه، نتیجه کار خودتان است.
|
||||
|
||||
### بازی با گرادیان ها
|
||||
|
||||
فانکشن [`mix()`](../glossary/?search=mix) قابلیت های بیشتری دارد. به جای یک عدد شناور، می‌توان یک متغیر که مطابق دو آرگومان اول باشد را ، به آن منتقل کنیم, در مثال ما یک vector 3 هست. با این کار قابلیت کنترل هر یک از کانال های r, g و b را داریم.
|
||||
|
||||
|
||||
|
||||
به مثال زیر نگاه بیاندازید. مانند مثال های فصل قبل، ما مختصات x را به صورت نرمالایز شده استفاده و آن را با یک خط نشان می‌دهیم. در حال حاضر تمام کانال ها از آن خط عبور می‌کنند. حال خط 25 را از حالت کامنت خارج کنید و تغییرات را مشاهده کنید، برای خط های 26 و 27 هم نیز همین کار را انجام دهید. یادتان باشد مقدار خط، نشان دهنده ترکیب رنگ های A,B بر حسب هر کانال است.
|
||||
|
||||
<div class="codeAndCanvas" data="gradient.frag"></div>
|
||||
|
||||
احتمالا سه تابع شکل دهی را در خطوط 25 تا 27 تشخیص داده اید. با آنها بازی کنید. وقت آن است که مهارت های فصل قبل را کاوش کرده و به نمایش بگذارید، سعی کنید شیب های گوناگون و جالب تری ایجاد کنید. تمرینات زیر را امتحان کنید:
|
||||
|
||||
|
||||
|
||||
* گرادیانی شبیه غروب خورشید ویلیام ترنر بسازید
|
||||
|
||||
* با استفاده از `u_time` انتقال بین طلوع و غروب را متحرک کنید..
|
||||
|
||||
* آیا با استفاده از آنچه تا کنون یاد گرفته اید، می‌توانید رنگین کمان بسازید؟
|
||||
|
||||
* از تابع `step()` برای ساخت پرچم های رنگا رنگ استفاده کنید.
|
||||
|
||||
### HSB
|
||||
|
||||
برای آشنایی بیشتر با رنگ ها، با فضای رنگ ها باید آشنا شویم. همانطور که می‌دانید علاوه بر کانال های R, G, B روش های دیگری برای سازماندهی رنگ وجود دارد.
|
||||
|
||||
[HSB](http://en.wikipedia.org/wiki/HSL_and_HSV) مخفف رنگ، اشباع، و روشنایی است، که یک سازماندهی مفید تر برای رنگ هاست. به توابع rgb2hsv() و hsv2rgb() در کد زیر دقت کنید.
|
||||
|
||||
با نگاشت موقعیت x با مقدار Hue(رنگ) و مقدار y به روشنایی، طیف خوبی از رنگ ها قابل مشاهده اند. این نوع توزیع فضایی رنگ می‌تواند بسیار مفید باشد. انتخاب رنگ با HSB نسبت به RGB ملموس تر است.
|
||||
|
||||
<div class="codeAndCanvas" data="hsb.frag"></div>
|
||||
|
||||
### HSB در مختصات قطبی
|
||||
|
||||
HSB در ابتدا برای مختصاب قطبی(بر اساس زاویه و شعاع) به جای مختصات دکارتی طراحی شده است. برای ترسیم عملکرد HSB در مختصات قطبی، نیاز به فاصله و زاویه ار مرکز بیلبورد تا مختصات پیکسل مورد نظر داریم. برای این منظور نیاز به استفاده از تابع [`length()`](../glossary/?search=length) و تابع [`atan(y,x)`](../glossary/?search=atan) داریم.
|
||||
|
||||
هنگام استفاده از بردار ها مثل vect2, 3, 4 حتی اگر نمایانگر رنگ باشند، باز هم به عنوان بردار با آنان رفتار می‌شود. ما در مورد رنگ ها و بردار ها به طور مشابه رفتار می‌کنیم، شما خواهید دید این انعطاف پذیری مفهمومی بسیار مفید است.
|
||||
|
||||
** نکته:** توابع هندسی بیشتری علاوه بر [`length`](../glossary/?search=length) وجود دارند مانند: [`distance()`](../glossary/?search=distance), [`dot()`](../glossary/?search=dot), [`cross`](../glossary/?search=cross), [`normalize()`](../glossary/?search=normalize), [`faceforward()`](../glossary/?search=faceforward), [`reflect()`](../glossary/?search=reflect) و [`refract()`](../glossary/?search=refract). همچنین GLSL دارای توابع مخصوص برداری هستند مانند:: [`lessThan()`](../glossary/?search=lessThan), [`lessThanEqual()`](../glossary/?search=lessThanEqual), [`greaterThan()`](../glossary/?search=greaterThan), [`greaterThanEqual()`](../glossary/?search=greaterThanEqual), [`equal()`](../glossary/?search=equal) و [`notEqual()`](../glossary/?search=notEqual).
|
||||
|
||||
وقتی مقدار طول و زاویه را بدست آوردیم باید آن هارا بین 0.0 و 1.0 نرمالایز کنیم. در خط 27, [`atan(y,x)`](../glossary/?search=atan) زاویه ای بین PI و _PI (-3.14 تا 3.14) برمی‌گرداند, پس باید آنان را بر `TWO_PI` تقسیم کنیم(در بالای کد تعریف شده است) تا مقداری بین 0.5 و -0.5 بدست بیاوریم, که می‌توان آن را به راحتی به بازه 0.0 تا 1.0 تبدیل کرد. ماکسیمم مقدار شعاعی که می‌توان به دست آورد 0.5 است، چون شعاع را از وسط صفحه محاسبه می‌کنیم، پس باید این بازه را در 2 ضرب تا مقدار ماکسیمم یک را بتوان از آن گرفت.
|
||||
|
||||
همانطور که می‌بینید همه چیز حول انتقال و مپ کردن در بازه 0.0 و 1.0 است، همانطور که ما دوست داریم.
|
||||
|
||||
<div class="codeAndCanvas" data="hsb-colorwheel.frag"></div>
|
||||
|
||||
تمرین های زیر را امتحان کنید:
|
||||
|
||||
* مختصات قطبی را تغییر دهید که مثال بالا به دور محورش بچرخد، مانند آیکون انتظار موس.
|
||||
|
||||
* برای گسترش مقدار یک رنگ خاص و فشرده کردن بقیه، از یک تابع شکل دهی به همرا تبدیل HSB به RGB استفاده کنید.
|
||||
|
||||
|
||||
|
||||
* اگر با دقت به چرخ رنگی که در برنامه های انتخاب رنگ استفاده می‌شود نگاه کنید، آنان از فضای رنگی دیگری یعنی، RYB استفاده می‌کنند، برای مثال رنگ روبروی قرمز در تصویر زیر سبز است، اما در مثال بالا روبروی قرمز فیروزه ای است. آیا می‌تواید با استفاده از توابع شکل دهی، مثال بالا را مانند شکل زیر کنید؟
|
||||
|
||||
|
||||
|
||||
* کتاب [Josef Albers' book Interaction of Color](http://www.goodreads.com/book/show/111113.Interaction_of_Color) را بخوانید ، همچین شیدر های زیر را برای تمرین مرور کنید.
|
||||
|
||||
<div class="glslGallery" data="160505191155,160505193939,160505200330,160509131554,160509131509,160509131420,160509131240" data-properties="clickRun:editor,openFrameIcon:false,showAuthor:false"></div>
|
||||
|
||||
#### نکته در مورد توابع و آرگومان ها
|
||||
|
||||
قبل از رفتن به فصل بعدی، بایستی به عقب برگردیم، و توابع مثال های قبل را ببینیم. متوجه in قبل از آرگومان های ورودی تابع شدید؟. آن یک [*qualifier*](http://www.shaderific.com/glsl-qualifiers/#inputqualifier)است و در این حالت مشخص می‌کند، متغیر فقط خواندنی است. در مثال های آینده می‌بینیم که آرگومان ها را به عنوان `out` و یا `inout` هم می‌توان مشخص کرد. آخری یعنی, `inout` مشابه انتقال آرگومان از طریق رفرنس است، که امکان تغییر یک متغیر عبور داده شده را می‌دهد.
|
||||
|
||||
```glsl
|
||||
int newFunction(in vec4 aVec4, // read-only
|
||||
out vec3 aVec3, // write-only
|
||||
inout int aInt); // read-write
|
||||
```
|
||||
|
||||
شاید باورتان نشود اما هم اکنون تمام عناصر لازم جهت کشیدن تصاویر باحال را دارید. در فصل بعدی خواهیم آموخت چگونه با ترکیب فضا، همه ترفند های خود را برای ساخت فرم های هندسی ترکیب کنیم
|
||||
Loading…
Reference in New Issue
Block a user