Основні поняття Processing

Основні поняття мови для креативного програмування Processing

Мова програмування Processing, являє собою  Java-полдібну мову програмування. Середовище програмування Processing представляє собою програмне забезпечення, яке дає можливість створювати, редагувати компілювати та виконувати код проекту. Processing надає можливість швидко створювати інтерактивні інтерфейси користувача та різної складності графічні і мультимедійні об'єкти. Прикладом створення інтерфейсів та можливостей даної мови є Arduino IDE
, яка повністю створена за допомогою даного середовища розробки. Processing – мова програмування, якаорієнтованя на творче (криативне) програмування. В доповнення до ядра мови, Processing містить велику бібліотеку кодів, що розповсюджується спільнотою. Дані бібліотеки розширюють можливості цієї мови програмування. Ці бібліотеки можна вільно скачати та досить легко інтегрувати в свій проект.

Одною з самих цікавих можливостей даної мови є, її підтримка 3D. 

Інтерфейс середовища розробки Processing дуже мінімалістичний та являє собою повністю автономний застосунок. Ви просто запускаєте його і набираєте програмний код. На відміну від більшості середовищ розробки, Processing є простим і інтуїтивно зрозумілим застосунком, що не створює ніяких труднощів при створенні програмного коду.

Для створення проектів в даній мові програмування не потрібно мати ніякі спеціальні базові знання. Ви просто запускаєте застосунок і починаєте створювати свій перший працюючий програмний проект. Проект написаний в мові програмування Processing називається скетчем, що в перекладі з англійської (sketch) означає зарисовка, ескіз.  

Структура скетча Processing

 Основою мови програмування Processing є мова Java, тому при написанні програми дотримуються правил створення програм в мові Java.

Спочатку відбувається об'явлення глобальних змінних, які можуть використовуватись в будь-якій функції що входить до програми. Кожне об'явлення закінчується символом крапка з комою ";" також даним символом закінчується всі команди.

Після розділу оголошення глобальних змінних записується функція setup (), яка містить в собі команди що задають вигляд вікна в якому виводиться результати виконання програми. Відповідно до правил мови  Java функція позначається словом void. Далі йде функція в якій прописуються команди що утворюють малюнок ­– void draw().

Основи графічних побудов в Processing

Екран монітора (незалежно від того, в якому пристрої він розміщений: і звичайний монітор, і ноутбук, і смартфон, і планшет мають однакові принципи функціонування моніторів) складається з сітки пікселів, яку можна представити як частину координатної площини.

Розміщення об'єкта в цій координатній площині відбувається через вказання координат х та у:

Зверніть увагу, що відлік координат починається із лівого верхнього кута.

Розмір поля (сітки), з якою працює скетч задається командою size, яку зазвичай розміщують у функції void setup(). Якщо розміри не задаються то зображення виводиться в вікно розміром 100х100 пікселів. Приклад: void setup() { size(800,600); }

Колір будь-якого елемента задається у системі R,G, B (червоний, зелений, синій), з додатковим параметром прозорості (alpha). Колір тла задається командою background(R,G,B);. Значення R, G, B – це число від 0 до 255, яке задає відповідно відтінок даного кольору. Прозорість alpha може мінятись від 0 - повністю прозорий, до 255 - повністю суцільний колір, не прозорий. Її можна вказувати окремою командою, alpha(n); або додавати як четвертий параметр у команди встановлення кольору background(R,G,B,alpha);. Зверніть увагу що при накладанні прозорих кольорів утворюється інший колір, як при змішуванні фарб.

Колір фону можна розмістити в функції void setup().

Колір лінії (колір малювання) призначається командою stroke(R,G,B); або stroke(R,G,B,alpha);.

Колір заливки (фігури) призначається командою fill(R,G,B); або fill(R,G,B,alpha);. Приклад

Команда point(х,у); малює точку в заданих координатах.

Команда strokeWeight(n);  призначена для зміни розмірів точки (точніше, це команда зміни товщини ліній). Приклад: strokeWeight(6);.

Команду товщини лінії, команду задання кольору лінії та команду задання кольору заливки слід розмістити перед командами малювання об'єкту.

Команда line(х1,у1,х2,у2); малює відрізок між двома точками,  де х1,у1 – координати початку відрізка, а х2,у2 – координати кінця відрізка. Приклад: line(40,30,60,90);

Команда rect(х,у,w,h);  малює прямокутник, де х,у – координати лівого верхнього кута прямокутника, а w,h – ширина і довжина відповідно. Приклад: rect(40,30,30,70);

Команда rect(х,у,w,h,r); малює округлений прямокутник, де х,у – координати лівого верхнього кута прямокутника, w,h – ширина і довжина а r – радіус для округлення кутів. Приклад: rect(180,20,120,120,20 );

Команда rect(х,у,w,h,r1,r2,r3,r4); малює округлений прямокутник, де х,у – координати лівого верхнього кута прямокутника, w,h – ширина і довжина а r1,r2,r3,r4 – радіуси для округлення кутів починаючи з лівого верхнього кута і далі по черзі за годинниковою стрілкою. Приклад: rect(340,20,120,120,20,10,40,80);

Команда ellipse(х,у,w,h); малює еліпс (овал), де х,у – координати центра, w,h – ширина і висота відповідно. Щоб намалювати коло потрібно задати однакові значення ширини і висоти. Приклад: ellipse(150,150,80,50);

Команда triangle(х1,у1,х2,у2,х3,у3); малює трикутник,  де (х1,у1), (х2,у2), (х3,у3) – координати вершин трикутника. Приклад: triangle(40,340,140,460,20,420);

Команда quad(х1,у1,х2,у2,х3,у3,x4,y4); малює довільний чотирикутник, де (х1,у1), (х2,у2), (х3,у3), (х4,у4) – координати вершин чотирикутника відповідно. Приклад: quad(500,340,620,400,500,460,560,400 );

Команда arc(х,у,w,h,p,k); малює сектор еліпса, де х, у – координати центра, w, h – ширина і висота відповідно, p – початковий кут (кути задаються в радіанах), k – кінцевий кут, напрямок задається за часовою стрілкою. Приклад: arc(50,50,30,40,0,1.3);

Приклад:

	void setup()   {      size (400,400);    } void draw()   {       background (255,0,0);       strokeWeight(6);        stroke(0,255,0);       fill(255,255,0);       rect(100,100,100,100);       stroke(0,0,255);       line(100,100,200,200);       stroke(0,255,0);        fill(0,255,0,128);       rect(150,150,100,100,10);       arc(150,110,60,40,0,1.5); }