Введение

Теперь, когда вы установили Processing и написали первый скетч, мы покажем вам, как рисовать на экране разные фигуры. Мы начнем с прямоугольников и окружностей, а затем перейдем к более сложным фигурам. Также вы научитесь регулировать цвет, применять изображения и выводить на экран текст.

Рисуем простые фигуры

Здесь мы посмотрим, как рисовать самые простые геометрические фигуры: прямоугольники, эллипсы, треугольники и четырехугольники.

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

Ниже приведен код для рисования самых простых фигур. Сначала нужно написать

функцию setup() и установить размер окна 640 на 480 пикселей:

void setup()

{

size( 640, 480 );

smooth();

}

Следующий фрагмент кода является функцией для рисования сетки с квадратами 10 на

10 пикселей. Эта функция будет вызываться в функции draw():

void drawGrid()

{

stroke( 225 );

for ( int i = 0; i < 64; i++ ) {

line( i*10, 0, i*10, height );

}

for ( int i = 0; i < 48; i++ ) {

line( 0, i*10, width, i*10 );

}

}

И наконец мы можем написать функцию draw(). В ней мы установим цвет фона белым,

нарисуем сетку и несколько прямоугольников, эллипсов, треугольников и

четырехугольников.

void draw()

{

background( 255 );

drawGrid();

stroke( 0 );

// rectangles (yellow)

fill( 255, 255, 0 );

rect( 20, 20, 120, 120 );

rect( 180, 20, 120, 120, 20 );

rect( 340, 20, 120, 120, 20, 10, 40, 80 );

rect( 500, 40, 120, 80 );

// ellipses (red)

fill( 255, 0, 0 );

ellipse( 80, 240, 120, 120 );

ellipse( 240, 240, 120, 80 );

ellipse( 400, 240, 80, 120 );

// triangles (blue)

fill( 0, 0, 255 );

triangle( 560, 180, 620, 300, 500, 300 );

triangle( 40, 340, 140, 460, 20, 420 );

// quads (cyan)

fill( 0, 255, 255 );

quad( 180, 340, 300, 340, 300, 380, 180, 460 );

quad( 400, 340, 440, 400, 400, 460, 360, 400 );

quad( 500, 340, 620, 400, 500, 460, 560, 400 );

}

Когда вы запустите код, вы увидите картинку, изображенную на скриншоте:

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

Функция drawGrid() - это пользовательская функция, которую мы написали для того, чтобы нарисовать на экране светло-серую сетку.

В ней два цикла for, один для горизонтальных линий, другой - для вертикальных. Также в этом примере мы познакомились с несколькими функциями для рисования простых фигур.

Посмотрим, что они делают. Функция rect() может быть использована с четырьмя, пятью или восемью параметрами. Чаще всего она применяется с четырьмя параметрами для рисования обычного прямоугольника. Первые два параметра это координаты x и y, а третий и четвертый - ширина и высота прямоугольника.

В Processing нет функции square(), поэтому если вы хотите нарисовать квадрат, введите одинаковую ширину и высоту в функцию rect().

Функция rect() с пятью или восемью параметрами используется в Processing для рисования прямоугольников со скругленными углами. Пятый параметр в функции rect() - это радиус для скругления углов.

В функции rect() с восемью параметрами последние четыре параметра - радиусы скругления для каждого угла, начиная с верхнего левого и продолжая по часовой стрелке.

Функция ellipse() похожа на функцию rect() тем, что использует первые два параметра для задания положения и последние два для задания ширины и высоты. Заметьте, что эллипс рисуется из центра. Если вам нужно нарисовать круг, то вы можете использовать функцию ellipse() с одинаковыми значениями ширины и высоты.

Функции circle() в Processing нет.

У функции triangle() шесть параметров. Это три пары координат x/y для трех вершин треугольника. Для упрощения задачи советуем записывать эти точки по часовой стрелке.

Функция quad() похожа на triangle(), но использует четыре пары параметров, так как четырехугольник имеет четыре вершины.