p5.js : Framework para design gráfico

PorMatheus Dalmolin

p5.js : Framework para design gráfico

Essa edição do PET Redação vamos ver um pouco sobre p5.js, uma biblioteca escrita em JavaScript que foi feita para aproximar web designers, artistas e, até mesmo, iniciantes a essa arte que chamamos de programação. Ela é uma extensão do projeto Processing, uma ferramenta escrita em Java com o mesmo propósito. Fora essas duas, o Processing ainda disponibiliza as versões em Python, Android e Raspberry Pi.

O diferencial dessa ferramenta é a facilidade na compreensão da lógica necessária para resolução de problemas. Os métodos implementados nela têm nomes intuitivos, o que facilita a compreensão do usuário que está começando a se relacionar com a ferramenta.

Como faço para usar o P5 na minha aplicação?

A única coisa que tu precisas fazer é referenciar a biblioteca no teu código HTML. Para isso, tu podes escolher em fazer o download da ferramenta aqui, ou usar essa referência:

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js

Que é o endereço de onde o framework está armazenado online.

Após inserir a tag <script> no código HTML, basta referenciar com o atributo src, desse jeito:

Lembrando que o que eu coloco como referência é o caminho onde o arquivo está no meu sistema. Ou usar a referência online da ferramenta:

Qualquer uma das duas opções tem o mesmo resultado, a única diferença é que estamos acessando a referência na nossa máquina local, no primeiro caso, e no outro caso, estamos acessando em um servidor onde o arquivo está armazenado.

Após referenciarmos a ferramenta na nossa aplicação, precisamos criar o arquivo onde vamos escrever o nosso código. Esse arquivo vai ser um script, e vamos ter que referenciar, assim como fizemos com o P5.js para integrá-lo a nossa aplicação.

Eu chamei o arquivo de “sketch.js”, o formato .js significa que é um arquivo JavaScript, e como já mencionei anteriormente, temos que referenciar ele no nosso código HTML. Vamos fazer da mesma forma que fizemos para a ferramenta, o resultado fica assim:

O nosso arquivo HTML já está configurado, agora é só abrir a documentação do p5.js e começarmos a explorar o framework.

Para dar um breve contexto, a ferramenta funciona com duas funções básicas, a setup() e a draw(). A função setup() é chamada na iniciação do programa e define as propriedades do ambiente como tamanho da tela, cor de fundo da tela e o carregamento prévio de imagens do programa. Já a função draw(), bem como o nome já diz, ela é usada para desenhar os elementos do programa. Ela é chamada assim que a setup() termina a sua execução, e fica em loop executando o que for colocado no seu interior. Então o nosso arquivo sketch.js fica dessa forma:

Como a ferramenta tem a finalidade de ser um sketchbook, um “caderno de desenho”, traduzindo literalmente, as funções têm objetivo de desenhar formas geométricas, traçar linhas, criar a tela para os desenhos, que sempre será usada.

Abaixo você pode visualizar o resultado de um script que eu fiz para exemplificar a utilização da ferramenta. Se tu, leitor, se interessou por ele e quer dar uma olhada por trás dos panos, clica aqui e faz o download.

Obs.: O navegador Google Chrome não consegue executar esse programa, pois ele bloqueia acesso a arquivos locais por padrão. Para uma melhor experiência com a ferramenta, recomendo utilizar os navegadores Mozilla Firefox, Opera e/ou Safari, caso seja usuário de MacOS.

Uma dica que eu dou para ti, que deseja explorar a ferramenta, é dar uma passada no canal Coding Train, do Daniel Shiffman, um dos desenvolvedores desse framework. Lá ele faz alguns desafios de programação usando P5.js e Processing.

Referências e links úteis:

Feedback e publicações anteriores

Caso você tenha interesse em ler as edições anteriores do PET Redação ou conhecer um pouco mais sobre o trabalho desenvolvido pelo PET-SI não deixe de conferir nossa página. Antes de você partir gostaríamos também de pedir que você nos ajude, respondendo o formulário de avaliação abaixo. Esse formulário nos ajuda a moldar nossas atividades para melhor atender os nossos leitores.

Comentários não são aceitos para este Post!!!