[{"data":1,"prerenderedAt":575},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-animacao":183,"-pcs3021-animacao-surround":571},[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,28,66,80,106,136,152,168,177],{"title":15,"path":11,"stem":16},"Linguagem Computacional","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":27},"Curvas","i-lucide-spline","\u002Fpcs3021\u002Fcurvas","pcs3021\u002F2.curvas",[23],{"title":24,"path":25,"stem":26},"Curvas de Bézier","\u002Fpcs3021\u002Fcurvas\u002Fbezier","pcs3021\u002F2.curvas\u002F1.bezier",false,{"title":29,"icon":30,"path":31,"stem":32,"children":33,"page":27},"Formas geométricas","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[34,38,42,46,50,54,58,62],{"title":35,"path":36,"stem":37},"Retângulos","\u002Fpcs3021\u002Fgeometrias\u002Fretangulo","pcs3021\u002F2.geometrias\u002F1.retangulo",{"title":39,"path":40,"stem":41},"Elipses e Círculos","\u002Fpcs3021\u002Fgeometrias\u002Felipse","pcs3021\u002F2.geometrias\u002F2.elipse",{"title":43,"path":44,"stem":45},"Triângulos","\u002Fpcs3021\u002Fgeometrias\u002Ftriangulo","pcs3021\u002F2.geometrias\u002F3.triangulo",{"title":47,"path":48,"stem":49},"Linhas","\u002Fpcs3021\u002Fgeometrias\u002Flinha","pcs3021\u002F2.geometrias\u002F4.linha",{"title":51,"path":52,"stem":53},"Pontos","\u002Fpcs3021\u002Fgeometrias\u002Fponto","pcs3021\u002F2.geometrias\u002F5.ponto",{"title":55,"path":56,"stem":57},"Polígonos","\u002Fpcs3021\u002Fgeometrias\u002Fpoligonos","pcs3021\u002F2.geometrias\u002F6.poligonos",{"title":59,"path":60,"stem":61},"Arcos","\u002Fpcs3021\u002Fgeometrias\u002Farco","pcs3021\u002F2.geometrias\u002F7.arco",{"title":63,"path":64,"stem":65},"Combinando formas","\u002Fpcs3021\u002Fgeometrias\u002Fcombinando","pcs3021\u002F2.geometrias\u002F8.combinando",{"title":67,"icon":68,"path":69,"stem":70,"children":71,"page":27},"Preenchimento e contorno","i-lucide-palette","\u002Fpcs3021\u002Fbasicos","pcs3021\u002F3.basicos",[72,76],{"title":73,"path":74,"stem":75},"Preenchimento","\u002Fpcs3021\u002Fbasicos\u002Fpreenchimento","pcs3021\u002F3.basicos\u002F1.preenchimento",{"title":77,"path":78,"stem":79},"Contorno","\u002Fpcs3021\u002Fbasicos\u002Fcontorno","pcs3021\u002F3.basicos\u002F2.contorno",{"title":81,"icon":82,"path":83,"stem":84,"children":85,"page":27},"Transformações","i-lucide-rotate-3d","\u002Fpcs3021\u002Ftransformacoes","pcs3021\u002F4.transformacoes",[86,90,94,98,102],{"title":87,"path":88,"stem":89},"Rotação","\u002Fpcs3021\u002Ftransformacoes\u002Frotacao","pcs3021\u002F4.transformacoes\u002F1.rotacao",{"title":91,"path":92,"stem":93},"Translação","\u002Fpcs3021\u002Ftransformacoes\u002Ftranslacao","pcs3021\u002F4.transformacoes\u002F2.translacao",{"title":95,"path":96,"stem":97},"Escala","\u002Fpcs3021\u002Ftransformacoes\u002Fescala","pcs3021\u002F4.transformacoes\u002F3.escala",{"title":99,"path":100,"stem":101},"Cisalhamento","\u002Fpcs3021\u002Ftransformacoes\u002Fcisalhamento","pcs3021\u002F4.transformacoes\u002F4.cisalhamento",{"title":103,"path":104,"stem":105},"Push e Pop","\u002Fpcs3021\u002Ftransformacoes\u002Fpush-pop","pcs3021\u002F4.transformacoes\u002F5.push-pop",{"title":107,"icon":108,"path":109,"stem":110,"children":111,"page":27},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F5.programacao",[112,116,120,124,128,132],{"title":113,"path":114,"stem":115},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F5.programacao\u002F1.variaveis",{"title":117,"path":118,"stem":119},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F5.programacao\u002F2.expressoes-numericas",{"title":121,"path":122,"stem":123},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F5.programacao\u002F3.for",{"title":125,"path":126,"stem":127},"Classes e objetos","\u002Fpcs3021\u002Fprogramacao\u002Fclasses-e-objetos","pcs3021\u002F5.programacao\u002F4.classes-e-objetos",{"title":129,"path":130,"stem":131},"Condicional IF","\u002Fpcs3021\u002Fprogramacao\u002Fcondicionais","pcs3021\u002F5.programacao\u002F4.condicionais",{"title":133,"path":134,"stem":135},"Laço WHILE","\u002Fpcs3021\u002Fprogramacao\u002Fwhile","pcs3021\u002F5.programacao\u002F4.while",{"title":137,"path":138,"stem":139,"children":140,"icon":151},"Animações","\u002Fpcs3021\u002Fanimacao","pcs3021\u002F6.animacao\u002F1.index",[141,143,147],{"title":142,"path":138,"stem":139},"Introdução",{"title":144,"path":145,"stem":146},"Variáveis locais e globais","\u002Fpcs3021\u002Fanimacao\u002Fusando-variaveis","pcs3021\u002F6.animacao\u002F2.usando-variaveis",{"title":148,"path":149,"stem":150},"Eventos","\u002Fpcs3021\u002Fanimacao\u002Feventos","pcs3021\u002F6.animacao\u002F3.eventos","i-lucide-clapperboard",{"title":153,"path":154,"stem":155,"children":156,"icon":167},"Imagens","\u002Fpcs3021\u002Fimagens","pcs3021\u002F6.imagens\u002F1.index",[157,159,163],{"title":158,"path":154,"stem":155},"Usando SVG",{"title":160,"path":161,"stem":162},"Exportando SVG","\u002Fpcs3021\u002Fimagens\u002Fexportando","pcs3021\u002F6.imagens\u002F4.exportando",{"title":164,"path":165,"stem":166},"Imagens Matriciais","\u002Fpcs3021\u002Fimagens\u002Fmatriciais","pcs3021\u002F6.imagens\u002F5.matriciais","i-lucide-pen-tool",{"title":169,"icon":170,"path":171,"stem":172,"children":173,"page":27},"Vetores","i-lucide-spline-pointer","\u002Fpcs3021\u002Fvetores","pcs3021\u002F6.vetores",[174],{"title":169,"path":175,"stem":176},"\u002Fpcs3021\u002Fvetores\u002Fvetores","pcs3021\u002F6.vetores\u002F7.vetores",{"title":178,"path":179,"stem":180,"children":181,"icon":170},"Funções","\u002Fpcs3021\u002Ffuncoes","pcs3021\u002F7.funcoes\u002F1.index",[182],{"title":178,"path":179,"stem":180},{"id":184,"title":142,"body":185,"categoria":564,"creditoLink":564,"creditos":564,"descricao":564,"description":565,"eaulas":564,"extension":566,"meta":567,"navigation":273,"path":138,"seo":569,"stem":139,"video":564,"youtube":564,"youtubeLink":564,"__hash__":570},"docs\u002Fpcs3021\u002F6.animacao\u002F1.index.md",{"type":186,"value":187,"toc":559},"minimark",[188,207,212,217,226,298,322,333,341,438,441,480,555],[189,190,191,192,196,197,200,201,203,204,206],"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 ",[193,194,195],"strong",{},"setup()"," e ",[193,198,199],{},"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 ",[193,202,195],{}," será executada uma única vez, enquanto que o conteúdo de ",[193,205,199],{}," é 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.",[208,209,211],"h2",{"id":210},"gerando-imagens-com-movimento","Gerando imagens com movimento",[213,214,216],"h3",{"id":215},"as-funções-setup-e-draw","As funções setup() e draw()",[189,218,219,220,222,223,225],{},"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 ",[193,221,195],{}," e outro constituindo-se no conteúdo da função ",[193,224,199],{},", como mostrado na listagem a seguir.",[227,228,232],"pre",{"className":229,"code":230,"language":231,"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",[233,234,235,255,262,268,275,287,293],"code",{"__ignoreMap":5},[236,237,240,244,248,252],"span",{"class":238,"line":239},"line",1,[236,241,243],{"class":242},"spNyl","function",[236,245,247],{"class":246},"s2Zo4"," setup",[236,249,251],{"class":250},"sMK4o","()",[236,253,254],{"class":250}," {\n",[236,256,258],{"class":238,"line":257},2,[236,259,261],{"class":260},"sHwdD","  \u002F\u002F comandos a ser executados só uma vez, quando o programa começa\n",[236,263,265],{"class":238,"line":264},3,[236,266,267],{"class":250},"}\n",[236,269,271],{"class":238,"line":270},4,[236,272,274],{"emptyLinePlaceholder":273},true,"\n",[236,276,278,280,283,285],{"class":238,"line":277},5,[236,279,243],{"class":242},[236,281,282],{"class":246}," draw",[236,284,251],{"class":250},[236,286,254],{"class":250},[236,288,290],{"class":238,"line":289},6,[236,291,292],{"class":260},"  \u002F\u002F comandos a executar repetidamente, enquanto o programa estiver rodando\n",[236,294,296],{"class":238,"line":295},7,[236,297,267],{"class":250},[189,299,300,301,303,304,306,307,309,310,314,315,317,318,321],{},"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 ",[193,302,195],{}," é executado, uma única vez, quando nosso programa tem sua execução iniciada; em seguida é executado o conteúdo da ",[193,305,199],{},", 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 ",[193,308,199],{}," a janela gráfica é atualizada com os resultados desse processamento. Por ",[311,312,313],"em",{},"default"," a ",[193,316,199],{}," é 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 ",[193,319,320],{},"frameRate()",", que define a quantidade de atualizações da janela gráfica, por segundo, que desejamos.",[189,323,324,325,327,328,196,330,332],{},"Qualquer um dos programas vistos até o momento funcionaria da mesma forma se colocado dentro da função ",[233,326,195],{},", como ilustrado pela listagem a seguir, que mostra nosso primeiro programa em p5.js, agora utilizando as funções ",[193,329,195],{},[193,331,199],{},".",[189,334,335,336,196,338,340],{},"Uma vez que passamos a utilizar as funções ",[193,337,195],{},[193,339,199],{},", 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.",[342,343,344,345],"code-preview",{},"Código - Estrutura básica com setup() e draw()",[346,347,348],"template",{"v-slot:code":5},[227,349,351],{"className":229,"code":350,"language":231,"meta":5,"style":5},"function setup() {\n  createCanvas(400, 400);\n  line(0, 0, 200, 200);\n}\n\nfunction draw() {\n}\n",[233,352,353,363,388,416,420,424,434],{"__ignoreMap":5},[236,354,355,357,359,361],{"class":238,"line":239},[236,356,243],{"class":242},[236,358,247],{"class":246},[236,360,251],{"class":250},[236,362,254],{"class":250},[236,364,365,368,372,376,379,382,385],{"class":238,"line":257},[236,366,367],{"class":246},"  createCanvas",[236,369,371],{"class":370},"swJcz","(",[236,373,375],{"class":374},"sbssI","400",[236,377,378],{"class":250},",",[236,380,381],{"class":374}," 400",[236,383,384],{"class":370},")",[236,386,387],{"class":250},";\n",[236,389,390,393,395,398,400,403,405,408,410,412,414],{"class":238,"line":264},[236,391,392],{"class":246},"  line",[236,394,371],{"class":370},[236,396,397],{"class":374},"0",[236,399,378],{"class":250},[236,401,402],{"class":374}," 0",[236,404,378],{"class":250},[236,406,407],{"class":374}," 200",[236,409,378],{"class":250},[236,411,407],{"class":374},[236,413,384],{"class":370},[236,415,387],{"class":250},[236,417,418],{"class":238,"line":270},[236,419,267],{"class":250},[236,421,422],{"class":238,"line":277},[236,423,274],{"emptyLinePlaceholder":273},[236,425,426,428,430,432],{"class":238,"line":289},[236,427,243],{"class":242},[236,429,282],{"class":246},[236,431,251],{"class":250},[236,433,254],{"class":250},[236,435,436],{"class":238,"line":295},[236,437,267],{"class":250},[439,440],"p5-sketch",{"code":350},[442,443,444,449,463],"blockquote",{},[189,445,446],{},[193,447,448],{},"Atividade 1",[189,450,451,452,455,456,458,459,462],{},"Modifique o programa anterior, movendo a chamada da função ",[193,453,454],{},"line()"," para o bloco da função ",[193,457,199],{},". Mudou alguma coisa? Agora modifique a chamada para ",[193,460,461],{},"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.",[189,464,465,466,196,469,472,473,196,476,479],{},"Observação: a exemplo das já conhecidas ",[193,467,468],{},"width",[193,470,471],{},"height",", ",[193,474,475],{},"mouseX",[193,477,478],{},"mouseY"," são variáveis de sistema; seus conteúdos correspondem à posição atual do mouse.",[442,481,482,487,523,540],{},[189,483,484],{},[193,485,486],{},"Saiba mais sobre funções",[189,488,489,490,493,494,472,497,472,500,472,503,196,506,509,510,512,513,196,516,519,520,522],{},"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 (",[311,491,492],{},"library"," em inglês) p5.js, como ",[193,495,496],{},"createCanvas()",[193,498,499],{},"circle()",[193,501,502],{},"rect()",[193,504,505],{},"noFill()",[193,507,508],{},"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 ",[193,511,499],{}," que deve receber, nessa ordem, as coordenadas ",[193,514,515],{},"x",[193,517,518],{},"y"," do centro do círculo e seu diâmetro) e se a função retorna alguma coisa (como por exemplo a ",[193,521,508],{},", que retorna um número aleatório).",[189,524,525,526,196,528,530,531,533,534,536,537,539],{},"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 ",[193,527,195],{},[193,529,199],{},", 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 ",[193,532,195],{}," é chamada quando o programa inicia, a ",[193,535,199],{}," a cada determinado período de tempo (1\u002F60 de segundo, por ",[311,538,313],{},"), 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.",[189,541,542,543,546,547,550,551,554],{},"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 ",[233,544,545],{},"void"," antes do nome da função). Toda função é declarada simplesmente com ",[233,548,549],{},"function nomeDaFuncao() { ... }",", e ela pode ou não usar a palavra ",[233,552,553],{},"return"," para devolver um valor — isso não precisa ser indicado com antecedência.",[556,557,558],"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":257,"depth":257,"links":560},[561],{"id":210,"depth":257,"text":211,"children":562},[563],{"id":215,"depth":264,"text":216},null,"Entenda como fazer projetos animados com p5.js","md",{"authors":568},"Ricardo Nakamura, Romero Tori e Sofia Tori",{"title":142,"description":565},"7lzR8PEnQ_zksT2WFbtn08e0yqsIifFd6jhv0PN6Cfg",[572,574],{"title":133,"path":134,"stem":135,"description":573,"children":-1},"Aprenda a usar o laço while para repetir instruções enquanto uma condição for verdadeira",{"title":144,"path":145,"stem":146,"description":5,"children":-1},1786195203643]