Lion's Fart RSS Feed
home ‹‹

Processing.js

Utorak, 13. Svibnja 2008.
Processing 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.

Komentari

13.05.2008. 22:56 | 1
glup i gluplji

meni ništ ni bilo jasno dok mi Lion ni objasnil:

dakle, lik je u 10 kilobajta javaskripta
ugural api za crtanje
po novom <canvas> html objektu.

14.05.2008. 9:22 | 2

kaj veli kikipedija za canvas

http://en.wikipedia.org/wiki/Canvas_(HTML_element)

15.05.2008. 18:15 | 3
rope

Još samo da i browseri implementiraju canvas (HTML 5) kako treba... pa će biti neukusa na stranicama nezapamćenog od java appleta. :)

24.05.2008. 12:40 | 4
blues

Lion , popravi prvi link, imas jedan br tag integriran u njega :)

24.05.2008. 12:51 | 5

Desi se. Tnx.

Dodaj komentar

ime *

e-mail

www

Dozvoljeni tagovi su A, B, I, U i S. e-mail adresa se nigdje neće prikazati.

Control panel

Linkovi RSS feedDnevni linkovi

  1. 30 Interesting Half-Face Portrait Photography
    Pola lica.
  2. 16 of the Best SciFi Cartoons
    Naj SF crtići.
  3. A step to be ahead: start designing for mobile devices
    Uvod i showcase.
  4. The Family Prostitute
    Portraits of Women Brand-New to the Sex Trade. (slideshow)
  5. World's Largest Underwater Museum
    Najveći podvodni muzej na svijetu.
  6. 15 tips every computer geek should know to stay healthy
    Zdrav geek u zdravom tijelu.
  7. A virtual counter-revolution
    "The internet has been a great unifier of people, companies and online networks. Powerful forces are threatening to balkanise it." (The Economist)
  8. The right hand to every good villain. My favorite Bond henchmen
    Jaws, Donald Grant, Odd Job, Baron Samedi, Fiona Volpe. (007)
  9. 10 tips to follow to become a better web designer
    10 savjeta za web dizajnere.
  10. 26 Super Clean Websites
    "Čisti" sajtovi.
  11. The Truth About Infographics
    How the infographic-spam industry works? (infografika)
  12. The crap we put up with getting on and off an airplane
    "Ljepota" putovanja avionom. (The Oatmeal)
  13. Amazing pictures Kabul (1994.-2010.)
    Slike Kabula - danas i prije 16 godina.
  14. Collection of rare celebrity photos
    Rijetke slike poznatih faca.
  15. 15 Cancelled PlayStation 3 games that should have never been cancelled
    Igre koje su trebale izaći za PS3.
  16. 19 upcoming superhero movies you need to know about
    Dolazeći filmovi o superherojima.
  17. NASA Plans to Visit the Sun
    The project is called Solar Probe Plus. (Mashable)
  18. How many people are actually using Twitter?
    30%? (TNW)
  19. Samsung Galaxy Tab preview
    Samsungov Android tablet. (Engadget)
  20. 10 Unbelievable SMS Texting Stories
    Nevjerojatne SMS priče.