Python → Processing → Osnovni oblici, boje i slike

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

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.

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!

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)

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)

def setup():
    img = loadImage("slika.png")

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)

Promena veličine slike

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

Ovde definišemo i širinu i visinu slike.

img.width
img.height

Važno: Globalna promenljiva za sliku

def setup():
    img = loadImage("slika.png")

img = None

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

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

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)

Mini projekat: semafor

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

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

Povezane lekcije

• Prvi sketch
• Animacija
• Interakcija