Главная » Processing » Вычисление точек на кривой в Processing

0

В примере Рисуем кривые мы научились рисовать кривые Безье и сплайны Катмулла- Рома. В этом примере мы научимся вычислять точки на кривых с помощью функций bezierPoint() и curvePoint().

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

Вот код нашего примера. Я использовал функцию noise() чтобы показать движение точки по кривой. Кривая, нарисованная с функцией curve(), управляется движением мыши.

float noiseOffset;

void setup()

{

size( 640, 480 );

smooth(); noiseOffset = 0.0;

rectMode( CENTER );

}

void draw() { noiseOffset += 0.01;

background( 255 );

// Bézier curve stroke( 0 ); noFill();

bezier( 40, 200, 120, 40, 300, 240, 600, 40 );

stroke( 255, 0, 0 );

line(     40, 200,  120,   40 );

line(     600, 40,  300,   240 );

fill( rect(    255 );

120, 40,

4, 4   

);

rect( 300, 240, 4, 4 );

float n = noise( noiseOffset );

float x = bezierPoint( 40, 120, 300, 600, n );

float y = bezierPoint( 200, 40, 240, 40, n );

stroke( 0 );

rect( x, y, 6, 6 );

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

// Catmull-Rom spline stroke( 0 ); noFill();

curve( 120, 240, 40, 400, 600, 240, 300, 440 );

stroke( 255, 0, 0 );

line( 120, 240, 40, 400 );

line( 600, 240, 300, 440 );

fill( 255 );

rect( 120, 240, 4, 4 );

rect( 300, 440, 4, 4 );

x = curvePoint( 120, 40, 600, 300, n );

y = curvePoint( 240, 400, 240, 440, n );

stroke( 0 );

rect( x, y, 6, 6 );

}

Результат работы скетча должен выглядеть так, как на этом скриншоте. Подвигайте мышью и посмотрите, как кривая реагирует на движение.

Как это работает

Здесь мы использовали несколько новых функций для вычисления точек кривой Безье и сплайнов Катмулла-Рома. Рассмотрим подробнее работу этих функций.

f Функция bezierPoint() имеет пять параметров. Первые четыре – это координаты опорных и управляющих точек кривой. Пятый параметр – это число в диапазоне от 0 до 1. Для генерации этого параметра я использовал функцию noise(), она выдает число именно в этом диапазоне. Если величина пятого параметра будет близка к 0, то вычисленная точка будет находиться ближе к первой опорной точке, а если к 1, то ко второй. Функция применяется дважды – один раз для вычисления координаты х новой точки, второй – для координаты у.

f  Функция curvePoint() работает аналогично функции bezierPoint().

Взгляните на код и сравните параметры в этих функциях.

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

По теме:

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