Skip to content

Commit 5ecd8ba

Browse files
authored
Update article.md
1 parent 2d4ab00 commit 5ecd8ba

1 file changed

Lines changed: 16 additions & 16 deletions

File tree

7-animation/1-bezier-curve/article.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,15 +62,15 @@
6262

6363
در اینجا نسخه ی نمایشی است، و توضیح در ادامه.
6464

65-
نقاط کنترل (1،2 و 3) را می توان توسط ماوس جابجا کرد. دکمه "play" را فشار دهید تا اجرا شود.
65+
نقاط کنترل (1،2 و 3) را می توان توسط ماوس جابجا کرد. دکمه 'play' را فشار دهید تا اجرا شود.
6666

6767
[iframe src="demo.svg?p=0,0,0.5,1,1,0&animate=1" height=370]
6868

6969
**الگوریتم De Casteljau برای ساخت منحنی 3 نقطه ای بزیر:**
7070

71-
1. نقاط کنترل را ترسیم کنید. در نسخه ی نمایشی بالا آنها با برچسب: "1"، "2"، "3".
71+
1. نقاط کنترل را ترسیم کنید. در نسخه ی نمایشی بالا آنها با برچسب: '1'، '2'، '3'.
7272
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' می رود.
7474

7575
برای هر یک از این مقادیر `t`:
7676

@@ -85,9 +85,9 @@
8585
| ------------------------ | ---------------------- |
8686
| ![](bezier3-draw1.svg) | ![](bezier3-draw2.svg) |
8787

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> است.
8989

90-
5. از آنجایی که «t» از «0» تا «1» اجرا می‌شود، هر مقدار «t» یک نقطه به منحنی اضافه می‌کند. مجموعه چنین نقاطی منحنی بزیه را تشکیل می دهد. در تصاویر بالا قرمز و سهمی است.
90+
5. از آنجایی که 't' از '0' تا '1' اجرا می‌شود، هر مقدار 't' یک نقطه به منحنی اضافه می‌کند. مجموعه چنین نقاطی منحنی بزیه را تشکیل می دهد. در تصاویر بالا قرمز و سهمی است.
9191

9292
این یک روند برای 3 امتیاز بود. اما برای 4 امتیاز همینطور است.
9393

@@ -98,18 +98,18 @@
9898
الگوریتم 4 نقطه:
9999

100100
- نقاط کنترل را بر اساس بخش ها وصل کنید: 1 -> 2، 2 -> 3، 3 -> 4. 3 قطعه <span style="color:#825E28">قهوه ای</span> وجود خواهد داشت.
101-
- برای هر «t» در بازه «0» تا «1»:
101+
- برای هر «t» در بازه '0' تا '1':
102102
- از ابتدا روی این بخش ها در فاصله متناسب با «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> است.
105105
- این نقاط با هم منحنی را تشکیل می دهند.
106106

107107
الگوریتم بازگشتی است و برای هر تعداد نقطه کنترل قابل تعمیم است.
108108

109109
با توجه به N از نقاط کنترل:
110110

111111
1. ما آنها را به هم وصل می کنیم تا در ابتدا بخش های N-1 را بدست آوریم.
112-
2. سپس برای هر «t» از «0» تا «1»، روی هر قسمت در فاصله متناسب با «t» یک نقطه می گیریم و آنها را به هم وصل می کنیم. بخش N-2 وجود خواهد داشت.
112+
2. سپس برای هر 't' از '0' تا '1'، روی هر قسمت در فاصله متناسب با 't' یک نقطه می گیریم و آنها را به هم وصل می کنیم. بخش N-2 وجود خواهد داشت.
113113
3. مرحله 2 را تکرار کنید تا تنها یک نقطه باقی بماند.
114114

115115
این نقاط منحنی را می سازند.
@@ -157,7 +157,7 @@
157157

158158
همانطور که دیدیم - در واقع نیازی به دانستن آن نیست، اکثر مردم فقط با حرکت دادن نقاط با ماوس منحنی را ترسیم می کنند. اما اگر به ریاضیات علاقه دارید - اینجاست.
159159

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]' بستگی دارد.
161161

162162
- فرمول منحنی 2 نقطه ای:
163163

@@ -170,21 +170,21 @@
170170
<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>
171171

172172

173-
اینها معادلات برداری هستند. به عبارت دیگر، می‌توانیم «x» و «y» را به جای «P» قرار دهیم تا مختصات مربوطه را بدست آوریم.
173+
اینها معادلات برداری هستند. به عبارت دیگر، می‌توانیم 'x' و 'y' را به جای 'P' قرار دهیم تا مختصات مربوطه را بدست آوریم.
174174

175-
به عنوان مثال، منحنی 3 نقطه ای توسط نقاط "(x,y)" تشکیل می شود که به صورت زیر محاسبه می شود:
175+
به عنوان مثال، منحنی 3 نقطه ای توسط نقاط '(x,y)' تشکیل می شود که به صورت زیر محاسبه می شود:
176176

177177
- <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>
178178
- <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>
179179

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)' از منحنی را خواهیم داشت.
181181

182-
به عنوان مثال، اگر نقاط کنترل «(0،0)»، «(0.5، 1)» و «(1، 0)» باشند، معادلات تبدیل می شوند:
182+
به عنوان مثال، اگر نقاط کنترل '(0،0)'، '(0.5، 1)' و '(1، 0)' باشند، معادلات تبدیل می شوند:
183183

184184
- <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>
185185
- <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>
186186

187-
اکنون که «t» از «0» تا «1» اجرا می شود، مجموعه مقادیر «(x,y)» برای هر «t» منحنی چنین نقاط کنترلی را تشکیل می دهد.
187+
اکنون که «t» از '0' تا '1' اجرا می شود، مجموعه مقادیر '(x,y)' برای هر 't' منحنی چنین نقاط کنترلی را تشکیل می دهد.
188188

189189
## خلاصه
190190

@@ -203,5 +203,5 @@
203203
استفاده:
204204

205205
- در گرافیک کامپیوتری، مدل سازی، ویرایشگرهای گرافیکی برداری. فونت ها با منحنی های 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).
207207
- در انیمیشن CSS برای توصیف مسیر و سرعت انیمیشن.

0 commit comments

Comments
 (0)