[{"data":1,"prerenderedAt":530},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-animacao":139,"-pcs3021-animacao-surround":526},[4,8],{"title":5,"path":6,"stem":7},"","\u002F","index",{"title":9,"icon":10,"path":11,"stem":12,"children":13},"PCS3021","i-lucide-message-circle-code","\u002Fpcs3021","pcs3021",[14,17,48,74,92,108,124,133],{"title":15,"path":11,"stem":16},"Exemplo","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":47},"Formas geométricas","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[23,27,31,35,39,43],{"title":24,"path":25,"stem":26},"Retângulos","\u002Fpcs3021\u002Fgeometrias\u002Fretangulo","pcs3021\u002F2.geometrias\u002F1.retangulo",{"title":28,"path":29,"stem":30},"Elipses e Círculos","\u002Fpcs3021\u002Fgeometrias\u002Felipse","pcs3021\u002F2.geometrias\u002F2.elipse",{"title":32,"path":33,"stem":34},"Triângulos","\u002Fpcs3021\u002Fgeometrias\u002Ftriangulo","pcs3021\u002F2.geometrias\u002F3.triangulo",{"title":36,"path":37,"stem":38},"Linhas","\u002Fpcs3021\u002Fgeometrias\u002Flinha","pcs3021\u002F2.geometrias\u002F4.linha",{"title":40,"path":41,"stem":42},"Pontos","\u002Fpcs3021\u002Fgeometrias\u002Fponto","pcs3021\u002F2.geometrias\u002F5.ponto",{"title":44,"path":45,"stem":46},"Polígonos","\u002Fpcs3021\u002Fgeometrias\u002Fpoligonos","pcs3021\u002F2.geometrias\u002F6.poligonos",false,{"title":49,"icon":50,"path":51,"stem":52,"children":53,"page":47},"Transformações","i-lucide-rotate-3d","\u002Fpcs3021\u002Ftransformacoes","pcs3021\u002F2.transformacoes",[54,58,62,66,70],{"title":55,"path":56,"stem":57},"Rotação","\u002Fpcs3021\u002Ftransformacoes\u002Frotacao","pcs3021\u002F2.transformacoes\u002F1.rotacao",{"title":59,"path":60,"stem":61},"Translação","\u002Fpcs3021\u002Ftransformacoes\u002Ftranslacao","pcs3021\u002F2.transformacoes\u002F2.translacao",{"title":63,"path":64,"stem":65},"Escala","\u002Fpcs3021\u002Ftransformacoes\u002Fescala","pcs3021\u002F2.transformacoes\u002F3.escala",{"title":67,"path":68,"stem":69},"Cisalhamento","\u002Fpcs3021\u002Ftransformacoes\u002Fcisalhamento","pcs3021\u002F2.transformacoes\u002F4.cisalhamento",{"title":71,"path":72,"stem":73},"Push e Pop","\u002Fpcs3021\u002Ftransformacoes\u002Fpush-pop","pcs3021\u002F2.transformacoes\u002F5.push-pop",{"title":75,"icon":76,"path":77,"stem":78,"children":79,"page":47},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F3.programacao",[80,84,88],{"title":81,"path":82,"stem":83},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F3.programacao\u002F1.variaveis",{"title":85,"path":86,"stem":87},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F3.programacao\u002F2.expressoes-numericas",{"title":89,"path":90,"stem":91},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F3.programacao\u002F3.for",{"title":93,"path":94,"stem":95,"children":96,"icon":107},"Imagens","\u002Fpcs3021\u002Fimagens","pcs3021\u002F4.imagens\u002F1.index",[97,99,103],{"title":98,"path":94,"stem":95},"Usando SVG",{"title":100,"path":101,"stem":102},"Exportando SVG","\u002Fpcs3021\u002Fimagens\u002Fexportando","pcs3021\u002F4.imagens\u002F4.exportando",{"title":104,"path":105,"stem":106},"Imagens Matriciais","\u002Fpcs3021\u002Fimagens\u002Fmatriciais","pcs3021\u002F4.imagens\u002F5.matriciais","i-lucide-pen-tool",{"title":109,"path":110,"stem":111,"children":112,"icon":123},"Animações","\u002Fpcs3021\u002Fanimacao","pcs3021\u002F5.animacao\u002F1.index",[113,115,119],{"title":114,"path":110,"stem":111},"Introdução à animação",{"title":116,"path":117,"stem":118},"Variáveis locais e globais","\u002Fpcs3021\u002Fanimacao\u002Fusando-variaveis","pcs3021\u002F5.animacao\u002F2.usando-variaveis",{"title":120,"path":121,"stem":122},"Eventos","\u002Fpcs3021\u002Fanimacao\u002Feventos","pcs3021\u002F5.animacao\u002F3.eventos","i-lucide-clapperboard",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":47},"Vetores","i-lucide-spline-pointer","\u002Fpcs3021\u002Fvetores","pcs3021\u002F6.vetores",[130],{"title":125,"path":131,"stem":132},"\u002Fpcs3021\u002Fvetores\u002Fvetores","pcs3021\u002F6.vetores\u002F7.vetores",{"title":134,"path":135,"stem":136,"children":137,"icon":126},"Funções","\u002Fpcs3021\u002Ffuncoes","pcs3021\u002F7.funcoes\u002F1.index",[138],{"title":134,"path":135,"stem":136},{"id":140,"title":114,"body":141,"categoria":520,"creditoLink":520,"creditos":520,"descricao":520,"description":521,"eaulas":520,"extension":522,"meta":523,"navigation":229,"path":110,"seo":524,"stem":111,"video":520,"youtube":520,"youtubeLink":520,"__hash__":525},"docs\u002Fpcs3021\u002F5.animacao\u002F1.index.md",{"type":142,"value":143,"toc":515},"minimark",[144,163,168,173,182,254,278,289,297,394,397,436,511],[145,146,147,148,152,153,156,157,159,160,162],"p",{},"Os programas que criamos até agora em p5.js tinham como característica comum o fato de que seus comandos eram executados uma única vez e, em seguida, a execução era encerrada, apresentando o resultado final. Na maioria das vezes esse resultado era apresentado numa janela gráfica que, obviamente, exibia uma imagem estática, uma vez que a execução do programa já tinha sido encerrada. Mas, e se desejarmos gerar imagens com movimento e\u002Fou possibilitar que o usuário interaja com o nosso programa? Nesse caso precisaremos manter o programa em execução continuamente. O p5.js possui um esquema pronto para gerenciar essa execução contínua do programa, que permite não apenas atualizar e alterar o conteúdo apresentado na janela gráfica, como também receber inputs do usuário, propiciando interatividade. Nesta aula aprenderemos a programar as funções ",[149,150,151],"strong",{},"setup()"," e ",[149,154,155],{},"draw()",", que são executadas automaticamente pelo p5.js, com os conteúdos por nós definidos. A programação colocada dentro da função ",[149,158,151],{}," será executada uma única vez, enquanto que o conteúdo de ",[149,161,155],{}," é executado repetidamente até o programa ser interrompido. Também aprenderemos a usar funções e variáveis internas que tratam teclado e mouse, possibilitando-nos desenvolver programas interativos.",[164,165,167],"h2",{"id":166},"gerando-imagens-com-movimento","Gerando imagens com movimento",[169,170,172],"h3",{"id":171},"as-funções-setup-e-draw","As funções setup() e draw()",[145,174,175,176,178,179,181],{},"Para instruir o p5.js que queremos que uma sequência de comandos seja executada somente uma vez enquanto que outra seja repetida várias vezes, precisamos dividir nossos programas em dois blocos, um formando o corpo da função chamada ",[149,177,151],{}," e outro constituindo-se no conteúdo da função ",[149,180,155],{},", como mostrado na listagem a seguir.",[183,184,188],"pre",{"className":185,"code":186,"language":187,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function setup() {\n  \u002F\u002F comandos a ser executados só uma vez, quando o programa começa\n}\n\nfunction draw() {\n  \u002F\u002F comandos a executar repetidamente, enquanto o programa estiver rodando\n}\n","js",[189,190,191,211,218,224,231,243,249],"code",{"__ignoreMap":5},[192,193,196,200,204,208],"span",{"class":194,"line":195},"line",1,[192,197,199],{"class":198},"spNyl","function",[192,201,203],{"class":202},"s2Zo4"," setup",[192,205,207],{"class":206},"sMK4o","()",[192,209,210],{"class":206}," {\n",[192,212,214],{"class":194,"line":213},2,[192,215,217],{"class":216},"sHwdD","  \u002F\u002F comandos a ser executados só uma vez, quando o programa começa\n",[192,219,221],{"class":194,"line":220},3,[192,222,223],{"class":206},"}\n",[192,225,227],{"class":194,"line":226},4,[192,228,230],{"emptyLinePlaceholder":229},true,"\n",[192,232,234,236,239,241],{"class":194,"line":233},5,[192,235,199],{"class":198},[192,237,238],{"class":202}," draw",[192,240,207],{"class":206},[192,242,210],{"class":206},[192,244,246],{"class":194,"line":245},6,[192,247,248],{"class":216},"  \u002F\u002F comandos a executar repetidamente, enquanto o programa estiver rodando\n",[192,250,252],{"class":194,"line":251},7,[192,253,223],{"class":206},[145,255,256,257,259,260,262,263,265,266,270,271,273,274,277],{},"Note que o conteúdo de cada função é delimitado por chaves, o que chamamos de bloco (outros exemplos de blocos de programa delimitados por chaves foram vistos nos comandos IF, FOR e WHILE). Esses \"blocos\" contêm os algoritmos, ou seja, os programas que nós escrevemos e que o p5.js executará automática e sistematicamente da seguinte forma: o conteúdo do bloco da ",[149,258,151],{}," é executado, uma única vez, quando nosso programa tem sua execução iniciada; em seguida é executado o conteúdo da ",[149,261,155],{},", o qual é re-executado repetidamente. É essa repetição que permite a geração de animações e interações, pois a cada final de execução da ",[149,264,155],{}," a janela gráfica é atualizada com os resultados desse processamento. Por ",[267,268,269],"em",{},"default"," a ",[149,272,155],{}," é executada 60 vezes por segundo (se o conteúdo dessa execução e a velocidade do dispositivo permitirem), mas essa frequência pode ser modificada por meio da função ",[149,275,276],{},"frameRate()",", que define a quantidade de atualizações da janela gráfica, por segundo, que desejamos.",[145,279,280,281,283,284,152,286,288],{},"Qualquer um dos programas vistos até o momento funcionaria da mesma forma se colocado dentro da função ",[189,282,151],{},", como ilustrado pela listagem a seguir, que mostra nosso primeiro programa em p5.js, agora utilizando as funções ",[149,285,151],{},[149,287,155],{},".",[145,290,291,292,152,294,296],{},"Uma vez que passamos a utilizar as funções ",[149,293,151],{},[149,295,155],{},", não mais é permitido deixar comandos \"soltos\" fora dessas estruturas, exceto as declarações de variáveis globais, que serão abordadas na próxima seção.",[298,299,300,301],"code-preview",{},"Código 4.1 - Estrutura básica com setup() e draw()",[302,303,304],"template",{"v-slot:code":5},[183,305,307],{"className":185,"code":306,"language":187,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  line(0, 0, 200, 200);\n}\n\nfunction draw() {\n}\n",[189,308,309,319,344,372,376,380,390],{"__ignoreMap":5},[192,310,311,313,315,317],{"class":194,"line":195},[192,312,199],{"class":198},[192,314,203],{"class":202},[192,316,207],{"class":206},[192,318,210],{"class":206},[192,320,321,324,328,332,335,338,341],{"class":194,"line":213},[192,322,323],{"class":202},"  createCanvas",[192,325,327],{"class":326},"swJcz","(",[192,329,331],{"class":330},"sbssI","400",[192,333,334],{"class":206},",",[192,336,337],{"class":330}," 400",[192,339,340],{"class":326},")",[192,342,343],{"class":206},";\n",[192,345,346,349,351,354,356,359,361,364,366,368,370],{"class":194,"line":220},[192,347,348],{"class":202},"  line",[192,350,327],{"class":326},[192,352,353],{"class":330},"0",[192,355,334],{"class":206},[192,357,358],{"class":330}," 0",[192,360,334],{"class":206},[192,362,363],{"class":330}," 200",[192,365,334],{"class":206},[192,367,363],{"class":330},[192,369,340],{"class":326},[192,371,343],{"class":206},[192,373,374],{"class":194,"line":226},[192,375,223],{"class":206},[192,377,378],{"class":194,"line":233},[192,379,230],{"emptyLinePlaceholder":229},[192,381,382,384,386,388],{"class":194,"line":245},[192,383,199],{"class":198},[192,385,238],{"class":202},[192,387,207],{"class":206},[192,389,210],{"class":206},[192,391,392],{"class":194,"line":251},[192,393,223],{"class":206},[395,396],"p5-sketch",{"code":306},[398,399,400,405,419],"blockquote",{},[145,401,402],{},[149,403,404],{},"Atividade 1",[145,406,407,408,411,412,414,415,418],{},"Modifique o programa anterior, movendo a chamada da função ",[149,409,410],{},"line()"," para o bloco da função ",[149,413,155],{},". Mudou alguma coisa? Agora modifique a chamada para ",[149,416,417],{},"line(0, 0, mouseX, mouseY)",". Veja o que acontece se você mover o mouse dentro da janela gráfica. Pense numa solução para eliminar o rastro da linha.",[145,420,421,422,152,425,428,429,152,432,435],{},"Observação: a exemplo das já conhecidas ",[149,423,424],{},"width",[149,426,427],{},"height",", ",[149,430,431],{},"mouseX",[149,433,434],{},"mouseY"," são variáveis de sistema; seus conteúdos correspondem à posição atual do mouse.",[398,437,438,443,479,496],{},[145,439,440],{},[149,441,442],{},"Saiba mais sobre funções",[145,444,445,446,449,450,428,453,428,456,428,459,152,462,465,466,468,469,152,472,475,476,478],{},"Função é um trecho de programa que possui um nome, podendo ter parâmetros de entrada e um valor de retorno, e é executado toda vez que chamamos esse nome em nossos programas. Desde o início temos nos utilizado de funções disponíveis na biblioteca (",[267,447,448],{},"library"," em inglês) p5.js, como ",[149,451,452],{},"createCanvas()",[149,454,455],{},"circle()",[149,457,458],{},"rect()",[149,460,461],{},"noFill()",[149,463,464],{},"random()",", entre outras. Nós usamos as funções sem precisar saber como é sua lógica de programação interna, sem nem mesmo ver seus algoritmos internos. Só precisamos saber se devemos passar parâmetros (quais são e em que ordem, como por exemplo na ",[149,467,455],{}," que deve receber, nessa ordem, as coordenadas ",[149,470,471],{},"x",[149,473,474],{},"y"," do centro do círculo e seu diâmetro) e se a função retorna alguma coisa (como por exemplo a ",[149,477,464],{},", que retorna um número aleatório).",[145,480,481,482,152,484,486,487,489,490,492,493,495],{},"As funções da biblioteca p5.js, assim como de outras bibliotecas que podem ser agregadas (como, por exemplo, uma biblioteca para tocar e manipular arquivos de áudio ou uma biblioteca para produzir efeitos de realidade aumentada), vêm prontas e nós só precisamos chamá-las em nossos programas para que executem suas funcionalidades. Mas há algumas funções especiais, como é o caso de ",[149,483,151],{},[149,485,155],{},", assim como das que tratam teclado, mouse e outros eventos do sistema, que podem ter seus conteúdos escritos por nós ao programarmos em p5.js. Essas funções, contudo, não serão chamadas por nós, mas automaticamente pelo sistema. A ",[149,488,151],{}," é chamada quando o programa inicia, a ",[149,491,155],{}," a cada determinado período de tempo (1\u002F60 de segundo, por ",[267,494,269],{},"), as de teclado quando o usuário tecla alguma coisa e assim por diante. Dessa forma, conseguimos programar o que queremos que aconteça toda vez que o programa é iniciado, o que deve ficar repetidamente sendo processado e o que deve acontecer, por exemplo, quando o usuário pressiona determinada tecla ou clica seu mouse. Futuramente veremos como criar as nossas próprias funções, com nomes, parâmetros de entrada e de retorno definidos por nós.",[145,497,498,499,502,503,506,507,510],{},"Observação: diferente do Processing (que é baseado em Java), em JavaScript\u002Fp5.js não é necessário declarar o tipo do valor de retorno de uma função (não existe a palavra ",[189,500,501],{},"void"," antes do nome da função). Toda função é declarada simplesmente com ",[189,504,505],{},"function nomeDaFuncao() { ... }",", e ela pode ou não usar a palavra ",[189,508,509],{},"return"," para devolver um valor — isso não precisa ser indicado com antecedência.",[512,513,514],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":5,"searchDepth":213,"depth":213,"links":516},[517],{"id":166,"depth":213,"text":167,"children":518},[519],{"id":171,"depth":220,"text":172},null,"Entenda como fazer projetos animados com p5.js","md",{},{"title":114,"description":521},"aGVIf0NCMeobi8SKZQ05Io8Hq8GaMW6y6tTP8JBmSB4",[527,529],{"title":104,"path":105,"stem":106,"description":528,"children":-1},"Carregando, exibindo, colorindo e transformando imagens matriciais (raster) em p5.js",{"title":116,"path":117,"stem":118,"description":5,"children":-1},1784150369120]