Documentație Processing

Ce este Processing?

ProcessingJS( sau P5JS) este o bibliotecă Javascript ce permite desenarea programată (prin intermediul unor funcții și instrucțiuni) pe o pânză de desenare.

ProcessingJS a fost gândit să fie ușor de folosit, mai ales pentru începători, astfel că este un mediu prin care oricine poate învăța programare. Cu Processing se pot desena pe pânză diverse figuri (cercuri, elipse, dreptunghiuri, etc), se poate scrie text și, prin desenarea succesivă a pânzei se pot obține animații.

Documentație completă (eng.)

Ce este o pânză?

Pânza de desenare (HTML Canvas) este un marcaj nou în HTML5. Practic, o pânză de desenare este un dreptunghi cu dimensiuni cunoscute (stabilite la definirea pânzei), alcătuit din pixeli, fiecare pixel putând fi colorat independent, prin intermediul coordonatelor sale.

Coordonatele sunt exprimate printr-un sistem de coordonate în care originea (punctul de coordonate (0,0)) se află în colțul stânga-sus al pânzei, abscisa (coordonata x) se consideră pe orizontală (pe lățimea pânzei, width) iar ordonata (coordonata Y) se consideră pe verticală (pe înălțimea pânzei, height).

Acest script de ajută să înțelegi coordonatele Processing.

Structura unui script

Un script Processing constă din câteva funcții, dintre care două sunt obligatorii – vezi mai jos; ele vor fi apelate de către mediul de programare.

function setup(){
    createCanvas(400, 400);
}

function draw(){

}

Funcția setup() se apelează o singură dată, la început, iar funcția draw() se va executa în mod repetat, cu o frecvență care poate fi stabilită de noi. În setup() vom face inițializări, în draw() vom scrie instrucțiunile pentru desenare.

În setup():

• se stabilesc dimensiunile pânzei de desenare – se apelează funcția createCanvas(W,H), stabilind lățimea W (width) și înălțimea H (height). În exemplul de mai sus ambele dimensiuni erau egale cu 400.
• se poate stabili frecvența cu care se apelează draw(), prin intermediul funcției frameRate(N) , unde N este frecvență dorită (număr de apeluri pe secundă)
• pentru un desen static se apelează funcția noLoop(). Funcția draw() va fi apelată o singură dată!!

Funcția draw():

• conține instrucțiunile pentru desenare
• se apelează în mod repetat, cu o anumită frecvență. Implicit, aceasta este de 60 de apeluri pe secundă, dar poate fi modificată cu ajutorul funcției frameRate()
• apelurile funcției draw() pot fi oprite cu ajutorul funcției noLoop() și pot fi reluate cu funcția loop()

Forme de bază

• ellipse(x, y, w, h); – desenează o elipsă
• rect(x, y, w, h); – desenează un dreptunghi
• point(x, y); – desenează un punct
• line(x1,y1, x2, y2); – desenează un segment
• triangle(x1, y1, x2, y2, x3, y3); – desenează un triunghi
• quad(x1, y1, x2, y2, x3, y3, x4, y4); – desenează un patrulater
• arc(x, y, w, h, start, stop, mod) – desenează un arc de elipsă
• bezier(x1, y1, x2, y2, x3, y3, x4, y4); – desenează o curbă Bezier

Culori

• background(Culoare); – stabilește culoarea pânzei, ștergând conținutul
• fill(Culoare); – stabilește culoarea pentru umplere
• stroke(Culoare); – stabilește culoare pentru linii
• strokeWeight(grosime); – stabilește grosimea liniilor
• noFill(); – inhibă umplerea formelor
• noStroke(); – inhibă desenarea liniilor pentru conturul formelor

Forme avansate

• beginShape(); vertex(); endShape(); – desenează o formă oarecare
• curveVertex(); – desenează o formă cu laturi rotunjite
• bezierVertex(); – desenează o formă în care latura este curbă Bezier

Afișarea textului

• text(); – afișează un text pe pânză
• textFont(); – schimbă fontul pentru text
• textSize(); – schimbă mărimea textului
• textAlign(); – schimbă alinierea textului
• textStyle(); – schimbă stilul textului
• textWidth(); – determină lățimea textului