Главная » Processing » Рисуем простые фигуры в Processing

0

В Главе 1, Начинаем программировать в Processing 2, в примере Пишем первый скетч 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 );

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

}                                                 

 

// quads (cyan) fill( 0, 255, 255 );

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

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

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

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

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

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

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

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

По теме:

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