Guia definitivo para a linguagem de processamento Parte I: os fundamentos

Publicados: 2022-03-11

Você está lutando com o tédio e ansioso para usar sua criatividade. Você quer construir algo, algo visualmente impressionante, algo artístico. Ou talvez você queira aprender a programar e fazer algo impressionante o mais rápido possível. Se sim, então a linguagem de processamento é o caminho a seguir.

Entre todas as linguagens de programação com as quais trabalhei até agora, Processing foi sem dúvida uma das mais divertidas. É uma linguagem direta - fácil de aprender, entender e usar, mas é muito poderosa. É quase como se você estivesse pintando em uma tela vazia com linhas de código. Não existem regras rígidas ou diretrizes para limitar sua criatividade, o único limite é sua imaginação.

Guia definitivo para a linguagem de processamento Parte I: Fundamentos

Na faculdade eu era professor assistente de um programa que reunia alunos do ensino médio e os ensinava Processamento. A maioria deles não tinha uma sólida experiência em programação, alguns nem tinham escrito uma única linha de código antes. Em apenas cinco dias, esperava-se que eles aprendessem o idioma e construíssem seus próprios jogos simples. A taxa de sucesso foi quase cem por cento, raramente enfrentamos o fracasso. Neste artigo, é exatamente isso que faremos. Reduzi todo o programa em duas partes. Na primeira parte, falarei sobre a linguagem. Darei uma visão geral básica, um passo a passo para Processamento e darei algumas dicas e truques. Então, na próxima parte, vamos construir um jogo simples passo a passo, cada passo será explicado em detalhes. Também vou converter o código do jogo em JavaScript usando p5js, para que nosso jogo possa rodar em um navegador web.

O que você já deve saber

Para entender e seguir facilmente esses artigos, você deve ter um conhecimento básico de programação, pois não falarei sobre fundamentos de programação. Na maioria das vezes, não tocarei em nenhum conceito avançado de programação, portanto, uma compreensão superficial servirá. Há algumas partes em que falo sobre algumas idéias e conceitos de baixo nível, como programação orientada a objetos (OOP), mas não são cruciais. Esses são para leitores curiosos que estão interessados ​​na estrutura da linguagem. Se você não quiser saber, você pode simplesmente pular essas partes. Fora isso, a única coisa que você deve ter é a ambição de aprender essa linguagem incrível e entusiasmo para criar seu próprio jogo!

Como seguir

Eu sempre sou a favor de aprender programação tentando e experimentando. Quanto mais cedo você mergulhar em seu próprio jogo, mais rápido você se sentirá confortável com o Processing. Então essa será minha primeira sugestão, tente cada passo em seu próprio ambiente. Processing tem um IDE simples e fácil de usar (ou seja, um editor de código), é a única coisa que você precisa baixar e instalar para seguir. Você pode fazer o download aqui.

Então vamos começar!

O que é a Linguagem de Processamento?

Esta seção inclui uma breve visão técnica da linguagem, sua estrutura e algumas notas sobre o processo de compilação e execução. Os detalhes incluirão alguns conhecimentos avançados sobre programação e o ambiente Java. Se você não se importa com detalhes por enquanto e mal pode esperar para aprender e codificar seu próprio jogo, você pode pular para a seção “Fundamentos do Processamento”.

Processing é uma linguagem de programação visual que permite esboçar com códigos, por assim dizer. No entanto, não é exatamente uma linguagem de programação por si só, é o que eles chamam de linguagem de programação “Java-esque”, o que significa que a linguagem é construída em cima da plataforma Java, mas não é exatamente Java em si. Ele é baseado em Java e todo o seu código é pré-processado e convertido diretamente em código Java quando você aperta o botão de execução. A classe PApplet do Java é a classe base para todos os sketches do Processing. Para dar um exemplo, vamos pegar alguns blocos de código de processamento básico:

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Esses blocos de código serão convertidos em algo assim:

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

Você pode ver que o bloco de código de processamento foi empacotado com uma classe que se estende do PApplet do Java. Portanto, todas as classes que você definir em seu código de processamento, se houver, serão tratadas como classes internas.

O fato de Processing ser baseado em Java nos dá muitas vantagens, especialmente se você for um desenvolvedor Java. Não apenas a sintaxe é familiar, mas também oferece a capacidade de fazer coisas como incorporar código Java, bibliotecas, arquivos JAR em seus esboços, usar seus applets de processamento diretamente em seus aplicativos Java, definir classes e usar tipos de dados padrão, como int , float, char e assim por diante. Você pode até escrever seu código de Pocessing diretamente do Eclipse, se quiser gastar algum tempo para configurá-lo. Uma coisa que você não pode fazer é usar componentes AWT ou Swing em seus esboços do Processing, porque eles entram em conflito com a natureza de loop do Processing. Mas não se preocupe, não faremos nenhuma dessas coisas extravagantes neste artigo.

Fundamentos de Processamento

O código de processamento consiste em duas partes principais, blocos de configuração e desenho . O bloco de configuração é executado uma vez quando o código é executado e os blocos de desenho são executados continuamente. A principal ideia por trás do Processing é que o que você escreve dentro do bloco de desenho será executado 60 vezes por segundo de cima para baixo, até que seu programa termine . Vamos construir tudo aproveitando essa mesma ideia. Faremos nossos objetos se moverem, manteremos nossas pontuações, detectaremos colisões, implementaremos a gravidade e faremos praticamente todo o resto usando esse recurso. Este loop de atualização é o coração do nosso projeto . Estarei explicando como usar essa pulsação para dar vida ao seu código em seções posteriores. Primeiro, deixe-me apresentar o IDE de processamento.

Processando IDE

Se você leu até este ponto e ainda não baixou o Processing IDE, vá em frente e faça isso. Ao longo do artigo, vou descrever algumas tarefas fáceis para você tentar por conta própria, você só pode praticar se tiver o IDE instalado e funcionando. Aqui está uma breve introdução do IDE de processamento. É muito simples e auto-explicativo, então vou mantê-lo curto.

Como seria de esperar, os botões executar e parar fazem o que sugerem. Quando você clica no botão executar , seu código será compilado e executado. Por natureza, os programas de processamento nunca são encerrados, eles são executados para sempre e sempre até serem perturbados. Você pode encerrá-lo programaticamente, mas se não o fizer, pode usar o botão Parar .

O botão que se parece com uma borboleta à direita do run & stop é o depurador . Usar o depurador precisa de um outro artigo dedicado a ele. Está fora do escopo deste artigo, então você pode ignorá-lo por enquanto. A lista suspensa ao lado do botão do depurador é onde você adiciona / define mods. Mods fornecem algumas funcionalidades específicas, permitem que você escreva código para Android, permite que você escreva código em Python e assim por diante. Mods também estão fora do escopo, então você pode mantê-lo no modo Java padrão e ignorá-lo também.

A janela no editor de código é onde seus esboços normalmente são executados. Na imagem está em branco, pois não definimos nenhuma propriedade como tamanho ou cor de fundo, ou não desenhamos nada.

Não há muito o que falar sobre o editor de código, é simplesmente onde você escreve seu código. Existem números de linha (!) As versões mais antigas do Processing não tinham isso e você não pode imaginar como fiquei feliz quando as vi pela primeira vez.

A caixa preta abaixo é o console . Vamos usá-lo para imprimir coisas para fins de depuração rápida. A guia de erros ao lado do console é onde seus erros aparecerão. Esse também é um novo recurso útil que acompanha o Processing 3.0. Nas versões mais antigas, os erros eram impressos no console e era difícil acompanhá-los.

Bloco de configuração

Como dito anteriormente, os blocos de configuração são executados uma vez quando o programa é iniciado. Você pode usá-lo para fazer configurações e para coisas que gostaria de executar apenas uma vez, por exemplo, carregar imagens ou sons. Aqui está um bloco de configuração de exemplo. Execute este código em seu próprio ambiente e veja os resultados por si mesmo.

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

Os métodos relacionados ao estilo (fundo, preenchimento, traçado) serão explicados nas seções de propriedades e configurações. Por enquanto, o que você precisa saber é como as configurações e configurações que definimos aqui afetam todo o nosso esboço. Os códigos escritos aqui são usados ​​para definir alguns conjuntos de regras básicas aplicáveis ​​em todo o esboço. O que você também deve entender nesta seção são os métodos listados abaixo:

size() - Como o nome sugere, esta função é usada para configurar o tamanho do nosso sketch. Tem que estar na primeira linha do bloco de código de configuração. Pode ser usado nas seguintes formas:

  • tamanho (largura, altura);
  • size(largura, altura, renderizador);

Os valores de largura e altura podem ser dados em pixels. A função de tamanho aceita um terceiro parâmetro, renderizador, que é usado para definir qual mecanismo de renderização nosso esboço usará. Por padrão, o renderizador é definido como P2D. Os renderizadores disponíveis são P2D (Processamento 2D), P3D (Processamento 3D, deve ser usado se seus esboços incluirem gráficos 3D) e PDF (gráficos 2D são desenhados diretamente em um arquivo Acrobat PDF. Mais informações podem ser encontradas aqui). Os renderizadores P2D e P3D usam hardware gráfico compatível com OpenGL.

fullScreen() - A partir do Processing 3.0, a função fullScreen agora pode ser usada em vez da função size(). Assim como a função size(), ela também deve estar na primeira linha do bloco de configuração. O uso é o seguinte:

  • tela cheia();
  • fullScreen(exibir);
  • fullScreen(renderizador);
  • fullScreen(display, renderizador);

Se você usá-lo sem nenhum parâmetro, seu esboço de processamento simplesmente será executado em tela cheia e será executado em sua tela principal. O parâmetro 'display' é usado para definir em qual display seu sketch será executado. Por exemplo, se você conectar monitores externos ao seu computador, você pode definir a variável de exibição para 2 (ou 3, 4 etc.) e seu esboço será executado lá. O parâmetro 'renderer' é explicado na parte size() acima.

Bloqueio de configurações

Esse é outro recurso introduzido com a nova versão do Processing. É um bloco de código, assim como setup e draw. É útil quando você deseja definir os métodos size() ou fullScreen() com parâmetros variáveis. Também é necessário definir size() e outras propriedades de estilo como smooth() neste bloco de código se você estiver usando qualquer ambiente diferente do próprio IDE do Processing, como Eclipse. Mas você não precisará disso na maioria dos casos, definitivamente não neste artigo.

Desenhar bloco

Não há nada de especial para falar sobre o bloco de desenho, mas tudo é especial nele. O bloco de desenho é onde toda a mágica acontece. É o coração do seu programa, batendo 60 vezes por segundo. Este bloco de código abriga toda a sua lógica de código. Todas as suas formas, objetos etc. serão escritos aqui.

A maior parte do código sobre o qual falaremos neste artigo será do bloco de desenho, por isso é importante que você entenda claramente como esse bloco de código funciona. Para lhe dar uma demonstração, aqui está algo que você pode tentar. Primeiro, observe que podemos imprimir qualquer coisa no console usando os métodos print() ou println() . Os métodos print apenas imprimem no console, mas println imprime e acrescenta uma nova linha no final, então cada println() imprimirá em linhas separadas.

Então, dê uma olhada no seguinte bloco de código. Primeiro, tente adivinhar o que será impresso no console. Então, vá em frente e experimente:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

Se você adivinhou “1 2 3 4…”, entendi! Esta é uma das confusões no Processing. Lembre-se que este bloco é executado repetidamente? Quando você define uma variável aqui, ela é definida em cada loop repetidamente. Em cada iteração, x é definido como 0, é incrementado em 1 e é impresso no console. Portanto, obtemos o resultado “1 1 1 1…”. Este exemplo foi um pouco óbvio, mas pode ser confuso quando as coisas ficam um pouco complicadas.

Não queremos que x seja substituído, então como podemos conseguir isso e obter o resultado “1 2 3 4…” ? Usando variáveis ​​globais . Isso não é nada extravagante, nós apenas definimos a variável fora do bloco de desenho para que ela não seja redefinida em cada iteração. Além disso, o escopo da variável será alcançável em todo o esboço. Veja o código abaixo:

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

Você deve estar se perguntando, como uma variável definida fora de nossos blocos pode funcionar? E por que não usamos o bloco setup() já que ele é executado uma vez no início? A resposta está relacionada com a programação orientada a objetos e escopos, se você não estiver familiarizado, pode pular este parágrafo. Consulte a parte em que expliquei como o código de processamento é convertido em Java. Lembre-se de como eles são agrupados com uma classe Java? As variáveis ​​que escrevemos fora do bloco setup() e draw() também são encapsuladas, portanto são tratadas como campos da classe externa que envolve nosso código. Usar x+=1 é o mesmo que usar this.x+=1. Ele também funciona da mesma forma no nosso caso, nenhuma variável chamada x é definida no escopo de draw() e um escopo externo é pesquisado, que é o escopo de this . E por que não definimos nossa variável x na seção setup()? Se o fizéssemos, o escopo do qual x é definido seria o escopo da função de configuração e não seria acessível a partir do bloco draw().

Desenhar Formas e Textos

Agora sabemos como configurar nosso esboço usando o bloco de configuração e sabemos o que o bloco de desenho faz. Então é hora de ficar um pouco visual e aprender sobre as partes divertidas do processamento: como desenhar formas.

Antes de começarmos, você deve entender o sistema de coordenadas . No Processing, você determina as coordenadas de cada objeto desenhado na tela. O sistema de coordenadas está em pixels. A origem (ou seja, ponto de partida) é o canto superior esquerdo, você deve fornecer suas coordenadas em relação a esse ponto. Outra coisa que você deve saber é que cada forma tem um ponto de referência diferente. Por exemplo, rect() tem seu canto superior esquerdo como ponto de referência. Para elipse(), é o centro. Esses pontos de referência podem ser alterados com métodos como rectMode() e ellipseMode(), que explicarei na seção de propriedades e configurações. Uma figura de exemplo é fornecida para ajudá-lo a entender melhor.

Este artigo é uma visão geral básica do Processamento, portanto, não tocaremos em nenhuma forma complexa, como vértices ou formas 3D. Formas 2D básicas serão realmente mais do que suficientes para criarmos nosso próprio jogo. Na figura, você pode ver exemplos de como as formas são desenhadas. Cada forma tem sua própria sintaxe a ser criada, mas a ideia básica é fornecer suas coordenadas ou seus tamanhos ou ambos. Aqui estão algumas formas com as quais você deve estar familiarizado (para todos os valores fornecidos abaixo, 'x' e 'y' significam coordenadas x e y em pixels, 'w' e 'h' significam valores de largura e altura também em pixels):

point() - Ponto simples, precisa apenas de uma única coordenada. Uso:

  • ponto (x, y)
  • point(x, y, z) - Caso esteja usando 3 dimensões.

line() - Para criar uma linha. Você pode criar uma linha com apenas um ponto inicial e final. Uso:

  • linha(x1, y1, x2, y2)
  • line(x1, y1, z1, x2, y2, z2) - Caso esteja usando 3 dimensões.

triângulo() - Para criar um triângulo. Uso: triângulo (x1, y1, x2, y2, x3, y3)

quad() - Para criar um quadrilátero. Uso: quad(x1, y1, x2, y2, x3, y3, x4, y4)

rect() - Para criar um retângulo. O ponto de referência é o canto superior esquerdo por padrão (consulte a figura). Aqui está o uso:

  • rect(x, y, w, h)
  • rect(x, y, w, h, r) - 'r' significa o raio em pixels para tornar os cantos arredondados.
  • rect(x, y, w, h, tl, tr, br, bl) - Raio para cantos superior esquerdo, superior direito, inferior direito, inferior esquerdo, respectivamente. Isso também está em pixels.

elipse() - Para criar uma forma de elipse. Isso também é usado para criar um círculo, os mesmos valores de largura e altura devem ser fornecidos. O ponto de referência para esta forma é o centro por padrão (consulte a figura). Aqui está o uso:

  • elipse(x, y, w, h)

arc() - Desenha um arco. Uso:

  • arc(x, y, w, h, start, stop) - 'start' e 'stop' são usados ​​para determinar o ângulo para iniciar e parar o desenho do arco. Os valores estão em radianos. Constantes como “PI, HALF_PI, QUARTER_PI e TWO_PI” podem ser usadas.
  • arc(x, y, w, h, start, stop, mode) - a variável 'mode' é para determinar o estilo de renderização do arco (string). As opções disponíveis são “OPEN, CHORD, PIE”. OPEN deixará as partes não desenhadas sem bordas. CHORD completará as partes não desenhadas com uma borda. PIE fará com que seu arco pareça um gráfico de pizza.

A exibição de textos na tela é semelhante à exibição de formas, a ideia básica é que você determine uma coordenada na qual deseja que seu texto seja exibido. No entanto, há mais para lidar com textos. Você terá mais controle sobre seus textos após a seção de propriedades e configurações, onde aprenderá como aplicar configurações e propriedades a objetos. Por enquanto, vou mostrar o básico da exibição de textos. Há muitas maneiras de fazer isso, vou mostrar apenas o essencial.

text() - Exibe textos. Uso:

  • text(c, x, y) - 'c' significa caractere, qualquer caractere alfanumérico será exibido.
  • text(c, x, y, z) - Caso esteja trabalhando com 3 dimensões.
  • text(str, x, y) - 'str' é a string a ser exibida.
  • text(str, x, y, z) - Caso esteja trabalhando com 3 dimensões.
  • text(num, x, y) - 'num' é o valor numérico a ser exibido.
  • text(num, x, y, z) - Caso esteja trabalhando com 3 dimensões.

Propriedades e configurações

A primeira coisa que deveria ser explicada nesta seção seria a lógica por trás da configuração das propriedades dos objetos. Cor de preenchimento, cor de fundo, borda, largura da borda, cor da borda, alinhamento das formas, estilos de borda etc. podem ser alguns exemplos dessas propriedades.

Ao definir uma propriedade, lembre-se de que o código será executado de cima para baixo . Digamos que você defina a propriedade “fill” para vermelho, todos os objetos desenhados abaixo dessa linha serão preenchidos com vermelho até que sejam substituídos por outra propriedade de preenchimento. A mesma coisa se aplica a outras propriedades também, no entanto, observe que nem todas as propriedades substituirão umas às outras. Por exemplo, a propriedade "stroke" não substitui a propriedade "fill", em vez disso, elas funcionam juntas. Aqui está uma representação visual para você compreender a lógica:

Como você pode ver na imagem, a primeira linha define a cor de preenchimento para vermelho e a segunda linha define a cor do traço para azul. Agora temos duas configurações ativas: preencher traços vermelhos e azuis. Como você esperava, qualquer que seja o nosso objeto na próxima linha, ele será preenchido com vermelho e terá traços azuis (se aplicável). Você pode continuar examinando a imagem dessa maneira e entenderá a lógica.

Aqui estão algumas propriedades e configurações essenciais que são comumente usadas:

Configurações de estilo

fill() - Define a cor de preenchimento dos objetos. Essa configuração também é usada para colorir textos. Por enquanto, precisamos apenas saber o seguinte uso:

  • fill(r, g, b) - Valores vermelho, verde e azul como inteiro
  • fill(r, g, b, a) - Valor alfa adicional, max é 255

noFill() - Define a cor de preenchimento para transparente.

stroke() - Define a cor do traço para objetos. A propriedade Stroke é aplicável para linhas e bordas ao redor de objetos. Por enquanto, precisamos apenas saber o seguinte uso:

  • stroke(r, g, b) - Valores de vermelho, verde e azul como inteiro.
  • stroke(r, g, b, a) - Valor alfa adicional, max é 255

noStroke() - Remove o traço.

strokeWeight() - Define a largura do traço. Uso:

  • strokeWeight(x) - x é um inteiro e representa a largura do traço em pixels.

background() - Define a cor de fundo. Por enquanto, precisamos apenas saber o seguinte uso:

  • background(r, g, b) - Valores de vermelho, verde e azul como inteiro.
  • background(r, g, b, a) - Valor alfa adicional, max é 255

Configurações de alinhamento

ellipseMode() - Define onde tomar como ponto de referência as elipses de alinhamento. Uso:

  • ellipseMode(mode) - 'mode' é o parâmetro, aqui estão os parâmetros disponíveis:
    • CENTRO (padrão): Tome o centro como ponto de referência.
    • RAIO: Isso também toma o centro como ponto de referência, mas neste modo, os valores w e h que você especifica são tratados como metade (ou seja, raio em vez de diâmetro)
    • CORNER: Toma o canto superior esquerdo como ponto de referência.
    • CORNERS: define os dois primeiros parâmetros (x e y) como a localização do canto superior esquerdo e os dois últimos parâmetros (w e h) como a localização do canto inferior esquerdo da elipse. Portanto, este modo, “largura” e “altura” é irrelevante. Pensar como elipse(x_tl,y_tl,x_br,y_br) faz mais sentido neste caso.

rectMode() - Define onde tomar como ponto de referência os retângulos de alinhamento. Uso:

  • rectMode(mode) - 'mode' é o parâmetro, aqui estão os parâmetros disponíveis:
    • CENTRO: Tome o centro como ponto de referência.
    • RAIO: Isso também toma o centro como ponto de referência, mas neste modo, os valores w e h que você especifica são tratados como metade
    • CORNER (padrão): Toma o canto superior esquerdo como ponto de referência.
    • CORNERS: define os dois primeiros parâmetros (x e y) como a localização do canto superior esquerdo e os dois últimos parâmetros (w e h) como a localização do canto inferior esquerdo da elipse. Portanto, este modo, “largura” e “altura” é irrelevante. Pensar nisso como rect(x_tl,y_tl,x_br,y_br) faz mais sentido neste caso.

Configurações relacionadas ao texto

textSize() - Define o tamanho da fonte do texto. Uso:

  • textSize(size) - Valor inteiro do tamanho desejado.

textLeading() - Define a altura da linha de seus textos. Uso:

  • textLeading(lineheight) - Valor de pixel do espaço entre as linhas.

textAlign() - Define onde tomar como ponto de referência os textos de alinhamento. Uso.

  • textAlign(alignX) - 'alignX' é para alinhamento horizontal. Disponível: ESQUERDA, CENTRO, DIREITA
  • textAlign(alignX, alignY) - 'alignY' é para alinhamento vertical. Disponível: SUPERIOR, INFERIOR, CENTRO, LINHA DE BASE.

Animações

Até agora, aprendemos a desenhar objetos e textos. Mas o problema com eles é que eles são estáticos. Agora, como podemos fazê-los se mover? Simples, ao invés de dar as coordenadas como inteiros, usamos variáveis ​​para que possamos incrementá-las/diminuí-las . Faz sentido? Dê uma olhada no código a seguir:

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Você vê como nós gerenciamos a animação? Definimos xey como variáveis ​​globais e seu valor inicial para 0. Em nosso loop de desenho, criamos nossa elipse, definimos a cor de preenchimento para vermelho, a cor do traçado para azul e as coordenadas para x e y. Quando incrementamos x e y, a bola simplesmente muda sua localização. Mas há um problema com este código, você pode notá-lo? Como um desafio fácil para si mesmo, tente descobrir qual é o problema e teste-o. Aqui está o resultado:

Minha intenção ao deixar isso acontecer era fazer você perceber como funciona a natureza de looping do Processing. Consulte o exemplo na seção “Draw Block”, você se lembra por que temos “1 1 1…” em vez de “1 2 3…”? A mesma razão pela qual a bola está deixando marcas para trás. Cada vez que o bloco de desenho itera, x e y são incrementados em 5 e, portanto, a bola é redesenhada para 5 pixels para baixo e para a direita. No entanto, a bola retirada das iterações anteriores permanece na visualização. Como podemos fazê-los ir embora? Qualquer suposição?

Para se livrar das marcas que a bola deixa para trás, simplesmente removemos o fundo (255) do bloco de configuração e o colamos para ser a primeira linha do bloco de desenho. Quando nosso código de plano de fundo estava no bloco de configuração, ele foi executado uma vez no início, tornando nosso plano de fundo branco. Mas isso não é suficiente, precisamos definir nosso plano de fundo para branco em cada loop para cobrir as bolas desenhadas nos loops anteriores. O plano de fundo sendo a primeira linha significa que ele é executado primeiro, torna-se a camada base. Em cada loop, nossa tela é pintada de branco e novos elementos são desenhados em cima do fundo branco. Então não temos marcas.

Essa é a ideia por trás de animar coisas no Processing, manipulando as coordenadas dos objetos programaticamente para mudar sua localização. Mas como faremos coisas extravagantes, como manter a bola na tela? Ou talvez implementar a gravidade? Vou ensinar como fazer essas coisas na próxima parte deste artigo. Vamos aprender tentando e construindo. Vamos aprender como fazê-lo e aplicá-los ao nosso jogo imediatamente. No final, teremos um jogo completo, jogável e, esperamos, divertido.

Interações de teclado e mouse

As interações de teclado e mouse no Processing são muito fáceis e diretas. Existem métodos que você pode chamar para cada evento, e o que você escreve dentro dele será executado uma vez quando o evento ocorrer. Também existem variáveis ​​globais, como mousePressed e keyPressed, que você pode usar em seu bloco de desenho para aproveitar o loop. Aqui estão alguns dos métodos com explicações:

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Como você pode ver, é muito fácil verificar se o mouse foi clicado ou qual tecla está sendo pressionada. No entanto, existem mais opções disponíveis para as variáveis ​​mousePressed e keyCode. As opções disponíveis para mousePressed são LEFT, RIGHT e CENTER. Há muitos outros disponíveis para keyCode ; CIMA, BAIXO, ESQUERDA, DIREITA, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC e DELETE.

Uma coisa a saber sobre as variáveis ​​do mouse, e vamos usar muito isso, é como obter as coordenadas do mouse. Para obter as coordenadas exatas do cursor, podemos usar as variáveis ​​mouseX e mouseY diretamente no bloco draw(). Por último, mas não menos importante, existem muitos outros métodos úteis que você deve dar uma olhada. Todos eles estão documentados na Referência de Processamento.

Conclusão

Você já deve estar se familiarizando com o Processing. No entanto, se você parar por aqui, todo esse conhecimento voará para longe. Eu recomendo fortemente que você continue praticando, brincando com o que aprendeu. Para ajudá-lo a praticar, fornecerei dois exercícios. Você deve tentar o seu melhor para fazê-lo por conta própria. Se você ficar preso, o Google e o Processing Reference devem ser seus melhores amigos. Vou fornecer o código para o primeiro, mas olhar para eles deve ser a última coisa que você faz.

Exercício Recomendado 1

Você deve fazer 4 bolas com cores diferentes , partindo de 4 cantos da tela percorrendo o centro com velocidades diferentes . Quando você clica e segura o botão do mouse, as bolas devem congelar . E quando você solta o mouse, as bolas podem voltar à sua posição inicial e continuar se movendo. Então, estou procurando algo assim.

Depois de experimentar o exercício, você pode conferir o código aqui.

Exercício Recomendado 2

Lembre-se do famoso protetor de tela de DVD em que o logotipo do DVD salta pela tela e todos esperamos desesperadamente que ele chegasse ao canto? Quero que você replique esse protetor de tela, mas usando apenas um retângulo em vez do logotipo do DVD. Ao iniciar o aplicativo, a tela deve estar preta e o retângulo deve começar em um local aleatório. Cada vez que o retângulo atinge o canto, ele deve mudar de cor (e obviamente de direção). Ao mover o mouse, o retângulo deve desaparecer e a cor de fundo deve ficar branca (é um protetor de tela, não é?). Eu não vou dar o código para este exercício neste artigo. Você deve tentar o seu melhor para implementá-lo, e o código será fornecido na segunda parte deste artigo.

A segunda parte do guia definitivo para Processamento, um tutorial passo a passo para construir um jogo simples, foi publicada.

Leitura adicional no Blog da Toptal Engineering:

  • Como abordar a escrita de um intérprete do zero