Рисуем кривые

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

void setup() {
  size(640, 480);
}

void draw() {
  background(255);
  noFill();

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

  curve(40, 40, 0, 20, 30, 200, -50, 250);
}

bezier() рисует на экране кривую Безье. Первые два параметра - координаты начальной опорной точки. Третий и четвертый - координаты первой управляющей опорной точки. Пятый и шестой - координаты второй управляющей опорной точки, а последние два параметра - координаты конечной опорной точки.

Есть ещё функция bezierDetail(), которая устанавливает параметр кривой Безье. По умолчанию он равен 20.

Функция curve() выводит на экран кривую. Это реализация сплайна Катмулла-Рома. Она работает аналогично функции bezier(), но координаты начальной, конечной и управляющих точек поменялись местами.

curveDetail() устанавливает уровень кривой. Аналогична функции bezierDetail().

curveTightness() устанавливает натяжение кривой. Значение, установленное по умолчанию равно 0.0. Если вы хотите соединить точки прямой линией введите 1.0. Если вы введете значения в диапазоне от -5.0 до 5.0 , то ваша кривая
будет проходить через те же точки. Каждая новая величина даст вам немного измененную кривую.

Напишем еще один пример с анимацией.

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( 255 );
  rect( 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 );
}

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

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

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

Ещё один пример.

float noiseOffset;
void setup()
{
  size( 640, 480 );
  smooth();
  noiseOffset = 0.0;
  rectMode( CENTER );
}
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();
  }

  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();
  }
}