Orientação de Programação Interessante para Designer - Controle de Processo do Programa - Declaração de Loop: 8 Passos

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

Controle de Processo do Programa - Declaração de Loop

A partir deste capítulo, você entrará em contato com uma importante e poderosa declaração de ponto-loop de conhecimento.

Antes de ler este capítulo, se você deseja desenhar 10.000 círculos no programa, você só pode fazer com um método terrível. Isso é para escrever 10.000 linhas de código de elipse. Aqueles designers de código preguiçosos que querem melhorar a eficiência por todos os meios, definitivamente não permitiriam que isso acontecesse. Portanto, a instrução de loop é criada. Com esta declaração, você pode sentir intuitivamente o poder da automação do computador.

Etapa 1: For Loop

Existem várias instruções de loop, entre as quais a mais amplamente usada é For Loop. Todos nós sabemos que o sorteio de funções opera continuamente em circulação. Comece da primeira frase no início, ele irá implementar de cima para baixo até a última frase. Depois de terminar uma operação, ela começará novamente a partir da primeira frase. A instrução For é um pouco semelhante à função draw. O código dentro da instrução pode ser executado repetidamente.

Aqui está sua estrutura gramatical:

Para (expressão 1; expressão 2; expressão 3) {

Loop body

}

Obviamente, as sentenças dentro do corpo do loop são o que esperávamos que fossem implementadas repetidamente. A expressão 1 é usada para inicializar e atribuir o primeiro valor à variável de loop. A expressão 2 é para a condição de loop. A expressão 3 atualizará o valor da variável de loop.

O que é variável de loop? Na verdade, é equivalente a uma variável local. Vamos dar uma olhada em uma redação completa.

para (int i = 0; i <10; i ++) {

Loop body

}

Para realizar a função de loop, a instrução for depende principalmente de uma variável local, que será usada no encerramento do loop. A variável local no exemplo acima é i. A expressão 1 concluiu a inicialização da variável local. Posteriormente, toda vez que o loop operar pela primeira vez, essa variável deve ser atualizada. Entre o exemplo acima, i ++ na expressão 3 é usado para realizar a função de atualização. Por meio dele, a variável aumentará 1 a cada atualização. No final, o código dentro do corpo do loop não pode ser executado indefinidamente, caso contrário, as últimas instruções não podem ser executadas. Portanto, precisamos de uma condição terminal. O Express 2 é apenas para isso. Aqui, o programa julgará se i é menor que 10. Se for, continue a operar. Se não estiver, saia do loop.

Portanto, a seqüência de operação da instrução for é exatamente assim.

Expressão 1 (inicialização de variável local)

Expressão 2 (satisfeito, depois continue operando)

Corpo circular (primeira circulação)

Expressão 3 (atualização)

Expressão 2 (satisfeito, depois continue operando)

Corpo do laço (segunda circulação)

Expressão 3 (atualização)

Expressão 2 (satisfeito, depois continue operando)

Corpo circular (terceira circulação) …

Expressão 3 (atualização)

Expressão 2 (não satisfeito, então saia do loop)

Você pode simular essa sequência de execução em sua cabeça várias vezes. Mas é impossível entender realmente o código sem digitá-lo com as mãos ao menos uma vez. Quando queremos descobrir um conceito estranho, podemos imprimir o valor no console por meio da instrução println.

Exemplo de código (5-1): configuração void () {

para (int i = 0; i <10; i ++) {

println ("executar");

}

}

Você pode contar o número de saídas de execução no console. Aqui, é exatamente 10. Isso informa quantas vezes o código no corpo do loop foi executado. No entanto, ainda não podemos detectar quais mudanças realmente aconteceram no loop. Portanto, podemos tentar alterar o caractere "correr para a variável" i "e ver o que vai acontecer.

Exemplo de código (5-2): void setup () {

para (int i = 0; i <10; i ++) {

println (i);

}

}

Agora, podemos ver que o valor i no corpo do loop está aumentando continuamente. Posteriormente, podemos usar esse valor para entender o processo atual do loop.

No exemplo de código (5-2), o valor de i é alterado de 0 para 9. Em comparação com os tempos de loop reais, parece sempre ter 1 a menos. Se você não se acostumar com isso, a expressão entre colchetes de instrução for pode ser escrita da seguinte forma:

para (int i = 1; i <＝ 10; i ++)

Portanto, i corresponde corretamente aos tempos de loop. O significado de "<＝" é menor e igual a. Portanto, quando i for igual a 10, ele ainda atenderá à condição. Portanto, ele operará mais uma vez em comparação com ser escrito em i <10. Embora seja iniciado em 1, os tempos de loop ainda são 10. Claro, se nada de especial for necessário, eu gostaria de sugerir que você adote o método de escrita no exemplo no início. Posteriormente, apresentaremos vetor ou matriz a você, ambos obtendo seu elemento por meio de seu subscrito. E todos os subscritos padrão começam em 0. Definir o valor inicial como 0 é a prática comparativamente comum.

No exemplo acima, se escrevermos que i está além de 0, o programa irá travar. Como a variável está constantemente aumentando, ela nunca satisfará essa condição. É como se nunca pudesse ser interrompido, de forma que o programa executasse em um loop infinito.

Variáveis locais na instrução for podem não apenas declarar tipos de plástico, mas também declarar variáveis em tipos de ponto flutuante. Por exemplo, pode ser escrito como (float i = 0; i <10; i + = 0,02).

Etapa 2: usar o loop para resolver problemas matemáticos

Você ainda se lembra de uma história do matemático Gauss na infância? Naquela época, Guass tinha 10 anos. Seu professor queria atribuir uma tarefa na classe e a pergunta era

1＋2＋3＋4……＋97＋98＋99+100＝？

Se você calcular com as mãos, levará muito tempo. Mas Guass parece já ter descoberto o método de soma da sequência aritmética. Assim, logo após a pergunta ser feita, ele pronunciou a resposta com facilidade, o que surpreendeu muito seu professor.

Bem, podemos ainda não lembrar qual é o somatório da seqüência aritmética, mas podemos obter a resposta de uma forma primitiva e violenta. E isso é loop. Uma vez que é apenas um pequeno pedaço de bolo para os computadores contar, temos que descrever a pergunta em uma linguagem que possa ser reconhecida por computador, então podemos facilmente obter nossa resposta.

Exemplo de código (5-3):

void setup () {

resposta interna = 0;

para (int i = 1; i <= 100; i ++) {

resposta + = i;

}

println (resposta);

}

Eu acredito que o resultado que você obteve é o mesmo que a resposta que Guass relatou: é 5050!

Dicas: O nome das variáveis locais no loop for pode ser alterado à vontade, desde que obedeça aos regulamentos de nomenclatura de variáveis. Você pode escrever para ser (int k = 1; k <= 100; k ++). Se nenhuma condição específica aconteceu, o padrão i é o nome da variável.

Etapa 3: para desenho de loop

Depois de uma série de roupas de cama aparentemente enfadonhas, finalmente podemos entrar em uma seção mais interessante. Isso é para usar o loop para fazer desenhos. Podemos deixar de lado esses cálculos matemáticos tediosos agora. Nós, designers, somos mais sensíveis aos gráficos.

Use For Loop para desenhar uma matriz circular

Quando queremos usar o loop for para representar um grupo de elementos repetidos, temos que nos certificar da relação numeral desses elementos de antemão, então podemos usar o loop for para realizá-lo convenientemente em vez de fazer um trabalho repetido massivo. Suponha que se deseje desenhar uma linha de círculo igualmente espalhada na direção horizontal. Sua coordenada virtical permanece inalterada enquanto sua coordenada horizontal é alterada. E da esquerda para a direita, a coordenada horizontal está aumentando constantemente e a distância crescente é a mesma. Neste momento, podemos usar i in for loop para obter a coordenada horizontal de cada círculo.

Exemplo de código (5-4): configuração void () {

tamanho (700, 700);

antecedentes (83, 51, 194);

noStroke ();

}

void draw () {

para (int i = 0; i <7; i ++) {

elipse (50,0 + i * 100,0, altura / 2,0, 80,0, 80,0);

}

}

50 representa a posição inicial do primeiro círculo à esquerda. 100 em i * 100 representa a distância crescente.

Etapa 4: use o loop para desenhar um ponto redondo aleatório

A posição gráfica acima é previsível. Isso irá minimizar muito interesse. Podemos usar a função aleatória que nos referimos no capítulo anterior e tentar escrevê-la na função de desenho.

Exemplo de código (5-5):

void setup () {

tamanho (700, 700);

fundo (0);

noStroke ();

}

void draw () {

fundo (0);

para (int i = 0; i <10; i ++) {

float randomWidth = random (60.0);

elipse (random (largura), random (altura), randomWidth, randomWidth);

}

}

Aqui, a razão pela qual a posição do círculo está piscando continuamente é porque cada vez que a função aleatória opera uma vez, o resultado é aleatório. Como o desenho da função é padronizado para rodar 60 quadros por segundo, então, a cada 10 círculos desenhados em um segundo, sua posição será alterada 60 vezes. Este flash rápido faz com que a imagem pareça ter mais do que apenas 10 círculos. Alterar um valor simples no programa trará a você um efeito totalmente diferente. Podemos alterar os tempos de loop revisando a condição do terminal. A condição do terminal na imagem abaixo é i <100

1. Este é o efeito quando a condição terminal é i <1000:
2. RandomSeed
3. Se eu não quiser que a posição do círculo seja gerada aleatoriamente, assim como seu flash, o que posso fazer? Um método é construir e armazenar variáveis independentes para cada círculo e inicializar essas variáveis na configuração. Atribua a essas variáveis um valor aleatório. Assim, ao usar a função de desenho dentro do desenho, o que invocamos é o valor armazenado nas variáveis. Isso não mudará em nenhum momento. Para desenhar 10 círculos, podemos apenas usar este método. Mas e se quisermos desenhar 1.000 círculos, ou 10.000 círculos? Será muito problemático se usarmos esse método tradicional para construir essas variáveis e nomeá-las. Não precisamos aprender um novo método de construção de variável. Aqui está um método flexível que pode nos ajudar a atingir esse objetivo. Isso é para usar randomSeed. Agora, vamos dar uma olhada em seu efeito após ser usado. Exemplo de código (5-6): [cceN_cpp theme = "dawn"] void setup () {size (700, 700); background (0); noStroke ();}

4. void draw () {

   fundo (0);

   randomSeed (1);

   para (int i = 0; i <10; i ++) {

   float randomWidth = random (20,0, 60,0);

   elipse (random (largura), random (altura), randomWidth, randomWidth);

   }

   } [/cceN_cpp]

   Em comparação com o código anterior, ele não tem nenhuma alteração, exceto fazer com que a faixa de raio do círculo mude de 10 para além de 30 com apenas uma frase ofSeedRandom. Depois de ser adicionada esta frase, o gráfico parece ficar estático.

   Formato de invocação:

   randomSeed (a);

   Nesse formato, a configuração de a é seed. Você tem que preencher um inteiro (escreva o valor do ponto flutuante em P5, não vai dar errado, mas trate-o como um inteiro) nele. A função de randomSeed é definir a semente para um valor aleatório. Em seguida, ele irá gerar diferentes arranjos aleatórios de acordo com diferentes sementes. Depois disso, invocamos a função random para que o resultado do retorno seja definitivo. Aqui, o definido não é para o resultado ser um valor definido, mas para o array gerado. Isso quer dizer que o resultado do retorno é definido em relação aos tempos de invocação.

   Exemplo de código (5-7): [cceN_cpp theme = "dawn"] void setup () {

   randomSeed (0);

   para (int i = 0; i <5; i ++) {

   println (aleatório (10));

   }

   } [/cceN_cpp]

   Agora vamos continuar usando println para fazer um experimento. Depois de usar randomSeed, toda vez que você fechar o programa e reiniciá-lo, ele retornará para uma string com o mesmo resultado. O valor corresponderá à sequência um a um. Se você excluí-lo, a cada vez ele retornará para um valor diferente. Por que tem essa configuração? É porque o próprio valor aleatório no programa é pseudo-aleatório. O resultado parece aleatório, mas na verdade é gerado por um método de cálculo fixo e repetível. É equivalente a designar um valor primitivo para randomSeed, então o seguinte resultado será calculado de acordo com esta semente. No entanto, se não designarmos a semente, o programa padrão usará o tempo atual do sistema para gerar a semente. Portanto, o resultado de cada operação é diferente. O exemplo abaixo pode ajudá-lo a entender melhor o randomSeed.

   Código de exemplo (5-8): [cceN_cpp theme = "dawn"] void setup () {

   tamanho (700, 700);

   fundo (0);

   noStroke ();

   }

   void draw () {

   randomSeed (1);

   para (int i = 0; i <10; i ++) {

   float randomWidth01 = random (10, 60);

   elipse (random (largura), random (altura), randomWidth01, randomWidth01);

   println (randomWidth01);

   }

   randomSeed (1);

   para (int i = 0; i <10; i ++) {

   float randomWidth02 = random (10, 60);

   elipse (random (largura), random (altura), randomWidth02, randomWidth02);

   println (randomWidth02);

   }

   } [/cceN_cpp]

   Tente revisar o segundo randomSeed (1) para randomSeed (0) e compare os resultados finais.

   Dicas: Em P5, só precisamos invocar a função noLoop no final do draw para que possamos obter o mesmo efeito. Sua função é encerrar o programa. É bastante diferente dos princípios de trabalho acima na natureza.

Etapa 5: use o loop para desenhar a linha

Depois de dominar o uso de randomSeed, podemos tentar alterar a função de desenho. Por exemplo, mude o desenho do círculo para o desenho de linha. Somente se projetarmos alguns regulamentos variáveis até o final da linha, podemos usar muitas linhas entrelaçadas para fazer um padrão único.

Exemplo de código (5-9):

[cceN_cpp theme = "dawn"] void setup () {

tamanho (700, 700);

fundo (0);

}

void draw () {

randomSeed (0);

para (int i = 0; i <2000; i ++) {

float x1 = largura / 2,0;

float x2 = aleatório (50,0, 650,0);

curso (255, 20);

linha (x1, 50, x2, 650);

}

} [/cceN_cpp]

Criar Pincel Simples

Voltar para o loop for novamente. Os exemplos acima não são interativos. Se quisermos tornar o resultado mais interessante, não podemos esquecer de combinar mouseX e mouseY em nosso código.

Exemplo de código (5-10):

[cceN_cpp theme = "dawn"] void setup () {

tamanho (700, 700);

fundo (255);

noStroke ();

}

void draw () {

para (int i = 0; i <1000; i ++) {

encher (0, 30);

float x = mouseX + random (-50, 50);

float y = mouseY + aleatório (-50, 50);

elipse (x, y, 2, 2);

}

} [/cceN_cpp]

Um pincel de "pontos de dispersão" é criado. Como cada mini ponto redondo intensivo é baseado na posição do mouse, ele pode mover direções limitadas das quatro direções esquerda, direita, para cima e para baixo. Portanto, a propagação da forma final do pincel é semelhante a um quadrado.

Exemplo de código (5-11):

[cceN_cpp theme = "dawn"] void setup () {

tamanho (700, 700);

fundo (255);

noStroke ();

}

void draw () {

para (int i = 0; i <1000; i ++) {

proporção de flutuação = largura do mouseX / (flutuação);

float x = mouseX + random (-50, 50);

float y = mouseY + aleatório (-50, 50);

preencher (0, proporção * 255, 255 * (1 - proporção), 30);

elipse (x, y, 2, 2);

}

}

[/cceN_cpp]

Se usarmos o valor de mouseX para afetar a cor de preenchimento, obteremos um gradiente de cor muito mais mágico.

Etapa 6: Para Loop Aninhado

O loop For pode ser aninhado. Você pode escrever um loop for novamente no loop for. Quando você precisa desenhar uma matriz de pontos bidimensional, você pode escolher este método.

Exemplo de código (5-12):

[cceN_cpp theme = "dawn"] void setup () {

tamanho (700, 700, P2D);

fundo (202, 240, 107);

}

void draw () {

preencher (0);

para (int i = 0; i <5; i ++) {

para (int j = 0; j <5; j ++) {

flutuante x = 150 + i * 100;

float y = 150 + j * 100;

elipse (x, y, 60, 60);

println (i + ":" + j);

}

}

}

[/cceN_cpp]

Para usar o loop aninhado pela primeira vez, você deve descobrir suas relações lógicas. A implementação do código no programa é sempre de cima para baixo. Portanto, o primeiro a ser implementado é definitivamente o loop mais externo. Cada vez que o loop externo operar pela primeira vez, o loop interno operará continuamente até que não possa mais satisfazer a condição. Depois disso, ele iniciará a segunda operação de loop externo. Após o início da segunda operação, o loop interno continuará no implemento até que não possa satisfazer a condição. Essa repetição ocorre até que todas as condições não possam ser satisfeitas e ele saia do circuito.

No código acima, o corpo do loop no loop externo operou 5 vezes no total, enquanto o corpo do loop no loop interno operou 25 vezes. Em 25 vezes, de acordo com a diferença do valor i, j, podemos assegurar as coordenadas horizontal e vertical do círculo separadamente. Eu incorporei uma seção de impressão, você pode observar a saída de dados e pensar sobre sua mudança. Com apenas dois loops aninhados, podemos experimentar todas as combinações de dados i, j.

Pontas

O loop For na segunda camada geralmente condensa com Tab no início. Isso pode tornar a estrutura do código mais clara. Você deve nomear variáveis locais nas duas camadas do loop for com nomes diferentes. Entre eles, "i", "j", "k" é o mais comumente usado.

Uso flexível "i", "j"

Os dois nomes de variáveis de "i", "j" representam variáveis locais das duas camadas do loop for. O exemplo abaixo irá aprofundar seu conhecimento sobre "i" "j". De acordo com os diferentes valores de "i", "j", podemos inserir parâmetros para agrupar os elementos.

Exemplo de código (5-13): [cceN_cpp theme = "dawn"] void setup () {

tamanho (700, 700);

fundo (0);

noStroke ();

}

void draw () {

fundo (0);

encher (250, 233, 77);

para (int i = 0; i <7; i ++) {

para (int j = 0; j <7; j ++) {

pushMatrix ();

traduzir (50 + i * 100, 50 + j * 100);

// Setting 1

// ângulo de flutuação = sin (millis () / 1000.0) * PI / 2;

// Setting 2

// float ratio = i / 7.0;

// ângulo de flutuação = sin (millis () / 1000,0 + razão * (PI / 2)) * PI / 2;

// Setting 3

razão de flutuação = (i * 7 + j) /49,0;

ângulo de flutuação = sin (milis () / 1000,0 + razão * (PI / 2)) * PI / 2;

girar (ângulo);

rectMode (CENTER);

// Desenhe a imagem 1

rect (0, 0, 80, 80);

// Desenhe a imagem 2

// rect (0, 0, 100, 20);

// Desenhe a imagem 3

// rect (0, 0, proporção * 50);

popMatrix ();

}

}

} [/cceN_cpp]

Explicação do código

rectMode (CENTER) pode alterar o método de desenho do quadrado. Os primeiros dois parâmetros originais de rect são usados para definir a coordenada do canto superior esquerdo do quadrado. Depois de iniciarmos este comando, esses dois parâmetros serão usados para definir a coordenada para o ponto central do quadrado. Porque aqui operamos a rotação do padrão por meio de rotação, então precisamos usar este método para desenhar o ponto central no ponto original da coordenada.

millis () adquire o tempo desde o início do programa até o presente. A unidade é ms. Este valor influenciará a velocidade de alteração do valor de saída de sin. Se escrevermos milissegundos diretamente, a escala variável é muito grande. Portanto, temos que dividi-lo por 1000,0.

Nesta seção de código, usamos o símbolo de comentário "//" para ocultar várias configurações. Você pode mudar os efeitos ao iniciar ou fechar. Por exemplo, se começarmos as frases atrás da "Configuração 3", temos que usar o símbolo de comentário para fechar os blocos de código entre a "Configuração 1" e a "Configuração 2". Quanto a exemplos dessa estrutura de programa semelhante com diferentes variáveis locais, podemos escrever neste formato. Assim, não precisamos armazenar vários documentos de engenharia separadamente. Podemos usar essa habilidade frequentemente durante a prática e criação e preservar algumas configurações de parâmetros satisfatórias.

Entre eles, a influência do valor i, j no programa é representada principalmente pela mudança da "Configuração 1 (Configuração 2) (Configuração 3)". Você pode comparar os resultados de saída abaixo.

Desenhe a figura 1: Configuração 1

Desenhe a figura 1: Configuração 2

Desenhe a figura 1: Cenário 3

Desenhe a imagem 2: Configuração 1

Desenhe a imagem 2: Configuração 2

Desenhe a imagem 2: Cenário 3

Na configuração 1, não usamos i e j para influenciar o ângulo de rotação de cada elemento. Assim, podemos ver que o movimento de cada elemento é o mesmo. Enquanto na configuração 2, usamos o valor i e ambos i e j na configuração 3. Finalmente, eles influenciaram a entrada do parâmetro da função sin por meio da razão. Isso mudou a mudança periódica de ângulo. Devido ao efeito real da configuração 2 e da configuração 3 não ser tão óbvio nos gráficos animados, podemos observá-lo na imagem a seguir.

Desenhe a Figura 2 (Esquerda: Configuração 2; Direita: Configuração 3)

Desenhe a Figura 3 (Esquerda: Configuração 2; Direita: Configuração 3)

Na primeira imagem, a proporção é usada para afetar o ângulo de rotação do quadrado. Enquanto a segunda imagem, é usada para controlar o raio do círculo diretamente. Podemos ver que ele usou a frase de valor i:

razão de flutuação = i / 7,0;

Sua mudança de elemento vertical é consistente. Como a coordenada horizontal para controlar a imagem depende apenas do valor de i, os padrões com a mesma coordenada horizontal serão os mesmos. E o valor da razão, ângulo de rotação e raio do círculo é o mesmo também.

Ao mesmo tempo, usamos a frase i, j:

razão de flutuação = (i * 7 + j) /49,0;

Pode descrever "gradiente". Aqui, com o método de multiplicação de um fator, ele combinou a influência de linhas e colunas. Portanto, cada elemento é diferente.

Etapa 7: While Loop

Há um irmão para o laço. Isso é loop while. O que o loop for pode fazer, enquanto o loop também pode. Mas a frequência de uso do loop while em creativeCoding não é alta como no loop.

Exemplo de código (5-14): [cceN_cpp theme = "dawn"] void setup () {

int a = 0;

while (a <10) {

println (a);

a ++;

}

} [/cceN_cpp]

A estrutura gramatical do while é mais fácil de ser entendida do que para. Podemos criar variáveis antes da instrução while. Em seguida, preencha uma expressão entre colchetes. Quando estiver satisfeito, opere as sentenças dentro do corpo do loop. Por fim, colocamos uma expressão no corpo do loop para atualizar as variáveis e, em seguida, o loop while está concluído. Quanto aos tempos de loop garantidos, geralmente usamos loop for. Quanto ao valor da variável indifinita, recomendamos que você use o loop while.

Pensar:

Tente usar todos os tipos de elementos básicos para substituir os elementos de desenho em um loop para criar vários pincéis diferentes.

Combine com a função trigonométrica mencionada no último capítulo, tente revisar o pincel de "pontos de dispersão" em um pincel de formato redondo.

Tente fazer uma matriz de pontos bidimensional com um loop for apenas.

Próximo Capítulo Prévia Como com este curso, você descobrirá que a cada novo conhecimento que aprender, a possibilidade de jogar aumentará muito imediatamente. O programa é uma caixa Pandora. Tudo o que você pode imaginar, ele pode fazer isso por você. Portanto, não há razão para não aprendermos essa língua que pode se comunicar com os computadores. Em nosso próximo capítulo, apresentaremos outra instrução de controle de processo para você. Ele pode controlar o fluxo do processo e gerar resultados mais complicados e mutáveis. Com a instrução if, você pode criar seus próprios jogos de aventura em texto com facilidade! Este artigo vem do designer Wenzy. Relative Readings: Interesting Programming Guidance for Designer - Processing Initial TouchInteresting Programming Guide for Designer - Create Your First Processing ProgramInteresting Programming Guidance for Designer –Get Your Picture Running (Parte Um) Orientação de Programação Interessante para Designer - Faça sua Imagem Executando (Parte Dois)

Etapa 8: Fonte

Este artigo é de:

Se você tiver alguma dúvida, pode entrar em contato com ： [email protected].