Animacija i promenljive — pomeranje objekta


Lekcija 5 od 14

Šta je zapravo animacija?


Animacija u Processing-u je brzo menjanje slike više puta u sekundi.

Funkcija draw() se stalno ponavlja i svaki put crta novu sliku.

Ako u svakom ponavljanju malo promenimo poziciju objekta — dobijamo kretanje.

Važno:

Animacija = crtanje → pomeranje → crtanje → pomeranje → (više puta u sekundi)

Zašto su promenljive važne?


Promenljive čuvaju stanje objekta — gde se objekat nalazi u svakom trenutku.

  • x — horizontalna pozicija
  • y — vertikalna pozicija
  • dx — brzina po x osi
  • dy — brzina po y osi
Razmišljaj o promenljivama kao o pamćenju između frame-ova.

Jednostavna animacija lopte



x = 50
y = 200
dx = 3

def setup():
    size(600, 400)
    frameRate(60)

def draw():
    global x, dx

    background(220)
    
    fill(255, 0, 0)
    ellipse(x, y, 50, 50)
    
    x += dx
    
    if x > width - 25 or x < 25:
        dx = -dx
Rezultat
Crvena lopta se kreće levo-desno i odbija od ivica.

Kako ovo radi?


  1. ekran se briše (background())
  2. objekat se crta
  3. pozicija se menja
Processing ne pomera objekat — već ga svaki put ponovo crta.

Animacija slike (sprite)


Sada umesto oblika koristimo sliku.


img = None

x = 0
y = 150
dx = 3

def setup():
    global img
    size(600, 400)
    img = loadImage("lik.png")

def draw():
    global x, dx

    background(220)

    image(img, x, y)

    x += dx

    if x > width - img.width or x < 0:
        dx = -dx
Rezultat
Slika se kreće levo-desno i odbija od ivica.
Zašto global img?

img mora biti dostupan u draw() funkciji. Ako ga definišeš samo u setup(), neće raditi.
Česta greška:

Ovo NE radi:

def setup():
    img = loadImage("lik.png")
Zato što img nije globalna promenljiva.

Dimenzije slike:

Koristi:

img.width
img.height
da dobiješ tačne dimenzije.

Eksperiment:

  • Promeni brzinu (dx)
  • Promeni početnu poziciju
  • Koristi svoju sliku

Mini izazov

Dodaj vertikalno kretanje:
  • napravi dy
  • dodaj y += dy
  • dodaj odbijanje po y osi

Zašto koristimo global?


Promenljive definisane van funkcije moraju biti označene kao global da bi se menjale u draw().


global x, dx
Bez global, promena vrednosti neće raditi kako očekuješ.

Brzina animacije — frameRate()


frameRate(60) znači 60 frame-ova u sekundi.

Eksperiment:

  • frameRate(10) — sporo
  • frameRate(120) — brzo

Mini projekat: animirana scena


  • slika lika
  • pozadina
  • dodatni objekti
Kombinuj slike i oblike za bolje projekte.

Sledeća lekcija


Interakcija sa mišem →


Povezane teme