[{"data":1,"prerenderedAt":1310},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-programacao-classes-e-objetos":155,"-pcs3021-programacao-classes-e-objetos-surround":1306},[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,52,78,94,124,140,149],{"title":15,"path":11,"stem":16},"Linguagem Computacional","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":51},"Formas geométricas","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[23,27,31,35,39,43,47],{"title":24,"path":25,"stem":26},"Retângulos","\u002Fpcs3021\u002Fgeometrias\u002Fretangulo","pcs3021\u002F2.geometrias\u002F1.retangulo",{"title":28,"path":29,"stem":30},"Elipses e Círculos","\u002Fpcs3021\u002Fgeometrias\u002Felipse","pcs3021\u002F2.geometrias\u002F2.elipse",{"title":32,"path":33,"stem":34},"Triângulos","\u002Fpcs3021\u002Fgeometrias\u002Ftriangulo","pcs3021\u002F2.geometrias\u002F3.triangulo",{"title":36,"path":37,"stem":38},"Linhas","\u002Fpcs3021\u002Fgeometrias\u002Flinha","pcs3021\u002F2.geometrias\u002F4.linha",{"title":40,"path":41,"stem":42},"Pontos","\u002Fpcs3021\u002Fgeometrias\u002Fponto","pcs3021\u002F2.geometrias\u002F5.ponto",{"title":44,"path":45,"stem":46},"Polígonos","\u002Fpcs3021\u002Fgeometrias\u002Fpoligonos","pcs3021\u002F2.geometrias\u002F6.poligonos",{"title":48,"path":49,"stem":50},"Combinando formas","\u002Fpcs3021\u002Fgeometrias\u002Fcombinando","pcs3021\u002F2.geometrias\u002F7.combinando",false,{"title":53,"icon":54,"path":55,"stem":56,"children":57,"page":51},"Transformações","i-lucide-rotate-3d","\u002Fpcs3021\u002Ftransformacoes","pcs3021\u002F2.transformacoes",[58,62,66,70,74],{"title":59,"path":60,"stem":61},"Rotação","\u002Fpcs3021\u002Ftransformacoes\u002Frotacao","pcs3021\u002F2.transformacoes\u002F1.rotacao",{"title":63,"path":64,"stem":65},"Translação","\u002Fpcs3021\u002Ftransformacoes\u002Ftranslacao","pcs3021\u002F2.transformacoes\u002F2.translacao",{"title":67,"path":68,"stem":69},"Escala","\u002Fpcs3021\u002Ftransformacoes\u002Fescala","pcs3021\u002F2.transformacoes\u002F3.escala",{"title":71,"path":72,"stem":73},"Cisalhamento","\u002Fpcs3021\u002Ftransformacoes\u002Fcisalhamento","pcs3021\u002F2.transformacoes\u002F4.cisalhamento",{"title":75,"path":76,"stem":77},"Push e Pop","\u002Fpcs3021\u002Ftransformacoes\u002Fpush-pop","pcs3021\u002F2.transformacoes\u002F5.push-pop",{"title":79,"path":80,"stem":81,"children":82,"icon":93},"Imagens","\u002Fpcs3021\u002Fimagens","pcs3021\u002F3.imagens\u002F1.index",[83,85,89],{"title":84,"path":80,"stem":81},"Usando SVG",{"title":86,"path":87,"stem":88},"Exportando SVG","\u002Fpcs3021\u002Fimagens\u002Fexportando","pcs3021\u002F3.imagens\u002F4.exportando",{"title":90,"path":91,"stem":92},"Imagens Matriciais","\u002Fpcs3021\u002Fimagens\u002Fmatriciais","pcs3021\u002F3.imagens\u002F5.matriciais","i-lucide-pen-tool",{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":51},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F4.programacao",[100,104,108,112,116,120],{"title":101,"path":102,"stem":103},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F4.programacao\u002F1.variaveis",{"title":105,"path":106,"stem":107},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F4.programacao\u002F2.expressoes-numericas",{"title":109,"path":110,"stem":111},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F4.programacao\u002F3.for",{"title":113,"path":114,"stem":115},"Classes e objetos","\u002Fpcs3021\u002Fprogramacao\u002Fclasses-e-objetos","pcs3021\u002F4.programacao\u002F4.classes-e-objetos",{"title":117,"path":118,"stem":119},"Condicionais","\u002Fpcs3021\u002Fprogramacao\u002Fcondicionais","pcs3021\u002F4.programacao\u002F4.condicionais",{"title":121,"path":122,"stem":123},"While","\u002Fpcs3021\u002Fprogramacao\u002Fwhile","pcs3021\u002F4.programacao\u002F4.while",{"title":125,"path":126,"stem":127,"children":128,"icon":139},"Animações","\u002Fpcs3021\u002Fanimacao","pcs3021\u002F5.animacao\u002F1.index",[129,131,135],{"title":130,"path":126,"stem":127},"Introdução",{"title":132,"path":133,"stem":134},"Variáveis locais e globais","\u002Fpcs3021\u002Fanimacao\u002Fusando-variaveis","pcs3021\u002F5.animacao\u002F2.usando-variaveis",{"title":136,"path":137,"stem":138},"Eventos","\u002Fpcs3021\u002Fanimacao\u002Feventos","pcs3021\u002F5.animacao\u002F3.eventos","i-lucide-clapperboard",{"title":141,"icon":142,"path":143,"stem":144,"children":145,"page":51},"Vetores","i-lucide-spline-pointer","\u002Fpcs3021\u002Fvetores","pcs3021\u002F6.vetores",[146],{"title":141,"path":147,"stem":148},"\u002Fpcs3021\u002Fvetores\u002Fvetores","pcs3021\u002F6.vetores\u002F7.vetores",{"title":150,"path":151,"stem":152,"children":153,"icon":142},"Funções","\u002Fpcs3021\u002Ffuncoes","pcs3021\u002F7.funcoes\u002F1.index",[154],{"title":150,"path":151,"stem":152},{"id":156,"title":113,"body":157,"categoria":1300,"creditoLink":1300,"creditos":1300,"descricao":1300,"description":1301,"eaulas":1300,"extension":1302,"meta":1303,"navigation":305,"path":114,"seo":1304,"stem":115,"video":1300,"youtube":1300,"youtubeLink":1300,"__hash__":1305},"docs\u002Fpcs3021\u002F4.programacao\u002F4.classes-e-objetos.md",{"type":158,"value":159,"toc":1295},"minimark",[160,169,172,177,180,183,199,203,206,745,748,752,758,1284,1287,1291],[161,162,163,164,168],"p",{},"Quando escrevemos programas em p5.js, muitas vezes queremos repetir a mesma forma várias vezes. O comando ",[165,166,167],"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.",[161,170,171],{},"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.",[173,174,176],"h2",{"id":175},"vantagem-de-usar-classes-e-objetos","Vantagem de usar classes e objetos",[161,178,179],{},"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.",[161,181,182],{},"Essa abordagem é útil porque:",[184,185,186,190,193,196],"ul",{},[187,188,189],"li",{},"organiza melhor o código;",[187,191,192],{},"permite criar vários desenhos iguais ou parecidos;",[187,194,195],{},"facilita alterar o comportamento de todos os objetos ao mesmo tempo;",[187,197,198],{},"deixa o programa mais próximo de uma representação de elementos do mundo real.",[173,200,202],{"id":201},"exemplo-1-homem-palito","Exemplo 1: homem palito",[161,204,205],{},"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.",[207,208,209,210],"code-preview",{},"Código 4.1 - Classe para desenhar um homem palito",[211,212,213],"template",{"v-slot:code":5},[214,215,219],"pre",{"className":216,"code":217,"language":218,"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",[165,220,221,238,262,280,294,300,307,319,359,404,445,486,533,578,583,589,594,607,627,642,647,677,705,710,726,740],{"__ignoreMap":5},[222,223,226,230,234],"span",{"class":224,"line":225},"line",1,[222,227,229],{"class":228},"spNyl","class",[222,231,233],{"class":232},"sBMFI"," HomemPalito",[222,235,237],{"class":236},"sMK4o"," {\n",[222,239,241,244,247,251,254,257,260],{"class":224,"line":240},2,[222,242,243],{"class":228},"  constructor",[222,245,246],{"class":236},"(",[222,248,250],{"class":249},"sHdIc","x",[222,252,253],{"class":236},",",[222,255,256],{"class":249}," y",[222,258,259],{"class":236},")",[222,261,237],{"class":236},[222,263,265,268,271,274,277],{"class":224,"line":264},3,[222,266,267],{"class":236},"    this.",[222,269,250],{"class":270},"sTEyZ",[222,272,273],{"class":236}," =",[222,275,276],{"class":270}," x",[222,278,279],{"class":236},";\n",[222,281,283,285,288,290,292],{"class":224,"line":282},4,[222,284,267],{"class":236},[222,286,287],{"class":270},"y",[222,289,273],{"class":236},[222,291,256],{"class":270},[222,293,279],{"class":236},[222,295,297],{"class":224,"line":296},5,[222,298,299],{"class":236},"  }\n",[222,301,303],{"class":224,"line":302},6,[222,304,306],{"emptyLinePlaceholder":305},true,"\n",[222,308,310,314,317],{"class":224,"line":309},7,[222,311,313],{"class":312},"swJcz","  desenhar",[222,315,316],{"class":236},"()",[222,318,237],{"class":236},[222,320,322,326,328,331,333,335,338,340,343,347,349,351,353,355,357],{"class":224,"line":321},8,[222,323,325],{"class":324},"s2Zo4","    ellipse",[222,327,246],{"class":312},[222,329,330],{"class":236},"this.",[222,332,250],{"class":270},[222,334,253],{"class":236},[222,336,337],{"class":236}," this.",[222,339,287],{"class":270},[222,341,342],{"class":236}," -",[222,344,346],{"class":345},"sbssI"," 40",[222,348,253],{"class":236},[222,350,346],{"class":345},[222,352,253],{"class":236},[222,354,346],{"class":345},[222,356,259],{"class":312},[222,358,279],{"class":236},[222,360,362,365,367,369,371,373,375,377,379,382,384,386,388,390,392,394,397,400,402],{"class":224,"line":361},9,[222,363,364],{"class":324},"    line",[222,366,246],{"class":312},[222,368,330],{"class":236},[222,370,250],{"class":270},[222,372,253],{"class":236},[222,374,337],{"class":236},[222,376,287],{"class":270},[222,378,342],{"class":236},[222,380,381],{"class":345}," 20",[222,383,253],{"class":236},[222,385,337],{"class":236},[222,387,250],{"class":270},[222,389,253],{"class":236},[222,391,337],{"class":236},[222,393,287],{"class":270},[222,395,396],{"class":236}," +",[222,398,399],{"class":345}," 80",[222,401,259],{"class":312},[222,403,279],{"class":236},[222,405,407,409,411,413,415,417,419,421,423,425,427,429,431,433,435,437,439,441,443],{"class":224,"line":406},10,[222,408,364],{"class":324},[222,410,246],{"class":312},[222,412,330],{"class":236},[222,414,250],{"class":270},[222,416,253],{"class":236},[222,418,337],{"class":236},[222,420,287],{"class":270},[222,422,253],{"class":236},[222,424,337],{"class":236},[222,426,250],{"class":270},[222,428,342],{"class":236},[222,430,346],{"class":345},[222,432,253],{"class":236},[222,434,337],{"class":236},[222,436,287],{"class":270},[222,438,396],{"class":236},[222,440,346],{"class":345},[222,442,259],{"class":312},[222,444,279],{"class":236},[222,446,448,450,452,454,456,458,460,462,464,466,468,470,472,474,476,478,480,482,484],{"class":224,"line":447},11,[222,449,364],{"class":324},[222,451,246],{"class":312},[222,453,330],{"class":236},[222,455,250],{"class":270},[222,457,253],{"class":236},[222,459,337],{"class":236},[222,461,287],{"class":270},[222,463,253],{"class":236},[222,465,337],{"class":236},[222,467,250],{"class":270},[222,469,396],{"class":236},[222,471,346],{"class":345},[222,473,253],{"class":236},[222,475,337],{"class":236},[222,477,287],{"class":270},[222,479,396],{"class":236},[222,481,346],{"class":345},[222,483,259],{"class":312},[222,485,279],{"class":236},[222,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,518,520,522,524,526,529,531],{"class":224,"line":488},12,[222,490,364],{"class":324},[222,492,246],{"class":312},[222,494,330],{"class":236},[222,496,250],{"class":270},[222,498,253],{"class":236},[222,500,337],{"class":236},[222,502,287],{"class":270},[222,504,396],{"class":236},[222,506,399],{"class":345},[222,508,253],{"class":236},[222,510,337],{"class":236},[222,512,250],{"class":270},[222,514,342],{"class":236},[222,516,517],{"class":345}," 30",[222,519,253],{"class":236},[222,521,337],{"class":236},[222,523,287],{"class":270},[222,525,396],{"class":236},[222,527,528],{"class":345}," 130",[222,530,259],{"class":312},[222,532,279],{"class":236},[222,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,576],{"class":224,"line":535},13,[222,537,364],{"class":324},[222,539,246],{"class":312},[222,541,330],{"class":236},[222,543,250],{"class":270},[222,545,253],{"class":236},[222,547,337],{"class":236},[222,549,287],{"class":270},[222,551,396],{"class":236},[222,553,399],{"class":345},[222,555,253],{"class":236},[222,557,337],{"class":236},[222,559,250],{"class":270},[222,561,396],{"class":236},[222,563,517],{"class":345},[222,565,253],{"class":236},[222,567,337],{"class":236},[222,569,287],{"class":270},[222,571,396],{"class":236},[222,573,528],{"class":345},[222,575,259],{"class":312},[222,577,279],{"class":236},[222,579,581],{"class":224,"line":580},14,[222,582,299],{"class":236},[222,584,586],{"class":224,"line":585},15,[222,587,588],{"class":236},"}\n",[222,590,592],{"class":224,"line":591},16,[222,593,306],{"emptyLinePlaceholder":305},[222,595,597,600,603,605],{"class":224,"line":596},17,[222,598,599],{"class":228},"function",[222,601,602],{"class":324}," setup",[222,604,316],{"class":236},[222,606,237],{"class":236},[222,608,610,613,615,618,620,623,625],{"class":224,"line":609},18,[222,611,612],{"class":324},"  createCanvas",[222,614,246],{"class":312},[222,616,617],{"class":345},"400",[222,619,253],{"class":236},[222,621,622],{"class":345}," 400",[222,624,259],{"class":312},[222,626,279],{"class":236},[222,628,630,633,635,638,640],{"class":224,"line":629},19,[222,631,632],{"class":324},"  background",[222,634,246],{"class":312},[222,636,637],{"class":345},"255",[222,639,259],{"class":312},[222,641,279],{"class":236},[222,643,645],{"class":224,"line":644},20,[222,646,306],{"emptyLinePlaceholder":305},[222,648,650,653,656,658,661,663,665,668,670,673,675],{"class":224,"line":649},21,[222,651,652],{"class":228},"  let",[222,654,655],{"class":270}," pessoa1",[222,657,273],{"class":236},[222,659,660],{"class":236}," new",[222,662,233],{"class":324},[222,664,246],{"class":312},[222,666,667],{"class":345},"120",[222,669,253],{"class":236},[222,671,672],{"class":345}," 140",[222,674,259],{"class":312},[222,676,279],{"class":236},[222,678,680,682,685,687,689,691,693,696,698,701,703],{"class":224,"line":679},22,[222,681,652],{"class":228},[222,683,684],{"class":270}," pessoa2",[222,686,273],{"class":236},[222,688,660],{"class":236},[222,690,233],{"class":324},[222,692,246],{"class":312},[222,694,695],{"class":345},"280",[222,697,253],{"class":236},[222,699,700],{"class":345}," 160",[222,702,259],{"class":312},[222,704,279],{"class":236},[222,706,708],{"class":224,"line":707},23,[222,709,306],{"emptyLinePlaceholder":305},[222,711,713,716,719,722,724],{"class":224,"line":712},24,[222,714,715],{"class":270},"  pessoa1",[222,717,718],{"class":236},".",[222,720,721],{"class":324},"desenhar",[222,723,316],{"class":312},[222,725,279],{"class":236},[222,727,729,732,734,736,738],{"class":224,"line":728},25,[222,730,731],{"class":270},"  pessoa2",[222,733,718],{"class":236},[222,735,721],{"class":324},[222,737,316],{"class":312},[222,739,279],{"class":236},[222,741,743],{"class":224,"line":742},26,[222,744,588],{"class":236},[746,747],"p5-sketch",{"code":217},[173,749,751],{"id":750},"exemplo-2-árvore","Exemplo 2: árvore",[161,753,754,755,757],{},"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 ",[165,756,167],{},": a função define a forma, enquanto os parâmetros indicam onde e como ela deve aparecer.",[207,759,760,761],{},"Código 4.2 - Classe para desenhar uma árvore",[211,762,763],{"v-slot:code":5},[214,764,766],{"className":216,"code":765,"language":218,"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",[165,767,768,777,793,805,817,821,825,833,842,846,852,876,911,915,920,943,975,979,1001,1038,1074,1078,1100,1134,1138,1142,1146,1157,1174,1187,1192,1219,1246,1251,1265,1279],{"__ignoreMap":5},[222,769,770,772,775],{"class":224,"line":225},[222,771,229],{"class":228},[222,773,774],{"class":232}," Arvore",[222,776,237],{"class":236},[222,778,779,781,783,785,787,789,791],{"class":224,"line":240},[222,780,243],{"class":228},[222,782,246],{"class":236},[222,784,250],{"class":249},[222,786,253],{"class":236},[222,788,256],{"class":249},[222,790,259],{"class":236},[222,792,237],{"class":236},[222,794,795,797,799,801,803],{"class":224,"line":264},[222,796,267],{"class":236},[222,798,250],{"class":270},[222,800,273],{"class":236},[222,802,276],{"class":270},[222,804,279],{"class":236},[222,806,807,809,811,813,815],{"class":224,"line":282},[222,808,267],{"class":236},[222,810,287],{"class":270},[222,812,273],{"class":236},[222,814,256],{"class":270},[222,816,279],{"class":236},[222,818,819],{"class":224,"line":296},[222,820,299],{"class":236},[222,822,823],{"class":224,"line":302},[222,824,306],{"emptyLinePlaceholder":305},[222,826,827,829,831],{"class":224,"line":309},[222,828,313],{"class":312},[222,830,316],{"class":236},[222,832,237],{"class":236},[222,834,835,838,840],{"class":224,"line":321},[222,836,837],{"class":324},"    noStroke",[222,839,316],{"class":312},[222,841,279],{"class":236},[222,843,844],{"class":224,"line":361},[222,845,306],{"emptyLinePlaceholder":305},[222,847,848],{"class":224,"line":406},[222,849,851],{"class":850},"sHwdD","    \u002F\u002F tronco\n",[222,853,854,857,859,862,864,867,869,872,874],{"class":224,"line":447},[222,855,856],{"class":324},"    fill",[222,858,246],{"class":312},[222,860,861],{"class":345},"101",[222,863,253],{"class":236},[222,865,866],{"class":345}," 67",[222,868,253],{"class":236},[222,870,871],{"class":345}," 33",[222,873,259],{"class":312},[222,875,279],{"class":236},[222,877,878,881,883,885,887,889,892,894,896,898,900,902,904,907,909],{"class":224,"line":488},[222,879,880],{"class":324},"    rect",[222,882,246],{"class":312},[222,884,330],{"class":236},[222,886,250],{"class":270},[222,888,342],{"class":236},[222,890,891],{"class":345}," 10",[222,893,253],{"class":236},[222,895,337],{"class":236},[222,897,287],{"class":270},[222,899,253],{"class":236},[222,901,381],{"class":345},[222,903,253],{"class":236},[222,905,906],{"class":345}," 70",[222,908,259],{"class":312},[222,910,279],{"class":236},[222,912,913],{"class":224,"line":535},[222,914,306],{"emptyLinePlaceholder":305},[222,916,917],{"class":224,"line":580},[222,918,919],{"class":850},"    \u002F\u002F copa em camadas, da mais escura (base) para a mais clara (topo)\n",[222,921,922,924,926,929,931,934,936,939,941],{"class":224,"line":585},[222,923,856],{"class":324},[222,925,246],{"class":312},[222,927,928],{"class":345},"34",[222,930,253],{"class":236},[222,932,933],{"class":345}," 100",[222,935,253],{"class":236},[222,937,938],{"class":345}," 34",[222,940,259],{"class":312},[222,942,279],{"class":236},[222,944,945,947,949,951,953,955,957,959,961,963,965,967,969,971,973],{"class":224,"line":591},[222,946,325],{"class":324},[222,948,246],{"class":312},[222,950,330],{"class":236},[222,952,250],{"class":270},[222,954,253],{"class":236},[222,956,337],{"class":236},[222,958,287],{"class":270},[222,960,342],{"class":236},[222,962,891],{"class":345},[222,964,253],{"class":236},[222,966,933],{"class":345},[222,968,253],{"class":236},[222,970,933],{"class":345},[222,972,259],{"class":312},[222,974,279],{"class":236},[222,976,977],{"class":224,"line":596},[222,978,306],{"emptyLinePlaceholder":305},[222,980,981,983,985,988,990,992,994,997,999],{"class":224,"line":609},[222,982,856],{"class":324},[222,984,246],{"class":312},[222,986,987],{"class":345},"46",[222,989,253],{"class":236},[222,991,528],{"class":345},[222,993,253],{"class":236},[222,995,996],{"class":345}," 46",[222,998,259],{"class":312},[222,1000,279],{"class":236},[222,1002,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1026,1028,1030,1032,1034,1036],{"class":224,"line":629},[222,1004,325],{"class":324},[222,1006,246],{"class":312},[222,1008,330],{"class":236},[222,1010,250],{"class":270},[222,1012,342],{"class":236},[222,1014,517],{"class":345},[222,1016,253],{"class":236},[222,1018,337],{"class":236},[222,1020,287],{"class":270},[222,1022,342],{"class":236},[222,1024,1025],{"class":345}," 50",[222,1027,253],{"class":236},[222,1029,906],{"class":345},[222,1031,253],{"class":236},[222,1033,906],{"class":345},[222,1035,259],{"class":312},[222,1037,279],{"class":236},[222,1039,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072],{"class":224,"line":644},[222,1041,325],{"class":324},[222,1043,246],{"class":312},[222,1045,330],{"class":236},[222,1047,250],{"class":270},[222,1049,396],{"class":236},[222,1051,517],{"class":345},[222,1053,253],{"class":236},[222,1055,337],{"class":236},[222,1057,287],{"class":270},[222,1059,342],{"class":236},[222,1061,1025],{"class":345},[222,1063,253],{"class":236},[222,1065,906],{"class":345},[222,1067,253],{"class":236},[222,1069,906],{"class":345},[222,1071,259],{"class":312},[222,1073,279],{"class":236},[222,1075,1076],{"class":224,"line":649},[222,1077,306],{"emptyLinePlaceholder":305},[222,1079,1080,1082,1084,1087,1089,1091,1093,1096,1098],{"class":224,"line":679},[222,1081,856],{"class":324},[222,1083,246],{"class":312},[222,1085,1086],{"class":345},"60",[222,1088,253],{"class":236},[222,1090,700],{"class":345},[222,1092,253],{"class":236},[222,1094,1095],{"class":345}," 60",[222,1097,259],{"class":312},[222,1099,279],{"class":236},[222,1101,1102,1104,1106,1108,1110,1112,1114,1116,1118,1121,1123,1126,1128,1130,1132],{"class":224,"line":707},[222,1103,325],{"class":324},[222,1105,246],{"class":312},[222,1107,330],{"class":236},[222,1109,250],{"class":270},[222,1111,253],{"class":236},[222,1113,337],{"class":236},[222,1115,287],{"class":270},[222,1117,342],{"class":236},[222,1119,1120],{"class":345}," 90",[222,1122,253],{"class":236},[222,1124,1125],{"class":345}," 85",[222,1127,253],{"class":236},[222,1129,1125],{"class":345},[222,1131,259],{"class":312},[222,1133,279],{"class":236},[222,1135,1136],{"class":224,"line":712},[222,1137,299],{"class":236},[222,1139,1140],{"class":224,"line":728},[222,1141,588],{"class":236},[222,1143,1144],{"class":224,"line":742},[222,1145,306],{"emptyLinePlaceholder":305},[222,1147,1149,1151,1153,1155],{"class":224,"line":1148},27,[222,1150,599],{"class":228},[222,1152,602],{"class":324},[222,1154,316],{"class":236},[222,1156,237],{"class":236},[222,1158,1160,1162,1164,1166,1168,1170,1172],{"class":224,"line":1159},28,[222,1161,612],{"class":324},[222,1163,246],{"class":312},[222,1165,617],{"class":345},[222,1167,253],{"class":236},[222,1169,622],{"class":345},[222,1171,259],{"class":312},[222,1173,279],{"class":236},[222,1175,1177,1179,1181,1183,1185],{"class":224,"line":1176},29,[222,1178,632],{"class":324},[222,1180,246],{"class":312},[222,1182,637],{"class":345},[222,1184,259],{"class":312},[222,1186,279],{"class":236},[222,1188,1190],{"class":224,"line":1189},30,[222,1191,306],{"emptyLinePlaceholder":305},[222,1193,1195,1197,1200,1202,1204,1206,1208,1210,1212,1215,1217],{"class":224,"line":1194},31,[222,1196,652],{"class":228},[222,1198,1199],{"class":270}," arvore1",[222,1201,273],{"class":236},[222,1203,660],{"class":236},[222,1205,774],{"class":324},[222,1207,246],{"class":312},[222,1209,667],{"class":345},[222,1211,253],{"class":236},[222,1213,1214],{"class":345}," 300",[222,1216,259],{"class":312},[222,1218,279],{"class":236},[222,1220,1222,1224,1227,1229,1231,1233,1235,1237,1239,1242,1244],{"class":224,"line":1221},32,[222,1223,652],{"class":228},[222,1225,1226],{"class":270}," arvore2",[222,1228,273],{"class":236},[222,1230,660],{"class":236},[222,1232,774],{"class":324},[222,1234,246],{"class":312},[222,1236,695],{"class":345},[222,1238,253],{"class":236},[222,1240,1241],{"class":345}," 280",[222,1243,259],{"class":312},[222,1245,279],{"class":236},[222,1247,1249],{"class":224,"line":1248},33,[222,1250,306],{"emptyLinePlaceholder":305},[222,1252,1254,1257,1259,1261,1263],{"class":224,"line":1253},34,[222,1255,1256],{"class":270},"  arvore1",[222,1258,718],{"class":236},[222,1260,721],{"class":324},[222,1262,316],{"class":312},[222,1264,279],{"class":236},[222,1266,1268,1271,1273,1275,1277],{"class":224,"line":1267},35,[222,1269,1270],{"class":270},"  arvore2",[222,1272,718],{"class":236},[222,1274,721],{"class":324},[222,1276,316],{"class":312},[222,1278,279],{"class":236},[222,1280,1282],{"class":224,"line":1281},36,[222,1283,588],{"class":236},[746,1285],{"code":1286},"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",[1288,1289,1290],"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.",[1292,1293,1294],"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":240,"depth":240,"links":1296},[1297,1298,1299],{"id":175,"depth":240,"text":176},{"id":201,"depth":240,"text":202},{"id":750,"depth":240,"text":751},null,"Entenda como criar desenhos reutilizáveis no p5.js usando classes e objetos","md",{},{"title":113,"description":1301},"cOPcXDQKp_yTEkxDWevLCFPKpVdesgqOyTeDO215eug",[1307,1309],{"title":109,"path":110,"stem":111,"description":1308,"children":-1},"Aprenda a usar o laço for para repetir instruções e criar vários objetos de forma organizada",{"title":117,"path":118,"stem":119,"description":5,"children":-1},1784591204553]