Introdução a Processing.js

Processing.js é um framework Javascript para desenho e animação mediante o elemento Canvas do HTML5.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 12/6/12
Valorize este artigo:
Tal como vimos no Manual de Canvas do HTML5, Javascript proporciona uma serie de funções e métodos para realizar todo o tipo de desenhos em containers especiais chamados Canvas, que foram incorporados na nova versão da linguagem HTML. Pois bem, Processing usa como base essa infraestrutura para ir um pouco mais além. Em resumo, poderíamos dizer que Processing é um projeto orientado a oferecer aos programadores algumas bibliotecas de alto nível para realizar desenho e animação na web, através do elemento Canvas.

Dentro do elemento Canvas podemos fazer desenhos por meio de diversos métodos, a maioria dos quais são bastante rudimentares, como desenhar linhas, retângulos, polígonos, preencher com cor etc. Todos os métodos disponíveis em Javascript para desenho no canvas são de bastante baixo nível, ou melhor, permitem fazer as coisas mais básicas. Por isso, se quisermos fazer desenhos mais complexos, temos que programar bastantes linhas de código, que permitam desenhar aquelas coisas que não estariam incluídas entre as funções básicas de desenho no Canvas.

Processing.js incide justamente no suporte de funções mais complexas de desenho e animação, ou seja, oferece uma linguagem de alto nível para realizar coisas mais complexas com o elemento Canvas. Por meio de Processing.js, os usuários poderão realizar desenhos mais complexos sem necessidade de ter que escrever muito código, mas sim invocando as funções de uma biblioteca. Do mesmo modo, dado que o elemento Canvas não tem suporte diretamente para a animação, Processing.js oferece uma interface mediante a qual se pode produzir movimento dos desenhos e inclusive interatividade e tudo isso com pouquinhas linhas de código.

De onde vem Processing.js

Processing (sin el ".js") é uma linguagem para realizar trabalho gráfico, tanto em 2D como em 3D. Trata-se de uma linguagem de código aberto com o qual os programadores podem criar imagens, animação e interação por meio de uma série de funções de alto nível que permitem fazer grande variedade de desenhos, aos que se podem atribuir, inclusive, movimentos e responder às ações do usuário.

Dado o seu caráter aberto, à volta de Processing também existe uma comunidade que continuamente melhora a linguagem e o estende com novas bibliotecas, dando suporte a elementos como o áudio, redes ou visualização de dados. Com isso, Processing é uma ferramenta que serve para muitos âmbitos das artes visuais.

Segundo seus criadores, Processing coloca à disposição de seus usuários muitas características que só estariam disponíveis por meio de programas caros, o que o faz especialmente interessante para usos didáticos em campos como a matemática, desenho gráfico e artístico.

Por sua parte, Processing.js é um projeto irmão desta linguagem, mas enfocado para a web. Mediante Processing.js se podem fazer uso das características avançadas de Processing em páginas web, por meio de standards abertos que o HTML5 proporciona, como o elemento Canvas. A partir de Processing temos uma linguagem que permite criar gráficos interativos, tanto em 2D como em 3D, animações por meio de simples funções e interatividade com manejo de eventos de teclado ou mouse.

Como dissemos, Processing.js é uma linguagem de programação de alto nível, com suas próprias instruções e comandos, no entanto, se pode utilizar sem que o navegador necessite ter instalado qualquer plug-in, como poderia ser Flash ou Java. Para isso, Processing.js dispõe de um intérprete que converte as instruções dessa linguagem em Javascript, compatível com todos os navegadores que também suportam o elemento canvas e outras características do HTML5.

Podemos encontrar mais informação na web:

Algumas coisas que podemos fazer com Processing.js

Como se terá entendido pela leitura das linhas anteriores, as possibilidades de Processing.js são realmente grandes. Com um pouco de trabalho e algo de imaginação, se podem fazer coisas realmente espetaculares.

Entre os métodos que Processing.js nos oferece encontraremos diversos para trabalhar com estruturas de dados, fontes tipográficas, formas 2D como arcos, elipses, triângulos, etc., formas 3D como podem ser esferas ou caixas, trabalho com cor, imagens, interação por meio do mouse ou teclado, acesso a arquivos etc.

Nota: se quisermos dar uma rápida olhada em todas as funções que podemos utilizar no Processing.js recomendamos acessar a página da referência da linguagem.

Talvez essa enumeração de âmbitos de trabalho não nos diga muito, mas seguro que teremos uma ideia mais exata das possibilidades se acessarmos a página de demos de Processing.js.

Conclusão

À medida que fomos escrevendo o Manual de Canvas del HTML5, publicado em CriarWeb.com, recebemos alguns comentários e correios reclamando da dificuldade para trabalhar com Canvas (por ter que fazer muitas coisas quase do zero). As pessoas que se posicionam a favor de ferramentas proprietárias, como Flash, tinham nisso um argumento para criticar esse avanço do HTML5. Pois bem, com Processing.js podemos afirmar que essa visão negativa passou à historia.

Na linguagem Processing.js é uma excelente ferramenta para os que querem trabalhar com Canvas, assim como a animação e interatividade dos componentes desenhados em tal elemento, porém sem ter que partir do zero, já que nos oferece um excelente suporte a partir do qual poderemos rapidamente realizar muitas coisas bastante avançadas.

Está claro que para o correto uso de Processing.js faz falta certa base de Javascript e alguma habilidade na programação, mas é inegável que as pessoas que desejem realizar componentes e dinâmicos avançados e software para páginas web, têm um aliado em Processing.js. Com este framework para o desenho no elemento Canvas temos disponíveis, ao desenvolver para a web, os mesmos recursos com os que contariam os programadores de aplicações de área de trabalho. Tudo isso com uma plataforma livre, gratuita e baseada nos standards abertos do W3C.

Ao longo dos próximos artigos ofereceremos um guia rápido para dar os primeiros passos com Processing.js.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato