Programação criativa: produza peças visuais com JavaScript

Introdução à codificação para designers visuais

“Olá, seja bem-vindo ao final deste curso do Domestika. Nesta lição final, faremos uma recapitulação do que vimos até agora e adicionarei algumas dicas para ajudá-lo em sua jornada para a codificação criativa. Código é uma linguagem. Para usar uma metáfora com a linguagem falada, quando queremos expressar algo, não é sobre quantas palavras usamos, mas como escolhemos juntar as palavras que conhecemos. Percorremos um longo caminho. Partimos de um arquivo vazio, de conceitos fundamentais como variáveis e funções. Mencionei que íamos usá-los em todos os lugares e foi o que fizemos. A melhor maneira de aprender é sempre pelo exemplo e vimos alguns. Também vimos matrizes, loops, condicionais e números aleatórios. E vimos o quanto poderíamos fazer apenas com esses poucos conceitos. O ambiente que escolhemos para rodar nosso código foi o navegador, que é muito acessível e familiar. Agora sabemos que também podemos usá-lo para criar recursos visuais. Vimos como criar uma página HTML e escrever JavaScript nela. Então vimos uma configuração mais elaborada usando desenho em tela. Isso nos deu um ambiente com algumas vantagens em relação a começar do zero, como facilitar a alteração das dimensões do nosso esboço e também recarregá-lo automaticamente assim que o código for salvo. Há mais no canvas-sketch do que vimos no curso, então recomendo que você dê uma olhada na documentação do Github. Existem algumas informações sobre como preparar seu esboço para impressão em grandes formatos, como exportar GIFs e também como preparar a arte para plotters de caneta. O primeiro esboço que fizemos juntos foi uma grade simples. Tínhamos 5 linhas e 5 colunas. Se você tentou alterar esse número, muito bem por experimentar. Você deve ter percebido que a grade não estaria mais centralizada, porque estávamos usando valores embutidos em código. Mais tarde, vimos uma maneira mais flexível de fazer as coisas. Então fique à vontade para voltar ao sketch 01 e melhorá-lo com o que você sabe agora, é um bom exercício.

Em nosso segundo esboço, usamos um pouco de trigonometria. Gostaria que meu professor de matemática tivesse me mostrado como fazer coisas criativas com trigonometria quando eu estava na escola. Essa é outra coisa interessante sobre a codificação criativa, a matemática simples vai longe. Você pode descobrir que alguns conceitos matemáticos finalmente se encaixam, isso certamente aconteceu comigo. Em nosso terceiro esboço vimos mais matemática com Pitágoras e também aprendemos como animá-lo. O navegador está sempre repintando a tela, portanto, tudo o que precisamos fazer é alterar os valores ao longo do tempo. Mais uma vez, recomendo que você dê uma olhada na documentação do canvas-sketch e veja como você pode criar um loop animado, certificando-se de que seus valores estão mudando e eventualmente voltando ao seu ponto original. Em nosso quarto esboço, mostrei como normalizar um valor, que é alterar sua faixa original para um número entre 0 e 1. Isso é muito útil e visto em todas as áreas da programação. Se um dia você precisar, digamos, converter uma cor em um ângulo ou os decibéis de uma amostra de áudio na altura de um terreno, você sabe que pode fazer isso se normalizar os valores. Para o esboço final, eu queria mostrar a você como usar a tipografia de maneira criativa, mas talvez a coisa mais interessante que aprendemos foi como ler os valores das cores dos pixels em nossa tela. Usamos uma letra grande, mas nada nos impediria de usar qualquer outra imagem. Um emoji, um ícone, um logotipo, são todos pixels e o efeito funcionaria perfeitamente. Eu realmente gostaria de ver seus visuais. Não tenha medo de experimentar tudo. Eu lhe dei algumas dicas, mas na verdade é tudo sobre explorar. Se definirmos um valor para 5, tente 500. Tente girar as coisas para os lados, tente escalar as coisas para cima ou para baixo, tente círculos em vez de quadrados ou círculos no topo de quadrados. E talvez o mais importante, tente misturar as coisas, use algo do esboço 02 no esboço 05 ou vice-versa. Compartilhe seus esboços no fórum bt clicando no botão "Crie seu projeto" acima. Assim, todos aprenderemos uns com os outros. Estarei lá para responder a perguntas e dar algumas orientações. Foi ótimo compartilhar minhas idéias e paixão com você. Obrigado e adeus. ”

Transcrição parcial do vídeo

“Projeto final Neste aula final, vamos recapitular o que vimos até aqui, e vou adicionar algumas dicas para ajudá-lo na programação criativa. O código é uma linguagem. Para usar uma metáfora de linguagem, não se trata de quantas palavras usamos, mas como juntamos as palavras que conhecemos. Percorremos um longo caminho. Começamos de um arquivo vazio, de conceitos fundamentais como variáveis e funções. Mencionei que as usaríamos por toda parte, e assim fizemos. A melhor maneira de aprender é pelo exemplo, e vimos alguns. Também vimos arrays, loops, condicionais e números aleatórios, e vimos t...”

Esta transcrição é gerada automaticamente, portanto pode conter erros.

Resumo do curso: Programação criativa: produza peças visuais com JavaScript

• Nível: Iniciante
• 97% avaliações positivas (1177)
• 55889 alunos
• 6 unidades
• 21 aulas (2h 42m)
• 5 downloads

• Categoria

  3D e Animação, Web e App Design

• Áreas

  JavaScript, Motion Graphics, Multimídia, Programação