[{"data":1,"prerenderedAt":762},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-basicos-preenchimento":183,"-pcs3021-basicos-preenchimento-surround":757},[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":73,"body":185,"categoria":750,"creditoLink":750,"creditos":750,"descricao":750,"description":751,"eaulas":750,"extension":752,"meta":753,"navigation":754,"path":74,"seo":755,"stem":75,"video":750,"youtube":750,"youtubeLink":750,"__hash__":756},"docs\u002Fpcs3021\u002F3.basicos\u002F1.preenchimento.md",{"type":186,"value":187,"toc":745},"minimark",[188,197,227,232,280,284,287,499,502,512,516,529,725,727,741],[189,190,191,192,196],"p",{},"O preenchimento é a cor aplicada ao interior das formas geométricas. No p5.js, ele é definido com o comando ",[193,194,195],"code",{},"fill()",", que passa a valer para todas as formas desenhadas depois dele, até que uma nova cor seja definida ou o preenchimento seja desativado.",[189,198,199,200,202,203,206,207,210,211,214,215,218,219,222,223,226],{},"O comando ",[193,201,195],{}," aceita diferentes formas de chamada: ",[193,204,205],{},"fill(v1, v2, v3, [alpha])"," para valores RGB, ",[193,208,209],{},"fill(gray, [alpha])"," para um único valor de cinza, ou ",[193,212,213],{},"fill(color)"," para uma variável de cor criada com ",[193,216,217],{},"color()",". Por padrão, o p5.js trabalha no modo RGB, com valores de ",[193,220,221],{},"0"," a ",[193,224,225],{},"255"," para cada canal.",[228,229,231],"h2",{"id":230},"estrutura-básica","Estrutura básica",[233,234,235,236],"code-preview",{},"Código - estrutura geral para definição do preenchimento no p5.js",[237,238,239],"template",{"v-slot:code":5},[240,241,245],"pre",{"className":242,"code":243,"language":244,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","fill(v1, v2, v3, [alpha]);\n","js",[193,246,247],{"__ignoreMap":5},[248,249,252,256,260,264,267,269,272,274,277],"span",{"class":250,"line":251},"line",1,[248,253,255],{"class":254},"s2Zo4","fill",[248,257,259],{"class":258},"sTEyZ","(v1",[248,261,263],{"class":262},"sMK4o",",",[248,265,266],{"class":258}," v2",[248,268,263],{"class":262},[248,270,271],{"class":258}," v3",[248,273,263],{"class":262},[248,275,276],{"class":258}," [alpha])",[248,278,279],{"class":262},";\n",[228,281,283],{"id":282},"exemplo","Exemplo",[189,285,286],{},"Para um exemplo de como utilizar esse comando, teste o Código e veja as formas preenchidas com cores diferentes.",[233,288,289,290],{},"Código - Exemplo de definição de preenchimento",[237,291,292],{"v-slot:code":5},[240,293,295],{"className":242,"code":294,"language":244,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  noStroke();\n  fill(255,0,0);\n  ellipse(150,300,150,150);\n  fill(0,150,80);\n  ellipse(400,300,150,150);\n  fill(30,80,200);\n  ellipse(650,300,150,150);\n}\n",[193,296,297,312,336,346,368,396,418,444,467,493],{"__ignoreMap":5},[248,298,299,303,306,309],{"class":250,"line":251},[248,300,302],{"class":301},"spNyl","function",[248,304,305],{"class":254}," setup",[248,307,308],{"class":262},"()",[248,310,311],{"class":262}," {\n",[248,313,315,318,322,326,328,331,334],{"class":250,"line":314},2,[248,316,317],{"class":254},"  createCanvas",[248,319,321],{"class":320},"swJcz","(",[248,323,325],{"class":324},"sbssI","800",[248,327,263],{"class":262},[248,329,330],{"class":324},"600",[248,332,333],{"class":320},")",[248,335,279],{"class":262},[248,337,339,342,344],{"class":250,"line":338},3,[248,340,341],{"class":254},"  noStroke",[248,343,308],{"class":320},[248,345,279],{"class":262},[248,347,349,352,354,356,358,360,362,364,366],{"class":250,"line":348},4,[248,350,351],{"class":254},"  fill",[248,353,321],{"class":320},[248,355,225],{"class":324},[248,357,263],{"class":262},[248,359,221],{"class":324},[248,361,263],{"class":262},[248,363,221],{"class":324},[248,365,333],{"class":320},[248,367,279],{"class":262},[248,369,371,374,376,379,381,384,386,388,390,392,394],{"class":250,"line":370},5,[248,372,373],{"class":254},"  ellipse",[248,375,321],{"class":320},[248,377,378],{"class":324},"150",[248,380,263],{"class":262},[248,382,383],{"class":324},"300",[248,385,263],{"class":262},[248,387,378],{"class":324},[248,389,263],{"class":262},[248,391,378],{"class":324},[248,393,333],{"class":320},[248,395,279],{"class":262},[248,397,399,401,403,405,407,409,411,414,416],{"class":250,"line":398},6,[248,400,351],{"class":254},[248,402,321],{"class":320},[248,404,221],{"class":324},[248,406,263],{"class":262},[248,408,378],{"class":324},[248,410,263],{"class":262},[248,412,413],{"class":324},"80",[248,415,333],{"class":320},[248,417,279],{"class":262},[248,419,421,423,425,428,430,432,434,436,438,440,442],{"class":250,"line":420},7,[248,422,373],{"class":254},[248,424,321],{"class":320},[248,426,427],{"class":324},"400",[248,429,263],{"class":262},[248,431,383],{"class":324},[248,433,263],{"class":262},[248,435,378],{"class":324},[248,437,263],{"class":262},[248,439,378],{"class":324},[248,441,333],{"class":320},[248,443,279],{"class":262},[248,445,447,449,451,454,456,458,460,463,465],{"class":250,"line":446},8,[248,448,351],{"class":254},[248,450,321],{"class":320},[248,452,453],{"class":324},"30",[248,455,263],{"class":262},[248,457,413],{"class":324},[248,459,263],{"class":262},[248,461,462],{"class":324},"200",[248,464,333],{"class":320},[248,466,279],{"class":262},[248,468,470,472,474,477,479,481,483,485,487,489,491],{"class":250,"line":469},9,[248,471,373],{"class":254},[248,473,321],{"class":320},[248,475,476],{"class":324},"650",[248,478,263],{"class":262},[248,480,383],{"class":324},[248,482,263],{"class":262},[248,484,378],{"class":324},[248,486,263],{"class":262},[248,488,378],{"class":324},[248,490,333],{"class":320},[248,492,279],{"class":262},[248,494,496],{"class":250,"line":495},10,[248,497,498],{"class":262},"}\n",[500,501],"p5-sketch",{"code":294},[503,504,199,505,507,508,511],"tip",{},[193,506,195],{}," precisa ser chamado antes da forma que ele deve colorir, já que o p5.js aplica o último valor definido no momento em que a forma é desenhada. Para remover o preenchimento e deixar apenas o contorno visível, use ",[193,509,510],{},"noFill()",".",[228,513,515],{"id":514},"transparência","Transparência",[189,517,518,519,522,523,525,526,528],{},"Um quarto parâmetro opcional, o canal ",[193,520,521],{},"alpha",", controla a transparência do preenchimento, também na faixa de ",[193,524,221],{}," (totalmente transparente) a ",[193,527,225],{}," (totalmente opaco). Sobrepor formas com transparência é uma forma simples de criar efeitos de mistura de cor.",[233,530,531,532],{},"Código - Exemplo de preenchimento com transparência",[237,533,534],{"v-slot:code":5},[240,535,537],{"className":242,"code":536,"language":244,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  noStroke();\n  fill(255,0,0,150);\n  ellipse(350,280,300,300);\n  fill(0,150,80,150);\n  ellipse(450,280,300,300);\n  fill(30,80,200,150);\n  ellipse(400,380,300,300);\n}\n",[193,538,539,549,565,573,597,623,647,672,696,721],{"__ignoreMap":5},[248,540,541,543,545,547],{"class":250,"line":251},[248,542,302],{"class":301},[248,544,305],{"class":254},[248,546,308],{"class":262},[248,548,311],{"class":262},[248,550,551,553,555,557,559,561,563],{"class":250,"line":314},[248,552,317],{"class":254},[248,554,321],{"class":320},[248,556,325],{"class":324},[248,558,263],{"class":262},[248,560,330],{"class":324},[248,562,333],{"class":320},[248,564,279],{"class":262},[248,566,567,569,571],{"class":250,"line":338},[248,568,341],{"class":254},[248,570,308],{"class":320},[248,572,279],{"class":262},[248,574,575,577,579,581,583,585,587,589,591,593,595],{"class":250,"line":348},[248,576,351],{"class":254},[248,578,321],{"class":320},[248,580,225],{"class":324},[248,582,263],{"class":262},[248,584,221],{"class":324},[248,586,263],{"class":262},[248,588,221],{"class":324},[248,590,263],{"class":262},[248,592,378],{"class":324},[248,594,333],{"class":320},[248,596,279],{"class":262},[248,598,599,601,603,606,608,611,613,615,617,619,621],{"class":250,"line":370},[248,600,373],{"class":254},[248,602,321],{"class":320},[248,604,605],{"class":324},"350",[248,607,263],{"class":262},[248,609,610],{"class":324},"280",[248,612,263],{"class":262},[248,614,383],{"class":324},[248,616,263],{"class":262},[248,618,383],{"class":324},[248,620,333],{"class":320},[248,622,279],{"class":262},[248,624,625,627,629,631,633,635,637,639,641,643,645],{"class":250,"line":398},[248,626,351],{"class":254},[248,628,321],{"class":320},[248,630,221],{"class":324},[248,632,263],{"class":262},[248,634,378],{"class":324},[248,636,263],{"class":262},[248,638,413],{"class":324},[248,640,263],{"class":262},[248,642,378],{"class":324},[248,644,333],{"class":320},[248,646,279],{"class":262},[248,648,649,651,653,656,658,660,662,664,666,668,670],{"class":250,"line":420},[248,650,373],{"class":254},[248,652,321],{"class":320},[248,654,655],{"class":324},"450",[248,657,263],{"class":262},[248,659,610],{"class":324},[248,661,263],{"class":262},[248,663,383],{"class":324},[248,665,263],{"class":262},[248,667,383],{"class":324},[248,669,333],{"class":320},[248,671,279],{"class":262},[248,673,674,676,678,680,682,684,686,688,690,692,694],{"class":250,"line":446},[248,675,351],{"class":254},[248,677,321],{"class":320},[248,679,453],{"class":324},[248,681,263],{"class":262},[248,683,413],{"class":324},[248,685,263],{"class":262},[248,687,462],{"class":324},[248,689,263],{"class":262},[248,691,378],{"class":324},[248,693,333],{"class":320},[248,695,279],{"class":262},[248,697,698,700,702,704,706,709,711,713,715,717,719],{"class":250,"line":469},[248,699,373],{"class":254},[248,701,321],{"class":320},[248,703,427],{"class":324},[248,705,263],{"class":262},[248,707,708],{"class":324},"380",[248,710,263],{"class":262},[248,712,383],{"class":324},[248,714,263],{"class":262},[248,716,383],{"class":324},[248,718,333],{"class":320},[248,720,279],{"class":262},[248,722,723],{"class":250,"line":495},[248,724,498],{"class":262},[500,726],{"code":536},[189,728,729,730,733,734,736,737,740],{},"Experimente usar o comando ",[193,731,732],{},"colorMode()"," para trabalhar em HSB em vez de RGB, o que facilita criar variações de matiz mantendo saturação e brilho constantes. O preenchimento também pode receber uma variável criada com ",[193,735,217],{},", o que é útil para reaproveitar a mesma cor em várias formas ou interpolar cores com ",[193,738,739],{},"lerpColor()",". Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[742,743,744],"style",{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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":314,"depth":314,"links":746},[747,748,749],{"id":230,"depth":314,"text":231},{"id":282,"depth":314,"text":283},{"id":514,"depth":314,"text":515},null,"Veja como definir a cor de preenchimento das formas","md",{},true,{"title":73,"description":751},"vRR8DFLrf9i4dlupDsXGSSQ_Ji7lqyztITT_nzAK9yI",[758,760],{"title":63,"path":64,"stem":65,"description":759,"children":-1},"Veja como combinar formas geométricas básicas para criar desenhos",{"title":77,"path":78,"stem":79,"description":761,"children":-1},"Veja como definir a cor e a espessura das linhas e bordas",1786195202015]