Processing.js je Javascript implementacija Processing programskog jezika pomoću Canvas elementa u novom HTMLu.
Nejasno, jelda? Sve pet, nije ni meni bilo prvi put. Ali bude.
Ajmo redom.
• • • • •
PROCESSING
Processing je programski jezik koji nije namijenjen programerima nego studentima, dizajnerima, umjetnicima, svima koji žele naučiti osnove programiranja na lijep vizualan način.
Sadrži skup funkcija za crtanje i animiranje elemenata u 2D prostoru s kojima je rad vrlo jednostavan.
Plus još neke fancy stvari poput učitavanja eksternih slika i upravljanje pomoću miša.
Sama programsko-slikarska okolina može se besplatno skinuti i koristiti i nalazi se ovdje (velika je 40ak megabajta).
Processing je napravljen u Javi i za crtanje u browseru koristi Java Applete koji su davno izgubili na težini. (Ali priča se o nekakvom comebacku.)
CANVAS
<CANVAS> je novi element u HTMLu verzija 5 koji je implementiran u najnovijim i beta verzijama nekih browsera (Firefox, Safari, Opera).
Nije planiran u (naravno) Internet Exploreru ali postoje neka rješenja koja to ispravljaju.
Canvas je površina iks puta ipsilon po kojoj je moguće crtati pomoću Javascripta.
(Krenula je kao finta u Appleovom Dashboardu, ali je eto došla i na web.)
Funkcijama koje još nisu sasvim definirane. (Da li će to biti još jedno područje koje će različiti browseri raditi "malo drugačije"?)
PROCESSING.JS
Ime koje je aktualno ovih dana u Javascript i inim programerskim krugovima je John Reisig.
Inače Javascript propovjednik Mozilla ekipe, glavni JQuery programer, ma ono ima gro projekata iza sebe.
On je dakle gotovo cijeli Processing prebacio u Javascript (koji je btw kompresiran velik ispod 10 kilobajta.)
(UPDATE: Pojednostavljeno: nekoliko kila JSa zamjenjuje potrebu za Javom i izradu appleta!)
Nemojte gledati source jer majstor koristi takve regularne izraze da boli glava i bolje ne pokušat shvatit što oni rade.
PROGRAMIRANJE
Osnova Processinga su dvije funkcije, setup() i draw().
setup() postavlja inicijalne stvari, a draw() je loop koji iscrtava i animira elemente.
Primitivni kod za crtanje išao bi ovako:
void setup()
{
size(300, 300); // veličina
background(0); // boja pozadine
stroke(255); // boja olovke
}
void draw()
{
// pmouseX, pmouseY je "stara" pozicija strelice
if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);
}
Ovaj sitni kod možete isprobati ovdje (i skinuti ovdje).
Na autorovim stranicama možete pogledati masu demoa među kojima ima nekoliko vrlo šarenih i nabrijanih.
UPOZORENJE: Imajte na umu da je to Javascript koji ždere procesor pa vam može zavrtjeti ventilator na kompu do jaja!
Dosta ih radi na starijim i ne-beta verzijama browsera (koji podržavaju <CANVAS>, ali svi rade na najnovijoj beti Firefoxa 3.
• • • • •
Ubrzo nakon objave netko je napravio Obsessing verziju alpha, online okolina u kojoj možete pisati i na licu mjesta pokretati Processing.js skripte.
Kad odrastem želim biti Javascript programer.
Programiranje
Komentara: 5
ni objasnil:
RSS feed