[{"data":1,"prerenderedAt":584},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-programacao-expressoes-numericas":183,"-pcs3021-programacao-expressoes-numericas-surround":579},[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":117,"body":185,"categoria":573,"creditoLink":573,"creditos":573,"descricao":573,"description":574,"eaulas":573,"extension":575,"meta":576,"navigation":271,"path":118,"seo":577,"stem":119,"video":573,"youtube":573,"youtubeLink":573,"__hash__":578},"docs\u002Fpcs3021\u002F5.programacao\u002F2.expressoes-numericas.md",{"type":186,"value":187,"toc":571},"minimark",[188,201,473,477,480,483,486,505,509,512,561,567],[189,190,191,192,196,197,200],"p",{},"Além de atribuir diretamente os valores às variáveis, podemos também escrever expressões matemáticas envolvendo essas variáveis. Por exemplo, o seguinte programa usa expressões envolvendo variáveis para desenhar um retângulo e suas diagonais sempre centralizados na tela gráfica.  Além das variáveis criadas pelo programa são usadas duas variáveis geradas automaticamente pelo sistema: ",[193,194,195],"code",{},"width"," (contém a largura da janela) e ",[193,198,199],{},"height"," (contém a altura da janela).",[202,203,204,208,209],"code-preview",{},[205,206,207],"strong",{},"Exemplo 1",". Declaração de variável em P5.js",[210,211,212],"template",{"v-slot:code":5},[213,214,218],"pre",{"className":215,"code":216,"language":217,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function setup() {\n  createCanvas(400, 400);\n\n  let largura = 200;\n  let altura = 100;\n\n  let pos_x = (width - largura) \u002F 2;\n  let pos_y = (height - altura) \u002F 2;\n\n  rect(pos_x, pos_y, largura, altura);\n  line(pos_x, pos_y, pos_x + largura, pos_y + altura);\n  line(pos_x, pos_y + altura, pos_x + largura, pos_y);\n}\n","js",[193,219,220,240,266,273,291,306,311,341,367,372,399,434,467],{"__ignoreMap":5},[221,222,225,229,233,237],"span",{"class":223,"line":224},"line",1,[221,226,228],{"class":227},"spNyl","function",[221,230,232],{"class":231},"s2Zo4"," setup",[221,234,236],{"class":235},"sMK4o","()",[221,238,239],{"class":235}," {\n",[221,241,243,246,250,254,257,260,263],{"class":223,"line":242},2,[221,244,245],{"class":231},"  createCanvas",[221,247,249],{"class":248},"swJcz","(",[221,251,253],{"class":252},"sbssI","400",[221,255,256],{"class":235},",",[221,258,259],{"class":252}," 400",[221,261,262],{"class":248},")",[221,264,265],{"class":235},";\n",[221,267,269],{"class":223,"line":268},3,[221,270,272],{"emptyLinePlaceholder":271},true,"\n",[221,274,276,279,283,286,289],{"class":223,"line":275},4,[221,277,278],{"class":227},"  let",[221,280,282],{"class":281},"sTEyZ"," largura",[221,284,285],{"class":235}," =",[221,287,288],{"class":252}," 200",[221,290,265],{"class":235},[221,292,294,296,299,301,304],{"class":223,"line":293},5,[221,295,278],{"class":227},[221,297,298],{"class":281}," altura",[221,300,285],{"class":235},[221,302,303],{"class":252}," 100",[221,305,265],{"class":235},[221,307,309],{"class":223,"line":308},6,[221,310,272],{"emptyLinePlaceholder":271},[221,312,314,316,319,321,324,326,329,331,334,336,339],{"class":223,"line":313},7,[221,315,278],{"class":227},[221,317,318],{"class":281}," pos_x",[221,320,285],{"class":235},[221,322,323],{"class":248}," (",[221,325,195],{"class":281},[221,327,328],{"class":235}," -",[221,330,282],{"class":281},[221,332,333],{"class":248},") ",[221,335,6],{"class":235},[221,337,338],{"class":252}," 2",[221,340,265],{"class":235},[221,342,344,346,349,351,353,355,357,359,361,363,365],{"class":223,"line":343},8,[221,345,278],{"class":227},[221,347,348],{"class":281}," pos_y",[221,350,285],{"class":235},[221,352,323],{"class":248},[221,354,199],{"class":281},[221,356,328],{"class":235},[221,358,298],{"class":281},[221,360,333],{"class":248},[221,362,6],{"class":235},[221,364,338],{"class":252},[221,366,265],{"class":235},[221,368,370],{"class":223,"line":369},9,[221,371,272],{"emptyLinePlaceholder":271},[221,373,375,378,380,383,385,387,389,391,393,395,397],{"class":223,"line":374},10,[221,376,377],{"class":231},"  rect",[221,379,249],{"class":248},[221,381,382],{"class":281},"pos_x",[221,384,256],{"class":235},[221,386,348],{"class":281},[221,388,256],{"class":235},[221,390,282],{"class":281},[221,392,256],{"class":235},[221,394,298],{"class":281},[221,396,262],{"class":248},[221,398,265],{"class":235},[221,400,402,405,407,409,411,413,415,417,420,422,424,426,428,430,432],{"class":223,"line":401},11,[221,403,404],{"class":231},"  line",[221,406,249],{"class":248},[221,408,382],{"class":281},[221,410,256],{"class":235},[221,412,348],{"class":281},[221,414,256],{"class":235},[221,416,318],{"class":281},[221,418,419],{"class":235}," +",[221,421,282],{"class":281},[221,423,256],{"class":235},[221,425,348],{"class":281},[221,427,419],{"class":235},[221,429,298],{"class":281},[221,431,262],{"class":248},[221,433,265],{"class":235},[221,435,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465],{"class":223,"line":436},12,[221,438,404],{"class":231},[221,440,249],{"class":248},[221,442,382],{"class":281},[221,444,256],{"class":235},[221,446,348],{"class":281},[221,448,419],{"class":235},[221,450,298],{"class":281},[221,452,256],{"class":235},[221,454,318],{"class":281},[221,456,419],{"class":235},[221,458,282],{"class":281},[221,460,256],{"class":235},[221,462,348],{"class":281},[221,464,262],{"class":248},[221,466,265],{"class":235},[221,468,470],{"class":223,"line":469},13,[221,471,472],{"class":235},"}\n",[474,475],"p5-sketch",{"code":476},"function setup() {\ncreateCanvas(400, 400);\n\nlet largura = 200;\nlet altura = 100;\n\nlet pos_x = (width - largura) \u002F 2;\nlet pos_y = (height - altura) \u002F 2;\n\nrect(pos_x, pos_y, largura, altura);\nline(pos_x, pos_y, pos_x + largura, pos_y + altura);\nline(pos_x, pos_y + altura, pos_x + largura, pos_y);\n}\n",[189,478,479],{},"Experimente modificar as dimensões da janela gráfica e\u002Fou altura e\u002Fou largura e executar novamente o programa. Note que o retângulo e suas diagonais permanecem centralizados na janela.",[189,481,482],{},"Vimos então que é possível usar uma expressão aritmética envolvendo variáveis e números, cujo resultado seja um valor numérico compatível com o tipo da variável destino. No exemplo foram utilizadas a soma(+), a subtração(-) e a divisão (\u002F). Além dessas operações, podemos usar outros operadores para construir as expressões, bem como combiná-los para criar expressões mais complexas.",[189,484,485],{},"As operações matemáticas disponíveis são:",[487,488,489,493,496,499,502],"ul",{},[490,491,492],"li",{},"adição (+)",[490,494,495],{},"subtração (-)",[490,497,498],{},"multiplicação (*)",[490,500,501],{},"resto da divisão inteira (%)",[490,503,504],{},"divisão (\u002F)",[506,507,508],"tip",{},"Note que usar uma variável numa expressão aritmética não provoca nenhuma alteração em seu valor, que é apenas usado para o cálculo da expressão. Somente a variável do lado esquerdo do sinal de = é que tem seu valor substituído pelo resultado da expressão aritmética. É possível também usar no cálculo a própria variável que terá seu valor substituído pelo resultado da expressão, uma vez que primeiro a expressão é calculada para em seguida o valor da variável ser substituído pelo resultado.",[189,510,511],{},"Exemplos:",[213,513,515],{"className":215,"code":514,"language":217,"meta":5,"style":5},"x = 2*x; \u002F\u002F dobra o valor da variável x\ncontador = contador + 1; \u002F\u002F incrementa a variável contador\n",[193,516,517,540],{"__ignoreMap":5},[221,518,519,522,525,527,530,533,536],{"class":223,"line":224},[221,520,521],{"class":281},"x ",[221,523,524],{"class":235},"=",[221,526,338],{"class":252},[221,528,529],{"class":235},"*",[221,531,532],{"class":281},"x",[221,534,535],{"class":235},";",[221,537,539],{"class":538},"sHwdD"," \u002F\u002F dobra o valor da variável x\n",[221,541,542,545,547,550,553,556,558],{"class":223,"line":242},[221,543,544],{"class":281},"contador ",[221,546,524],{"class":235},[221,548,549],{"class":281}," contador ",[221,551,552],{"class":235},"+",[221,554,555],{"class":252}," 1",[221,557,535],{"class":235},[221,559,560],{"class":538}," \u002F\u002F incrementa a variável contador\n",[189,562,563,564,566],{},"É importante ressaltar que o sinal de ",[193,565,524],{}," em linguagens de programação representa uma atribuição de valor, não uma equação. Se fosse uma equação matemática, x = 2x significaria que x deveria ser obrigatoriamente 0, bem diferente de dobrar o valor de x, enquanto que contador = contador+1 seria uma equação insolúvel.",[568,569,570],"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 .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}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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}",{"title":5,"searchDepth":242,"depth":242,"links":572},[],null,"Aprenda a usar variáveis para gerar imagens no Processing","md",{},{"title":117,"description":574},"pWr041nEwJ_QKG0Dht4J000N9lyrcUaPI4FbaZ40ONU",[580,582],{"title":113,"path":114,"stem":115,"description":581,"children":-1},"Entenda como podemos usar as variáveis para armazenar valores nos nossos programas",{"title":121,"path":122,"stem":123,"description":583,"children":-1},"Aprenda a usar o laço for para repetir instruções e criar vários objetos de forma organizada",1786195203070]