Малюємо криві в Processing

Прямі лінії іноді бувають нудними, тому іноді потрібно намалювати криві лінії, щоб ваша художня робота виглядала природніше У цьому прикладі ми розглянемо побудову кривих Безьє і сплайнів Катмулла-Рома Якщо ви працювали в програмах створення векторної графіки типу Adobe Illustrator або Inkscape, ви дізнаєтеся криві Безьє, які ми будемо малювати

Як це робиться

Перше, що потрібно зробити – імпортувати бібліотеку OpenGL Цю бібліотеку часто використовують для малювання в 3D Незважаючи на те, що ми не будемо малювати в 3D, нам потрібно її імпортувати, тому що функції bezierDetail () і curveDetail () не рота в стандартному 2D-рендерер Імпортувати OpenGL можна в меню Sketch | Import Library…| OpenGL Коли ви зробите це, ви можете ввести наступний код:

import processingopengl*

void setup()

{

size( 640, 480, OPENGL )

smooth()

}

Почнемо малювати криві Безьє у функції draw () Функція bezierDetail () изменть відображення кривих Безьє

Void draw()

{

background( 255 ) noFill()

for ( int i = 0 i &lt 15 i++ ) { pushMatrix()

translate( (i * 40) + 20, 0 ) bezierDetail( i + 4 )

stroke( 0 )

bezier( 0, 20, 50, 10, 80, 100, 30, 200 )

stroke( 255, 0, 0, 128 )

line( 0, 20, 50, 10 )

line( 80, 100, 30, 200 )

popMatrix()

}

}

Далі ми намалюємо кілька сплайнів Катмулла-Рома за допомогою функції curve () Координата x миші регулює натяг кривої Цей фрагмент коду додається далі в функцію draw ()

float t = map( mouseX, 0, width, -50, 50 ) curveTightness( t )

for ( int i = 0 i &lt 15 i++ ) { pushMatrix()

translate( (i * 40) + 20, 220 ) curveDetail( i + 4 )

stroke( 0 )

curve( 10, 50, 0, 20, 30, 200, -50, 250 )

stroke( 255, 0, 0, 128 )

line( 10, 50, 0, 20 )

line( 30, 200, -50, 250 )

popMatrix()

}

Результат скетчу буде таким, як на цьому скріншоті:

Як це працює

Для малювання різних кривих в цьому прикладі ми застосували кілька нових функцій Подивимося, як вони працюють:

f bezier () малює на екрані криву Безьє Перші два параметри – координати початкової опорної точки Третій і четвертий – координати першої керуючої опорної точки Пятий і шостий – координати другої керуючої опорної точки, а останні два параметри – координати кінцевої опорної точки

f bezierDetail () встановлює параметр кривої Безьє За замовчуванням він дорівнює 20

f curve () виводить на екран криву Це реалізація сплайна Катмулла-Рома в Processing Вона працює аналогічно функції bezier (), але координати начьной, кінцевої і керуючих точок поміняні місцями

f curveDetail () встановлює рівень кривої Аналогічна функції

bezierDetail()

f curveTightness () встановлює натяг кривої Значення, встановлене за замовчуванням дорівнює 00 Якщо ви хочете поєднати точки прямою лінією введіть 10 Якщо ви введете значення в діапазоні від -50 до 50, то ваша крива буде проходити через ті ж точки Кожна нова величина дасть вам трохи змінену криву

Джерело: Ян Вантомм, Processing 2: креативне програмування, переклад з англійської Олександри Мішутіної, Published by Packt Publishing Ltd, 2012, BIRMINGHAM – MUMBAI

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*