[{"data":1,"prerenderedAt":446},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-programacao-expressoes-numericas":46,"-pcs3021-programacao-expressoes-numericas-surround":442},[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],{"title":15,"path":11,"stem":16},"Exemplo","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":27},"Geometrias","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[23],{"title":24,"path":25,"stem":26},"Formas Geométricas Irregulares (Shape)","\u002Fpcs3021\u002Fgeometrias\u002Fformas-irregulares","pcs3021\u002F2.geometrias\u002F1.formas-irregulares",false,{"title":29,"icon":30,"path":31,"stem":32,"children":33,"page":27},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F2.programacao",[34,38,42],{"title":35,"path":36,"stem":37},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F2.programacao\u002F1.variaveis",{"title":39,"path":40,"stem":41},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F2.programacao\u002F2.expressoes-numericas",{"title":43,"path":44,"stem":45},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F2.programacao\u002F3.for",{"id":47,"title":39,"body":48,"categoria":436,"creditoLink":436,"creditos":436,"descricao":436,"description":437,"eaulas":436,"extension":438,"meta":439,"navigation":134,"path":40,"seo":440,"stem":41,"video":436,"youtube":436,"youtubeLink":436,"__hash__":441},"docs\u002Fpcs3021\u002F2.programacao\u002F2.expressoes-numericas.md",{"type":49,"value":50,"toc":434},"minimark",[51,64,336,340,343,346,349,368,372,375,424,430],[52,53,54,55,59,60,63],"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: ",[56,57,58],"code",{},"width"," (contém a largura da janela) e ",[56,61,62],{},"height"," (contém a altura da janela).",[65,66,67,71,72],"code-preview",{},[68,69,70],"strong",{},"Exemplo 1",". Declaração de variável em P5.js",[73,74,75],"template",{"v-slot:code":5},[76,77,81],"pre",{"className":78,"code":79,"language":80,"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",[56,82,83,103,129,136,154,169,174,204,230,235,262,297,330],{"__ignoreMap":5},[84,85,88,92,96,100],"span",{"class":86,"line":87},"line",1,[84,89,91],{"class":90},"spNyl","function",[84,93,95],{"class":94},"s2Zo4"," setup",[84,97,99],{"class":98},"sMK4o","()",[84,101,102],{"class":98}," {\n",[84,104,106,109,113,117,120,123,126],{"class":86,"line":105},2,[84,107,108],{"class":94},"  createCanvas",[84,110,112],{"class":111},"swJcz","(",[84,114,116],{"class":115},"sbssI","400",[84,118,119],{"class":98},",",[84,121,122],{"class":115}," 400",[84,124,125],{"class":111},")",[84,127,128],{"class":98},";\n",[84,130,132],{"class":86,"line":131},3,[84,133,135],{"emptyLinePlaceholder":134},true,"\n",[84,137,139,142,146,149,152],{"class":86,"line":138},4,[84,140,141],{"class":90},"  let",[84,143,145],{"class":144},"sTEyZ"," largura",[84,147,148],{"class":98}," =",[84,150,151],{"class":115}," 200",[84,153,128],{"class":98},[84,155,157,159,162,164,167],{"class":86,"line":156},5,[84,158,141],{"class":90},[84,160,161],{"class":144}," altura",[84,163,148],{"class":98},[84,165,166],{"class":115}," 100",[84,168,128],{"class":98},[84,170,172],{"class":86,"line":171},6,[84,173,135],{"emptyLinePlaceholder":134},[84,175,177,179,182,184,187,189,192,194,197,199,202],{"class":86,"line":176},7,[84,178,141],{"class":90},[84,180,181],{"class":144}," pos_x",[84,183,148],{"class":98},[84,185,186],{"class":111}," (",[84,188,58],{"class":144},[84,190,191],{"class":98}," -",[84,193,145],{"class":144},[84,195,196],{"class":111},") ",[84,198,6],{"class":98},[84,200,201],{"class":115}," 2",[84,203,128],{"class":98},[84,205,207,209,212,214,216,218,220,222,224,226,228],{"class":86,"line":206},8,[84,208,141],{"class":90},[84,210,211],{"class":144}," pos_y",[84,213,148],{"class":98},[84,215,186],{"class":111},[84,217,62],{"class":144},[84,219,191],{"class":98},[84,221,161],{"class":144},[84,223,196],{"class":111},[84,225,6],{"class":98},[84,227,201],{"class":115},[84,229,128],{"class":98},[84,231,233],{"class":86,"line":232},9,[84,234,135],{"emptyLinePlaceholder":134},[84,236,238,241,243,246,248,250,252,254,256,258,260],{"class":86,"line":237},10,[84,239,240],{"class":94},"  rect",[84,242,112],{"class":111},[84,244,245],{"class":144},"pos_x",[84,247,119],{"class":98},[84,249,211],{"class":144},[84,251,119],{"class":98},[84,253,145],{"class":144},[84,255,119],{"class":98},[84,257,161],{"class":144},[84,259,125],{"class":111},[84,261,128],{"class":98},[84,263,265,268,270,272,274,276,278,280,283,285,287,289,291,293,295],{"class":86,"line":264},11,[84,266,267],{"class":94},"  line",[84,269,112],{"class":111},[84,271,245],{"class":144},[84,273,119],{"class":98},[84,275,211],{"class":144},[84,277,119],{"class":98},[84,279,181],{"class":144},[84,281,282],{"class":98}," +",[84,284,145],{"class":144},[84,286,119],{"class":98},[84,288,211],{"class":144},[84,290,282],{"class":98},[84,292,161],{"class":144},[84,294,125],{"class":111},[84,296,128],{"class":98},[84,298,300,302,304,306,308,310,312,314,316,318,320,322,324,326,328],{"class":86,"line":299},12,[84,301,267],{"class":94},[84,303,112],{"class":111},[84,305,245],{"class":144},[84,307,119],{"class":98},[84,309,211],{"class":144},[84,311,282],{"class":98},[84,313,161],{"class":144},[84,315,119],{"class":98},[84,317,181],{"class":144},[84,319,282],{"class":98},[84,321,145],{"class":144},[84,323,119],{"class":98},[84,325,211],{"class":144},[84,327,125],{"class":111},[84,329,128],{"class":98},[84,331,333],{"class":86,"line":332},13,[84,334,335],{"class":98},"}\n",[337,338],"p5-sketch",{"code":339},"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",[52,341,342],{},"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.",[52,344,345],{},"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.",[52,347,348],{},"As operações matemáticas disponíveis são:",[350,351,352,356,359,362,365],"ul",{},[353,354,355],"li",{},"adição (+)",[353,357,358],{},"subtração (-)",[353,360,361],{},"multiplicação (*)",[353,363,364],{},"resto da divisão inteira (%)",[353,366,367],{},"divisão (\u002F)",[369,370,371],"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.",[52,373,374],{},"Exemplos:",[76,376,378],{"className":78,"code":377,"language":80,"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",[56,379,380,403],{"__ignoreMap":5},[84,381,382,385,388,390,393,396,399],{"class":86,"line":87},[84,383,384],{"class":144},"x ",[84,386,387],{"class":98},"=",[84,389,201],{"class":115},[84,391,392],{"class":98},"*",[84,394,395],{"class":144},"x",[84,397,398],{"class":98},";",[84,400,402],{"class":401},"sHwdD"," \u002F\u002F dobra o valor da variável x\n",[84,404,405,408,410,413,416,419,421],{"class":86,"line":105},[84,406,407],{"class":144},"contador ",[84,409,387],{"class":98},[84,411,412],{"class":144}," contador ",[84,414,415],{"class":98},"+",[84,417,418],{"class":115}," 1",[84,420,398],{"class":98},[84,422,423],{"class":401}," \u002F\u002F incrementa a variável contador\n",[52,425,426,427,429],{},"É importante ressaltar que o sinal de ",[56,428,387],{}," 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.",[431,432,433],"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":105,"depth":105,"links":435},[],null,"Aprenda a usar variáveis para gerar imagens no Processing","md",{},{"title":39,"description":437},"qD7SzIhArY11FgUJ4uaPtapWnVdaVjWyzciwnmcbWPk",[443,445],{"title":35,"path":36,"stem":37,"description":444,"children":-1},"Entenda como podemos usar as variáveis para armazenar valores nos nossos programas",{"title":43,"path":44,"stem":45,"description":436,"children":-1},1784079668845]