Editor web
O primeiro item que gostaria de trabalhar nessa série é: onde, você que está tendo o primeiro contato com programação, pode começar a escrever seus primeiros códigos sem se preocupar com instalações e organização de arquivos. E aí que entre o editor web para p5js.
A fundação Processing tem como objetivo permitir que pessoas de diferentes idades e origens tenham um contato amigável e positivo com programação. Pensando nisso nasce o editor web que permite um espaço livre de instalações e configurações que permitirão que um usuário programe seus primeiros desenhos, animações e aplicativos com mais facilidade.
O editor web é uma ferramenta simples que apresenta um espaço para escrita do seu código na metade esquerda da janela do seu navegador e apresentará seu desenho do lado direito da janela. Infelizmente não existe ainda uma versão traduzida, mas acredito que não seja a forma mais simples para começarmos. Acesse e começe a explorar a interface. Crie uma conta para salvar seus projetos.
Na página para o material de P5js sempre haverá um link para o editor web.
Sketch.js
Nossas código serão escritos em um arquivo específico chamado sketch.js. Esse arquivo é um resquisito padrão da biblioteca P5js e é nele que faremos a criação dos nossos primeiros elementos, inclusive é nele que vamos fazer a criação da nossa canvas mais pra frente.
Ao abrir um novo projeto no editor web você será apresentado com um arquivo sketch.js então não se preocupe com a organização dos seus arquivos JavaScript ainda.
Canvas
A canvas é um elemento HTML5 criado para desenhar gráficos em tempo real no navegador através de Javascript, graças a esse elemento seremos capaz de criar animações, apliações visuais e até joguinhos.
A seguir veja um grupo de bolinhas caíndo pela canvas.
Clique aqui parava ver o código no editor web.
Coordenadas em uma canvas
Agora, como cada bolinha é colocada em uma deteminada posição na canvas? Então, antes de começarmos nossas primeiras linhas de código eu gostaria de falar um pouco sobre as coordenadas de uma canvas.
A canvas segue um plano cartesiano, a unidade de medida para esse plano é dada em pixels. E a origem desse plano é no canto superior esquerdo, onde y = 0 e x = 0. A reta horizontal cresce para a direita, ou seja, na extremidade direita da canvas x = (largura máxima). Já a reta vertical, o eixo Y, cresce da parte superior da cavas onde y = 0, em direção a parte mais baixa da canvas onde y = (altura máxima).
Veja uma animção que ilustra essa ideia. O código completo está disponível aqui.
Recado
Esse artigo ainda é bem inicial e tem a inteção principal de explicar e apresentar alguns elementos fundamentias. Para quem já tem alguma noção, a partir de 10 de setembro estarei colocando artigos sobre as animação que foram usados até o momento para que você já possa começar a brincar.
Sinta-se livre para deixar duas dúvidas como comentário e responderei o mais rápido possível.
Referências:
Site oficial da fundação Processing https://processingfoundation.org/
HTML Canvas https://www.w3schools.com/html/html5_canvas.asp
Comentários
Postar um comentário