Главная » Processing » Рисуем кривые в Processing

0

Прямые линии иногда бывают скучными, поэтому иногда нужно нарисовать кривые линии, чтобы ваша художественная работа выглядела естественнее. В этом примере мы рассмотрим построение кривых Безье и сплайнов Катмулла-Рома. Если вы работали в программах создания векторной графики типа Adobe Illustrator или Inkscape, вы узнаете кривые Безье, которые мы будем рисовать.

Как это делается

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

import processing.opengl.*;

void setup()

{

size( 640, 480, OPENGL );

smooth();

}

Начнем рисовать кривые Безье в функции draw(). Функция bezierDetail() измент отображение кривых Безье.

Void draw()

{

background( 255 ); noFill();

for ( int i = 0; i < 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, -5.0, 5.0 ); curveTightness( t );

for ( int i = 0; i < 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() устанавливает натяжение кривой. Значение, установленное по умолчанию равно 0.0. Если вы хотите соединить точки прямой линией введите 1.0. Если вы введете значения в диапазоне от -5.0 до 5.0 , то ваша кривая будет проходить через те же точки. Каждая новая величина даст вам немного измененную кривую.

Источник: Ян Вантомм, Processing 2: креативное программирование, перевод с английского Александры Мишутиной, Published by Packt Publishing Ltd., 2012, BIRMINGHAM – MUMBAI.

По теме:

  • Комментарии