|
62 | 62 |
|
63 | 63 | در اینجا نسخه ی نمایشی است، و توضیح در ادامه. |
64 | 64 |
|
65 | | -نقاط کنترل (1،2 و 3) را می توان توسط ماوس جابجا کرد. دکمه "play" را فشار دهید تا اجرا شود. |
| 65 | +نقاط کنترل (1،2 و 3) را می توان توسط ماوس جابجا کرد. دکمه 'play' را فشار دهید تا اجرا شود. |
66 | 66 |
|
67 | 67 | [iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370] |
68 | 68 |
|
69 | 69 | **الگوریتم De Casteljau برای ساخت منحنی 3 نقطه ای بزیر:** |
70 | 70 |
|
71 | | -1. نقاط کنترل را ترسیم کنید. در نسخه ی نمایشی بالا آنها با برچسب: "1"، "2"، "3". |
| 71 | +1. نقاط کنترل را ترسیم کنید. در نسخه ی نمایشی بالا آنها با برچسب: '1'، '2'، '3'. |
72 | 72 | 2. ساخت بخش ها بین نقاط کنترل 1 -> 2 -> 3. در نسخه نمایشی بالا آنها <span style="color:#825E28">قهوه ای</span> هستند. |
73 | | -3. پارامتر "t" از "0" به "1" حرکت می کند. در مثال بالا از مرحله «0.05» استفاده شده است: حلقه از «0، 0.05، 0.1، 0.15، ... 0.95، 1» می رود. |
| 73 | +3. پارامتر 't' از'0' به '1' حرکت می کند. در مثال بالا از مرحله '0.05' استفاده شده است: حلقه از '0، 0.05، 0.1، 0.15، ... 0.95، 1' می رود. |
74 | 74 |
|
75 | 75 | برای هر یک از این مقادیر `t`: |
76 | 76 |
|
|
85 | 85 | | ------------------------ | ---------------------- | |
86 | 86 | |  |  | |
87 | 87 |
|
88 | | -4. اکنون در بخش <span style="color:#167490">آبی</span> یک نقطه از فاصله متناسب با همان مقدار "t" بگیرید. یعنی برای `t=0.25` (تصویر سمت چپ) یک نقطه در انتهای ربع سمت چپ بخش داریم و برای `t=0.5` (تصویر سمت راست) -- در وسط قطعه. در تصاویر بالای آن نقطه <span style="color:red">قرمز</span> است. |
| 88 | +4. اکنون در بخش <span style="color:#167490">آبی</span> یک نقطه از فاصله متناسب با همان مقدار 't' بگیرید. یعنی برای `t=0.25` (تصویر سمت چپ) یک نقطه در انتهای ربع سمت چپ بخش داریم و برای `t=0.5` (تصویر سمت راست) -- در وسط قطعه. در تصاویر بالای آن نقطه <span style="color:red">قرمز</span> است. |
89 | 89 |
|
90 | | -5. از آنجایی که «t» از «0» تا «1» اجرا میشود، هر مقدار «t» یک نقطه به منحنی اضافه میکند. مجموعه چنین نقاطی منحنی بزیه را تشکیل می دهد. در تصاویر بالا قرمز و سهمی است. |
| 90 | +5. از آنجایی که 't' از '0' تا '1' اجرا میشود، هر مقدار 't' یک نقطه به منحنی اضافه میکند. مجموعه چنین نقاطی منحنی بزیه را تشکیل می دهد. در تصاویر بالا قرمز و سهمی است. |
91 | 91 |
|
92 | 92 | این یک روند برای 3 امتیاز بود. اما برای 4 امتیاز همینطور است. |
93 | 93 |
|
|
98 | 98 | الگوریتم 4 نقطه: |
99 | 99 |
|
100 | 100 | - نقاط کنترل را بر اساس بخش ها وصل کنید: 1 -> 2، 2 -> 3، 3 -> 4. 3 قطعه <span style="color:#825E28">قهوه ای</span> وجود خواهد داشت. |
101 | | -- برای هر «t» در بازه «0» تا «1»: |
| 101 | +- برای هر «t» در بازه '0' تا '1': |
102 | 102 | - از ابتدا روی این بخش ها در فاصله متناسب با «t» امتیاز می گیریم. این نقاط به هم متصل می شوند، به طوری که ما دو <span style="color:#0A0">قطع سبز</span> داریم. |
103 | | - - در این بخش ها نقاطی متناسب با «t» می گیریم. ما یک <span style="color:#167490">بخش آبی</span> دریافت می کنیم. |
104 | | - - در قسمت آبی یک نقطه متناسب با «t» می گیریم. در مثال بالا <span style="color:red">قرمز</span> است. |
| 103 | + - در این بخش ها نقاطی متناسب با 't' می گیریم. ما یک <span style="color:#167490">بخش آبی</span> دریافت می کنیم. |
| 104 | + - در قسمت آبی یک نقطه متناسب با 't' می گیریم. در مثال بالا <span style="color:red">قرمز</span> است. |
105 | 105 | - این نقاط با هم منحنی را تشکیل می دهند. |
106 | 106 |
|
107 | 107 | الگوریتم بازگشتی است و برای هر تعداد نقطه کنترل قابل تعمیم است. |
108 | 108 |
|
109 | 109 | با توجه به N از نقاط کنترل: |
110 | 110 |
|
111 | 111 | 1. ما آنها را به هم وصل می کنیم تا در ابتدا بخش های N-1 را بدست آوریم. |
112 | | -2. سپس برای هر «t» از «0» تا «1»، روی هر قسمت در فاصله متناسب با «t» یک نقطه می گیریم و آنها را به هم وصل می کنیم. بخش N-2 وجود خواهد داشت. |
| 112 | +2. سپس برای هر 't' از '0' تا '1'، روی هر قسمت در فاصله متناسب با 't' یک نقطه می گیریم و آنها را به هم وصل می کنیم. بخش N-2 وجود خواهد داشت. |
113 | 113 | 3. مرحله 2 را تکرار کنید تا تنها یک نقطه باقی بماند. |
114 | 114 |
|
115 | 115 | این نقاط منحنی را می سازند. |
|
157 | 157 |
|
158 | 158 | همانطور که دیدیم - در واقع نیازی به دانستن آن نیست، اکثر مردم فقط با حرکت دادن نقاط با ماوس منحنی را ترسیم می کنند. اما اگر به ریاضیات علاقه دارید - اینجاست. |
159 | 159 |
|
160 | | -با توجه به مختصات نقاط کنترل <code>P<sub>i</sub></code>: اولین نقطه کنترل دارای مختصات <code>P<sub>1</sub> = (x<sub>1</ sub>، y<sub>1</sub>)</code>، دوم: <code>P<sub>2</sub> = (x<sub>2</sub>، y<sub>2 </sub>)</code>، و به همین ترتیب، مختصات منحنی با معادله ای توصیف می شوند که به پارامتر "t" از بخش "[0،1]" بستگی دارد. |
| 160 | +با توجه به مختصات نقاط کنترل <code>P<sub>i</sub></code>: اولین نقطه کنترل دارای مختصات <code>P<sub>1</sub> = (x<sub>1</ sub>، y<sub>1</sub>)</code>، دوم: <code>P<sub>2</sub> = (x<sub>2</sub>، y<sub>2 </sub>)</code>، و به همین ترتیب، مختصات منحنی با معادله ای توصیف می شوند که به پارامتر 't' از بخش '[0،1]' بستگی دارد. |
161 | 161 |
|
162 | 162 | - فرمول منحنی 2 نقطه ای: |
163 | 163 |
|
|
170 | 170 | <code>P = (1−t)<sup>3</sup>P<sub>1</sub> + 3(1−t)<sup>2</sup>tP<sub>2</sub > +3(1−t)t<sup>2</sup>P<sub>3</sub> + t<sup>3</sup>P<sub>4</sub></code> |
171 | 171 |
|
172 | 172 |
|
173 | | -اینها معادلات برداری هستند. به عبارت دیگر، میتوانیم «x» و «y» را به جای «P» قرار دهیم تا مختصات مربوطه را بدست آوریم. |
| 173 | +اینها معادلات برداری هستند. به عبارت دیگر، میتوانیم 'x' و 'y' را به جای 'P' قرار دهیم تا مختصات مربوطه را بدست آوریم. |
174 | 174 |
|
175 | | -به عنوان مثال، منحنی 3 نقطه ای توسط نقاط "(x,y)" تشکیل می شود که به صورت زیر محاسبه می شود: |
| 175 | +به عنوان مثال، منحنی 3 نقطه ای توسط نقاط '(x,y)' تشکیل می شود که به صورت زیر محاسبه می شود: |
176 | 176 |
|
177 | 177 | - <code>x = (1−t)<sup>2</sup>x<sub>1</sub> + 2(1−t)tx<sub>2</sub> + t<sup>2 </sup>x<sub>3</sub></code> |
178 | 178 | - <code>y = (1−t)<sup>2</sup>y<sub>1</sub> + 2(1−t)ty<sub>2</sub> + t<sup>2 </sup>y<sub>3</sub></code> |
179 | 179 |
|
180 | | -به جای <code>x<sub>1</sub>، y<sub>1</sub>، x<sub>2</sub>، y<sub>2</sub>، x<sub>3 </sub>، y<sub>3</sub></code> باید مختصات 3 نقطه کنترل را قرار دهیم، و سپس با انتقال «t» از «0» به «1»، برای هر مقدار «t» "(x,y)" از منحنی را خواهیم داشت. |
| 180 | +به جای <code>x<sub>1</sub>، y<sub>1</sub>، x<sub>2</sub>، y<sub>2</sub>، x<sub>3 </sub>، y<sub>3</sub></code> باید مختصات 3 نقطه کنترل را قرار دهیم، و سپس با انتقال 't' از '0' به '1'، برای هر مقدار 't' '(x,y)' از منحنی را خواهیم داشت. |
181 | 181 |
|
182 | | -به عنوان مثال، اگر نقاط کنترل «(0،0)»، «(0.5، 1)» و «(1، 0)» باشند، معادلات تبدیل می شوند: |
| 182 | +به عنوان مثال، اگر نقاط کنترل '(0،0)'، '(0.5، 1)' و '(1، 0)' باشند، معادلات تبدیل می شوند: |
183 | 183 |
|
184 | 184 | - <code>x = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 0.5 + t<sup>2</sup> * 1 = (1-t)t + t<sup>2</sup> = t</code> |
185 | 185 | - <code>y = (1−t)<sup>2</sup> * 0 + 2(1−t)t * 1 + t<sup>2</sup> * 0 = 2(1-t) t = –2t<sup>2</sup> + 2t</code> |
186 | 186 |
|
187 | | -اکنون که «t» از «0» تا «1» اجرا می شود، مجموعه مقادیر «(x,y)» برای هر «t» منحنی چنین نقاط کنترلی را تشکیل می دهد. |
| 187 | +اکنون که «t» از '0' تا '1' اجرا می شود، مجموعه مقادیر '(x,y)' برای هر 't' منحنی چنین نقاط کنترلی را تشکیل می دهد. |
188 | 188 |
|
189 | 189 | ## خلاصه |
190 | 190 |
|
|
203 | 203 | استفاده: |
204 | 204 |
|
205 | 205 | - در گرافیک کامپیوتری، مدل سازی، ویرایشگرهای گرافیکی برداری. فونت ها با منحنی های Bezier توصیف می شوند. |
206 | | -- در توسعه وب -- برای گرافیک روی بوم و در قالب SVG. به هر حال، مثال های "زنده" بالا در SVG نوشته شده اند. آنها در واقع یک سند SVG هستند که نقاط مختلفی به عنوان پارامتر به آنها داده می شود. می توانید آن را در یک پنجره جداگانه باز کنید و منبع را ببینید: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1). |
| 206 | +- در توسعه وب -- برای گرافیک روی بوم و در قالب SVG. به هر حال، مثال های 'زنده' بالا در SVG نوشته شده اند. آنها در واقع یک سند SVG هستند که نقاط مختلفی به عنوان پارامتر به آنها داده می شود. می توانید آن را در یک پنجره جداگانه باز کنید و منبع را ببینید: [demo.svg](demo.svg?p=0,0,1,0.5,0,0.5,1,1&animate=1). |
207 | 207 | - در انیمیشن CSS برای توصیف مسیر و سرعت انیمیشن. |
0 commit comments