Orientação de programação interessante para designer - Faça sua foto funcionar (parte um): 16 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:40

Corre! Corre! Corre!

A programação não é tão difícil. O ponto principal é encontrar o seu ritmo e fazê-lo um por um.

Antes de ler este capítulo, espero que você já esteja familiarizado com o método básico de desenho de funções, ou se sentirá tonto e confuso com duas funções importantes: configurar e desenhar.

Já que queremos fazer gráficos com movimento, temos que saber como a animação é produzida.

A imagem acima parece bastante atraente e revela visualmente o princípio de implementação da animação.

A animação é mágica. É uma mágica sobre trapaça visual. No entanto, nesta informação explodida, era de inundação de vídeo, já estamos acostumados a isso. Poucas pessoas ficarão surpresas com o fato de ser incrível poder ver a animação.

O mesmo princípio pode ser aplicado ao desenho de animação com programa. Temos que considerar como desenhar gráficos diferentes em cada quadro, e o programa virará as páginas automaticamente enquanto complementamos uma animação completa em nossa cabeça. No capítulo seguinte, falaremos sobre como realizar movimentos gráficos básicos. Antes disso, precisamos conhecer alguns conhecimentos básicos sobre variáveis.

Etapa 1: Variável

A variável é o contêiner de dados. Ele pode ser usado repetidamente em um programa.

Por exemplo:

[cceN_cpp theme = "dawn"] tamanho (500, 500); elipse (100, 250, 50, 50); elipse (200, 250, 50, 50); elipse (300, 250, 50, 50); elipse (400, 250, 50, 50);

[/cceN_cpp]

Esta seção de código não usou nenhuma variável. Ele desenha quatro círculos na tela. Podemos descobrir que eles têm a mesma largura e altura. Agora que é o mesmo, para minimizar a entrada de dados repetidos, podemos definir um sinal para representá-lo. Este sinal é variável.

Este é o código depois de adicionar uma variável:

[cceN_cpp theme = "dawn"] tamanho (500, 500); int a = 50; elipse (100, 250, a, a); elipse (200, 250, a, a); elipse (300, 250, a, a); elipse (400, 250, a, a);

[/cceN_cpp]

Obtemos um resultado totalmente igual!

Como definimos a variável a, podemos alterar os parâmetros de maneira conveniente. Se mudarmos a = 50 para a = 100, a largura e altura de todos os círculos se tornarão 100 uniformemente. Portanto, não precisamos alterar os parâmetros um por um. A variável é realmente uma boa invenção.

Etapa 2: A Criação da Variável

Antes de usar a variável, temos que fazer declarações e designar seu tipo de dados.

int i;

i ＝ 50;

A primeira frase do código fez uma declaração para uma variável i. int é um símbolo usado principalmente para declarar variáveis. Ao declarar, vai poupar um espaço na memória do computador, o que equivale a gerar uma "caixa", especialmente utilizada para restaurar dados inteiros. A segunda frase significa fazer com que a atribuição 50 seja implementada pela variável i. Após a implementação desta frase, os dados serão armazenados na variável i de forma estável. Ou você pode ser mais preguiçoso ao combinar as duas frases acima em uma e completar a tarefa enquanto faz uma declaração.

int i ＝ 50;

É comparativamente livre nomear uma variável. Mas às vezes temos que prestar atenção em alguma coisa.

Etapa 3: Regulação de Nomenclatura da Variável

• Deve ser a combinação do alfabeto e sublinhado. Pode ser um símbolo ou uma palavra.

• Maiúsculas e Minúsculas. Nome e nome podem representar variáveis diferentes.

• Tente nomear o mais fácil possível para permitir que você entenda de uma só vez. O caractere inicial deve ser um alfabeto em vez de um número ou um caractere especial.

• Sem palavras-chave como int, float

As seguintes são algumas declarações erradas.

int $ a;

int 89b;

Aqui estão as afirmações corretas:

int r;

int super_24;

int openTheDoor;

Etapa 4: Tipo de Variável

Exceto para declarar dados inteiros, podemos declarar dados decimais (também chamados de dados de ponto flutuante) com a palavra-chave float.

float b = 0,5

Devemos ter em mente o tipo de tipo de dado que usamos em nossa declaração. Se tivermos usado a palavra-chave int, a última atribuição não pode escrever i ＝ 0,5 ou algo parecido, ou o programa se tornará um erro. Mas se escrevermos de forma oposta, está tudo bem. Por exemplo, float i = 5 é a gramática certa, mas o programa a reconhecerá como um número decimal.

Algumas das variáveis já foram definidas pelo sistema. Não temos que declará-los por nós mesmos. Tal como a anteriormente referida "largura, altura", irá automaticamente adquirir a largura e altura da tela do computador. Alta frequência de uso que o designer a define diretamente como uma variável padrão, a fim de torná-la mais conveniente para nós.

Etapa 5: Operador

Os seguintes são operadores de processamento:

+ mais

- menos

* multiplicar

divide

％ Módulo de resto

Você deve estar familiarizado com todos esses operadores, exceto%. Parece muito estranho porque seu resultado é o resto. 9% 3 é 0. Enquanto 9% 5 é 4.

Os operadores podem ser usados entre atribuições e variáveis.

[tema cceN_cpp = "amanhecer"] int a = 1; // declara a variável inteira a, a atribuição é 1. int b = 2; // Declara a variável inteira b, a atribuição é 2. int c; // Declara a variável inteira c. c = a + b; // Mais duas atribuições e atribui seu resultado a c. imprimir (c); // Variável de saída c.

[/cceN_cpp]

Etapa 6: Resultado da operação:

O resultado da saída não será exibido na janela, mas no console na parte inferior.

O método de escrita da quarta linha parece bastante estranho. Mas é um formato comum freqüentemente usado durante a atribuição do computador. O lado esquerdo do símbolo igual deve ser a variável atribuída final, enquanto o lado direito deve ser o processo de operação.

A função de impressão na quinta linha pode imprimir variáveis no console, que geralmente é usado para testar a condição de saída de dados.

Etapa 7: Regulamento de Operação

Um ponto problemático no processamento é que temos que esclarecer o tipo de variável. Devemos prestar atenção especial ao processo de número de ponto flutuante e tipo inteiro.

imprimir （6/5）; // resultado 1

A operação entre inteiros terá um novo inteiro. 6 dividido por 5 é 1,2. Mas o resultado de saída do programa é 1. Isso é contrário à nossa intuição. O programa não tratará da rodada, mas excluirá o número atrás da vírgula decimal.

imprimir (6.0 / 5.0); // resultado 1.2

A operação entre pontos flutuantes resultará em um novo número de ponto flutuante. Se o resultado real for 1,2, o resultado de saída do programa será o mesmo.

imprimir (6 / 5,0); // resultado 1.2

imprimir (6,0 / 5); // resultado 1.2

Finalmente, é a mistura de número inteiro e número de ponto flutuante. O resultado final da saída será 1,2.

• Na verdade, você deve ter em mente que o objetivo desse desenho de regulamento é não perder a precisão dos dados. Portanto, se um elemento for um número de ponto flutuante, o resultado também será um número de ponto flutuante.

Etapa 8: função de configuração e função de desenho

Anteriormente, falamos sobre uma pilha de conhecimentos de aterramento. Agora, finalmente chegamos para tocar algo interessante. A configuração e o desenho de funções são equivalentes às funções principais de processamento. Essas duas funções são muito especiais. Ele pode controlar o procedimento do programa. Um programa comparativamente complicado incluirá essas duas funções porque são a estrutura básica do programa. Formato:

void setup () {

}

void draw () {

}

O uso especial torna seu formato de invocação diferente das outras funções. Temos que adicionar "void" antes do nome da função, que significa nenhum "valor retornado". Atrás do nome da função, temos que adicionar parênteses e colchetes.

[cceN_cpp theme = "dawn"] void setup () {print (1); } void draw () {print (2); } [/cceN_cpp]

Vamos dar uma olhada em um exemplo:

Ao pressionar o botão de operação, o console emitirá primeiro "1" e, em seguida, produzirá constantemente "2" até que você tenha pressionado o botão de parada ou fechado a janela.

O código entre parênteses na função de configuração será implementado apenas uma vez. Enquanto o código dentro da função desenhar será executado constantemente em circulação (implementação padrão 60 vezes / segundo).

Por causa desse caractere, a configuração geralmente é usada para inicializar as propriedades do ambiente, como largura e altura da tela, cor de fundo e todos os tipos de atribuição de variáveis. Embora frequentemente coloquemos funções de desenho em desenho de função, a fim de gerar gráficos continuamente alterados.

Etapa 9: Círculo em movimento horizontal

Com a função draw, podemos começar a criar nossas animações. O método de escrever efeitos de animação por Processing é bastante “estranho”. Não tem nenhum comando existente. Por exemplo, designe uma determinada forma para fazer curvilínea.

Temos que definir esses detalhes por nós mesmos. Você tem que dizer ao programa que tipo de gráfico cada quadro precisa definitivamente.

Escreva o seguinte código nele (agora vamos começar a fazer isso manualmente):

[tema cceN_cpp = "amanhecer"] int x; int y; configuração vazia () {tamanho (300, 300); x = 0; y = altura / 2; } void draw () {background (234, 113, 107); noStroke (); elipse (x, y, 50, 50); x = x + 1; }

[/cceN_cpp]

Esta seção do código exibe um círculo de movimento. As primeiras variáveis declaradas x, y são usadas para armazenar a posição da coordenada. Suas atribuições são executadas na configuração da função. O código-chave é o seguinte dentro do desenho da função:

x = x + 1

Não veja isso como uma equação matemática, ou será muito estranho. Aqui, "＝" é um símbolo de atribuição. Representa colocar os números certos na variável esquerda. Suponha que x seja 50, uma vez que o código comece a funcionar, o lado direito de "＝" é igual a 50 + 1, ou seja, 51. O resultado final será atribuído à variável x. Portanto, o valor de x torna-se 51.

Siga o procedimento do programa, toda vez que a função draw operar uma vez, o valor de x aumentará 1. Portanto, toda vez que desenharmos, o círculo se moverá uma direção de pixel horizontalmente para a direita, em comparação com o quadro anterior. Portanto, o gráfico torna-se dinâmico.

• Para fazer com que o código tenha uma melhor legibilidade, temos que reservar um certo espaço antes de cada linha de código entre colchetes. E deve ser o mais alinhado possível. Pressione TAB ou vários espaços em branco, ele pode retrair.

• O símbolo de espaço em branco e quebra de linha no programa não influenciará o programa. Então está tudo bem se digitarmos mais ou menos.

Aqui está outra maneira mais simples de expressá-lo. Para fazer o círculo variável aumentar 1 automaticamente, temos que escrevê-lo no seguinte formato.

círculo ＝ círculo ＋1

Muito inconveniente! Se o nome da variável for mais longo, temos que digitar mais palavras. Portanto, nossos preguiçosos predecessores têm uma ideia como essa.

círculo ＋＋

Não é muito simples? Significa aumentar 1 automaticamente. Semelhante a ele, existe - -, que significa diminuir 1 automaticamente.

Mas se esperamos que a quantidade de aumento automático seja outro número como 2, temos que tentar outra expressão.

círculo + = 2

Isso é igual a

círculo = círculo + 2

Da mesma forma, existe - ＝, / =, * =.

Etapa 10: direção do movimento

A direção em que o gráfico se move depende de como você altera suas coordenadas. Se for alterado para y ＝ y ＋ 1, o círculo se moverá para baixo. Se xey aumentarem 1, o círculo se moverá para baixo na parte inferior direita. Se o escrevermos como um símbolo de menos, ele se moverá na direção oposta.

[tema cceN_cpp = "amanhecer"] int x, y; // Pode declarar várias variáveis ao mesmo tempo, use vírgula para separar. configuração vazia () {tamanho (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); elipse (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Taxa de Movimento

Lembra-se dos 60 quadros por segundo padrão no desenho da função? De acordo com essa taxa, o círculo acima se moverá 60 pixels por segundo para a direita.

Se quisermos alterar a taxa de movimento do gráfico, existem dois métodos: um é aumentar o valor x todas as vezes, pois ele será alterado.

x ＝ x ＋ 10

Melhorou a velocidade em 10 vezes em comparação com o original!

O outro método é alterar a frequência de atualização da tela. taxa de quadros()

Esta função pode alterar a frequência de transmissão da tela. Escreva frameRate (10) na configuração da função, ele mudará os 60 quadros por segundo originais em 10 quadros por segundo. A velocidade é reduzida 6 vezes do que antes.

Etapa 11: Plano de fundo esquecido

Todos os exemplos anteriores gravam o plano de fundo no desenho da função. Você já pensou em escrevê-lo na configuração de funções? Haverá alguma diferença? Agora, vamos atualizar o exemplo de movimento horizontal.

[tema cceN_cpp = "amanhecer"] int x, y; configuração vazia () {tamanho (300, 300); antecedentes (234, 113, 107); x = 0; y = altura / 2; } void draw () {noStroke (); elipse (x, y, 50, 50); x + = 1; } [/cceN_cpp]

O que aconteceu? Talvez ele não consiga entender o motivo da produção do problema de maneira adequada. Exclua a função noStroke, adicione o stroke novamente e veja o caminho do movimento do círculo.

Oh, é porque o círculo criado anteriormente não foi excluído! Como a configuração da função opera apenas uma vez, se escrevermos fundo acima dela, ela preencherá o fundo apenas uma vez e, posteriormente, não terá mais efeito. O plano de fundo da função é como a ferramenta balde de tinta. Depois de usado, ele cobrirá todo o conteúdo da tela em vez de definir apenas uma cor de fundo. Nós o escrevemos antes do desenho da função para que o quadro anterior seja coberto toda vez que criamos um novo padrão. Portanto, o círculo pode funcionar como esperávamos. Exceto para lembrar os usos de cada função, temos que pensar sobre a posição do código. Muito tempo, subir ou descer uma linha para o código e escrevê-la dentro ou fora de uma chave, criará efeitos bastante diferentes. A direção do código é bidimensional. Se aparecer um bug, temos que calibrar nesta duas dimensões.

• Este método de desenho não repetido pode criar um efeito muito especial se for usado corretamente. Você pode copiar o código a seguir e experimentar.

[cceN_cpp theme = "dawn"] void setup () {size (400, 400); } void draw () {elipse (largura / 2-mouseX, altura / 2-mouseX, mouseY, mouseY); elipse (largura / 2-mouseX, altura / 2 + mouseX, mouseY, mouseY); elipse (largura / 2 + mouseX, altura / 2-mouseX, mouseY, mouseY); elipse (largura / 2 + mouseX, altura / 2 + mouseX, mouseY, mouseY); } [/cceN_cpp]

Aqui, usamos as variáveis mágicas mouseX e mouseY. Posteriormente, falaremos sobre isso em detalhes.

Etapa 12: Agitando o Círculo

E se eu quiser que a direção do movimento do círculo se torne irregular? Com a função aleatória de forma inteligente, você pode perceber esse efeito também. Aleatório é uma função freqüentemente usada. Ele pode ser usado para gerar funções aleatórias. É como um espírito sem trilhas. Uma vez relacionado às variáveis, você não pode imaginar o que acontecerá a seguir.

Formato de invocação:

aleatório (alto)

Alto representa o limite superior aleatório e o limite inferior padrão é 0. Por exemplo, aleatório (10). Ele produzirá um número de 0 a 10 aleatoriamente (0 está incluído, mas 10 não está incluído).

aleatório (baixo, alto)

Se definirmos dois parâmetros, ele retornará ao valor aleatório entre eles. Por exemplo, aleatório (5, 10). Ele produzirá um número de 5 a 10 aleatoriamente (5 está incluído, mas 10 não está incluído).

Exemplo:

[tema cceN_cpp = "amanhecer"] float x;

x = aleatório (50, 100);

imprimir (x); [/cceN_cpp]

Cada vez que executamos o programa, o console produzirá valores diferentes.

• Nota: Os valores criados pela função aleatória pertencem ao tipo de ponto flutuante (tipo de número decimal). Se quisermos atribuir um valor a uma variável inteira, temos que transformá-lo por meio da função int (). A transformação não obedece ao arredondamento, mas exclui a parte decimal diretamente. Assim, a saída de int (random (5)) tem apenas 5 possibilidades: 0, 1, 2, 3, 4.

Depois de nos familiarizarmos com o uso da função random, podemos entrar diretamente no caso abaixo.

[tema cceN_cpp = "amanhecer"] int x, y; configuração vazia () {tamanho (300, 300); x = largura / 2; y = altura / 2; } void draw () {background (234, 113, 107); noStroke (); x + = int (aleatório (-5, 5)); y + = int (aleatório (-5, 5)); elipse (x, y, 50, 50); }

[/cceN_cpp]

Os antigos valores de coordenadas adicionados são fixos. Somente se aumentarmos um valor aleatório, o círculo se moverá em uma direção indefinida. Com o maior intervalo aleatório, ele treme com mais frequência. Uma vez que a mudança de valor entre os quadros é saltada, o movimento não será mais suave. Enquanto o primeiro quadro está em (150, 150), o último se moverá para a posição de (170, 170) em um vislumbre.

Etapa 13: Migrando o Círculo

Migrando Círculo

Isso criará um movimento suave? O ruído da função pode nos ajudar. Tem um ritmo melhor do que o aleatório padrão. E os números aleatórios gerados aleatoriamente são contínuos.

Formato de invocação:

ruído （t）

O ruído da função não pode definir sua faixa de saída. O programa define que ele só pode gerar números de ponto flutuante de 0 a 1 e a entrada fixa só pode ter saída fixa.

[tema cceN_cpp = "amanhecer"] float x = ruído (5); float y = ruído (5); imprimir (x, y); [/cceN_cpp]

Como os parâmetros de entrada acima são 5, os resultados de saída são os mesmos. Então, como alterar o resultado? A resposta é alterar os parâmetros de entrada dinamicamente. Na verdade, podemos considerar o ruído como uma trilha de voz ilimitada, os parâmetros de entrada são como "o tempo presente". Se a entrada do parâmetro for contínua, a saída também será contínua.

[tema cceN_cpp = "amanhecer"] float x, y; configuração vazia () {tamanho (700, 100); x = 0; fundo (0); } void draw () {x + = 1; y = ruído (frameCount / 100,0) * 100; noStroke (); elipse (x, y, 2, 2); }

[/cceN_cpp]

Nesse caso, desenhamos o caminho de mudança de Y para que possamos entender melhor o ruído da função.

• Dentre eles, a variável frameCount obterá o quadro atual. Diferente da largura, altura do anterior, é estável sem qualquer alteração. Além disso, começa a aumentar a partir de 0. Se o entendermos por nosso gráfico animado de exibição inicial, ele mostra a página para a qual nos voltamos (em vez da concepção do tempo no programa).

• frameCount é uma variável inteira. Dividido por outra variável inteira, o programa irá, por padrão, processar o resultado como um número inteiro. Para melhorar a precisão do resultado, precisamos alterar 100 para 100,0. Dividido por um número de ponto flutuante, obteremos também um número de ponto flutuante.

• Para mudar o eixo Y de 0 para 100, temos que multiplicar o resultado do ruído por 100. Assim, podemos controlar a faixa de valores aleatórios.

Alguns de vocês bons em pensar podem perguntar "por que temos que dividir frameCount por 100? Não é possível escrever frameCount diretamente?" Claro que você pode! Mas aqui, para melhor exibir as características do ruído da função, diminuímos a "taxa de transmissão". O exemplo abaixo mostra as alterações do valor de saída em diferentes taxas de alteração.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; configuração vazia () {tamanho (700, 500); x = 0; fundo (0); } void draw () {x + = 1; y1 = ruído (frameCount) * 100; y2 = ruído (frameCount / 10,0) * 100; y3 = ruído (frameCount / 100,0) * 100; y4 = ruído (frameCount / 1000,0) * 100; y5 = ruído (frameCount / 10000,0) * 100; noStroke (); elipse (x, y1, 2, 2); elipse (x, y2 + 100, 2, 2); elipse (x, y3 + 200, 2, 2); elipse (x, y4 + 300, 2, 2); elipse (x, y5 + 400, 2, 2); curso (80); linha (0, 100, largura, 100); linha (0, 200, largura, 200); linha (0, 300, largura, 300); linha (0, 400, largura, 400); }

[/cceN_cpp]

Você pode considerar a alteração dos parâmetros no ruído da função como uma barra de progresso. Alterar o parâmetro é como mover a barra de progresso. Portanto, quando o escopo de alteração dessa "faixa de voz" for maior, as características contínuas de frente e verso do valor de saída serão mais fracas. (Podemos imaginar o que acontecerá se transmitirmos uma música ou um vídeo com velocidade 2 vezes maior, 5 vezes a velocidade, 20 vezes a velocidade). Quando o escopo é maior do que um determinado valor, não há grande diferença para funcionar aleatoriamente na geração de valor.

Se você pode entender todos os exemplos acima, então você sentirá que nada pode ser mais fácil de desenhar um círculo migratório. Você também pode compreender os princípios internos.

[tema cceN_cpp = "amanhecer"] float x, y; configuração vazia () {tamanho (300, 300); x = 0; } void draw () {background (234, 113, 107); x = ruído (frameCount / 100,0 + 100) * 300; y = ruído (frameCount / 100,0) * 300; noStroke (); elipse (x, y, 50, 50); }

[/cceN_cpp]

Agora, o movimento é mais interessante como um giroscópio giratório.

• A razão pela qual a variável x dentro do ruído da função tem que mais 100 é porque para separá-los por uma distância. Se os parâmetros de xy dentro do ruído da função forem iguais ou muito próximos, a mudança da coordenada x, y será próxima da mesma. Isso faz com que o movimento se torne muito mais aleatório.

Etapa 14: Círculo movido pelo mouse

A seguir, finalmente chegamos a duas variáveis que mais gosto: mouseX e mouseY. À primeira vista das duas concepções, meus olhos estão brilhando com luz. Porque é a forma mais direta de interagir com o gráfico. Podemos criar muitos programas interessantes com ele.

O caso é bastante simples:

[tema cceN_cpp = "amanhecer"] int x, y; configuração vazia () {tamanho (300, 300); x = 0; y = 0; } void draw () {background (234, 113, 107); noStroke (); x = mouseX; y = mouseY; elipse (x, y, 50, 50); }

[/cceN_cpp]

mouseX pode obter a coordenada x do mouse, enquanto mouseY pode obter a coordenada y.

• Vamos tentar mudar o símbolo positivo e negativo, ou trocar mouseX e mouseY.

Etapa 15: Fim

A partir desses comandos familiares, você pode conduzir o movimento dos gráficos. Com o conteúdo do último capítulo, use sua imaginação corretamente, você pode criar muitos efeitos animados interessantes.

Em nosso próximo capítulo, podemos ver exemplos mais abundantes. Ao mesmo tempo, usaremos funções matemáticas e as combinaremos com o movimento gráfico.

Este artigo é do designer Wenzy.

Etapa 16: Leituras relativas:

Orientação de programação interessante para designer - Processamento do toque inicial

Orientação de programação interessante para designer - crie seu primeiro programa de processamento

Este artigo é de:

Se precisar de ajuda, você pode entrar em contato: [email protected].