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

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

A matemática, para a maioria de vocês, parece inútil. O mais comumente usado em nossa vida diária é apenas adicionar, subtrair, multiplicar e dividir. No entanto, é bem diferente se você puder criar com o programa. Quanto mais você sabe, mais maravilhoso resultado obterá.

Etapa 1: Movimento e função

Deixe-me mostrar várias fotos desconhecidas para estimular seu paladar.

O que é isso? Agora, basta manter esta questão primeiro e depois você saberá e usará.

No último capítulo, aprendemos a configuração e o desenho de funções, que podem tornar os gráficos estáticos dinâmicos. No entanto, este formato de movimento é muito simples. Vamos usar o conhecimento de funções que dominamos antes para executar nossos gráficos com seus próprios personagens.

Quantas funções você pode reconhecer nas fotos acima? Qual é o tipo de relação que eles têm com o movimento? Agora vamos pegar uma função quadrática dela, adicionar alguns parâmetros aleatoriamente e ver o que vai acontecer. Por exemplo, y = x² / 100.

É assim que a imagem da função se parece. Copie o código abaixo.

[tema cceN_cpp = "amanhecer"] float x, y; configuração vazia () {tamanho (300, 300); fundo (0); x = 0; } void draw () {stroke (255); strokeWeight (2); y = pow (x, 2) / 100,0; // A função pow retornará à enésima potência do número de designação. (x, 2) representa o quadrado de x. O primeiro parâmetro é o número base e o segundo é o índice. ponto (x, y); x ++; } [/cceN_cpp]

Efeito de corrida

Em seguida, escolha a função pecado. Fórmula: y = 150 + sin (x).

Copie o seguinte código.

[tema cceN_cpp = "amanhecer"] float x, y; configuração vazia () {tamanho (300, 300); fundo (0); x = 0; } void draw () {y = height / 2 + sin (radianos (x)) * 150; // Função radiano transforma x em ângulo. x ++; curso (255); strokeWeight (2); ponto (x, y); } [/cceN_cpp]

Efeito de corrida

Este é o gráfico que obtemos após operar o código. E essas são suas trilhas de movimento. Comparado com o anterior, o resultado é óbvio. A imagem da função corresponde, na verdade, à trilha de movimento! É bastante simples. Você apenas tem que substituir o valor de x, y na coordenada. A primeira faixa que desenhamos é equivalente ao gráfico da função y = x² / 100. Enquanto a última faixa é igual ao gráfico da função y = 150 + sin (x). Mas no programa, a direção do eixo y é oposta. Portanto, em comparação com o gráfico original, a faixa ficará de cabeça para baixo. Agora, eu acho que você deve ter a sensação de que algumas questões difíceis que vinham assombrando sua cabeça por muito tempo são resolvidas imediatamente. É incrível que essas funções fantásticas que aprendemos antes possam ser usadas para controlar o movimento gráfico!

Etapa 2: para escrever a função

Listei várias funções usadas com freqüência abaixo. Espero que isso nos ajude a traduzir funções em códigos que possam ser reconhecidos pelo computador.

Portanto, a fórmula abaixo no programa deve ser escrita assim:

y = x² → y = pow (x, 2) ou y = sq (x)

y = x³ → y = pow (x, 3)

y = xⁿ → y = pow (x, n)

y = 4ⁿ → y = pow (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

Você também pode escrever aleatoriamente uma função no programa e ver como será sua trilha de movimento. Lembre-se de considerar a faixa de campo de valor e domínio de definição, ou seu gráfico ficará fora de sua tela.

TrigonometricFunction

Agora, vamos prosseguir para conhecer alguns escritos das funções trigonométricas.

Devemos prestar atenção que no programa a entrada do parâmetro da função relativo ao ângulo adota radianos. Assim, sin90 ° deve ser escrito em sin (PI ／ 2). Se você não estiver familiarizado com este método, você pode usar a função randians para transformar o ângulo em radianos de antemão e, em seguida, escrever sen （radianos (90)).

O uso de graus de função é comparativamente oposto. Ele pode transformar radianos em ângulos. Impressão de entrada (graus (PI / 2)) diretamente na área de edição e veja o que você obterá.

Etapa 3: controle o movimento gráfico com a função trigonométrica

Aqui está um caso para você ver o efeito real do movimento gráfico.

[tema cceN_cpp = "amanhecer"] float x, y; configuração vazia () {tamanho (700, 300); } void draw () {background (234, 113, 107); y = sin (radianos (x)) * 150 + 150; x ++; noStroke (); elipse (x, y, 50, 50); } [/cceN_cpp]

A função sin é uma função periódica. Seu valor mínimo é －1 e o valor máximo é 1. A altura da tela é 300. Referido a y = sin (radianos (x)) * 150 + 150, portanto, a faixa de alteração do valor y será bem controlada dentro de 0 a 300.

Círculo Giratório

Bem, finalmente chegamos à parte mais importante deste capítulo. Como desenhar um caminho circular em um programa? Como usar funções para exibi-lo? Deixe-me mostrar novamente as duas fotos que vimos no início deste artigo.

Na verdade, eles expuseram visualmente a relação entre as coordenadas da circunferência e a função trigonométrica. O movimento nas imagens acima é impulsionado pela variável independente θ em constante aumento. À esquerda está a imagem da função sen e cos, e à direita representa um ponto que faz movimento circular após ser mapeado. Não é muito inteligente? Não é mais misterioso. Você pode usar código para realizá-lo.

Um exemplo simples:

[cceN_cpp theme = "dawn"] float x, y, r, R, ângulo; configuração vazia () {tamanho (300, 300); r = 20; // Diâmetro do círculo R = 100; // Raio do caminho do movimento x = 0; ângulo = 0; y = altura / 2; } void draw () {background (234, 113, 107); traduzir (largura / 2, altura / 2); // Mova o ponto original para o centro da tela. noStroke (); x = R * cos (ângulo); y = R * sin (ângulo); elipse (x, y, r, r); ângulo + = 0,05; } [/cceN_cpp]

Olhar! Um círculo giratório aparece! Aqui, a variável independente não está mais em ângulo de bit de aumento constante (igual a θ na imagem). É um ângulo. Dentre eles, xy têm coeficiente R relativamente multiplicado, o que leva à extensão do raio do movimento do círculo (R é para o raio). Se não for para multiplicar R, seu caminho de movimento será limitado no intervalo de -1 a 1.

Por que não usar o aumento de x? De acordo com a propriedade da própria função, qualquer x dentro do domínio de definição tem o único y para combiná-lo. Portanto, no sistema de coordenadas de dimensão retangular plana, você não pode encontrar uma “função simples” para desenhar um círculo diretamente. Isso quer dizer que não podemos mais usar este formato.

y = (a expressão desconhecida de x?);

x ＋＋;

Portanto, temos que mudar nossa ideia. Escolha outro ângulo como variável independente e, a seguir, use as funções sin e cos para transformá-lo em coordenadas horizontal e vertical.

x = R * cos (ângulo);

y = R * sin (ângulo);

ângulo + = 0,05;

Alguns de vocês podem se perguntar por que ele pode exibir o caminho do movimento do círculo. De acordo com a definição de função trigonométrica, podemos facilmente raciocinar essa função como a razão do lado oposto para a hipotenusa; função cos é a razão de adjacente à hipotenusa. Não importa onde esteja o ponto do círculo, r (raio) permanecerá inalterado. Portanto, podemos concluir a expressão da coordenada xey da coordenada y.

Como esta não é uma orientação matemática, aqui vou parar de exibir mais conhecimento sobre a função trigonométrica para você. Se você quiser saber ou apenas esquecer, você pode tentar revisá-lo novamente.

Claro, está tudo bem se você não consegue entendê-lo totalmente. Você só precisa saber usá-lo para desenhar um círculo. Isso também é uma espécie de “ideia de programação”. Posteriormente, iremos freqüentemente invocar alguns dos módulos existentes feitos por outros para realizar um certo tipo de função. Apenas não se esforce para saber em detalhes.

No entanto, as funções sin e cos são comuns. Se você quiser fazer uma criação de nível superior, é melhor tentar conhecê-lo completamente. Se essa questão por si só pode nos levar a aprender mais conhecimentos matemáticos, há coisas mais interessantes esperando que você descubra.

Estas são imagens intimamente relacionadas à função trigonométrica.

Etapa 4: Sistema de Coordenadas de Movimento

Os efeitos anteriores são todos sobre alterações de coordenadas gráficas. O próprio sistema de coordenadas é estático. Na verdade, podemos fazer o movimento das coordenadas para obter o efeito de movimento. É como se as pessoas na praia olhassem para as outras pessoas no barco. Para as pessoas no barco, o barco é estático. Mas e se o próprio barco estiver se movendo, então as pessoas no barco se moverão com ele. Os primeiros casos são todos sobre “pessoas correndo no barco”. Na verdade, o barco não se move. A seguir estão algumas funções comuns para alterar o sistema de coordenadas.

Traduzir função

A função traduzir, sobre a qual falamos anteriormente, é usada para mover o sistema de coordenadas do gráfico horizontalmente.

Formato de invocação:

traduzir (a, b)

O primeiro parâmetro significa mover para a direção positiva do eixo x para pixels. O segundo parâmetro significa mover para a direção positiva do eixo y para b pixels.

Compare os dois códigos e tente encontrar qualquer diferença. (Para simplificar o código, podemos excluir o tamanho da função, a largura e a altura da tela são padronizadas como 100.)

Antes de usarmos:

elipse (0, 0, 20, 20);

Depois de usarmos:

traduzir (50, 50);

elipse (0, 0, 20, 20);

Rotação de função

Formato de invocação:

girar (a)

É usado para girar o sistema de coordenadas. Quando o parâmetro for positivo, ele escolherá o ponto original como ponto central e girará no sentido horário. A entrada do parâmetro é igual à função trigonométrica para usar radianos.

Antes de usar:

elipse (50, 50, 20, 20);

Depois de usar:

girar (radianos (30));

elipse (50, 50, 20, 20);

O efeito no programa é fazer o círculo girar em torno do ponto central da coordenada no sentido horário por 30 graus.

Escala de função

Formato de invocação:

escala (a)

Esta função pode diminuir o zoom do sistema de coordenadas. O valor é para escala. Quando o parâmetro está além de 1, aumente o zoom; se for inferior a 1, diminua o zoom.

Antes de usar:

elipse (0, 0, 20, 20);

Depois de usar:

escala (4);

elipse (0, 0, 20, 20);

O círculo na imagem acima é ampliado para quatro vezes o tamanho original. Além disso, você pode usar dois parâmetros para diminuir o zoom nas direções do eixo xey separadamente.

escala (4, 2);

elipse (0, 0, 20, 20);

Superposição da função de transformação

Aqui, a superposição tem tudo a ver com mudanças em relação ao sistema de coordenadas atual. Em outras palavras, os efeitos podem ser sobrepostos.

traduzir (40, 10);

traduzir (10, 40);

elipse (0, 0, 20, 20);

Seu efeito final será igual a

traduzir (50, 50);

elipse (0, 0, 20, 20);

O mesmo para girar a função

girar (radianos (10));

girar (radianos (20));

elipse (50, 50, 20, 20);

Igual a

girar (radianos (30));

elipse (50, 50, 20, 20);

Ambas funcionam escalar e girar no centro do ponto original para escalar e girar. Se quisermos obter o efeito de rotação com uma posição central em (50, 50), temos que pensar da maneira oposta. Em primeiro lugar, mova o ponto original para a posição de (50, 50) e, em seguida, adicione a função de transformação rotativa. Por fim, faça seu gráfico pintado no ponto original.

Antes de usar:

elipse (50, 50, 50, 20);

Depois de usar:

traduzir (50, 50);

girar (radianos (45));

elipse (0, 0, 50, 20); // Para ver a mudança do ângulo de rotação, fizemos uma oval.

Pode parecer torção. Você apenas tem que praticar mais para entender. (Você também pode tentar alterar a sequência de translação e rotação da função para ver a diferença.)

Movimento horizontal e movimento circular

Nos casos a seguir, vamos perceber o efeito de movimento por meio da mudança do sistema de coordenadas. Ao mesmo tempo, gostaria de pedir que você consulte o exemplo do capítulo anterior. Na maioria das vezes, você descobrirá que, para obter um certo tipo de efeito, é possível usar um método totalmente diferente.

Etapa 5: Movimento horizontal

[tema cceN_cpp = "amanhecer"]

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

A coordenada do círculo não é alterada, mas seu sistema de coordenadas é alterado.

Movimento de rotação

[tema cceN_cpp = "amanhecer"] flutuante r, R, ângulo; configuração vazia () {tamanho (300, 300); r = 20; // Dimensão do círculo R = 100; // Raio da trilha de movimento} void draw () {background (234, 113, 107); traduzir (largura / 2, altura / 2); // Mova o ponto original para o centro da tela. girar (ângulo); noStroke (); elipse (0, R, r, r); ângulo + = 0,05; } [/cceN_cpp]

Não é muito mais claro e simples do que a função trigonométrica? Você pode ter uma pergunta aqui. Tome o código rotativo como exemplo. Obviamente, a função de transformação mencionada acima é relativa e permite a sobreposição. Se escrevermos traduzir (largura / 2, altura / 2) em desenho de função, isso não significa que toda vez que o desenho de função opera pela primeira vez, o sistema de coordenadas se moverá uma distância na direção inferior direita da base original? Razoavelmente, ele não ficará no centro da tela para sempre.

Você pode entender desta forma. Uma vez que o código no desenho da função tenha concluído uma operação de cima para baixo, o sistema de coordenadas retornará ao status inicial na segunda operação. O ponto original do sistema de coordenadas será padronizado para retornar ao canto superior esquerdo. Portanto, se quisermos fazer com que o sistema de coordenadas mude continuamente, os parâmetros de ângulo dentro da função de rotação devem aumentar constantemente seu valor.

Acessar Status do Coordinate

Às vezes, não queremos que a mudança de status do sistema de coordenadas seja baseada no anterior. Neste momento, temos que usar as funções pushMatrix e popMatrix. As duas funções costumam aparecer em casal. A função pushMatrix é anterior a popMatrix. Eles não podem ser usados isoladamente, ou dará errado.

Exemplo:

[cceN_cpp theme = "dawn"] pushMatrix (); // Armazena o status do sistema de coordenadas translate (50, 50); elipse (0, 0, 20, 20); popMatrix (); // Lê o status do sistema de coordenadas rect (0, 0, 20, 20); [/cceN_cpp]

Neste exemplo, antes de usar translate (50, 50), usamos a função pushMatrix.para armazenar o status atual do sistema de coordenadas. Este, ao mesmo tempo, é o status inicial. Depois de desenharmos um círculo e, em seguida, implementarmos popMatrix, ele voltará a este status. Neste momento, implemente a função rect, você descobrirá que ela não sofreu a influência da função translate, em vez disso, desenhou um quadrado no canto superior esquerdo do ponto original.

Além disso, as funções pushMatrix e popMatrix permitem o aninhamento.

Por exemplo

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

Para mostrar sua relação de forma intuitiva, escolhemos o formato condensado.

Movimento combinado ou movimento em movimento?

Agora começa a segunda onda da parte importante. Apenas tente seguir em frente. Anteriormente, usamos uma metáfora de barco e pessoas. Você já pensou: e se fizermos as pessoas e o barco se moverem, que tipo de sentimento as pessoas na praia terão?

Como combinar movimento horizontal com movimento giratório do sistema de coordenadas. O objetivo aqui é, na verdade, mover-se apenas em uma direção.

[tema cceN_cpp = "amanhecer"] int x, y; ângulo de flutuação; configuração vazia () {tamanho (300, 300); antecedentes (234, 113, 107); noStroke (); x = 0; // Quando o valor inicial de x é 0, podemos negligenciar esta frase do código. Ao declarar a variável, o valor padrão é 0. y = 0; // Igual ao anterior. ângulo = 0; // Igual ao anterior. } void draw () {ângulo + = 0,25; y--; traduzir (largura / 2, altura / 2); pushMatrix (); girar (ângulo); elipse (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

E há movimento circular e escala do sistema de coordenadas.

[cceN_cpp theme = "dawn"] float x, y, ângulo; configuração vazia () {tamanho (300, 300); antecedentes (234, 113, 107); noStroke (); } void draw () {ângulo + = 0,01; x = sin (ângulo) * 100; y = cos (ângulo) * 100; traduzir (largura / 2, altura / 2); pushMatrix (); escala (1 + 0,1 * sin (ângulo * 10)); elipse (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Não se deixe enganar por isso! O ponto do círculo está realmente fazendo um movimento circular. Não é difícil entender se compararmos com o dimensionamento de uma câmera de vídeo. Uma câmera de vídeo que se move constantemente para a frente ou para trás está capturando um ponto em movimento circular.

Surpreso? Estas são funções básicas simples. Mas com combinações diferentes, podemos criar muitos efeitos diferentes. Até agora, minha exposição pára de modo a ceder algum espaço para sua exploração.

Etapa 6: uso abrangente

Está chegando ao fim em breve para este capítulo. Nos dois últimos capítulos, apresentei o método básico de movimento gráfico. Acredito que você possa ter um entendimento mais profundo sobre isso, em comparação com suas ideias iniciais. Por último, aqui está algum exemplo completo para sua referência.

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; float angle1, angle2; configuração vazia () {tamanho (300, 300); r = 12; R = 120; ângulo1 = 0; ângulo 2 = PI / 4; } void draw () {background (234, 113, 107); noStroke (); traduzir (largura / 2, altura / 2); ângulo1 + = 0,02; ângulo2 + = 0,06; x1 = R * sen (ângulo 1); y1 = R * cos (ângulo 1); x2 = R / 2 * sen (ângulo 2); y2 = R / 2 * cos (ângulo 2); elipse (x1, y1, r / 2, r / 2); elipse (x2, y2, r, r); elipse (-x1, -y1, r / 2, r / 2); elipse (-x2, -y2, r, r); elipse (x1, -y1, r / 2, r / 2); elipse (x2, -y2, r, r); elipse (-x1, y1, r / 2, r / 2); elipse (-x2, y2, r, r); curso (255); strokeWeight (3); linha (x1, y1, x2, y2); linha (-x1, -y1, -x2, -y2); linha (x1, -y1, x2, -y2); linha (-x1, y1, -x2, y2); } [/cceN_cpp]

Este exemplo não contém nenhum conhecimento além do nosso capítulo anterior apresentado.

Por quais pontos corresponde? Quais linhas correspondem? Eu também não consigo entender. Mas lembro que deriva de uma pequena seção de código.

Essa é a natureza de seu movimento. As linhas restantes são apenas efeito de espelho. Se continuar seguindo esta orientação, você pode fazer uma versão atualizada e adicionar um controlador ao seu gráfico para alterar o status do movimento gráfico em tempo real.

O ponto interessante da programação reside em que você pode projetar ou combinar regulamentos. No entanto, o que será o programa final depende da sua habilidade. Normalmente, os designers têm uma imaginação gráfica poderosa. Você pode esboçar uma imagem em sua cabeça e, em seguida, tentar traduzi-la em código. Além disso, você pode começar a partir do código e dos próprios regulamentos, funções de design e variáveis à vontade. Lembre-se de que o processamento é o seu esboço e o código são os seus pincéis! Apenas espalhe suas idéias livremente!

Etapa 7: END

Por último em nosso capítulo, vamos voltar a uma questão que preservamos por muito tempo desde o início. Qual é a utilidade de gastar tanto esforço para fazer uma foto com o programa? Depois de aprender este capítulo, você descobrirá que há muitos métodos de jogo esperando para você explorar.

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; configuração vazia () {tamanho (500, 500); } void draw () {background (200, 0, 0); browX = 150 + sin (frameCount / 30,0) * 20; earD = 180 + sin (frameCount / 10,0) * 20; eyeD = 60 + sin (frameCount / 30,0) * 50; faceD = 300; strokeWeight (8); elipse (175, 220, earD, earD); elipse (largura - 175, 220, orelhaD, orelhaD); ret (100, 100, faceD, faceD); linha (browX, 160, 220, 240); linha (largura-browX, 160, largura-220, 240); preencher (aleatório (255), aleatório (255), aleatório (255)); elipse (175, 220, eyeD, eyeD); elipse (largura-175, 220, olhoD, olhoD); preencher (255); ponto (largura / 2, altura / 2); triângulo (170 - cos (frameCount / 10,0) * 20, 300 - sin (frameCount / 10,0) * 20, largura - (170 + cos (frameCount / 10,0) * 20), 300 + sin (frameCount / 10,0) * 20, 250, 350); } [/cceN_cpp]

Não é mágico para gráficos dinâmicos? Aqui eu não mostro muitos casos. Você pode ser capaz de criar um efeito muito melhor do que eu. A vantagem de desenhar com o programa é que você pode brincar com cada pixel. Como seu gráfico não é um bitmap, todos os pontos-chave em seu gráfico são controláveis. Ele pode perceber alguns efeitos que outro software não consegue perceber.

Se você tem um coração que quer quebrar tudo e combiná-lo novamente, o programa de estudos o ajudará muito a concretizar essa ideia.

Este artigo é do designer Wenzy.

Etapa 8: 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

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

Se você tiver alguma dúvida, pode enviar um e-mail para [email protected].

Este artigo é de: