[{"data":1,"prerenderedAt":1339},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-programacao-classes-e-objetos":183,"-pcs3021-programacao-classes-e-objetos-surround":1334},[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":125,"body":185,"categoria":1328,"creditoLink":1328,"creditos":1328,"descricao":1328,"description":1329,"eaulas":1328,"extension":1330,"meta":1331,"navigation":333,"path":126,"seo":1332,"stem":127,"video":1328,"youtube":1328,"youtubeLink":1328,"__hash__":1333},"docs\u002Fpcs3021\u002F5.programacao\u002F4.classes-e-objetos.md",{"type":186,"value":187,"toc":1323},"minimark",[188,197,200,205,208,211,227,231,234,773,776,780,786,1312,1315,1319],[189,190,191,192,196],"p",{},"Quando escrevemos programas em p5.js, muitas vezes queremos repetir a mesma forma várias vezes. O comando ",[193,194,195],"code",{},"rect()"," já funciona como uma função pronta para desenhar retângulos. No entanto, em alguns casos, queremos criar desenhos mais complexos, como um homem palito ou uma xícara, e usar essa estrutura várias vezes. Nesse tipo de situação, as classes e os objetos ajudam bastante.",[189,198,199],{},"Uma classe funciona como uma “receita” para criar um tipo de desenho. A partir dessa receita, podemos criar vários objetos diferentes, cada um com suas próprias características. Isso torna o código mais organizado, mais fácil de reutilizar e mais parecido com a ideia de criar formas personalizadas.",[201,202,204],"h2",{"id":203},"vantagem-de-usar-classes-e-objetos","Vantagem de usar classes e objetos",[189,206,207],{},"Ao criar uma classe, você define uma estrutura geral para um desenho. Depois, cada objeto criado a partir dessa classe representa uma instância específica desse desenho. Em vez de repetir o mesmo bloco de código várias vezes, você escreve a classe uma única vez e usa ela sempre que quiser.",[189,209,210],{},"Essa abordagem é útil porque:",[212,213,214,218,221,224],"ul",{},[215,216,217],"li",{},"organiza melhor o código;",[215,219,220],{},"permite criar vários desenhos iguais ou parecidos;",[215,222,223],{},"facilita alterar o comportamento de todos os objetos ao mesmo tempo;",[215,225,226],{},"deixa o programa mais próximo de uma representação de elementos do mundo real.",[201,228,230],{"id":229},"exemplo-1-homem-palito","Exemplo 1: homem palito",[189,232,233],{},"Podemos criar uma classe para desenhar um homem palito. A classe define a cabeça, o corpo e os membros. Depois, basta criar objetos com posições diferentes.",[235,236,237,238],"code-preview",{},"Código - Classe para desenhar um homem palito",[239,240,241],"template",{"v-slot:code":5},[242,243,247],"pre",{"className":244,"code":245,"language":246,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","class HomemPalito {\n  constructor(x, y) {\n    this.x = x;\n    this.y = y;\n  }\n\n  desenhar() {\n    ellipse(this.x, this.y - 40, 40, 40);\n    line(this.x, this.y - 20, this.x, this.y + 80);\n    line(this.x, this.y, this.x - 40, this.y + 40);\n    line(this.x, this.y, this.x + 40, this.y + 40);\n    line(this.x, this.y + 80, this.x - 30, this.y + 130);\n    line(this.x, this.y + 80, this.x + 30, this.y + 130);\n  }\n}\n\nfunction setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  let pessoa1 = new HomemPalito(120, 140);\n  let pessoa2 = new HomemPalito(280, 160);\n\n  pessoa1.desenhar();\n  pessoa2.desenhar();\n}\n","js",[193,248,249,266,290,308,322,328,335,347,387,432,473,514,561,606,611,617,622,635,655,670,675,705,733,738,754,768],{"__ignoreMap":5},[250,251,254,258,262],"span",{"class":252,"line":253},"line",1,[250,255,257],{"class":256},"spNyl","class",[250,259,261],{"class":260},"sBMFI"," HomemPalito",[250,263,265],{"class":264},"sMK4o"," {\n",[250,267,269,272,275,279,282,285,288],{"class":252,"line":268},2,[250,270,271],{"class":256},"  constructor",[250,273,274],{"class":264},"(",[250,276,278],{"class":277},"sHdIc","x",[250,280,281],{"class":264},",",[250,283,284],{"class":277}," y",[250,286,287],{"class":264},")",[250,289,265],{"class":264},[250,291,293,296,299,302,305],{"class":252,"line":292},3,[250,294,295],{"class":264},"    this.",[250,297,278],{"class":298},"sTEyZ",[250,300,301],{"class":264}," =",[250,303,304],{"class":298}," x",[250,306,307],{"class":264},";\n",[250,309,311,313,316,318,320],{"class":252,"line":310},4,[250,312,295],{"class":264},[250,314,315],{"class":298},"y",[250,317,301],{"class":264},[250,319,284],{"class":298},[250,321,307],{"class":264},[250,323,325],{"class":252,"line":324},5,[250,326,327],{"class":264},"  }\n",[250,329,331],{"class":252,"line":330},6,[250,332,334],{"emptyLinePlaceholder":333},true,"\n",[250,336,338,342,345],{"class":252,"line":337},7,[250,339,341],{"class":340},"swJcz","  desenhar",[250,343,344],{"class":264},"()",[250,346,265],{"class":264},[250,348,350,354,356,359,361,363,366,368,371,375,377,379,381,383,385],{"class":252,"line":349},8,[250,351,353],{"class":352},"s2Zo4","    ellipse",[250,355,274],{"class":340},[250,357,358],{"class":264},"this.",[250,360,278],{"class":298},[250,362,281],{"class":264},[250,364,365],{"class":264}," this.",[250,367,315],{"class":298},[250,369,370],{"class":264}," -",[250,372,374],{"class":373},"sbssI"," 40",[250,376,281],{"class":264},[250,378,374],{"class":373},[250,380,281],{"class":264},[250,382,374],{"class":373},[250,384,287],{"class":340},[250,386,307],{"class":264},[250,388,390,393,395,397,399,401,403,405,407,410,412,414,416,418,420,422,425,428,430],{"class":252,"line":389},9,[250,391,392],{"class":352},"    line",[250,394,274],{"class":340},[250,396,358],{"class":264},[250,398,278],{"class":298},[250,400,281],{"class":264},[250,402,365],{"class":264},[250,404,315],{"class":298},[250,406,370],{"class":264},[250,408,409],{"class":373}," 20",[250,411,281],{"class":264},[250,413,365],{"class":264},[250,415,278],{"class":298},[250,417,281],{"class":264},[250,419,365],{"class":264},[250,421,315],{"class":298},[250,423,424],{"class":264}," +",[250,426,427],{"class":373}," 80",[250,429,287],{"class":340},[250,431,307],{"class":264},[250,433,435,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465,467,469,471],{"class":252,"line":434},10,[250,436,392],{"class":352},[250,438,274],{"class":340},[250,440,358],{"class":264},[250,442,278],{"class":298},[250,444,281],{"class":264},[250,446,365],{"class":264},[250,448,315],{"class":298},[250,450,281],{"class":264},[250,452,365],{"class":264},[250,454,278],{"class":298},[250,456,370],{"class":264},[250,458,374],{"class":373},[250,460,281],{"class":264},[250,462,365],{"class":264},[250,464,315],{"class":298},[250,466,424],{"class":264},[250,468,374],{"class":373},[250,470,287],{"class":340},[250,472,307],{"class":264},[250,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512],{"class":252,"line":475},11,[250,477,392],{"class":352},[250,479,274],{"class":340},[250,481,358],{"class":264},[250,483,278],{"class":298},[250,485,281],{"class":264},[250,487,365],{"class":264},[250,489,315],{"class":298},[250,491,281],{"class":264},[250,493,365],{"class":264},[250,495,278],{"class":298},[250,497,424],{"class":264},[250,499,374],{"class":373},[250,501,281],{"class":264},[250,503,365],{"class":264},[250,505,315],{"class":298},[250,507,424],{"class":264},[250,509,374],{"class":373},[250,511,287],{"class":340},[250,513,307],{"class":264},[250,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543,546,548,550,552,554,557,559],{"class":252,"line":516},12,[250,518,392],{"class":352},[250,520,274],{"class":340},[250,522,358],{"class":264},[250,524,278],{"class":298},[250,526,281],{"class":264},[250,528,365],{"class":264},[250,530,315],{"class":298},[250,532,424],{"class":264},[250,534,427],{"class":373},[250,536,281],{"class":264},[250,538,365],{"class":264},[250,540,278],{"class":298},[250,542,370],{"class":264},[250,544,545],{"class":373}," 30",[250,547,281],{"class":264},[250,549,365],{"class":264},[250,551,315],{"class":298},[250,553,424],{"class":264},[250,555,556],{"class":373}," 130",[250,558,287],{"class":340},[250,560,307],{"class":264},[250,562,564,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600,602,604],{"class":252,"line":563},13,[250,565,392],{"class":352},[250,567,274],{"class":340},[250,569,358],{"class":264},[250,571,278],{"class":298},[250,573,281],{"class":264},[250,575,365],{"class":264},[250,577,315],{"class":298},[250,579,424],{"class":264},[250,581,427],{"class":373},[250,583,281],{"class":264},[250,585,365],{"class":264},[250,587,278],{"class":298},[250,589,424],{"class":264},[250,591,545],{"class":373},[250,593,281],{"class":264},[250,595,365],{"class":264},[250,597,315],{"class":298},[250,599,424],{"class":264},[250,601,556],{"class":373},[250,603,287],{"class":340},[250,605,307],{"class":264},[250,607,609],{"class":252,"line":608},14,[250,610,327],{"class":264},[250,612,614],{"class":252,"line":613},15,[250,615,616],{"class":264},"}\n",[250,618,620],{"class":252,"line":619},16,[250,621,334],{"emptyLinePlaceholder":333},[250,623,625,628,631,633],{"class":252,"line":624},17,[250,626,627],{"class":256},"function",[250,629,630],{"class":352}," setup",[250,632,344],{"class":264},[250,634,265],{"class":264},[250,636,638,641,643,646,648,651,653],{"class":252,"line":637},18,[250,639,640],{"class":352},"  createCanvas",[250,642,274],{"class":340},[250,644,645],{"class":373},"400",[250,647,281],{"class":264},[250,649,650],{"class":373}," 400",[250,652,287],{"class":340},[250,654,307],{"class":264},[250,656,658,661,663,666,668],{"class":252,"line":657},19,[250,659,660],{"class":352},"  background",[250,662,274],{"class":340},[250,664,665],{"class":373},"255",[250,667,287],{"class":340},[250,669,307],{"class":264},[250,671,673],{"class":252,"line":672},20,[250,674,334],{"emptyLinePlaceholder":333},[250,676,678,681,684,686,689,691,693,696,698,701,703],{"class":252,"line":677},21,[250,679,680],{"class":256},"  let",[250,682,683],{"class":298}," pessoa1",[250,685,301],{"class":264},[250,687,688],{"class":264}," new",[250,690,261],{"class":352},[250,692,274],{"class":340},[250,694,695],{"class":373},"120",[250,697,281],{"class":264},[250,699,700],{"class":373}," 140",[250,702,287],{"class":340},[250,704,307],{"class":264},[250,706,708,710,713,715,717,719,721,724,726,729,731],{"class":252,"line":707},22,[250,709,680],{"class":256},[250,711,712],{"class":298}," pessoa2",[250,714,301],{"class":264},[250,716,688],{"class":264},[250,718,261],{"class":352},[250,720,274],{"class":340},[250,722,723],{"class":373},"280",[250,725,281],{"class":264},[250,727,728],{"class":373}," 160",[250,730,287],{"class":340},[250,732,307],{"class":264},[250,734,736],{"class":252,"line":735},23,[250,737,334],{"emptyLinePlaceholder":333},[250,739,741,744,747,750,752],{"class":252,"line":740},24,[250,742,743],{"class":298},"  pessoa1",[250,745,746],{"class":264},".",[250,748,749],{"class":352},"desenhar",[250,751,344],{"class":340},[250,753,307],{"class":264},[250,755,757,760,762,764,766],{"class":252,"line":756},25,[250,758,759],{"class":298},"  pessoa2",[250,761,746],{"class":264},[250,763,749],{"class":352},[250,765,344],{"class":340},[250,767,307],{"class":264},[250,769,771],{"class":252,"line":770},26,[250,772,616],{"class":264},[774,775],"p5-sketch",{"code":245},[201,777,779],{"id":778},"exemplo-2-árvore","Exemplo 2: árvore",[189,781,782,783,785],{},"Também podemos criar uma classe para desenhar uma árvore. Nesse caso, a classe define a forma básica do tronco e das folhas, e a partir dela podemos criar várias árvores em posições diferentes. Isso é semelhante ao que acontece quando usamos ",[193,784,195],{},": a função define a forma, enquanto os parâmetros indicam onde e como ela deve aparecer.",[235,787,788,789],{},"Código  - Classe para desenhar uma árvore",[239,790,791],{"v-slot:code":5},[242,792,794],{"className":244,"code":793,"language":246,"meta":5,"style":5},"class Arvore {\n  constructor(x, y) {\n    this.x = x;\n    this.y = y;\n  }\n\n  desenhar() {\n    noStroke();\n\n    \u002F\u002F tronco\n    fill(101, 67, 33);\n    rect(this.x - 10, this.y, 20, 70);\n\n    \u002F\u002F copa em camadas, da mais escura (base) para a mais clara (topo)\n    fill(34, 100, 34);\n    ellipse(this.x, this.y - 10, 100, 100);\n\n    fill(46, 130, 46);\n    ellipse(this.x - 30, this.y - 50, 70, 70);\n    ellipse(this.x + 30, this.y - 50, 70, 70);\n\n    fill(60, 160, 60);\n    ellipse(this.x, this.y - 90, 85, 85);\n  }\n}\n\nfunction setup() {\n  createCanvas(400, 400);\n  background(255);\n\n  let arvore1 = new Arvore(120, 300);\n  let arvore2 = new Arvore(280, 280);\n\n  arvore1.desenhar();\n  arvore2.desenhar();\n}\n",[193,795,796,805,821,833,845,849,853,861,870,874,880,904,939,943,948,971,1003,1007,1029,1066,1102,1106,1128,1162,1166,1170,1174,1185,1202,1215,1220,1247,1274,1279,1293,1307],{"__ignoreMap":5},[250,797,798,800,803],{"class":252,"line":253},[250,799,257],{"class":256},[250,801,802],{"class":260}," Arvore",[250,804,265],{"class":264},[250,806,807,809,811,813,815,817,819],{"class":252,"line":268},[250,808,271],{"class":256},[250,810,274],{"class":264},[250,812,278],{"class":277},[250,814,281],{"class":264},[250,816,284],{"class":277},[250,818,287],{"class":264},[250,820,265],{"class":264},[250,822,823,825,827,829,831],{"class":252,"line":292},[250,824,295],{"class":264},[250,826,278],{"class":298},[250,828,301],{"class":264},[250,830,304],{"class":298},[250,832,307],{"class":264},[250,834,835,837,839,841,843],{"class":252,"line":310},[250,836,295],{"class":264},[250,838,315],{"class":298},[250,840,301],{"class":264},[250,842,284],{"class":298},[250,844,307],{"class":264},[250,846,847],{"class":252,"line":324},[250,848,327],{"class":264},[250,850,851],{"class":252,"line":330},[250,852,334],{"emptyLinePlaceholder":333},[250,854,855,857,859],{"class":252,"line":337},[250,856,341],{"class":340},[250,858,344],{"class":264},[250,860,265],{"class":264},[250,862,863,866,868],{"class":252,"line":349},[250,864,865],{"class":352},"    noStroke",[250,867,344],{"class":340},[250,869,307],{"class":264},[250,871,872],{"class":252,"line":389},[250,873,334],{"emptyLinePlaceholder":333},[250,875,876],{"class":252,"line":434},[250,877,879],{"class":878},"sHwdD","    \u002F\u002F tronco\n",[250,881,882,885,887,890,892,895,897,900,902],{"class":252,"line":475},[250,883,884],{"class":352},"    fill",[250,886,274],{"class":340},[250,888,889],{"class":373},"101",[250,891,281],{"class":264},[250,893,894],{"class":373}," 67",[250,896,281],{"class":264},[250,898,899],{"class":373}," 33",[250,901,287],{"class":340},[250,903,307],{"class":264},[250,905,906,909,911,913,915,917,920,922,924,926,928,930,932,935,937],{"class":252,"line":516},[250,907,908],{"class":352},"    rect",[250,910,274],{"class":340},[250,912,358],{"class":264},[250,914,278],{"class":298},[250,916,370],{"class":264},[250,918,919],{"class":373}," 10",[250,921,281],{"class":264},[250,923,365],{"class":264},[250,925,315],{"class":298},[250,927,281],{"class":264},[250,929,409],{"class":373},[250,931,281],{"class":264},[250,933,934],{"class":373}," 70",[250,936,287],{"class":340},[250,938,307],{"class":264},[250,940,941],{"class":252,"line":563},[250,942,334],{"emptyLinePlaceholder":333},[250,944,945],{"class":252,"line":608},[250,946,947],{"class":878},"    \u002F\u002F copa em camadas, da mais escura (base) para a mais clara (topo)\n",[250,949,950,952,954,957,959,962,964,967,969],{"class":252,"line":613},[250,951,884],{"class":352},[250,953,274],{"class":340},[250,955,956],{"class":373},"34",[250,958,281],{"class":264},[250,960,961],{"class":373}," 100",[250,963,281],{"class":264},[250,965,966],{"class":373}," 34",[250,968,287],{"class":340},[250,970,307],{"class":264},[250,972,973,975,977,979,981,983,985,987,989,991,993,995,997,999,1001],{"class":252,"line":619},[250,974,353],{"class":352},[250,976,274],{"class":340},[250,978,358],{"class":264},[250,980,278],{"class":298},[250,982,281],{"class":264},[250,984,365],{"class":264},[250,986,315],{"class":298},[250,988,370],{"class":264},[250,990,919],{"class":373},[250,992,281],{"class":264},[250,994,961],{"class":373},[250,996,281],{"class":264},[250,998,961],{"class":373},[250,1000,287],{"class":340},[250,1002,307],{"class":264},[250,1004,1005],{"class":252,"line":624},[250,1006,334],{"emptyLinePlaceholder":333},[250,1008,1009,1011,1013,1016,1018,1020,1022,1025,1027],{"class":252,"line":637},[250,1010,884],{"class":352},[250,1012,274],{"class":340},[250,1014,1015],{"class":373},"46",[250,1017,281],{"class":264},[250,1019,556],{"class":373},[250,1021,281],{"class":264},[250,1023,1024],{"class":373}," 46",[250,1026,287],{"class":340},[250,1028,307],{"class":264},[250,1030,1031,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051,1054,1056,1058,1060,1062,1064],{"class":252,"line":657},[250,1032,353],{"class":352},[250,1034,274],{"class":340},[250,1036,358],{"class":264},[250,1038,278],{"class":298},[250,1040,370],{"class":264},[250,1042,545],{"class":373},[250,1044,281],{"class":264},[250,1046,365],{"class":264},[250,1048,315],{"class":298},[250,1050,370],{"class":264},[250,1052,1053],{"class":373}," 50",[250,1055,281],{"class":264},[250,1057,934],{"class":373},[250,1059,281],{"class":264},[250,1061,934],{"class":373},[250,1063,287],{"class":340},[250,1065,307],{"class":264},[250,1067,1068,1070,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100],{"class":252,"line":672},[250,1069,353],{"class":352},[250,1071,274],{"class":340},[250,1073,358],{"class":264},[250,1075,278],{"class":298},[250,1077,424],{"class":264},[250,1079,545],{"class":373},[250,1081,281],{"class":264},[250,1083,365],{"class":264},[250,1085,315],{"class":298},[250,1087,370],{"class":264},[250,1089,1053],{"class":373},[250,1091,281],{"class":264},[250,1093,934],{"class":373},[250,1095,281],{"class":264},[250,1097,934],{"class":373},[250,1099,287],{"class":340},[250,1101,307],{"class":264},[250,1103,1104],{"class":252,"line":677},[250,1105,334],{"emptyLinePlaceholder":333},[250,1107,1108,1110,1112,1115,1117,1119,1121,1124,1126],{"class":252,"line":707},[250,1109,884],{"class":352},[250,1111,274],{"class":340},[250,1113,1114],{"class":373},"60",[250,1116,281],{"class":264},[250,1118,728],{"class":373},[250,1120,281],{"class":264},[250,1122,1123],{"class":373}," 60",[250,1125,287],{"class":340},[250,1127,307],{"class":264},[250,1129,1130,1132,1134,1136,1138,1140,1142,1144,1146,1149,1151,1154,1156,1158,1160],{"class":252,"line":735},[250,1131,353],{"class":352},[250,1133,274],{"class":340},[250,1135,358],{"class":264},[250,1137,278],{"class":298},[250,1139,281],{"class":264},[250,1141,365],{"class":264},[250,1143,315],{"class":298},[250,1145,370],{"class":264},[250,1147,1148],{"class":373}," 90",[250,1150,281],{"class":264},[250,1152,1153],{"class":373}," 85",[250,1155,281],{"class":264},[250,1157,1153],{"class":373},[250,1159,287],{"class":340},[250,1161,307],{"class":264},[250,1163,1164],{"class":252,"line":740},[250,1165,327],{"class":264},[250,1167,1168],{"class":252,"line":756},[250,1169,616],{"class":264},[250,1171,1172],{"class":252,"line":770},[250,1173,334],{"emptyLinePlaceholder":333},[250,1175,1177,1179,1181,1183],{"class":252,"line":1176},27,[250,1178,627],{"class":256},[250,1180,630],{"class":352},[250,1182,344],{"class":264},[250,1184,265],{"class":264},[250,1186,1188,1190,1192,1194,1196,1198,1200],{"class":252,"line":1187},28,[250,1189,640],{"class":352},[250,1191,274],{"class":340},[250,1193,645],{"class":373},[250,1195,281],{"class":264},[250,1197,650],{"class":373},[250,1199,287],{"class":340},[250,1201,307],{"class":264},[250,1203,1205,1207,1209,1211,1213],{"class":252,"line":1204},29,[250,1206,660],{"class":352},[250,1208,274],{"class":340},[250,1210,665],{"class":373},[250,1212,287],{"class":340},[250,1214,307],{"class":264},[250,1216,1218],{"class":252,"line":1217},30,[250,1219,334],{"emptyLinePlaceholder":333},[250,1221,1223,1225,1228,1230,1232,1234,1236,1238,1240,1243,1245],{"class":252,"line":1222},31,[250,1224,680],{"class":256},[250,1226,1227],{"class":298}," arvore1",[250,1229,301],{"class":264},[250,1231,688],{"class":264},[250,1233,802],{"class":352},[250,1235,274],{"class":340},[250,1237,695],{"class":373},[250,1239,281],{"class":264},[250,1241,1242],{"class":373}," 300",[250,1244,287],{"class":340},[250,1246,307],{"class":264},[250,1248,1250,1252,1255,1257,1259,1261,1263,1265,1267,1270,1272],{"class":252,"line":1249},32,[250,1251,680],{"class":256},[250,1253,1254],{"class":298}," arvore2",[250,1256,301],{"class":264},[250,1258,688],{"class":264},[250,1260,802],{"class":352},[250,1262,274],{"class":340},[250,1264,723],{"class":373},[250,1266,281],{"class":264},[250,1268,1269],{"class":373}," 280",[250,1271,287],{"class":340},[250,1273,307],{"class":264},[250,1275,1277],{"class":252,"line":1276},33,[250,1278,334],{"emptyLinePlaceholder":333},[250,1280,1282,1285,1287,1289,1291],{"class":252,"line":1281},34,[250,1283,1284],{"class":298},"  arvore1",[250,1286,746],{"class":264},[250,1288,749],{"class":352},[250,1290,344],{"class":340},[250,1292,307],{"class":264},[250,1294,1296,1299,1301,1303,1305],{"class":252,"line":1295},35,[250,1297,1298],{"class":298},"  arvore2",[250,1300,746],{"class":264},[250,1302,749],{"class":352},[250,1304,344],{"class":340},[250,1306,307],{"class":264},[250,1308,1310],{"class":252,"line":1309},36,[250,1311,616],{"class":264},[774,1313],{"code":1314},"class Arvore {\nconstructor(x, y) {\n    this.x = x;\n    this.y = y;\n}\n\ndesenhar() {\n    noStroke();\n\n    \u002F\u002F tronco\n    fill(101, 67, 33);\n    rect(this.x - 10, this.y, 20, 70);\n\n    \u002F\u002F copa\n    fill(34, 100, 34);\n    ellipse(this.x, this.y - 10, 100, 100);\n\n    fill(46, 130, 46);\n    ellipse(this.x - 30, this.y - 50, 70, 70);\n    ellipse(this.x + 30, this.y - 50, 70, 70);\n\n    fill(60, 160, 60);\n    ellipse(this.x, this.y - 90, 85, 85);\n}\n}\n\nfunction setup() {\ncreateCanvas(400, 400);\nbackground(255);\n\nlet arvore1 = new Arvore(120, 300);\nlet arvore2 = new Arvore(280, 180);\n\narvore1.desenhar();\narvore2.desenhar();\n}\n",[1316,1317,1318],"tip",{},"Ao usar classes, você cria uma estrutura que pode ser reutilizada muitas vezes. Isso faz com que o código fique mais organizado e permite construir desenhos complexos a partir de peças menores e bem definidas.",[1320,1321,1322],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":268,"depth":268,"links":1324},[1325,1326,1327],{"id":203,"depth":268,"text":204},{"id":229,"depth":268,"text":230},{"id":778,"depth":268,"text":779},null,"Entenda como criar desenhos reutilizáveis no p5.js usando classes e objetos","md",{},{"title":125,"description":1329},"zrVJaYRwDMmyaMlmx7jsIfX-xKkUWwg72xvadGheep4",[1335,1337],{"title":121,"path":122,"stem":123,"description":1336,"children":-1},"Aprenda a usar o laço for para repetir instruções e criar vários objetos de forma organizada",{"title":129,"path":130,"stem":131,"description":1338,"children":-1},"Aprenda a usar a estrutura condicional if para tomar decisões dentro do seu código",1786195203314]