Вежба: Креирање 2D анимација у Processing-у (Java)

Анимација представља један од најзанимљивијих начина за учење програмирања јер омогућава да се написани програм одмах види на екрану. Уместо да програм само исписује бројеве или текст, можемо цртати објекте, померати их, мењати њихову величину, боју и приказивати различите физичке појаве.

У овој вежби научићете како се креирају једноставне 2D анимације у Processing окружењу које користи програмски језик Java. Као практичан пример направићемо симулацију косог хица, односно кретања лоптице која је избачена под одређеним углом и на коју делује Земљина гравитација.

Током рада упознаћете функције setup() и draw(), научити како се мења координатни систем, како се креира анимација корак по корак и на који начин се примењује једноставна нумеричка метода позната као Eulerова метода.

2D анимације

Креирање једноставних графичких анимација помоћу Processing окружења.

setup() и draw()

Функције које представљају основу сваког Processing програма.

Коси хитац

Практичан пример анимације заснован на законима физике.

Eulerова метода

Једноставан начин симулације кретања помоћу малих временских корака.

📑 Садржај

• Шта је 2D анимација?
• Како Processing прави анимацију?
• Зашто користити Processing?
• Шта ћемо направити?
• Eulerова метода
• Processing програм
• Објашњење програма
• Предлози за експериментисање
• На шта треба обратити пажњу
• Додатно учење
• Мини квиз

🎬 Шта је 2D анимација?

Анимација је поступак брзог приказивања великог броја слика једне за другом. Када се слике смењују довољно великом брзином, људско око их доживљава као непрекидно кретање. Управо на овом принципу функционишу филмови, цртани филмови, видео игре и бројне интерактивне апликације.

Код класичне анимације свака слика се ручно цртала. Данас рачунари могу сами да израчунавају положај објеката и исцртавају нове кадрове више десетина пута у секунди. Програмер задаје правила кретања, а рачунар непрекидно освежава приказ.

Processing је управо направљен тако да омогући једноставно креирање оваквих програма. Неколико линија кода је довољно да на екрану добијемо покретне објекте, различите ефекте и симулације физичких појава.

💻 Како Processing прави анимацију?

За разлику од већине Java програма, Processing аутоматски позива две веома важне функције:

• setup() – извршава се само једном приликом покретања програма.
• draw() – непрекидно се извршава све док је програм покренут.

У функцији setup() најчешће подешавамо величину прозора, боје, дебљину линија, учитавамо слике и иницијализујемо променљиве.

Функција draw() представља срце сваке анимације. Она се аутоматски позива изнова и изнова, најчешће 60 пута у секунди. При сваком новом позиву могуће је променити координате објекта, његову величину, боју или неко друго својство, а затим га поново исцртати.

🎥 Брзина освежавања анимације (Frame Rate)

Да би анимација изгледала природно, није довољно само мењати положај објеката. Потребно је да се екран освежава довољно брзо. Број приказаних кадрова у једној секунди назива се Frame Rate (FPS – Frames Per Second).

Подразумевано Processing покушава да прикаже око 60 кадрова у секунди. То значи да се функција draw() извршава приближно 60 пута сваке секунде, што омогућава веома глатку анимацију.

Брзина освежавања може се променити функцијом frameRate(). Она се најчешће поставља у функцији setup().

void setup() {

  size(600,600);

  frameRate(30);

}

У овом примеру Processing ће покушати да прикаже око 30 кадрова у секунди. Ако поставимо већу вредност, а рачунар нема довољно процесорске снаге, стварни број кадрова може бити мањи од задатог.

🚀 Зашто користити Processing?

Processing је једно од најпопуларнијих окружења за учење програмирања графике, симулација и анимација. Заснован је на Java програмском језику, али уклања велики број сложених детаља, тако да почетници могу веома брзо да почну са цртањем и креирањем анимација.

Захваљујући једноставној синтакси, Processing се користи у школама, факултетима, STEM образовању, интерактивној уметности, роботици и развоју различитих научних симулација.

🏀 Шта ћемо направити?

У овој лекцији направићемо симулацију косог хица. Лоптица ће се кретати по путањи која настаје услед комбинације две компоненте брзине:

• хоризонталне брзине (vx),
• вертикалне брзине (vy).

За разлику од хоризонталне брзине која остаје приближно константна, вертикална брзина се непрекидно мења јер на лоптицу делује гравитација. Због тога путања није права линија већ има облик параболе.

Важно је напоменути да положај лоптице нећемо рачунати директно помоћу формула из физике. Уместо тога, користићемо једноставну нумеричку технику која се назива Eulerова метода. Она омогућава да се кретање симулира корак по корак, што је веома корисно приликом израде видео игара, физичких симулација и научних апликација.

Пре него што почнемо са анализом програма, потребно је да разумемо основну идеју Eulerове методе и зашто је она веома погодна за израду анимација и симулација кретања.

🧮 Eulerова метода

Приликом решавања задатака из физике најчешће користимо готове формуле помоћу којих директно израчунавамо положај, брзину или време кретања. Међутим, код сложенијих кретања такве формуле често не постоје или су веома тешке за примену.

Због тога се у рачунарским симулацијама користе нумеричке методе. Једна од најједноставнијих је Eulerова метода, која уместо једног великог прорачуна прави велики број веома малих корака.

Основна идеја је да се време подели на мале временске интервале (dt). За сваки такав интервал програм израчунава нову брзину и нови положај објекта. Пошто се овај поступак понавља велики број пута у секунди, добија се веома реалистична симулација кретања.

Што је временски корак dt мањи, резултат симулације је прецизнији. Са друге стране, мањи кораци захтевају више прорачуна, па програм троши више времена на извршавање.

⚽ Шта ће радити наш програм?

У симулацији ће бити приказана једна лоптица која се креће као пројектил. На почетку има почетну брзину усмерену нагоре и удесно. Како време пролази, Земљина гравитација постепено смањује вертикалну брзину, па лоптица достиже највећу висину, а затим почиње да пада.

Када додирне тло, симулација почиње испочетка. На овај начин можемо непрекидно посматрати кретање и испитивати како промена почетне брзине или гравитације утиче на путању.

📄 Processing програм

Пре него што анализирамо сваки део програма, најбоље је да погледамо комплетан код. Не брините ако вам поједини делови још увек нису јасни — након кода следи детаљно објашњење сваке променљиве и сваке функције.

// Simulacija kosog hica primenom Eulerove metode.
//
// U ovom programu pratimo kretanje loptice kojoj je zadata
// početna brzina po x i y osi. Na lopticu deluje gravitacija,
// zbog čega se njena vertikalna brzina stalno smanjuje.

float x;      // x koordinata centra loptice
float y;      // y koordinata centra loptice
float r;      // poluprečnik loptice

float vx = 25;    // horizontalna brzina
float vy = 80;    // početna vertikalna brzina

float dt;         // vremenski korak simulacije
float g = 9.81;   // gravitaciono ubrzanje

float t = 0;      // proteklo vreme simulacije

void setup() {

  size(600, 600);

  stroke(0);
  fill(0, 0, 200);

  ellipseMode(CENTER);

  r = 10;

  x = r;
  y = r;
}

void draw() {

  background(200);

  dt = 0.02;

  translate(0, height);
  scale(1, -1);

  kretanje();

  ellipse(x, y, 2 * r, 2 * r);
}

void kretanje() {

  x = x + vx * dt;
  y = y + vy * dt;

  if (y < r) {
    restart();
  }

  vy = vy - g * dt;

  t = t + dt;
}

void restart() {

  x = r;
  y = r;

  vx = 25;
  vy = 80;

  t = 0;
}

🔍 Анализа програма

Иако програм није дугачак, он садржи све најважније елементе једне Processing анимације:

• декларацију променљивих,
• иницијализацију у функцији setup(),
• непрекидно исцртавање у функцији draw(),
• рачунање новог положаја,
• поновно покретање симулације.

Променљиве

На самом почетку програма налазе се променљиве које описују тренутно стање лоптице. Оне памте њен положај, брзину и остале величине које су неопходне за симулацију.

float x;
float y;
float r;

Променљиве x и y представљају координате центра лоптице, док променљива r представља њен полупречник.

float vx = 25;
float vy = 80;

Пошто се крећемо у две димензије, брзина има две компоненте:

• vx – хоризонтална брзина,
• vy – вертикална брзина.

У овом примеру хоризонтална брзина остаје константна, док се вертикална брзина непрекидно мења услед дејства гравитације.

float dt;
float g = 9.81;
float t = 0;

Променљива dt представља временски корак симулације, g је гравитационо убрзање, а t памти колико је времена протекло од почетка симулације.

Функција setup()

Функција setup() се извршава само једном — приликом покретања програма. Њен задатак је да припреми све што је потребно за каснију анимацију.

void setup() {

  size(600, 600);

  stroke(0);
  fill(0, 0, 200);

  ellipseMode(CENTER);

  r = 10;

  x = r;
  y = r;
}

Унутар функције најпре се одређује величина прозора, затим се подешава боја линије и попуне, након чега се дефинише да ће се елипса цртати из свог центра.

На крају се постављају почетне координате лоптице. Она се налази у доњем левом делу прозора и спремна је за почетак симулације.

У наставку ћемо детаљно објаснити функцију draw(), промену координатног система и начин на који се у сваком кадру израчунава нови положај лоптице.

Функција draw()

Функција draw() представља најважнији део сваког Processing програма који садржи анимацију. За разлику од функције setup(), која се извршава само једном, функција draw() се аутоматски позива више десетина пута у секунди. Сваки њен позив представља цртање једног новог кадра (енг. frame).

Управо због непрекидног понављања могуће је мењати положај објеката, њихову величину, боју или друга својства и тако добити утисак кретања.

void draw() {

  background(200);

  dt = 0.02;

  translate(0, height);
  scale(1, -1);

  kretanje();

  ellipse(x, y, 2 * r, 2 * r);
}

Брисање претходног кадра

background(200);

Пре него што се нацрта нови кадар, потребно је обрисати претходни. То се постиже функцијом background().

Да не позовемо ову функцију, сваки нови положај лоптице остао би на екрану, па би уместо анимације добили траг који се непрестано продужава.

Временски корак

dt = 0.02;

Променљива dt представља мали временски интервал. За сваки пролаз кроз функцију draw() програм претпоставља да је протекло још 0.02 секунде.

На основу тог временског корака рачунају се нови положај и нова брзина лоптице.

Промена координатног система

Пре цртања лоптице програм мења координатни систем.

translate(0, height);
scale(1, -1);

Ове две функције су веома важне јер Processing подразумевано користи координатни систем код кога се координатни почетак налази у горњем левом углу прозора, а позитиван смер y-осе иде надоле.

У физици је ситуација другачија. Најчешће се координатни почетак поставља у доњи леви угао, а позитиван смер y-осе иде нагоре.

Да бисмо симулацију учинили природнијом, мењамо координатни систем тако да одговара оном који користимо на часовима физике и математике.

Функција translate()

translate(0, height);

Функција translate() помера координатни почетак. У нашем примеру координатни почетак се са горњег левог угла премешта у доњи леви угао прозора.

Функција scale()

scale(1, -1);

Након померања координатног почетка потребно је обрнути смер y-осе. То се постиже функцијом scale(1,-1).

Први параметар оставља x-осу непромењеном, док други параметар окреће y-осу за 180 степени.

Функција kretanje()

Сви прорачуни који се односе на кретање лоптице издвојени су у посебну функцију. То програм чини прегледнијим и лакшим за разумевање.

void kretanje() {

  x = x + vx * dt;
  y = y + vy * dt;

  if (y < r) {
    restart();
  }

  vy = vy - g * dt;

  t = t + dt;
}

Израчунавање новог положаја

x = x + vx * dt;
y = y + vy * dt;

Ове две наредбе одређују нови положај лоптице. Уместо да се користе готове физичке формуле за коси хитац, положај се ажурира корак по корак. Управо то је суштина Eulerове методе.

Нови положај добија се додавањем пређеног пута током временског интервала dt.

Провера да ли је лоптица додирнула тло

if (y < r) {
    restart();
}

Када координата центра лоптице постане мања од њеног полупречника, то значи да је додирнула тло. У том тренутку позива се функција restart() која покреће нову симулацију.

Утицај гравитације

vy = vy - g * dt;

Гравитација непрекидно делује надоле и зато се вертикална брзина сваког тренутка смањује.

Док се лоптица пење, вертикална брзина је позитивна али постаје све мања. На највећој висини она постаје једнака нули, након чега постаје негативна и лоптица почиње да пада.

Протекло време

t = t + dt;

Променљива t памти колико је времена прошло од почетка симулације. У овом примеру се не користи за цртање, али ће бити веома корисна у сложенијим симулацијама.

Функција restart()

Након што лоптица падне на тло, потребно је поново поставити све почетне вредности како би симулација могла да почне испочетка.

void restart() {

  x = r;
  y = r;

  vx = 25;
  vy = 80;

  t = 0;
}

Функција restart() враћа лоптицу на почетни положај, поново поставља почетне брзине и ресетује време симулације.

📈 Како функционише цела симулација?

Сада можемо сагледати цео процес рада програма:

У следећем делу лекције видећемо како можемо да мењамо програм, испробавамо различите параметре, као и шта треба избегавати приликом израде Processing анимација.

🧪 Предлози за експериментисање

Једна од највећих предности Processing-а је што се резултат сваке измене у програму одмах види на екрану. Због тога је препоручљиво да након покретања програма испробате различите вредности променљивих и посматрате како се мења кретање лоптице.

Можете испробати и следеће идеје:

• повећајте или смањите полупречник лоптице;
• промените боју позадине;
• промените боју лоптице;
• нацртајте тло помоћу функције line();
• уместо аутоматског покретања нове симулације употребите функцију noLoop() и зауставите анимацију када лоптица падне.

⚠️ На шта треба обратити пажњу

Такође је важно да све променљиве које описују стање анимације буду декларисане као глобалне променљиве. У супротном, њихове вредности би се губиле након сваког извршавања функције.

📌 Шта смо научили?

У овој вежби упознали сте основе креирања анимација у Processing окружењу. Научили сте како функционишу функције setup() и draw(), како се мења координатни систем и како се једноставном Eulerовом методом може симулирати кретање тела.

Иако је пример релативно једноставан, исти принцип користи се у бројним програмима за симулације, образовним апликацијама, видео играма и научним пројектима. Управо зато је разумевање ових основа веома важно за даље учење Processing-а и програмирања уопште.

📚 Додатно учење

🎯 Задатак за самосталан рад

На основу приказаног програма покушајте да урадите следеће:

1. Промените почетну хоризонталну брзину (vx) и посматрајте како се мења домет лоптице.
2. Промените почетну вертикалну брзину (vy) и упоредите максималну висину коју лоптица достиже.
3. Нацртајте тло помоћу функције line().
4. Уместо аутоматског покретања нове симулације употребите функцију noLoop() како би се анимација зауставила након пада лоптице.
5. Додајте траг кретања лоптице.
6. Покушајте да корисник помоћу тастатуре мења почетну брзину пре покретања симулације.

Ови задаци представљају добру основу за даље учење Processing-а и развој сопствених интерактивних симулација и игара.