Изоловане трансформације појединих објеката

Употреба команди pushMatrix() i popMatrix() у 3D координатном систему.

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

Пример 1 – Основна симулација кретања Земље око Сунца

У првом примеру користићемо само основне геометријске објекте које Processing већ поседује. Сунце и Земља биће представљени сферама различитих димензија и боја, док ће се њихово кретање остварити комбинацијом функција rotateZ() и translate(). На тај начин видећемо како се једноставним трансформацијама може симулирати орбитално кретање планета.

Основна 3D симулација

Сунце представља извор светлости, док Земља истовремено ротира око своје осе и обилази Сунце по кружној орбити.

📝 Пример 1 – Анализа програма

У овом примеру направићемо једноставну тродимензионалну симулацију кретања Земље око Сунца. Иако је програм релативно кратак, у њему се налазе скоро сви најважнији елементи који се користе приликом израде сложенијих 3D сцена.

Пре него што почнете да читате програм, важно је да схватите да се целокупна анимација заснива на три основне идеје:

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

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

💻 Програм

//=====================================================
// Симулација кретања Земље око Сунца
// Основна 3D симулација
//=====================================================

//------------------------------------
// Полупречници Сунца, Земље и орбите
//------------------------------------

float poluprecnikSunca = 75;
float poluprecnikZemlje = 25;
float poluprecnikOrbite = 200;

//------------------------------------
// Координате камере
//------------------------------------

float kameraX = -250;
float kameraY = -180;
float kameraZ = -500;

//------------------------------------
// Углови ротације
//------------------------------------

// Угао обиласка Земље око Сунца.
float ugaoObilaska = 0;

// Угао ротације Земље око своје осе.
float ugaoRotacije = 0;

//------------------------------------
// Брзине
//------------------------------------

float brzinaRotacije = 0.10;
float brzinaObilaska = 0.005;

void setup(){

    //------------------------------------------------
    // Покретање Processing-а у 3D режиму рада
    //------------------------------------------------

    size(800,600,P3D);

}

void draw(){

    //------------------------------------------------
    // Позадина симулира свемир
    //------------------------------------------------

    background(20);

    //------------------------------------------------
    // Померање координатног почетка
    // у центар прозора
    //------------------------------------------------

    translate(width/2,height/2);

    //------------------------------------------------
    // Подешавање камере
    //------------------------------------------------

    camera(

        kameraX,
        kameraY,
        kameraZ,

        0,
        0,
        0,

        0,
        0,
        1

    );

    //------------------------------------------------
    // Амбијентално светло
    //------------------------------------------------

    ambientLight(40,40,40);

    //------------------------------------------------
    // Сунце представља извор светлости
    //------------------------------------------------

    pointLight(

        255,
        255,
        220,

        0,
        0,
        0

    );

    //------------------------------------------------
    // Цртање орбите
    //------------------------------------------------

    stroke(180);

    noFill();

    ellipse(

        0,
        0,

        2*poluprecnikOrbite,
        2*poluprecnikOrbite

    );

    //------------------------------------------------
    // Цртање Сунца
    //------------------------------------------------

    pushMatrix();

    noStroke();

    fill(255,220,80);

    // Сунце само емитује светлост.

    emissive(255,220,80);

    sphere(poluprecnikSunca);

    popMatrix();

    //------------------------------------------------
    // Искључивање емисије
    //------------------------------------------------

    emissive(0);

    //------------------------------------------------
    // Цртање Земље
    //------------------------------------------------

    pushMatrix();

    // Ротација око Сунца.

    rotateZ(ugaoObilaska);

    // Померање до орбите.

    translate(poluprecnikOrbite,0,0);

    // Ротација Земље.

    rotateZ(ugaoRotacije);

    // Цртање осе ротације.

    stroke(0,220,255);

    line(

        0,
        0,
        -poluprecnikZemlje-20,

        0,
        0,
        poluprecnikZemlje+20

    );

    noStroke();

    fill(30,30,255);

    sphere(poluprecnikZemlje);

    popMatrix();

    //------------------------------------------------
    // Ажурирање углова
    //------------------------------------------------

    ugaoObilaska += brzinaObilaska;

    ugaoRotacije += brzinaRotacije;

}

📖 Објашњење програма

1. Дефинисање глобалних променљивих

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

2. Постављање камере

За разлику од дводимензионалне графике, у 3D простору неопходно је дефинисати положај посматрача. То се ради функцијом camera().

У овом примеру камера није постављена директно испред сцене већ је мало померена улево и нагоре. Захваљујући томе добијамо природнији поглед на Сунце и Земљу.

🎥 Положај камере

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

3. Осветљење сцене

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

• ambientLight() осветљава целу сцену слабим светлом.
• pointLight() представља Сунце као тачкасти извор светлости.

Комбинација ова два извора омогућава да се облици сфера јасно виде без обзира на њихов положај.

4. Цртање орбите

Орбита није посебан 3D објекат већ кружница исцртана функцијом ellipse(). Она представља путању по којој се Земља креће око Сунца.

Пошто се координатни систем налази у центру сцене, центар кружнице поклапа се са положајем Сунца.

5. Цртање Сунца

Сунце се исцртава функцијом sphere(). Посебно је важно што је пре исцртавања позвана функција emissive(), која омогућава да Сунце изгледа као да само емитује светлост.

Иако ова функција не производи праву светлост, визуелни ефекат је много убедљивији него када би се користила само функција fill().

6. Кретање Земље

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

1. ротација координатног система око Сунца,
2. померање Земље до орбите.

rotateZ() → translate() → rotateZ() → sphere()

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

7. Анимација

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

ugaoObilaska += brzinaObilaska;

ugaoRotacije += brzinaRotacije;

Променом вредности променљивих brzinaRotacije и brzinaObilaska лако можемо симулирати различите брзине ротације и обиласка планета.

Пример 2 – Реалистичнија симулација употребом текстура и PShape објеката

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

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

// 3D objekti (sfere) koji predstavljaju Sunce i Zemlju.
PShape sunce;
PShape zemlja;

// Teksture koje će biti nalepljene na sfere.
PImage teksturaZemlje;
PImage teksturaSunca;

// Slika svemira koja predstavlja pozadinu scene.
PImage pozadina;

// Poluprečnici Sunca i Zemlje.
static final float POLUPRECNIK_ZEMLJE = 25;
static final float POLUPRECNIK_SUNCA = 80;

// Dimenzije orbite.
static final float SIRINA_ORBITE = 600;
static final float VISINA_ORBITE = 600;

// Položaj kamere.
float kameraX = 0;
float kameraY = -150;
float kameraZ = 500;

// Uglovi rotacije.
float ugaoRotacijeZemlje = 0;
float ugaoObilaska = 0;

// Brzine rotacije.
float brzinaRotacijeZemlje = 0.03;
float brzinaObilaska = -0.005;

void setup(){

    // Uključivanje 3D renderera.
    size(1000,600,P3D);

    // Isključivanje iscrtavanja ivica objekata.
    noStroke();

    // Učitavanje slike svemira.
    pozadina = loadImage("svemir1.jpg");

    // Kreiranje sfera koje predstavljaju Sunce i Zemlju.
    sunce = createShape(SPHERE, POLUPRECNIK_SUNCA);
    zemlja = createShape(SPHERE, POLUPRECNIK_ZEMLJE);

    // Učitavanje tekstura.
    teksturaSunca = loadImage("sunce.jpg");
    teksturaZemlje = loadImage("zemlja.jpg");

    // Lepljenje tekstura na sfere.
    sunce.setTexture(teksturaSunca);
    zemlja.setTexture(teksturaZemlje);

}

void draw(){

    // Pozadina treba da pokrije ceo prozor.
    pozadina.resize(width,height);

    // Iscrtavanje pozadine.
    background(pozadina);

    // Pomeranje koordinatnog sistema u centar prozora.
    translate(width/2,height/2);

    // Postavljanje kamere.
    // Kamera je malo iznad scene i gleda ka koordinatnom početku.
    camera(
        kameraX,
        kameraY,
        kameraZ,

        0,0,0,

        0,0,1
    );

    // Usmereno svetlo koje osvetljava objekte.
    directionalLight(
        255,255,100,
        -1,0,-1
    );

    // ==========================
    // Crtanje Sunca
    // ==========================

    shape(sunce);

    // ==========================
    // Crtanje orbite
    // ==========================

    pushMatrix();

    stroke(255,255,150);
    noFill();

    // Orbita se postavlja u horizontalnu ravan.
    rotateX(HALF_PI);

    ellipse(
        0,
        0,
        SIRINA_ORBITE,
        VISINA_ORBITE
    );

    popMatrix();

    // ==========================
    // Kretanje Zemlje oko Sunca
    // ==========================

    // Rotira ceo koordinatni sistem oko Sunca.
    rotateY(ugaoObilaska);

    pushMatrix();

    // Pomeranje Zemlje na orbitu.
    translate(SIRINA_ORBITE/2,0);

    // Rotacija Zemlje oko sopstvene ose.
    rotateY(ugaoRotacijeZemlje);

    // Crtanje Zemlje.
    shape(zemlja);

    popMatrix();

    // Ažuriranje uglova za sledeći frejm.
    ugaoRotacijeZemlje += brzinaRotacijeZemlje;
    ugaoObilaska += brzinaObilaska;

}

void keyPressed(){

    // Približavanje kamere.
    if(keyCode==UP){
        kameraZ -= 5;
    }

    // Udaljavanje kamere.
    if(keyCode==DOWN){
        kameraZ += 5;
    }

    // Pomeranje kamere ulevo.
    if(keyCode==LEFT){
        kameraX -= 5;
    }

    // Pomeranje kamere udesno.
    if(keyCode==RIGHT){
        kameraX += 5;
    }

    // Pomeranje kamere nagore.
    if(key=='q'){
        kameraY -= 5;
    }

    // Pomeranje kamere nadole.
    if(key=='w'){
        kameraY += 5;
    }

}

PShape sunce;
PShape zemlja;

teksturaSunca = loadImage("sunce.jpg");

teksturaZemlje = loadImage("zemlja.jpg");

sunce.setTexture(teksturaSunca);

zemlja.setTexture(teksturaZemlje);

pozadina = loadImage("svemir1.jpg");

pozadina.resize(width,height);

background(pozadina);

directionalLight(

255,
255,
100,

-1,
0,
-1

);

shape(zemlja);

⚖ Поређење два примера

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

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

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

Најбољи начин за учење Processing-а јесте мењање програма и посматрање резултата. Испробајте следеће измене.

⚠ Најчешће грешке

📚 Шта можете даље направити?

Када савладате ова два примера, можете постепено проширивати симулацију и додавати нове елементе.

📝 Мини квиз

1. Који параметар укључује тродимензионални режим рада у Processing-у?
2. Која функција поставља положај камере?
3. Чему служи функција translate()?
4. Која функција ротира објекат око осе?
5. Која функција исцртава сферу?
6. Чему служи pushMatrix()?
7. Шта представља класа PShape?
8. Која функција поставља текстуру на објекат?
9. Која је разлика између pointLight() и directionalLight()?
10. Зашто се вредности углова повећавају у функцији draw()?

💻 Задаци за самосталан рад

Покушајте да самостално проширите програм решавањем следећих задатака.