Python → Processing → Prvi sketch

Prvi sketch — crtanje i koordinatni sistem

Lekcija 3 od 14

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četku
draw() — izvršava se više puta u sekundi

Na taj način možemo praviti animacije i interaktivne grafike.

Napomena:

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:

Instalacija Processing 4 i Python Mode

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)

Eksperiment:

Promeni veličinu prozora.


size(800, 500)

Pokreni program ponovo i posmatraj promenu. Pokušaj i sledeće vrednosti:

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)

Mini eksperiment:

Pokušaj da ispišeš ove vrednosti:


print(width)
print(height)

Pokreni program i pogledaj Console.

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.

Pokušaj sam:

Promeni koordinate kruga i posmatraj kako se pomera po ekranu.

ellipse(100, 100, 100, 100)
ellipse(500, 300, 100, 100)

Pokušaj i sledeće:

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

Mini izazov

Nacrtaj jednostavnu scenu:

Sunce — krug
Kuća — pravougaonik
Krov — trougao
Zemlja — linija
Vrata — mali pravougaonik

Pokušaj da rasporediš objekte koristeći koordinate.

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)

Važno:

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

Zadatak za vežbu:

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

Sledeća lekcija

U sledećoj lekciji naučićeš:

kako da menjaš boje
kako da koristiš fill() i stroke()
kako da praviš lepše grafičke scene

Osnovni oblici i boje →

Povezane teme

⬅ Prethodna lekcija: Instalacija Processing 4 i Python Mode

Sledeća lekcija: Osnovni oblici i boje ➡

↩ Povratak na Python Processing hub