[{"data":1,"prerenderedAt":771},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-basicos-contorno":183,"-pcs3021-basicos-contorno-surround":766},[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":77,"body":185,"categoria":760,"creditoLink":760,"creditos":760,"descricao":760,"description":761,"eaulas":760,"extension":762,"meta":763,"navigation":607,"path":78,"seo":764,"stem":79,"video":760,"youtube":760,"youtubeLink":760,"__hash__":765},"docs\u002Fpcs3021\u002F3.basicos\u002F2.contorno.md",{"type":186,"value":187,"toc":755},"minimark",[188,197,227,232,291,295,298,526,529,537,541,546,734,736,751],[189,190,191,192,196],"p",{},"O contorno é a cor aplicada às linhas e às bordas das formas geométricas. No p5.js, ele é definido com o comando ",[193,194,195],"code",{},"stroke()",", que passa a valer para todas as formas e linhas desenhadas depois dele, até que uma nova cor seja definida ou o contorno 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 as mesmas formas de chamada que ",[193,204,205],{},"fill()",": ",[193,208,209],{},"stroke(v1, v2, v3, [alpha])"," para valores RGB, ",[193,212,213],{},"stroke(gray, [alpha])"," para um único valor de cinza, ou ",[193,216,217],{},"stroke(color)"," para uma variável de cor criada com ",[193,220,221],{},"color()",". A espessura do contorno é controlada separadamente, com o comando ",[193,224,225],{},"strokeWeight()",".",[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 contorno 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","stroke(v1, v2, v3, [alpha]);\nstrokeWeight(peso);\n","js",[193,246,247,280],{"__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","stroke",[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",[248,281,283,286,289],{"class":250,"line":282},2,[248,284,285],{"class":254},"strokeWeight",[248,287,288],{"class":258},"(peso)",[248,290,279],{"class":262},[228,292,294],{"id":293},"exemplo","Exemplo",[189,296,297],{},"Para um exemplo de como utilizar esse comando, teste o Código e veja as formas contornadas com cores diferentes.",[233,299,300,301],{},"Código - Exemplo de definição de contorno",[237,302,303],{"v-slot:code":5},[240,304,306],{"className":242,"code":305,"language":244,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  noFill();\n  strokeWeight(6);\n  stroke(255,0,0);\n  ellipse(150,300,150,150);\n  stroke(0,150,80);\n  ellipse(400,300,150,150);\n  stroke(30,80,200);\n  ellipse(650,300,150,150);\n}\n",[193,307,308,323,346,356,371,395,423,445,471,494,520],{"__ignoreMap":5},[248,309,310,314,317,320],{"class":250,"line":251},[248,311,313],{"class":312},"spNyl","function",[248,315,316],{"class":254}," setup",[248,318,319],{"class":262},"()",[248,321,322],{"class":262}," {\n",[248,324,325,328,332,336,338,341,344],{"class":250,"line":282},[248,326,327],{"class":254},"  createCanvas",[248,329,331],{"class":330},"swJcz","(",[248,333,335],{"class":334},"sbssI","800",[248,337,263],{"class":262},[248,339,340],{"class":334},"600",[248,342,343],{"class":330},")",[248,345,279],{"class":262},[248,347,349,352,354],{"class":250,"line":348},3,[248,350,351],{"class":254},"  noFill",[248,353,319],{"class":330},[248,355,279],{"class":262},[248,357,359,362,364,367,369],{"class":250,"line":358},4,[248,360,361],{"class":254},"  strokeWeight",[248,363,331],{"class":330},[248,365,366],{"class":334},"6",[248,368,343],{"class":330},[248,370,279],{"class":262},[248,372,374,377,379,382,384,387,389,391,393],{"class":250,"line":373},5,[248,375,376],{"class":254},"  stroke",[248,378,331],{"class":330},[248,380,381],{"class":334},"255",[248,383,263],{"class":262},[248,385,386],{"class":334},"0",[248,388,263],{"class":262},[248,390,386],{"class":334},[248,392,343],{"class":330},[248,394,279],{"class":262},[248,396,398,401,403,406,408,411,413,415,417,419,421],{"class":250,"line":397},6,[248,399,400],{"class":254},"  ellipse",[248,402,331],{"class":330},[248,404,405],{"class":334},"150",[248,407,263],{"class":262},[248,409,410],{"class":334},"300",[248,412,263],{"class":262},[248,414,405],{"class":334},[248,416,263],{"class":262},[248,418,405],{"class":334},[248,420,343],{"class":330},[248,422,279],{"class":262},[248,424,426,428,430,432,434,436,438,441,443],{"class":250,"line":425},7,[248,427,376],{"class":254},[248,429,331],{"class":330},[248,431,386],{"class":334},[248,433,263],{"class":262},[248,435,405],{"class":334},[248,437,263],{"class":262},[248,439,440],{"class":334},"80",[248,442,343],{"class":330},[248,444,279],{"class":262},[248,446,448,450,452,455,457,459,461,463,465,467,469],{"class":250,"line":447},8,[248,449,400],{"class":254},[248,451,331],{"class":330},[248,453,454],{"class":334},"400",[248,456,263],{"class":262},[248,458,410],{"class":334},[248,460,263],{"class":262},[248,462,405],{"class":334},[248,464,263],{"class":262},[248,466,405],{"class":334},[248,468,343],{"class":330},[248,470,279],{"class":262},[248,472,474,476,478,481,483,485,487,490,492],{"class":250,"line":473},9,[248,475,376],{"class":254},[248,477,331],{"class":330},[248,479,480],{"class":334},"30",[248,482,263],{"class":262},[248,484,440],{"class":334},[248,486,263],{"class":262},[248,488,489],{"class":334},"200",[248,491,343],{"class":330},[248,493,279],{"class":262},[248,495,497,499,501,504,506,508,510,512,514,516,518],{"class":250,"line":496},10,[248,498,400],{"class":254},[248,500,331],{"class":330},[248,502,503],{"class":334},"650",[248,505,263],{"class":262},[248,507,410],{"class":334},[248,509,263],{"class":262},[248,511,405],{"class":334},[248,513,263],{"class":262},[248,515,405],{"class":334},[248,517,343],{"class":330},[248,519,279],{"class":262},[248,521,523],{"class":250,"line":522},11,[248,524,525],{"class":262},"}\n",[527,528],"p5-sketch",{"code":305},[530,531,532,533,536],"tip",{},"Assim como o preenchimento, o contorno precisa ser definido antes da forma correspondente. Para remover o contorno e deixar apenas o preenchimento visível, use ",[193,534,535],{},"noStroke()",", útil para melhorar a performance em desenhos com muitas formas sobrepostas.",[228,538,540],{"id":539},"espessura-do-contorno","Espessura do contorno",[189,542,199,543,545],{},[193,544,225],{}," define, em pixels, a espessura das linhas e bordas desenhadas em seguida. Valores maiores tornam o contorno mais grosso e podem alterar visualmente o tamanho aparente da forma.",[233,547,548,549],{},"Código - Exemplo de variação na espessura do contorno",[237,550,551],{"v-slot:code":5},[240,552,554],{"className":242,"code":553,"language":244,"meta":5,"style":5},"function setup() {\n  createCanvas(800,600);\n  noFill();\n  stroke(50);\n\n  strokeWeight(1);\n  ellipse(150,300,150,150);\n\n  strokeWeight(6);\n  ellipse(400,300,150,150);\n\n  strokeWeight(14);\n  ellipse(650,300,150,150);\n}\n",[193,555,556,566,582,590,603,609,622,646,650,662,686,690,704,729],{"__ignoreMap":5},[248,557,558,560,562,564],{"class":250,"line":251},[248,559,313],{"class":312},[248,561,316],{"class":254},[248,563,319],{"class":262},[248,565,322],{"class":262},[248,567,568,570,572,574,576,578,580],{"class":250,"line":282},[248,569,327],{"class":254},[248,571,331],{"class":330},[248,573,335],{"class":334},[248,575,263],{"class":262},[248,577,340],{"class":334},[248,579,343],{"class":330},[248,581,279],{"class":262},[248,583,584,586,588],{"class":250,"line":348},[248,585,351],{"class":254},[248,587,319],{"class":330},[248,589,279],{"class":262},[248,591,592,594,596,599,601],{"class":250,"line":358},[248,593,376],{"class":254},[248,595,331],{"class":330},[248,597,598],{"class":334},"50",[248,600,343],{"class":330},[248,602,279],{"class":262},[248,604,605],{"class":250,"line":373},[248,606,608],{"emptyLinePlaceholder":607},true,"\n",[248,610,611,613,615,618,620],{"class":250,"line":397},[248,612,361],{"class":254},[248,614,331],{"class":330},[248,616,617],{"class":334},"1",[248,619,343],{"class":330},[248,621,279],{"class":262},[248,623,624,626,628,630,632,634,636,638,640,642,644],{"class":250,"line":425},[248,625,400],{"class":254},[248,627,331],{"class":330},[248,629,405],{"class":334},[248,631,263],{"class":262},[248,633,410],{"class":334},[248,635,263],{"class":262},[248,637,405],{"class":334},[248,639,263],{"class":262},[248,641,405],{"class":334},[248,643,343],{"class":330},[248,645,279],{"class":262},[248,647,648],{"class":250,"line":447},[248,649,608],{"emptyLinePlaceholder":607},[248,651,652,654,656,658,660],{"class":250,"line":473},[248,653,361],{"class":254},[248,655,331],{"class":330},[248,657,366],{"class":334},[248,659,343],{"class":330},[248,661,279],{"class":262},[248,663,664,666,668,670,672,674,676,678,680,682,684],{"class":250,"line":496},[248,665,400],{"class":254},[248,667,331],{"class":330},[248,669,454],{"class":334},[248,671,263],{"class":262},[248,673,410],{"class":334},[248,675,263],{"class":262},[248,677,405],{"class":334},[248,679,263],{"class":262},[248,681,405],{"class":334},[248,683,343],{"class":330},[248,685,279],{"class":262},[248,687,688],{"class":250,"line":522},[248,689,608],{"emptyLinePlaceholder":607},[248,691,693,695,697,700,702],{"class":250,"line":692},12,[248,694,361],{"class":254},[248,696,331],{"class":330},[248,698,699],{"class":334},"14",[248,701,343],{"class":330},[248,703,279],{"class":262},[248,705,707,709,711,713,715,717,719,721,723,725,727],{"class":250,"line":706},13,[248,708,400],{"class":254},[248,710,331],{"class":330},[248,712,503],{"class":334},[248,714,263],{"class":262},[248,716,410],{"class":334},[248,718,263],{"class":262},[248,720,405],{"class":334},[248,722,263],{"class":262},[248,724,405],{"class":334},[248,726,343],{"class":330},[248,728,279],{"class":262},[248,730,732],{"class":250,"line":731},14,[248,733,525],{"class":262},[527,735],{"code":553},[189,737,738,739,742,743,746,747,750],{},"Experimente combinar ",[193,740,741],{},"strokeCap()"," e ",[193,744,745],{},"strokeJoin()"," para controlar, respectivamente, o formato das pontas das linhas e o formato dos encontros entre segmentos, o que é especialmente perceptível em espessuras maiores. O contorno também aceita transparência através do canal ",[193,748,749],{},"alpha",", da mesma forma que o preenchimento. Mais detalhes e exemplos podem ser encontrados na referência do p5.js.",[752,753,754],"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":282,"depth":282,"links":756},[757,758,759],{"id":230,"depth":282,"text":231},{"id":293,"depth":282,"text":294},{"id":539,"depth":282,"text":540},null,"Veja como definir a cor e a espessura das linhas e bordas","md",{},{"title":77,"description":761},"ezOneslRoU7F66DjkVuS_DJL8iusDXNaRAyawHSHS4E",[767,769],{"title":73,"path":74,"stem":75,"description":768,"children":-1},"Veja como definir a cor de preenchimento das formas",{"title":87,"path":88,"stem":89,"description":770,"children":-1},"Veja como girar o sistema de coordenadas",1786195202150]