Python → Processing → Prvi sketch
Prvi sketch — crtanje i koordinatni sistem
Python Processing početna: Povratak na hub | Sledeća lekcija: Osnovni oblici i boje
Šta je sketch?
U Processing okruženju svaki program naziva se sketch. To je mali grafički program koji crta oblike u posebnom prozoru.
Sketch obično ima dve glavne funkcije:
setup()— izvršava se jednom na početkudraw()— izvršava se više puta u sekundi
Na taj način možemo praviti animacije i interaktivne grafike.
U Processing-u se ekran stalno ponovo iscrtava. Funkcija
draw() se obično izvršava oko 60 puta u sekundi.
To znači da možemo menjati pozicije objekata i praviti animacije.
Ako još nisi instalirao Processing sa Python Mode dodatkom, pogledaj lekciju:
Delovi Processing okruženja
Kada otvorite Processing IDE, videćete tri osnovna dela:
- Run dugme (▶) — pokreće program
- Editor — ovde pišete kod
- Console — prikazuje poruke i greške
Ako program ima grešku, Processing će u Console prozoru prikazati objašnjenje.
Tip: Pre nego što napišete prvi sketch, proverite da li je izabran Python Mode.
Minimalni Processing program
# setup() se izvršava jednom na početku programa
def setup():
# veličina prozora (širina, visina)
size(600, 400)
# draw() se izvršava stalno u petlji
def draw():
# boja pozadine (svetlo siva)
background(220)
Promeni veličinu prozora.
size(800, 500)
- 400 × 400
- 1000 × 600
Program bez draw()
Ako ne želimo animaciju, možemo koristiti samo setup().
def setup():
size(600, 400)
# pozadina se nacrta samo jednom
background(220)
Program će se nacrtati samo jednom bez ponovnog osvežavanja.
Koordinatni sistem u Processing-u
Processing koristi koordinatni sistem zasnovan na pikselima.
- (0,0) — gornji levi ugao
- x osa ide ulevo → udesno
- y osa ide odozgo → nadole
To je drugačije od matematičkog koordinatnog sistema gde je početak u centru.
Na primer u prozoru 600 × 400 tačka centra je približno:
- (300, 200)
Odakle dolaze width, height i mouseX?
Možda se pitaš kako znamo gde je centar ekrana — i zašto možemo da koristimo stvari kao što su width, height ili mouseX, a da ih nismo definisali.
To je zato što Processing već ima ugrađene (gotove) promenljive i funkcije koje su ti odmah dostupne.
- width — širina prozora
- height — visina prozora
- mouseX, mouseY — trenutna pozicija miša
Možeš ih zamisliti kao informacije koje program već zna i stalno ih ažurira.
Na primer, centar ekrana možeš dobiti ovako:
ellipse(width/2, height/2, 100, 100)
Pokušaj da ispišeš ove vrednosti:
print(width)
print(height)
Važno: ovo nisu promenljive koje mi pravimo u Pythonu — već dolaze iz Processing okruženja.
Ako želiš da razumeš kako se prave promenljive u Pythonu, pogledaj: Uvod u Python – promenljive
Kako da sam istražuješ?
Ne moraš sve da pamtiš — programeri često gledaju dokumentaciju.
Zvanična Processing referenca:
https://processing.org/reference/
Tamo možeš pronaći:
- kako radi svaka funkcija (npr. ellipse, rect, line)
- koje parametre prima
- dodatne primere
Probaj sam: ukucaj “processing ellipse” ili “processing mouseX” u Google i vidi šta dobijaš.
U Processing okruženju možeš brzo otvoriti dokumentaciju:
- Desni klik na funkciju (npr. ellipse)
- Izaberi Find in Reference
Processing će otvoriti odgovarajuću stranicu dokumentacije.
Promeni koordinate kruga i posmatraj kako se pomera po ekranu.
ellipse(100, 100, 100, 100)ellipse(500, 300, 100, 100)
- pomeri krug u gornji levi ugao
- pomeri krug u donji desni ugao
- postavi krug tačno u centar ekrana
Crtanje kruga
def setup():
size(600, 400)
def draw():
background(240)
# ellipse(x, y, širina, visina)
# x i y predstavljaju centar kruga
ellipse(300, 200, 100, 100)
Ako su širina i visina iste — dobijamo krug.
Crtanje pravougaonika
def setup():
size(600, 400)
def draw():
background(240)
# rect(x, y, širina, visina)
# (x,y) je gornji levi ugao
rect(250, 150, 100, 80)
Crtanje linije
def setup():
size(600, 400)
def draw():
background(240)
# line(x1, y1, x2, y2)
line(0, 0, 600, 400)
Linija se crta između dve tačke.
Kombinovanje više oblika
def setup():
size(600, 400)
def draw():
background(240)
# glava
ellipse(300,120,80,80)
# telo
rect(260,200,80,80)
# linija zemlje
line(0,300,600,300)
Processing crta oblike redom — od vrha prema dnu koda.
Vizuelni prikaz koordinata (grid)
Sledeći program crta mrežu koja pomaže da razumemo koordinatni sistem.
def setup():
size(600,400)
def draw():
background(255)
# vertikalne linije
for x in range(0,600,50):
line(x,0,x,400)
# horizontalne linije
for y in range(0,400,50):
line(0,y,600,y)
Ova mreža pomaže da lakše vidimo gde se nalaze koordinate.
Pozicija miša
Processing automatski prati poziciju miša.
def setup():
size(600,400)
def draw():
background(240)
# krug prati poziciju miša
ellipse(mouseX, mouseY, 50, 50)
Krug će se pomerati zajedno sa mišem.
Mini zadatak
Crtanje koordinatnog sistema pomoću funkcije
Umesto da stalno ponavljamo isti kod, možemo napraviti svoju funkciju.
Na primer, napravićemo funkciju koja crta X osu koordinatnog sistema.
def draw_axis():
# promena boje linije (crvena)
stroke(255, 0, 0)
# X osa (horizontalna linija)
line(0, height/2, width, height/2)
# vraćamo boju na crnu
stroke(0)
Sada ovu funkciju možemo pozvati u draw():
def setup():
size(600, 400)
def draw():
background(240)
draw_axis()
# krug u centru
ellipse(width/2, height/2, 100, 100)
Kada promenimo boju pomoću
stroke(), ta boja ostaje aktivna.
Ako ne vratimo boju na crnu, svi naredni oblici (npr. krug) biće nacrtani tom novom bojom.
Zato posle crtanja ose vraćamo boju:
stroke(0)Zašto koristimo funkcije?
- da ne ponavljamo isti kod
- da program bude pregledniji
- da lakše dodajemo nove delove
Ovo je isti koncept funkcija koji postoji u Pythonu.
Ako želiš da ponoviš funkcije u Pythonu, pogledaj: Python funkcije
Dopuni funkciju tako da nacrta i Y osu (vertikalnu liniju). Pomoć:
- linija ide od vrha do dna ekrana
- x koordinata treba da bude width/2