mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-11 13:10:57 +00:00
Fix Persian problems chapter 7 to 9
This commit is contained in:
Ahmad
parent
6c398ffac8
commit
cc5adf42fc
@ -6,15 +6,15 @@
|
||||
|
||||
### مستطیل
|
||||
|
||||
تصور کنید کاغذی شبکه ای مانند آنچه در کلاس ریاضیات داشتیم در اختیار داریم، و تکلیف ما رسم مربع است، اندازه کاغذ 10*10 و مربع باید 8*8 باشد. شما چه کار خواهید کرد؟
|
||||
تصور کنید کاغذی شبکه ای مانند آنچه در کلاس ریاضیات داشتیم در اختیار داریم، و تکلیف ما رسم مربع است، اندازه کاغذ 10x10 و مربع باید 8x8 باشد. شما چه کار خواهید کرد؟
|
||||
|
||||
|
||||
|
||||
شما به جز سط های اول و اخر و ستون اول و آخر همه را رنگ می‌زنید، اینطور نیست؟
|
||||
شما به جز سطر های اول و اخر و ستون اول و آخر همه را رنگ می‌زنید، اینطور نیست؟
|
||||
|
||||
این مثال چه ربطی به شیدر ها دارد؟ هر مربع کوچک از کاغد شبکه مان مانند یک ترد(پیکسل) است. همچنین هر مربع کوچک مانند صفحات شطرنج مختصات خودر را می‌داند. در قسمت های قبلی ما رنگ های قرمز و سیز را به مقادیر x,y مپ کردیم، و یاد گرفتیم چگونه در مسائل دو بعدی از مقادیر بین 0.0 تا 1.0 استفاده کنیمو چگونه میتوان از این موضوع برای ترسیم یک مربع در وسط صفحه کنوس استفاده کرد؟
|
||||
این مثال چه ربطی به شیدر ها دارد؟ هر مربع کوچک از کاغد شبکه مان مانند یک ترد(پیکسل) است. همچنین هر مربع کوچک مانند صفحات شطرنج مختصات خودر را می‌داند. در قسمت های قبلی ما رنگ های قرمز و سبز را به مقادیر x,y مپ کردیم، و یاد گرفتیم چگونه در مسائل دو بعدی از مقادیر بین 0.0 تا 1.0 استفاده کنیم، چگونه میتوان از این موضوع برای ترسیم یک مربع در وسط صفحه کنوس استفاده کرد؟
|
||||
|
||||
بیایید با استفاده از دستورات شبه کد شروع کنیم، یعنی دستورات if را در آن قسمت های مکانی استفاده کنیم. اصول انجام این کار به طرز چشم گیری شبیه سناریوی کاغذ شبکه ای است.
|
||||
بیایید با استفاده از دستورات شبه کد شروع کنیم، یعنی دستورات if را استفاده کنیم. اصول انجام این کار به طرز چشم گیری شبیه سناریوی کاغذ شبکه ای است.
|
||||
```glsl
|
||||
if ( (X GREATER THAN 1) AND (Y GREATER THAN 1) )
|
||||
paint white
|
||||
@ -42,18 +42,18 @@ void main(){
|
||||
}
|
||||
```
|
||||
|
||||
تابع [`step()`](../glossary/?search=step) پیکسل های زیر 0.1 را به سیاه تبدیل میکند (`vec3(0.0)`) و بقیه تبدیل به سفید می‌شوند (`vec3(1.0)`) . ضرب بین left و bottom مانند عمکرد اند کار میکند، جایی که هردو باید 1.0 باشند، 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) چند خط در کد صرفه جویی کنیم. به این شکل خواهد شد:
|
||||
در کد قبلی ما ساختار را برای قسمت پایین و چپ تکرار کردیم. میتوان با پاس دادن یک بردار دو بعدی یه [`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>
|
||||
|
||||
@ -71,7 +71,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
|
||||
جالب بود؟ این تکنک تماما در مورد استفاده از[`step()`](../glossary/?search=step) و ضرب و برگرداندن مختصات است.
|
||||
|
||||
قبلا از ادمه دادن سعی کنید تمرینات زیر را انجام دهید:
|
||||
قبل از ادمه دادن سعی کنید تمرینات زیر را انجام دهید:
|
||||
|
||||
* اندازه و نسبت مستطیل را تغییر دهید.
|
||||
|
||||
@ -81,7 +81,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
|
||||
* یک شکل مورد علاقه خود را پیاده سازی کنید، و تابعی در آن ایجاد کنید که در آینده هم بتوانید از آن استفاده مجدد کنید، عملکرد خود را انعطاف پذیر و کارامد کنید.
|
||||
|
||||
* ِک تابع دیگر بسازید که فقط اضلاع مستطیل را نمایش دهد..
|
||||
* ِیک تابع دیگر بسازید که فقط اضلاع مستطیل را نمایش دهد.
|
||||
|
||||
* فکر می‌کنید چگونه میتوان مستطیل های بیشتری در بیلبورد قرار داد و آن ها را متحرک ساخت? اگر راهش را پیدا کردید ترکیبی از مستطیل ها و رنگ های مختلف شبیه نقاشی [Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian) بکشید.
|
||||
|
||||
@ -89,7 +89,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
|
||||
### دایره ها
|
||||
|
||||
ترسیم مربع و مستطیل روی کاغذ شبکه و مختصات دکارتی آسان بود. اما دایره ها به روشی دیگر احتیاج دارند، به خصوص که ما الگوریتمی لازم داریم که روی هر پیکسل به صورت جدا اجرا میشود. یک را این است که مختصات را تغییر دهیم و با تابع[`step()`](../glossary/?search=step) برای ترسیم دایره استفاده کنیم.
|
||||
ترسیم مربع و مستطیل روی کاغذ شبکه و مختصات دکارتی آسان بود. اما دایره ها به روشی دیگر احتیاج دارند، به خصوص که ما الگوریتمی لازم داریم که روی هر پیکسل به صورت جدا اجرا میشود. یک راه این است که مختصات را تغییر دهیم و از تابع[`step()`](../glossary/?search=step) برای ترسیم دایره استفاده کنیم.
|
||||
|
||||
چگونه? بیایید برگردیم به کلاس ریاضی و کاغذ شبکه ای مان, زمانی که پرگار را به اندازه شعاع دایره مان باز می‌کردیم, یکی از نقاط پرگار را به وسط دایره فشار می‌دادیم و بقیه را در امتداد آن دایره می‌چرخاندیم.
|
||||
|
||||
@ -99,7 +99,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
|
||||
|
||||
|
||||
راه های زیادی برای محاسبه فاصله وجود دارد. راحت ترین آن استفاده از [`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) بین دو نقطه را محاسبه میکند (در مثال ما فاصله بین پیکسل مورد نظر و مرکز دایره). تابع `length()` کوتاه شده [hypotenuse equation](http://en.wikipedia.org/wiki/Hypotenuse) است، از جزر ([`sqrt()`](../glossary/?search=sqrt)) استفاده میکند.
|
||||
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
|
||||
<div class="codeAndCanvas" data="circle-making.frag"></div>
|
||||
|
||||
در مثال قبلی فاصله پیکسل تا مرکز کنوس میزان روشنایی را ترسیم میکند. هرچه پیکسل به مرکز نزدیکتر باشد، مقدار آن تیره و کمتر است. توجه کنید که مقادیر خیلی زیاد نمی‌شوند زیرا فاصله یک پیکسل از مرکز حداکثر کمی بیش از 0.5 است. این راه را در نظر بگیرید و فکر کنید:
|
||||
در مثال قبلی فاصله پیکسل تا مرکز کنوس میزان روشنایی را ترسیم میکند. هرچه پیکسل به مرکز نزدیکتر باشد، مقدار آن تیره و کمتر است. توجه کنید که مقادیر خیلی زیاد نمی‌شوند زیرا فاصله یک پیکسل از مرکز حداکثر کمی بیش از 0.5 است. این را در نظر بگیرید و فکر کنید:
|
||||
|
||||
* چه چیزی از آن می‌توانید استنباط کنید?
|
||||
|
||||
@ -119,7 +119,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
|
||||
### Distance field
|
||||
|
||||
میتوان مثال بالا را مانند یک نقشه ارتفاع در نظر گرفت، جایی که هر چه تاریک تر باشد یعنی بلند تر است. گرادیان تولید شده الگویی مانند مخزوط را به ما نمایش می‌دهد، خود را در بالای آن مخروط در نظر بگیرید، فاصله افقی تا لبه ی مخروط برابر 0.5 است، این عدد از همه جهات ثابت است، با انتخاب محل برش مخروط، میتوان یک دایره در آن سطح بدست آورد..
|
||||
میتوان مثال بالا را مانند یک نقشه ارتفاع در نظر گرفت، جایی که هر چه تاریک تر باشد یعنی بلند تر است. گرادیان تولید شده الگویی مانند مخروط را به ما نمایش می‌دهد، خود را در بالای آن مخروط در نظر بگیرید، فاصله افقی تا لبه ی مخروط برابر 0.5 است، این عدد از همه جهات ثابت است، با انتخاب محل برش مخروط، میتوان یک دایره در آن سطح بدست آورد.
|
||||
|
||||
|
||||
|
||||
@ -133,7 +133,7 @@ color = vec3(bl.x * bl.y * tr.x * tr.y);
|
||||
|
||||
* از تابع[`smoothstep()`](../glossary/?search=smoothstep), با مقادیر مختلف استفاده کنید تا یک مرز نرم برای دایره بسازید.
|
||||
|
||||
* وقتی ار نتیجه راضی بودید، از آن یک تابع بسازید تا بعدا بتوانبد استفاده کنید.
|
||||
* وقتی از نتیجه راضی بودید، از آن یک تابع بسازید تا بعدا بتوانبد استفاده کنید.
|
||||
|
||||
* به دایره رنگ اضافه کنید.
|
||||
|
||||
@ -163,7 +163,7 @@ pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6)));
|
||||
|
||||
|
||||
|
||||
با استفاده از فیلد فاصله تقریبا میتوان هر چیزی کشید. مشخصا هر جه شکل پیچیده تر باشد@ معادله آن پیچیده تر خواهد بود، اما وقتی فرمول فیلد فاصله برای رسم یک شکل را بدست آورید، خیلی ساده میتوان آن را با افکت های دیگر ترکیب یا اضافه کرد، مانند لبه های نرم یا 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).
|
||||
با استفاده از فیلد فاصله تقریبا میتوان هر چیزی کشید. مشخصا هر چه شکل پیچیده تر باشد، معادله آن پیچیده تر خواهد بود، اما وقتی فرمول فیلد فاصله برای رسم یک شکل را بدست آورید، خیلی ساده میتوان آن را با افکت های دیگر ترکیب یا اضافه کرد، مانند لبه های نرم یا 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).
|
||||
|
||||
نگاهی به کد زیر بیاندازید.
|
||||
|
||||
@ -195,7 +195,7 @@ float a = atan(pos.y,pos.x);
|
||||
|
||||
این روش کمی محدود کننده، اما بسیار ساده است. این روش از تغییر شعاع دایره بسته به زاویه برای رسم اشکال مختلف استفاده میکند. اما چگونه؟ با استفاده از توابع شکل دهی.
|
||||
|
||||
در مثال زیر همان توابع در مختصات دکارتی را در مختصات قطبی مشاهده ، در خطوط 21 تا 25.می‌کنید . یک به یک خط ها را از حالت کامنت خارج کنید، به رابطه بین مختصات های مختلف توجه کنید.
|
||||
در خطوط 21 تا 25 مثال زیر همان توابع در مختصات دکارتی را در مختصات قطبی مشاهده می‌کنید. یک به یک خط ها را از حالت کامنت خارج کنید، به رابطه بین مختصات های مختلف توجه کنید.
|
||||
|
||||
<div class="simpleFunction" data="y = cos(x*3.);
|
||||
//y = abs(cos(x*3.));
|
||||
@ -208,8 +208,8 @@ float a = atan(pos.y,pos.x);
|
||||
سعی کنید:
|
||||
|
||||
* این اشکال را انیمیت کنید.
|
||||
* توابع مختلف شکل دهی را ترکیب کنید تا برشی وسط شکل بتوانید ایجاد و اشکالی مثل گل، دانه برف و چرخ دنده ایجاد کنیدو
|
||||
* از تابع `plot()` که در فصل توابع شکل دهی ساختیم استفاده کنید تا فقط حد فصل دور اشکال را رسم کنید.
|
||||
* توابع مختلف شکل دهی را ترکیب کنید تا برشی وسط شکل بتوانید ایجاد و اشکالی مثل گل، دانه برف و چرخ دنده ایجاد کنید.
|
||||
* از تابع `plot()` که در فصل توابع شکل دهی ساختیم استفاده کنید تا فقط حد فاصل دور اشکال را رسم کنید.
|
||||
|
||||
### ترکیب قدرت ها
|
||||
اکنون که با استفاده از [`atan()`](../glossary/?search=atan) یاد گرفتیم چگونه شعاع دایره را با استفاده از زاویه آن تنظیم کنیم و اشکال مختلف بسازیم, حال میتوان از `atan()` با فیلد فاصله استفاده کرد و تکنیک های که یاد گرفیم روی آن استفاده کرد..
|
||||
@ -224,8 +224,8 @@ float a = atan(pos.y,pos.x);
|
||||
|
||||
* یک لوگو هندسی را انتخاب کنید، و سعی کنید آن را با استفاده از فیلد فاصله بسازید.
|
||||
|
||||
تبریک! بخش سختی را گذراندید! کمی استراحت منید و اجازه دهید این مفاهیم جا بیوفتد، ساخت اشکال در نرم افزار Processing آسان است، ولی اینجا خیر. در سرزمین شیدر ها طراحی شکل پیچیده است، و سازگاری با این الگوی جدید می‌تواند طاقت فرسا باشد!.
|
||||
تبریک! بخش سختی را گذراندید! کمی استراحت کنید و اجازه دهید این مفاهیم جا بیوفتد، ساخت اشکال در نرم افزار Processing آسان است، ولی اینجا خیر. در سرزمین شیدر ها طراحی شکل پیچیده است، و سازگاری با این الگوی جدید می‌تواند طاقت فرسا باشد!
|
||||
|
||||
در آخر این صفحه به شما [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) معرفی شده. این کارت ها به شما توابع شکل دهی را بخوبی یاد می‌دهند, compose them into your designs and use on your shaders. از آن ها در طرح ها و شیدر های خودتان استفاده کنید. این دسته کارت دارای یک منحنی یادگیری تدریجی است. بنابر این تمرین کردن یک کارت در هر روز می‌تواند تا 30 روز شکا را به چالش بکشد.
|
||||
در آخر این صفحه به شما [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) معرفی شده. این کارت ها به شما توابع شکل دهی را بخوبی یاد می‌دهند. از آن ها در طرح ها و شیدر های خودتان استفاده کنید. این دسته کارت دارای یک منحنی یادگیری تدریجی است. بنابر این تمرین کردن یک کارت در هر روز می‌تواند تا 30 روز شما را به چالش بکشد.
|
||||
|
||||
اکنون که می‌دانید چگونه اشکال را رسم کنید، مطمئنم ایده های جدید در ذهنتان ایجاد میشود. در فصل بعدی، نحوه حرکت، چرخش و مقیاس پذیری اشکال را خواهید آموخت. و امکان ترکیب انان را خواهید داشت.
|
||||
اکنون که می‌دانید چگونه اشکال را رسم کنید، مطمئنم ایده های جدید در ذهنتان ایجاد میشود. در فصل بعدی، نحوه حرکت، چرخش و مقیاس پذیری اشکال را خواهید آموخت. و امکان ترکیب آنان را خواهید داشت.
|
||||
|
||||
@ -4,29 +4,29 @@
|
||||
|
||||
### انتقال
|
||||
|
||||
در قسمت های قبل یاد گرفتیم چگونه اشکل مختلف بسازیم - ترفند برای حرکت دادن اشکال، حرکت دادن خود محور های مختصا است. می‌تاون با اضافه کردن یک بردار به ```st``` که مقدار محل هر پیکسل را در خود نگه داشته است، این ترفند را انجام داد. با این کار تمام فضای محتصاتی حرکت میکند.
|
||||
در قسمت های قبل یاد گرفتیم چگونه اشکل مختلف بسازیم - در اصل ترفند برای حرکت دادن اشکال، حرکت دادن خود محور های مختصات است. میتوان با اضافه کردن یک بردار به ```st``` که مقدار محل هر پیکسل را در خود نگه داشته است، این ترفند را انجام داد. با این کار تمام فضای مختصاتی حرکت میکند.
|
||||
|
||||
|
||||
|
||||
دیدن شکل بالا آسان تر از توضیح است، پس خودتان ببینید.:
|
||||
|
||||
* خط 35 را از حالت کامن خارج کنید، تا ببینید چگونه فضا خود به خود حرکت میکند.
|
||||
* خط 35 را از حالت کامنت خارج کنید، تا ببینید چگونه فضا خود به خود حرکت میکند.
|
||||
|
||||
<div class="codeAndCanvas" data="cross-translate.frag"></div>
|
||||
|
||||
حالا تمرین زیر را انجام دهید:
|
||||
|
||||
* از ```u_time``` همراه با توابع شکل دهی، طوری استفاده کنید، که شکل بالا به طور جالبت تری حرکت بکند. حرکت خاصی که در نظر دارید را جستجو کنید و سعی کنید حرکت شکل بالا را مثل آن شبیه یازی کنید. ایده گرفتن از حرکات دنیای واقعی می‌تواند مفید باشد، مثلا حرکت آونگ، توپ، شتاب گرفتن ماشین یا توقف دوچرخه..
|
||||
* از ```u_time``` همراه با توابع شکل دهی، طوری استفاده کنید، که شکل بالا به طور جالبت تری حرکت بکند. حرکت خاصی که در نظر دارید را جستجو کنید و سعی کنید حرکت شکل بالا را مثل آن شبیه یازی کنید. ایده گرفتن از حرکات دنیای واقعی می‌تواند مفید باشد، مثلا حرکت آونگ، توپ، شتاب گرفتن ماشین یا توقف دوچرخه.
|
||||
|
||||
### چرخش
|
||||
|
||||
برای چرخاندن یک شکل، باز هم نیاز است تمام فضا را بچرخانیم. برای اینک کار از [matrix](http://en.wikipedia.org/wiki/Matrix_%28mathematics%29) استفاده میکنیم. ماتریس مجموعه ای متشکل از اعداد در سطر ها ستون هاست بردار ها با قوانین خاصی در ماتریس ها می‌توانند ضرب شوند تا مقادیر آن بردار اصلاح و عوض شود..
|
||||
برای چرخاندن یک شکل، باز هم نیاز است تمام فضا را بچرخانیم. برای این کار از [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)).
|
||||
در 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)).
|
||||
|
||||
بر اساس رفتار ماتریس ها، می‌توانیم ماتریس هایی تولید کنیم که رفتار هاصی انجام می‌دهند، مثلا از ماتریس میتوان برای حرکت یک بردار استفاده کرد :
|
||||
بر اساس رفتار ماتریس ها، می‌توانیم ماتریس هایی تولید کنیم که رفتار خاصی انجام می‌دهند، مثلا از ماتریس میتوان برای حرکت یک بردار استفاده کرد :
|
||||
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
|
||||
|
||||
|
||||
به تابعی که چرخش دو بعدی را انجام می‌دهد نگاهی بیاندازید، این تابع برای چرخص مختصات حول نقطه 0و0 از فرمول فوق پیروی میکند [formula](http://en.wikipedia.org/wiki/Rotation_matrix) .
|
||||
به تابعی که چرخش دو بعدی را انجام می‌دهد نگاهی بیاندازید، این تابع برای چرخش مختصات حول نقطه 0و0 از فرمول فوق پیروی میکند [formula](http://en.wikipedia.org/wiki/Rotation_matrix) .
|
||||
|
||||
```glsl
|
||||
mat2 rotate2d(float _angle){
|
||||
@ -43,7 +43,7 @@ mat2 rotate2d(float _angle){
|
||||
}
|
||||
```
|
||||
|
||||
با توجه که روش که در رسم اشکال داشتیم، این دقیقا آن چیزی نیست که میخواهیم. شکل ضربدری ما در مرکز کنوس کشیده شده است، پس قبل از چرخواندن فضا باید شکل را از مرکز به نقظه 0و0 انتقال دهیم، فضا را بچرخوانیم، سپس در نهایت شکل را به مکان اصلی آن برگردانیم.
|
||||
با توجه که روشی که در رسم اشکال داشتیم، این دقیقا آن چیزی نیست که میخواهیم. شکل ضربدری ما در مرکز کنوس کشیده شده است، پس قبل از چرخواندن فضا باید شکل را از مرکز به نقظه 0و0 انتقال دهیم، فضا را بچرخوانیم، سپس در نهایت شکل را به مکان اصلی آن برگردانیم.
|
||||
|
||||
|
||||
|
||||
@ -55,17 +55,17 @@ mat2 rotate2d(float _angle){
|
||||
|
||||
* خط 45 را از حالت کامنت خارج کنید و ببینید چه اتفاقی در حال رخ دادن است.
|
||||
|
||||
* انتقال در خط های 37 و 39 را قبل و بعد از چرخش را مانت کنید و ببینید چه اتفاقی می‌افتد.
|
||||
* انتقال در خط های 37 و 39 را قبل و بعد از چرخش را کامنت کنید و ببینید چه اتفاقی می‌افتد.
|
||||
|
||||
* برای بهبود انیمیشن در در تمرین انتقال، از چرخش استفاده کنید.
|
||||
|
||||
### اندازه
|
||||
|
||||
دیدم که چگونه ماتریس ها کمک به جابه جایی و چرخش در فضا کمک می‌کنند. (یا به طور دقیق تر، انتقال سیستم مختصات برای چخرش و انتقال.) اگر با نرم افزار های سه بعدی یا توابع push و pop در نزم افزار processing کار کرده باشید، می‌دانید که ماتریس ها برای تغییر اندازه اشکال هم استفاده می‌شوند.
|
||||
دیدم که چگونه ماتریس ها کمک به جابه جایی و چرخش در فضا کمک می‌کنند. (یا به طور دقیق تر، انتقال سیستم مختصات برای چرخش و انتقال) اگر با نرم افزار های سه بعدی یا توابع push و pop در نزم افزار processing کار کرده باشید، می‌دانید که ماتریس ها برای تغییر اندازه اشکال هم استفاده می‌شوند.
|
||||
|
||||
|
||||
|
||||
طبق فرمول قبلی میتوان نحوه ساخت ماتریس مقیاس دو بعدی را فهمید::
|
||||
طبق فرمول قبلی میتوان نحوه ساخت ماتریس مقیاس دو بعدی را فهمید:
|
||||
|
||||
```glsl
|
||||
mat2 scale(vec2 _scale){
|
||||
@ -82,15 +82,15 @@ mat2 scale(vec2 _scale){
|
||||
|
||||
* کد های انتقال در خطوط 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).
|
||||
* حالا که نحوه کشیدن و انتقال و چرخش شکل های مختلف را می‌دانید، وقت آن است که یک شیدر ترکیبی با آن ها بسازید. یک 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) یک فضای رنگی است، که برای رمز گذاری آنالوگ عکس و فیلم آز آن استفاده میشود، که برای کاهش پهنای باند رنگی از دامنه درک انسان استفاده میکند.
|
||||
[YUV](http://en.wikipedia.org/wiki/YUV) یک فضای رنگی است، که برای رمز گذاری آنالوگ عکس و فیلم است، و برای کاهش پهنای باند رنگی از دامنه درک انسان استفاده میکند.
|
||||
|
||||
کد زیر این عملیات ماتریسی را در GLSL برا تبدیل رنگ ها از حالتی به حالت دیگر نشان می‌دهد.
|
||||
|
||||
@ -98,4 +98,4 @@ mat2 scale(vec2 _scale){
|
||||
|
||||
همانطور که می‌بینید با رنگ ها مانند بردار رفتار میکنیم و آنان را در هم ضرب میکنیم به این صورت ما مقادیر را به اطراف منتقل میکنیم.
|
||||
|
||||
در این قسمت یاد گرفتیم، چگونه با استفاده از ماتریس ها انتقال، تغییر مقیاس و چرخش انجام دهید. این انتقال ها برای ساخت ترکیب هایی از شکل های که قبلا آموختیم ضروری خواهند بود. در فصل بعد از آنچه تا کنون آموختیم برای ساخت پترن های رویه ای procedural patterns استفاده خواهیم کرد، و متوجه خواهید شد تکرار و تغییر کد نویسی می‌تواند یک تمرنی هیجان امگیز باشد.
|
||||
در این قسمت یاد گرفتیم، چگونه با استفاده از ماتریس ها انتقال، تغییر مقیاس و چرخش انجام دهید. این انتقال ها برای ساخت ترکیب هایی از شکل های که قبلا آموختیم ضروری خواهند بود. در فصل بعد از آنچه تا کنون آموختیم برای ساخت پترن های رویه ای procedural patterns استفاده خواهیم کرد، و متوجه خواهید شد تکرار و تغییر کد نویسی می‌تواند یک تمرین هیجان انگیز باشد.
|
||||
@ -1,12 +1,12 @@
|
||||
## الگو ها
|
||||
|
||||
از آنجا که شیدر ها پیکسل هب پیکسل اجرا می‌شوند@ مهم نیست که چقد یک شکلر ا تکرار کنید. محاسبات ثابت است. انی به معنی این است که شیدر ها برای الگو ها و پترن های تکرار شونده مناسب هستند.
|
||||
از آنجا که شیدر ها پیکسل به پیکسل اجرا می‌شوند، مهم نیست که چقد یک شکل را تکرار کنید. محاسبات ثابت است. این به معنی آن است که شیدر ها برای الگو ها و پترن های تکرار شونده مناسب هستند.
|
||||
|
||||
[  ](../edit.php#09/dots5.frag)
|
||||
|
||||
در ایم فصل قصد داریم آنچه تا کنون آموخته ایم را بکار ببریم و در امتداد کنوس اشکال را تکرار کنیم. مانند فصل های قبلی استراتژی ما مبتی بر عملیات رو مختصات فضای بین 0.0 و 1.0 است، به این ترتیب شکل هایی که بین 0.0 و 1.0 کشیده بودیم تکرار می‌شوند.
|
||||
در این فصل قصد داریم آنچه تا کنون آموخته ایم را بکار ببریم و در امتداد کنوس اشکال را تکرار کنیم. مانند فصل های قبلی استراتژی ما مبتی بر عملیات رو مختصات فضای بین 0.0 و 1.0 است، به این ترتیب شکل هایی که بین 0.0 و 1.0 کشیده بودیم تکرار می‌شوند.
|
||||
|
||||
*"شبکه بندی چارچوبی را فراهم میکند که به انسان ها قدرت شهود و اختراع می‌دهد. در هرج و مرج های الگو های طبیعی هم یک انعطاف و نظم نهفته است، از الگو هایاولیه روس سفال گرفته تا موزاییک های هیندسی در حمام های رومی، مدت هاست مردم از شبکه ها برای بهبود و تزئیین زندگی خود استفاده می‌کنند "* [*10 PRINT*, Mit Press, (2013)](http://10print.org/)
|
||||
*"شبکه بندی چارچوبی را فراهم میکند که به انسان ها قدرت شهود و اختراع می‌دهد. در هرج و مرج های الگو های طبیعی هم یک انعطاف و نظم نهفته است، از الگو های اولیه روی سفال گرفته تا موزاییک های هندسی در حمام های رومی، مدت هاست مردم از شبکه ها برای بهبود و تزئیین زندگی خود استفاده می‌کنند "* [*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 است، پس منطقی نیست همچین کاری انجام دهم:
|
||||
|
||||
@ -20,7 +20,7 @@ void main(){
|
||||
}
|
||||
```
|
||||
|
||||
اما اگر سیستم مختصات را به بالا اسکیل کنیم - مثلا سه برابر - ما سه توالی درون خطی بین 0و1 داریم: اولی بین 0و1 است, بعد از آن مریوط به نقاط شناور بین 1 و 2 و همچنین بعد از آن نقاط شناور بین 2 و 3.
|
||||
اما اگر سیستم مختصات را به بالا اسکیل کنیم - مثلا سه برابر - ما سه توالی درون خطی بین 0و1 داریم: اولی بین 0و1 است, بعد از آن مربوط به نقاط شناور بین 1 و 2 و همچنین بعد از آن نقاط شناور بین 2 و 3.
|
||||
|
||||
<div class="codeAndCanvas" data="grid-making.frag"></div>
|
||||
|
||||
@ -28,48 +28,48 @@ void main(){
|
||||
|
||||
برخی از تمرینات زیر را امتحان کنید تا درک عمیق تری پیدا کنید:
|
||||
|
||||
* فضا را در اعداد مختلف ضرب کنید، با مقادیر اعشاری و همچنین مقادیر مخلف برای 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) خود را بسازید.
|
||||
* لایه های مختلف پترن را با هم ترکیب کنید و سعی کنید [الگوی اسکاتلندی](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 را در آن ردیف جابجا کرد.
|
||||
برای اولین قدم باید بفهمیم ردیف ترد ما یک عدد زوج است یا فرد. چون می‌توانیم با دانستن آن، مقدار x را در آن ردیف جابجا کنیم.
|
||||
|
||||
____دو پاراگراف بعدی را با کمک هم باید اصلاح کنیم____
|
||||
|
||||
برای تعیین این که نخ ما در ردیف زوج یا فرد است از تابع باقیمانده [```mod()```](../glossary/?search=mod) بر عدد 2 استفاده میکنیم و سپس مشاهده کنیم که آیا نتیجه زیر 1.0 است یا خیر. به فرمول زیر نگاهی بیاندازید و دو خط آخر را از حالت کامنت خارج کنی.
|
||||
برای تعیین این که نخ ما در ردیف زوج یا فرد است از تابع باقیمانده [```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) استفاده کنیم, روش دوم سریع تر است، اما چرا? اگرچه دانستن عملیات اجرا و بهینه سازی هر نوع کارت گرافیک دشوار است، اما توابع داخلی سریعتر اجرا می‌شوند هر موقع می‌توانستید از توابع داخلی استفاده کنید، حتما بجای کد های ظرطی از آنان استفاده کنید.
|
||||
همانطور که در خط دوم مثال بالا دیدید، می‌توانیم از [اپراتور سه گانه](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 واحد جابجا میکنیم.
|
||||
بنابراین اکنون که فرمول اعداد فرد خود را داریم، میتوان برای ردیف های فرد عملیات جابه جایی را انجام دهیم، خط 14 در مثال زیر جایی است که ردیف های فرد را شناسایی میکنیم و آنان را نیم واحد جابجا میکنیم. توجه داشته باشید که برای ردیف های زوج نتیجه عملکرد ما 0.0 است و ضرب 0.0 در مقدار جابه جایی 0.5 هیچ مقداری را جابجا نمی‌کند. اما در ردیف های فرد با ضرب 1.0 در مقدار جابجایی 0.5، آن ردیف را در محور مختصات 0.5 واحد جابجا میکنیم.
|
||||
|
||||
حال سعی کنید خط 32 را از کامنت خارج کنید، این کار نسبت ابعاد مختصات را می‌کشد تا شکل آجر مانند را تقلید کند. با خارج کردن حالت کامنت خط 40 می‌توانید ببینید چگونه سیستم مختصات به رنگ قرمز و سبز ترسیم شده است.
|
||||
|
||||
@ -79,15 +79,15 @@ ____دو پاراگراف بعدی را با کمک هم باید اصلاح ک
|
||||
|
||||
* انیمیشن های دیگری بسازید که ردیف های زوج به سمت چپ و ردیف های فرد به سمت راست حرکت کنند.
|
||||
|
||||
* آیا این کار را برای ستون ها می‌توانید انجام دهید?
|
||||
* آیا این کار را برای ستون ها می‌توانید انجام دهید؟
|
||||
|
||||
* سعی کنید جابجایی در X و y ها ترکیب کنید و چیزی مثل شکل زیر بسازید:
|
||||
* سعی کنید جابجایی در 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) را در نظر بگیرید، که در آن از یک عنصر طراحی واحد میتوان به چهار روش زیر استفاده کرد:
|
||||
حال که می‌توانیم بفهمیم سلول هایمان در ستون ها و ردیف های زوج یا فرد هستند, پس بسته به موقعیت سلول ها میتوان یک طراحی واحد را چندین بار استفاده کرد. الگوی [Truchet Tiles](http://en.wikipedia.org/wiki/Truchet_tiles) را در نظر بگیرید، که در آن از یک عنصر طراحی واحد میتوان به چهار روش زیر استفاده کرد:
|
||||
|
||||
|
||||
|
||||
@ -95,26 +95,26 @@ ____دو پاراگراف بعدی را با کمک هم باید اصلاح ک
|
||||
|
||||
|
||||
|
||||
به تابع```rotateTilePattern()``` خوب دقت کنید, که چگونه فضا را به چهار سلول تقسیم میکند و به هر کدام زاویه چرخشی اختصاص می‌دهد.
|
||||
به تابع ```rotateTilePattern()``` خوب دقت کنید, که چگونه فضا را به چهار سلول تقسیم میکند و به هر کدام زاویه چرخشی اختصاص می‌دهد.
|
||||
|
||||
<div class="codeAndCanvas" data="truchet.frag"></div>
|
||||
|
||||
* خط های 69 تا 72 را از حالت کامنت خارج کنید، تا طرح های جدید را ببینید.
|
||||
|
||||
* الگوی مثلث سیاه و سفید را با الگویی دیگیر مثل نیم دایره، مربع یا خطوط تغییر دهید.
|
||||
* الگوی مثلث سیاه و سفید را با الگویی دیگری مثل نیم دایره، مربع یا خطوط تغییر دهید.
|
||||
|
||||
* الگو های دیگری که عناصر آن با توجه به موقعیتشان می‌چرخند بسازید.
|
||||
|
||||
* الگویی بسازید که سایز خواص را با توجه به موقعیت سلول ها تغییر دهد.
|
||||
|
||||
* به چیز دیگری فکر کنید. چیزی که لزوما الگویی و پترنی نباشد تا بتوانید اصول این بخش را کمل یاد بگیرید چیزی مثل:. (Ex: I Ching hexagrams)
|
||||
* به چیز دیگری فکر کنید. چیزی که لزوما الگویی و پترنی نباشد تا بتوانید اصول این بخش را کامل یاد بگیرید چیزی مثل: (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/) بیاندازید و ببینید که چگونه هنرمندان و طراحان سابقه طولانی در پیمیاش مرز بین قابل پیش بینی بودن و تنوع و هرج و مرج دارند. از الگو های هندسی عربی گرفته تا طرح های پارچه ای و زیبای آفریقایی، الگو های زیادی برای یادگیری وجود دارد.
|
||||
ایجاد الگو های رویه ای یک نوع تمرین ذهنی برای یافتن حداقل عناصر قابل استفاده مجدد است، این یک عمل قدیمی است; انسان ها برای مدت طولانی است که از شبکه ها و الگو ها برای تزئین پارچه، کف زمین و اطراف اشیا استفاده می‌کنند، از الگو های داری پیچ و خم در یونان باستان، تا طراحی مشبک چینی، لذت تکرار و تغییر عناصر، چشم ما را جلب میکند. نگاهی به [decorative](https://archive.org/stream/traditionalmetho00chririch#page/130/mode/2up) [patterns](https://www.pinterest.com/patriciogonzv/paterns/) بیاندازید و ببینید که چگونه هنرمندان و طراحان سابقه طولانی در پیمیاش مرز بین قابل پیش بینی بودن و تنوع و هرج و مرج دارند. از الگو های هندسی عربی گرفته تا طرح های پارچه ای و زیبای آفریقایی، الگو های زیادی برای یادگیری وجود دارد.
|
||||
|
||||
|
||||
|
||||
با اتمام این فصل درس های ما در مورد الگوریتم های شکل دهی پایان یافت، در فصل های بعد می‌موزیم چگونه برخی آنتروپی ها را به شیدر خورد اضافه کنیم و طرح های مولد تولید کنیم.
|
||||
با اتمام این فصل درس های ما در مورد الگوریتم های شکل دهی پایان یافت، در فصل های بعد می آموزیم چگونه برخی آنتروپی ها را به شیدر خورد اضافه کنیم و طرح های مولد تولید کنیم.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user