[{"data":1,"prerenderedAt":515},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-programacao-variaveis":183,"-pcs3021-programacao-variaveis-surround":510},[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":113,"body":185,"categoria":503,"creditoLink":503,"creditos":503,"descricao":503,"description":504,"eaulas":503,"extension":505,"meta":506,"navigation":507,"path":114,"seo":508,"stem":115,"video":503,"youtube":503,"youtubeLink":503,"__hash__":509},"docs\u002Fpcs3021\u002F5.programacao\u002F1.variaveis.md",{"type":186,"value":187,"toc":499},"minimark",[188,193,197,200,237,240,266,273,313,316,344,348,492,495],[189,190,192],"h2",{"id":191},"entenda-o-conceito","Entenda o conceito",[194,195,196],"p",{},"A forma mais simples de se entender uma variável em um programa é como um nome dado para um valor. Uma analogia com o mundo real pode ser o de uma gaveta com uma etiqueta colada. Na etiqueta, podemos escrever um nome qualquer que nos ajude a lembrar o que está guardado na gaveta. Analogamente, as linguagens de programação permitem que criemos “gavetas virtuais” para armazenar informação. No caso do Processing, e em muitas das principais linguagens de programação, cada “gaveta” só pode guardar um tipo de informação (por exemplo: números inteiros, números reais, imagens, textos etc.). Antes de ser usada para armazenar algum dado, a variável precisa ser declarada. É nesse momento em que especificamos seu tipo, ou seja, qual categoria de informação poderá armazenar.",[194,198,199],{},"Para criar uma variável que armazena números inteiros – um dos tipos de informação mais comuns e úteis nos programas – devemos escrever uma linha como a seguinte:",[201,202,203,207,208],"code-preview",{},[204,205,206],"strong",{},"Exemplo 1",". Declaração de variável em P5.js",[209,210,211],"template",{"v-slot:code":5},[212,213,217],"pre",{"className":214,"code":215,"language":216,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","let nomeDaVariavel;  \n","js",[218,219,220],"code",{"__ignoreMap":5},[221,222,225,229,233],"span",{"class":223,"line":224},"line",1,[221,226,228],{"class":227},"spNyl","let",[221,230,232],{"class":231},"sTEyZ"," nomeDaVariavel",[221,234,236],{"class":235},"sMK4o",";\n",[194,238,239],{},"Claro que “nomeDaVariavel” foi apenas um exemplo. Você poderá dar qualquer nome à sua variável desde que formado por letras, números e\u002Fou o caractere “sublinhado” (_). O nome não pode começar com um número nem pode ter espaços. Exemplos de nomes válidos: largura, posicaoX, tamanho_da_letra.",[194,241,242,243,246,247,246,250,253,254,257,258,261,262,265],{},"Outra informação importante é que maiúsculas e minúsculas são diferentes em nomes de variáveis. Portanto o Processing entende ",[218,244,245],{},"Largura",", ",[218,248,249],{},"largura",[218,251,252],{},"LaRgUrA"," e ",[218,255,256],{},"LARGURA"," como quatro variáveis diferentes. Quando escrevemos algo como ",[218,259,260],{},"let x;"," estamos, efetivamente, dizendo que a variável ",[218,263,264],{},"x"," existe – ou seja, criamos um nome ou \"gaveta\" para uso no programa.",[194,267,268,269,272],{},"Para que a \"gaveta\" não fique vazia, precisamos associar um valor a essa variável. A maioria das linguagens usa o caractere ",[218,270,271],{},"="," para indicar essa atribuição de um valor à variável. A sequência de comandos abaixo exemplifica como atribuir (“guardar”) o valor 4 à variável abc:",[201,274,275,278,279],{},[204,276,277],{},"Exemplo 2",". Declaração de variável com atribuição de valor.",[209,280,281],{"v-slot:code":5},[212,282,284],{"className":214,"code":283,"language":216,"meta":5,"style":5},"let abc; \nabc = 4; \n",[218,285,286,299],{"__ignoreMap":5},[221,287,288,290,293,296],{"class":223,"line":224},[221,289,228],{"class":227},[221,291,292],{"class":231}," abc",[221,294,295],{"class":235},";",[221,297,298],{"class":231}," \n",[221,300,302,305,307,311],{"class":223,"line":301},2,[221,303,304],{"class":231},"abc ",[221,306,271],{"class":235},[221,308,310],{"class":309},"sbssI"," 4",[221,312,236],{"class":235},[194,314,315],{},"Podemos resumir o comando em uma linha só:",[201,317,318],{},[209,319,320],{"v-slot:code":5},[212,321,322],{"className":214,"code":283,"language":216,"meta":5,"style":5},[218,323,324,334],{"__ignoreMap":5},[221,325,326,328,330,332],{"class":223,"line":224},[221,327,228],{"class":227},[221,329,292],{"class":231},[221,331,295],{"class":235},[221,333,298],{"class":231},[221,335,336,338,340,342],{"class":223,"line":301},[221,337,304],{"class":231},[221,339,271],{"class":235},[221,341,310],{"class":309},[221,343,236],{"class":235},[189,345,347],{"id":346},"exemplos","Exemplos",[201,349,350,351],{},"Código  - Exemplo de definição de uma forma geométrica utilizando vértices",[209,352,353],{"v-slot:code":5},[212,354,356],{"className":214,"code":355,"language":216,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  let x = 200;\n  let y = 150;\n  let largura = 300;\n  let altura = 400;\n  rect(x,y,largura,altura);\n}\n",[218,357,358,373,396,413,428,443,458,486],{"__ignoreMap":5},[221,359,360,363,367,370],{"class":223,"line":224},[221,361,362],{"class":227},"function",[221,364,366],{"class":365},"s2Zo4"," setup",[221,368,369],{"class":235},"()",[221,371,372],{"class":235}," {\n",[221,374,375,378,382,385,388,391,394],{"class":223,"line":301},[221,376,377],{"class":365},"  createCanvas",[221,379,381],{"class":380},"swJcz","(",[221,383,384],{"class":309},"800",[221,386,387],{"class":235},",",[221,389,390],{"class":309},"600",[221,392,393],{"class":380},")",[221,395,236],{"class":235},[221,397,399,402,405,408,411],{"class":223,"line":398},3,[221,400,401],{"class":227},"  let",[221,403,404],{"class":231}," x",[221,406,407],{"class":235}," =",[221,409,410],{"class":309}," 200",[221,412,236],{"class":235},[221,414,416,418,421,423,426],{"class":223,"line":415},4,[221,417,401],{"class":227},[221,419,420],{"class":231}," y",[221,422,407],{"class":235},[221,424,425],{"class":309}," 150",[221,427,236],{"class":235},[221,429,431,433,436,438,441],{"class":223,"line":430},5,[221,432,401],{"class":227},[221,434,435],{"class":231}," largura",[221,437,407],{"class":235},[221,439,440],{"class":309}," 300",[221,442,236],{"class":235},[221,444,446,448,451,453,456],{"class":223,"line":445},6,[221,447,401],{"class":227},[221,449,450],{"class":231}," altura",[221,452,407],{"class":235},[221,454,455],{"class":309}," 400",[221,457,236],{"class":235},[221,459,461,464,466,468,470,473,475,477,479,482,484],{"class":223,"line":460},7,[221,462,463],{"class":365},"  rect",[221,465,381],{"class":380},[221,467,264],{"class":231},[221,469,387],{"class":235},[221,471,472],{"class":231},"y",[221,474,387],{"class":235},[221,476,249],{"class":231},[221,478,387],{"class":235},[221,480,481],{"class":231},"altura",[221,483,393],{"class":380},[221,485,236],{"class":235},[221,487,489],{"class":223,"line":488},8,[221,490,491],{"class":235},"}\n",[493,494],"p5-sketch",{"code":355},[496,497,498],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":5,"searchDepth":301,"depth":301,"links":500},[501,502],{"id":191,"depth":301,"text":192},{"id":346,"depth":301,"text":347},null,"Entenda como podemos usar as variáveis para armazenar valores nos nossos programas","md",{},true,{"title":113,"description":504},"LugRkwA3BfhI9sIQi-rPWQSd45FuviLOd4CIypCxmHg",[511,513],{"title":103,"path":104,"stem":105,"description":512,"children":-1},"Veja como isolar o efeito das transformações",{"title":117,"path":118,"stem":119,"description":514,"children":-1},"Aprenda a usar variáveis para gerar imagens no Processing",1786195202996]