Processing offline

Antes de começarmos a trabalhar diretamente com o p5.js, precisamos entender o que vai acontecer ali. A computação gráfica é a área da computação que faz modelos matemáticos se transformarem em imagens, elementos visuais.

De maneira simples (estamos pulando muita coisa que você pode estudar em um livro focado em Computação Gráfica), o computador vai utilizar comandos pré definidos para "desenhar" coisas em um "grid", que então é mostrado para você no display (seu monitor, tela de celular, tela do relógio, etc).

Nossos comandos

Para iniciarmos nossa jornada na construção do Pensamento Computacional, propomos um exercício um pouco diferente: hoje você é o computador, você é o Processing.

O que você vai fazer? Conseguir receber um comando e executar o que se espera dele. Todos os comandos serão para criar um desenho no grid.

Vamos definir, para nosso exercício, um grid que tenha 400 pixels de largura por 400 pixels de altura. Você se lembra do Plano Cartesiano, que aprendemos na escola? A ideia é exatamente essa, o grid é o nosso plano cartesiano. Lá vamos definir pontos (x, y) e então criar desenhos a partir dai.

A diferença principal é que no plano cartesiano a origem, ou seja, o ponto (0, 0) fica no canto inferior esquerdo. Para nós, a origem será no canto superior esquerdo (onde está a bolinha azul).

Grid de 400 x 400 pixels

Agora precisamos saber quais comandos conseguimos receber para criar desenhos no grid.

Atualmente, os comandos que existem no seu "catálogo de comandos" são:

linha
circulo
retangulo

Só com seus nomes não é possível saber o que fazer, apesar de termos uma ideia. Precisamos de uma documentação que detalhe como esse comando funciona.

Linha

O que precisamos saber para poder desenhar uma linha? Dois pontos! Por isso o comando linha vai receber dois pontos, separados em valores x e y.

linha(x1, y2, x2, y2);

Assim, quando eu passo para você um comando do tipo:

linha(0, 0, 100, 100);

Você precisa conseguir desenhar uma linha entre dois pontos. O primeiro ponto é o (0, 0)e o segundo é (100, 100).

Uma vez que você recebeu esse comando e consegui executá-lo, seu grid fica assim:

Grid com a linha desenhada!

Circulo

Para desenhar um círculo, precisamos de algumas informações sobre o mesmo. Onde desenhar? Qual tamanho desenhar? Por isso, nosso comando circulo recebe essas informações ao ser chamado.

circulo(x, y, diametro);

Agora, se você recebe o seguinte comando para executar:

circulo(200, 200, 200);

O seu grid terá um círculo desenhado no meio, com raio de 100! Perceba que o número passado como 200 é o diâmetro, por isso o raio é 100.

O círculo com centro no (200, 200) e raio 100 (diâmetro 200)

Retangulo

Nosso último comando é um pouco diferente. Para desenhar um retângulo vamos pedir três informações:

• O ponto (x, y) do canto superior esquerdo

• A largura

• A altura

Assim, temos o comando como abaixo:

retangulo(x, y, largura, altura);

O seguinte comando, quando executado:

retangulo(200, 200, 100, 50);

Traz o grid desenhado assim:

Você é o computador!

O grid foi definido e os comandos que sabemos executar também. Precisamos ler esses pequenos programas e mostrar como fica o grid após a execução deles!

Programa 1

linha(200, 0, 200, 400);

retangulo(50, 150, 100, 100);
retangulo(250, 150, 100, 100);

circulo(100, 200, 100);
circulo(300, 200, 100);

Programa 2

linha(100, 100, 150, 50);
linha(150, 50, 200, 100);
linha(100, 100, 300, 100);
circulo(150, 175, 150);
circulo(170, 150, 30);
linha(150, 200, 200, 210);

Programa 3

linha(200, 50, 170, 100);
linha(200, 50, 230, 100);

linha(230, 100, 230, 200);
linha(170, 100, 170, 200);

retangulo(150, 200, 100, 30);
retangulo(180, 230, 40, 110);

circulo(200, 250, 20);
circulo(200, 280, 20);
circulo(200, 310, 20);