SVET PROGRAMIRANJA

Python → Processing → Osnovni oblici, boje i slike


Osnovni oblici, boje i rad sa slikama u Processing-u (Python Mode)

Lekcija 4 od 14

Podsećanje: crtanje oblika

U prethodnoj lekciji naučili smo kako da crtamo osnovne oblike:

  • ellipse()
  • rect()
  • line()

Sada ćemo naučiti kako da kontrolišemo njihove boje i stil, a zatim i kako da ubacimo slike.

Napomena:

Processing koristi RGB model boja.
  • R — crvena
  • G — zelena
  • B — plava
Svaka vrednost ide od 0 do 255.

Boja popunjavanja — fill()


def setup():
    size(600, 400)

def draw():
    background(255)
    fill(255, 0, 0)
    ellipse(300, 200, 120, 120)

Funkcija fill(r, g, b) određuje boju unutrašnjosti oblika.

Važno: boja ostaje aktivna


fill(255, 0, 0)
ellipse(150, 200, 100, 100)

ellipse(450, 200, 100, 100)  # i ovaj će biti crven!
Promeni boje i vidi rezultat:
  • fill(0, 255, 0)
  • fill(0, 0, 255)
  • fill(255, 255, 0)

Boja ivice — stroke()


def setup():
    size(600, 400)

def draw():
    background(255)
    stroke(0, 0, 255)
    fill(255, 200, 0)
    rect(250, 150, 120, 100)

stroke() određuje boju ivice.


Debljina linije — strokeWeight()


strokeWeight(5)
line(50, 50, 550, 350)

noStroke() i noFill()


noStroke()
fill(0, 200, 150)
ellipse(300, 200, 150, 150)


noFill()
stroke(0)
rect(200, 150, 200, 100)

Rad sa slikama — loadImage() i image()

U realnim projektima koristimo slike za likove, pozadine i objekte.

Ispravno učitavanje slike


img = None

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

def draw():
    background(220)
    image(img, 200, 150)
Važno:

Promenljiva img mora biti globalna. Ako je definišeš samo u setup(), neće raditi u draw().

Promena veličine slike


img = None

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

def draw():
    background(220)
    image(img, 200, 150)

Više slika


img1 = None
img2 = None

def setup():
    size(600, 400)
    
    global img1, img2
    img1 = loadImage("slika1.png")
    img2 = loadImage("slika2.png")

def draw():
    background(220)
    image(img1, 100, 150)
    image(img2, 350, 150)
Česta greška:

Ako napišeš: 

def setup():
    img = loadImage("slika.png")
slika se neće prikazati jer img nije global.

Gde staviti sliku?

Slika mora biti u data folderu.
  • Sketch → Add File
  • ili ručno u data folder

Eksperiment:

Probaj da:
  • pomeraš sliku pomoću mouseX
  • napraviš pozadinu
  • napraviš mini igru
Ubacivanje slika u Processing-u 4+. Dodavanje sa addFile, automatski ubacuje sliku u data folder
Slika 1: Ubacivanje slika u Processing-u 4+. Dodavanje sa addFile, automatski ubacuje sliku u data folder

Pozicioniranje slike

Funkcija image(img, x, y) određuje gde će slika biti prikazana na ekranu.

  • x — horizontalna pozicija (levo → desno)
  • y — vertikalna pozicija (gore → dole)
Koordinata (0, 0) je u gornjem levom uglu ekrana.

Promena veličine slike


image(img, 100, 100, 200, 150)

Ovde definišemo i širinu i visinu slike.

Napomena o dimenzijama:

  • slika može biti manja ili veća od prozora
  • ako je veća → deo slike neće biti vidljiv
  • ako je iste veličine kao prozor → koristi se kao pozadina

Možeš koristiti i originalne dimenzije slike: 

img.width
img.height
Česta greška:

Ako se slika ne prikazuje:
  • proveri ime fajla (velika/mala slova!)
  • proveri da li je u data folderu
  • proveri format (png, jpg)
  • proveri da li je img definisan globalno

Eksperiment:

  • Ubaci svoju sliku
  • Postavi je na sredinu ekrana
  • Promeni veličinu
  • Razvuci sliku preko celog ekrana (pozadina)

Važno: Globalna promenljiva za sliku

Ako napišeš: 

def setup():
    img = loadImage("slika.png")
slika se neće prikazati u draw() funkciji.

✅ Ispravno: 

img = None

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

def draw():
    background(220)
    image(img, 200, 150)

Zašto?
Zato što promenljiva mora biti dostupna u celoj aplikaciji (global scope).

Kako da sam istražuješ?

Programeri stalno koriste dokumentaciju.

Desni klik na funkciju → Find in Reference

Ili koristi zvaničnu dokumentaciju:
Processing Reference

  • istraži image()
  • istraži tint() (bojenje slike)
  • istraži resize()

Mini projekat: stilizovani objekti

Napravimo funkciju koja podešava stil: 


def set_style():
    fill(0, 150, 255)
    stroke(0)
    strokeWeight(3)

Zatim je koristimo: 


def setup():
    size(600, 400)

def draw():
    background(240)

    set_style()
    ellipse(300, 200, 120, 120)
Zašto ovo radimo?

  • kod je pregledniji
  • ne ponavljamo iste linije
  • lakše menjamo stil

Mini projekat: semafor

Izazov

Napravi semafor:
  • crveno svetlo
  • žuto svetlo
  • zeleno svetlo
Dodatno:
  • koristi noStroke()
  • postavi vertikalno
  • napravi funkciju za jedno svetlo

Mini projekat: slika kao lik


img = None

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

def draw():
    background(200)
    image(img, 250, 150)

Ovo je osnova za:

  • igre
  • animacije
  • interaktivne projekte
Mini izazov:

  • centriraj sliku
  • promeni veličinu
  • zameni slikom po izboru

Napredni izazov

Pomeri sliku pomoću promenljive: 

x = 200

def draw():
    global x
    background(220)
    image(img, x, 150)
    x += 1

Poređenje sa Java verzijom

Isti koncepti postoje i u Java verziji:

Processing sa Javom — osnove


Sledeća lekcija

U sledećoj lekciji učimo animaciju:

Animacija i draw() funkcija →


Povezane lekcije


SVET PROGRAMIRANJA