Малюємо прості фігури в Processing

У Главі 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 &lt 64 i++ ) { line( i*10, 0, i*10, height )

}

for ( int i = 0 i &lt 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 )

}                                                 

&nbsp

// 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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*