[{"data":1,"prerenderedAt":1367},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-imagens-matriciais":183,"-pcs3021-imagens-matriciais-surround":1362},[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":164,"body":185,"categoria":1356,"creditoLink":1356,"creditos":1356,"descricao":1356,"description":1357,"eaulas":1356,"extension":1358,"meta":1359,"navigation":247,"path":165,"seo":1360,"stem":166,"video":1356,"youtube":1356,"youtubeLink":1356,"__hash__":1361},"docs\u002Fpcs3021\u002F6.imagens\u002F5.matriciais.md",{"type":186,"value":187,"toc":1352},"minimark",[188,197,209,401,405,415,436,447,453,615,618,695,713,718,743,749,764,828,845,1266,1269,1287,1291,1294,1319,1348],[189,190,191,192,196],"p",{},"Nas atividades realizadas até o momento, temos manipulado desenhos vetoriais, ou seja, desenhos compostos de elementos como retângulos, círculos, segmentos de reta e curvas. O p5.js também é capaz de manipular imagens matriciais. Nesse caso, a informação visual é codificada como uma grade (ou matriz) de cores (e outros atributos, como transparência). Desse modelo de representação visual surge o termo \"pixel\" (",[193,194,195],"em",{},"picture element","), correspondente a um elemento da matriz de imagem.",[189,198,199,200,204,205,208],{},"Da mesma forma que ocorre com os desenhos vetoriais, o p5.js também é capaz de ler e exibir imagens matriciais a partir de um arquivo, usando a função ",[201,202,203],"strong",{},"loadImage()"," dentro de ",[201,206,207],{},"preload()"," — exatamente como fizemos com arquivos SVG. O exemplo a seguir demonstra como isso pode ser feito.",[210,211,212,213],"code-preview",{},"Código - Carregando e exibindo uma imagem matricial",[214,215,216],"template",{"v-slot:code":5},[217,218,222],"pre",{"className":219,"code":220,"language":221,"meta":5,"style":5},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","let figura;\n\nfunction preload() {\n  figura = loadImage('minha_imagem.jpg');\n}\n\nfunction setup() {\n  createCanvas(400, 500);\n  background(220, 220, 240);\n  \u002F\u002F Apresenta a imagem na janela do programa\n  image(figura, 0, 0);\n}\n","js",[223,224,225,242,249,265,295,301,306,318,340,365,372,396],"code",{"__ignoreMap":5},[226,227,230,234,238],"span",{"class":228,"line":229},"line",1,[226,231,233],{"class":232},"spNyl","let",[226,235,237],{"class":236},"sTEyZ"," figura",[226,239,241],{"class":240},"sMK4o",";\n",[226,243,245],{"class":228,"line":244},2,[226,246,248],{"emptyLinePlaceholder":247},true,"\n",[226,250,252,255,259,262],{"class":228,"line":251},3,[226,253,254],{"class":232},"function",[226,256,258],{"class":257},"s2Zo4"," preload",[226,260,261],{"class":240},"()",[226,263,264],{"class":240}," {\n",[226,266,268,271,274,277,281,284,288,290,293],{"class":228,"line":267},4,[226,269,270],{"class":236},"  figura",[226,272,273],{"class":240}," =",[226,275,276],{"class":257}," loadImage",[226,278,280],{"class":279},"swJcz","(",[226,282,283],{"class":240},"'",[226,285,287],{"class":286},"sfazB","minha_imagem.jpg",[226,289,283],{"class":240},[226,291,292],{"class":279},")",[226,294,241],{"class":240},[226,296,298],{"class":228,"line":297},5,[226,299,300],{"class":240},"}\n",[226,302,304],{"class":228,"line":303},6,[226,305,248],{"emptyLinePlaceholder":247},[226,307,309,311,314,316],{"class":228,"line":308},7,[226,310,254],{"class":232},[226,312,313],{"class":257}," setup",[226,315,261],{"class":240},[226,317,264],{"class":240},[226,319,321,324,326,330,333,336,338],{"class":228,"line":320},8,[226,322,323],{"class":257},"  createCanvas",[226,325,280],{"class":279},[226,327,329],{"class":328},"sbssI","400",[226,331,332],{"class":240},",",[226,334,335],{"class":328}," 500",[226,337,292],{"class":279},[226,339,241],{"class":240},[226,341,343,346,348,351,353,356,358,361,363],{"class":228,"line":342},9,[226,344,345],{"class":257},"  background",[226,347,280],{"class":279},[226,349,350],{"class":328},"220",[226,352,332],{"class":240},[226,354,355],{"class":328}," 220",[226,357,332],{"class":240},[226,359,360],{"class":328}," 240",[226,362,292],{"class":279},[226,364,241],{"class":240},[226,366,368],{"class":228,"line":367},10,[226,369,371],{"class":370},"sHwdD","  \u002F\u002F Apresenta a imagem na janela do programa\n",[226,373,375,378,380,383,385,388,390,392,394],{"class":228,"line":374},11,[226,376,377],{"class":257},"  image",[226,379,280],{"class":279},[226,381,382],{"class":236},"figura",[226,384,332],{"class":240},[226,386,387],{"class":328}," 0",[226,389,332],{"class":240},[226,391,387],{"class":328},[226,393,292],{"class":279},[226,395,241],{"class":240},[226,397,399],{"class":228,"line":398},12,[226,400,300],{"class":240},[402,403],"p5-sketch",{"code":404},"let figura;\n\nfunction setup() {\n  createCanvas(400, 500);\n  figura = createImage(200, 200);\n  figura.loadPixels();\n  for (let x = 0; x \u003C figura.width; x++) {\n    for (let y = 0; y \u003C figura.height; y++) {\n      figura.set(x, y, color(x, y, 150));\n    }\n  }\n  figura.updatePixels();\n\n  background(220, 220, 240);\n  image(figura, 0, 0);\n}\n",[189,406,407,408,411,412,414],{},"Assim como no caso dos desenhos vetoriais, para que o carregamento de um arquivo real funcione corretamente, ele deve estar acessível dentro da pasta do seu projeto (em geral em uma subpasta como ",[223,409,410],{},"assets","), com o caminho referenciado em ",[201,413,203],{},".",[189,416,417,418,421,422,425,426,429,430,432,433,414],{},"O p5.js é capaz de ler imagens nos formatos ",[201,419,420],{},"JPG",", ",[201,423,424],{},"PNG"," e ",[201,427,428],{},"GIF",". No caso dos formatos PNG e GIF, a informação de transparência é preservada. Se um GIF animado for carregado com ",[201,431,203],{},", ele é exibido já animado automaticamente ao ser desenhado repetidamente dentro de ",[223,434,435],{},"draw()",[189,437,438,439,442,443,446],{},"Na forma apresentada no exemplo anterior, a função ",[201,440,441],{},"image()"," recebeu três parâmetros: a variável com a informação da imagem matricial a ser apresentada e dois valores numéricos correspondentes à posição do canto superior esquerdo do desenho na janela (da mesma forma que retângulos são especificados na função ",[201,444,445],{},"rect()","). Nesse caso, a imagem é apresentada em seu tamanho original.",[189,448,449,450,452],{},"Também é possível especificar mais dois parâmetros para a função ",[201,451,441],{},", de forma similar ao que ocorre com a função usada para desenhos vetoriais, indicando a largura e altura da imagem. Por exemplo, se modificarmos a última linha do programa anterior para:",[210,454,455,456],{},"Código - Exibindo a imagem com dimensões diferentes das originais",[214,457,458],{"v-slot:code":5},[217,459,461],{"className":219,"code":460,"language":221,"meta":5,"style":5},"let figura;\n\nfunction preload() {\n  figura = loadImage('minha_imagem.jpg');\n}\n\nfunction setup() {\n  createCanvas(400, 500);\n  figura = createImage(200, 200);\n  background(220, 220, 240);\n  image(figura, 0, 0, 200, 100);\n}\n",[223,462,463,471,475,485,505,509,513,523,539,562,582,611],{"__ignoreMap":5},[226,464,465,467,469],{"class":228,"line":229},[226,466,233],{"class":232},[226,468,237],{"class":236},[226,470,241],{"class":240},[226,472,473],{"class":228,"line":244},[226,474,248],{"emptyLinePlaceholder":247},[226,476,477,479,481,483],{"class":228,"line":251},[226,478,254],{"class":232},[226,480,258],{"class":257},[226,482,261],{"class":240},[226,484,264],{"class":240},[226,486,487,489,491,493,495,497,499,501,503],{"class":228,"line":267},[226,488,270],{"class":236},[226,490,273],{"class":240},[226,492,276],{"class":257},[226,494,280],{"class":279},[226,496,283],{"class":240},[226,498,287],{"class":286},[226,500,283],{"class":240},[226,502,292],{"class":279},[226,504,241],{"class":240},[226,506,507],{"class":228,"line":297},[226,508,300],{"class":240},[226,510,511],{"class":228,"line":303},[226,512,248],{"emptyLinePlaceholder":247},[226,514,515,517,519,521],{"class":228,"line":308},[226,516,254],{"class":232},[226,518,313],{"class":257},[226,520,261],{"class":240},[226,522,264],{"class":240},[226,524,525,527,529,531,533,535,537],{"class":228,"line":320},[226,526,323],{"class":257},[226,528,280],{"class":279},[226,530,329],{"class":328},[226,532,332],{"class":240},[226,534,335],{"class":328},[226,536,292],{"class":279},[226,538,241],{"class":240},[226,540,541,543,545,548,550,553,555,558,560],{"class":228,"line":342},[226,542,270],{"class":236},[226,544,273],{"class":240},[226,546,547],{"class":257}," createImage",[226,549,280],{"class":279},[226,551,552],{"class":328},"200",[226,554,332],{"class":240},[226,556,557],{"class":328}," 200",[226,559,292],{"class":279},[226,561,241],{"class":240},[226,563,564,566,568,570,572,574,576,578,580],{"class":228,"line":367},[226,565,345],{"class":257},[226,567,280],{"class":279},[226,569,350],{"class":328},[226,571,332],{"class":240},[226,573,355],{"class":328},[226,575,332],{"class":240},[226,577,360],{"class":328},[226,579,292],{"class":279},[226,581,241],{"class":240},[226,583,584,586,588,590,592,594,596,598,600,602,604,607,609],{"class":228,"line":374},[226,585,377],{"class":257},[226,587,280],{"class":279},[226,589,382],{"class":236},[226,591,332],{"class":240},[226,593,387],{"class":328},[226,595,332],{"class":240},[226,597,387],{"class":328},[226,599,332],{"class":240},[226,601,557],{"class":328},[226,603,332],{"class":240},[226,605,606],{"class":328}," 100",[226,608,292],{"class":279},[226,610,241],{"class":240},[226,612,613],{"class":228,"line":398},[226,614,300],{"class":240},[402,616],{"code":617},"let figura;\n\nfunction setup() {\n  createCanvas(400, 500);\n  figura = createImage(200, 200);\n  figura.loadPixels();\n  for (let x = 0; x \u003C figura.width; x++) {\n    for (let y = 0; y \u003C figura.height; y++) {\n      figura.set(x, y, color(x, y, 150));\n    }\n  }\n  figura.updatePixels();\n\n  background(220, 220, 240);\n  image(figura, 0, 0, 200, 100);\n}\n",[189,619,620,621,664,665,694],{},"a imagem será apresentada com ",[226,622,625,646],{"className":623},[624],"katex",[226,626,629],{"className":627},[628],"katex-mathml",[630,631,633],"math",{"xmlns":632},"http:\u002F\u002Fwww.w3.org\u002F1998\u002FMath\u002FMathML",[634,635,636,642],"semantics",{},[637,638,639],"mrow",{},[640,641,552],"mn",{},[643,644,552],"annotation",{"encoding":645},"application\u002Fx-tex",[226,647,651],{"className":648,"ariaHidden":650},[649],"katex-html","true",[226,652,655,660],{"className":653},[654],"base",[226,656],{"className":657,"style":659},[658],"strut","height:0.6444em;",[226,661,552],{"className":662},[663],"mord"," pixels de largura e ",[226,666,668,682],{"className":667},[624],[226,669,671],{"className":670},[628],[630,672,673],{"xmlns":632},[634,674,675,680],{},[637,676,677],{},[640,678,679],{},"100",[643,681,679],{"encoding":645},[226,683,685],{"className":684,"ariaHidden":650},[649],[226,686,688,691],{"className":687},[654],[226,689],{"className":690,"style":659},[658],[226,692,679],{"className":693},[663]," pixels de altura. Observe que, como essas dimensões não seguem a proporção original da figura, o desenho é distorcido. Outro ponto importante é que a ampliação e redução de uma imagem matricial podem causar outras distorções visuais à medida que parte dos pixels precisa ser ampliada ou suprimida para que a imagem ocupe o novo tamanho.",[696,697,698,703,706],"blockquote",{},[189,699,700],{},[201,701,702],{},"Atividade 1",[189,704,705],{},"Modifique o Código para desenhar a imagem várias vezes na janela, como mostrado a seguir, utilizando comandos de repetição.",[189,707,708],{},[709,710],"img",{"alt":711,"src":712},"Resultado esperado da atividade 1",".\u002Fimg\u002F05-imagens\u002Fativ1-resultado.png",[714,715,717],"h2",{"id":716},"manipulando-informações-de-cor","Manipulando informações de cor",[189,719,720,721,421,724,425,727,730,731,734,735,738,739,742],{},"Em diversas funções do p5.js, como ",[201,722,723],{},"background()",[201,725,726],{},"fill()",[201,728,729],{},"stroke()",", utilizamos valores numéricos para representar cores. Na configuração padrão, o p5.js representa cores como um ou três números entre 0 e 255. Quando são utilizados três valores, eles representam quantidades de vermelho, verde e azul (do formato RGB, ",[193,732,733],{},"red \u002F green \u002F blue","). Esse é um sistema aditivo de formação de cores, em que raios de luz dessas três cores componentes se misturam para produzir novas cores. Assim, a cor preta é representada pelos valores (0, 0, 0) e a cor branca por (255, 255, 255). Quando somente um valor é utilizado, ele é copiado para os três componentes, ou seja ",[223,736,737],{},"background(255)"," corresponde a ",[223,740,741],{},"background(255, 255, 255)",". Assim, obteremos tonalidades de cinza.",[189,744,745,746,748],{},"É importante notar que cada pixel de uma imagem matricial armazena informações de cor e transparência em p5.js. Assim, quando desenhamos uma imagem na tela usando a função ",[201,747,441],{},", efetivamente copiamos essas informações de cor para a janela do programa.",[189,750,751,752,755,756,759,760,763],{},"É possível alterar as configurações de representação de cor do p5.js através da função ",[201,753,754],{},"colorMode()",". O primeiro parâmetro dessa função é RGB ou HSB, indicando o modelo de representação de cores. O modelo RGB já foi explicado; o modelo HSB também usa três componentes, mas elas correspondem à tonalidade (",[193,757,758],{},"hue","), saturação e brilho (",[193,761,762],{},"brightness",") da cor. Os parâmetros seguintes são usados para indicar os limites numéricos para cada parâmetro. Por exemplo:",[217,765,767],{"className":219,"code":766,"language":221,"meta":5,"style":5},"\u002F\u002F usar representação RGB sendo que cada componente de cor tem um valor variando entre 0 e 100\ncolorMode(RGB, 100);\n\n\u002F\u002F usar representação HSB sendo que a tonalidade varia entre 0 e 360 e a saturação e o brilho variam\n\u002F\u002F entre 0 e 100\ncolorMode(HSB, 360, 100, 100);\n",[223,768,769,774,790,794,799,804],{"__ignoreMap":5},[226,770,771],{"class":228,"line":229},[226,772,773],{"class":370},"\u002F\u002F usar representação RGB sendo que cada componente de cor tem um valor variando entre 0 e 100\n",[226,775,776,779,782,784,786,788],{"class":228,"line":244},[226,777,778],{"class":257},"colorMode",[226,780,781],{"class":236},"(RGB",[226,783,332],{"class":240},[226,785,606],{"class":328},[226,787,292],{"class":236},[226,789,241],{"class":240},[226,791,792],{"class":228,"line":251},[226,793,248],{"emptyLinePlaceholder":247},[226,795,796],{"class":228,"line":267},[226,797,798],{"class":370},"\u002F\u002F usar representação HSB sendo que a tonalidade varia entre 0 e 360 e a saturação e o brilho variam\n",[226,800,801],{"class":228,"line":297},[226,802,803],{"class":370},"\u002F\u002F entre 0 e 100\n",[226,805,806,808,811,813,816,818,820,822,824,826],{"class":228,"line":303},[226,807,778],{"class":257},[226,809,810],{"class":236},"(HSB",[226,812,332],{"class":240},[226,814,815],{"class":328}," 360",[226,817,332],{"class":240},[226,819,606],{"class":328},[226,821,332],{"class":240},[226,823,606],{"class":328},[226,825,292],{"class":236},[226,827,241],{"class":240},[189,829,830,831,834,835,837,838,841,842,844],{},"Por fim, a função ",[201,832,833],{},"tint()"," permite definir uma cor que será multiplicada pelas cores das imagens desenhadas pela função ",[201,836,441],{},". A função ",[201,839,840],{},"noTint()"," pode ser utilizada para cancelar chamadas anteriores da função ",[201,843,833],{},". O programa a seguir mostra como essa função pode ser usada para aplicar um efeito de transparência a uma imagem, variando de acordo com a posição horizontal do mouse (passe o mouse sobre o canvas para testar).",[210,846,847,848],{},"Código - Uso de tint() para aplicar transparência a uma imagem, controlada pelo mouse",[214,849,850],{"v-slot:code":5},[217,851,853],{"className":219,"code":852,"language":221,"meta":5,"style":5},"let figura;\n\nfunction preload() {\n  \u002F\u002F em um projeto real:\n  \u002F\u002F figura = loadImage('minha_imagem.jpg');\n}\n\nfunction setup() {\n  createCanvas(500, 500);\n  figura = createImage(200, 200);\n  figura.loadPixels();\n  for (let x = 0; x \u003C figura.width; x++) {\n    for (let y = 0; y \u003C figura.height; y++) {\n      figura.set(x, y, color(x, y, 150));\n    }\n  }\n  figura.updatePixels();\n}\n\nfunction draw() {\n  background(220, 220, 240);\n  \u002F\u002F Calcula um valor de transparência proporcional à\n  \u002F\u002F posição horizontal do cursor do mouse, usando para\n  \u002F\u002F isso a função map()\n  let alpha = map(mouseX, 0, width, 0, 255);\n  tint(255, alpha);\n  image(figura, 0, 0, width, height);\n}\n",[223,854,855,863,867,877,882,887,891,895,905,922,942,955,1001,1041,1084,1090,1096,1110,1115,1120,1132,1153,1159,1165,1171,1212,1231,1261],{"__ignoreMap":5},[226,856,857,859,861],{"class":228,"line":229},[226,858,233],{"class":232},[226,860,237],{"class":236},[226,862,241],{"class":240},[226,864,865],{"class":228,"line":244},[226,866,248],{"emptyLinePlaceholder":247},[226,868,869,871,873,875],{"class":228,"line":251},[226,870,254],{"class":232},[226,872,258],{"class":257},[226,874,261],{"class":240},[226,876,264],{"class":240},[226,878,879],{"class":228,"line":267},[226,880,881],{"class":370},"  \u002F\u002F em um projeto real:\n",[226,883,884],{"class":228,"line":297},[226,885,886],{"class":370},"  \u002F\u002F figura = loadImage('minha_imagem.jpg');\n",[226,888,889],{"class":228,"line":303},[226,890,300],{"class":240},[226,892,893],{"class":228,"line":308},[226,894,248],{"emptyLinePlaceholder":247},[226,896,897,899,901,903],{"class":228,"line":320},[226,898,254],{"class":232},[226,900,313],{"class":257},[226,902,261],{"class":240},[226,904,264],{"class":240},[226,906,907,909,911,914,916,918,920],{"class":228,"line":342},[226,908,323],{"class":257},[226,910,280],{"class":279},[226,912,913],{"class":328},"500",[226,915,332],{"class":240},[226,917,335],{"class":328},[226,919,292],{"class":279},[226,921,241],{"class":240},[226,923,924,926,928,930,932,934,936,938,940],{"class":228,"line":367},[226,925,270],{"class":236},[226,927,273],{"class":240},[226,929,547],{"class":257},[226,931,280],{"class":279},[226,933,552],{"class":328},[226,935,332],{"class":240},[226,937,557],{"class":328},[226,939,292],{"class":279},[226,941,241],{"class":240},[226,943,944,946,948,951,953],{"class":228,"line":374},[226,945,270],{"class":236},[226,947,414],{"class":240},[226,949,950],{"class":257},"loadPixels",[226,952,261],{"class":279},[226,954,241],{"class":240},[226,956,957,961,964,966,969,971,973,976,978,981,983,985,988,990,992,995,998],{"class":228,"line":398},[226,958,960],{"class":959},"s7zQu","  for",[226,962,963],{"class":279}," (",[226,965,233],{"class":232},[226,967,968],{"class":236}," x",[226,970,273],{"class":240},[226,972,387],{"class":328},[226,974,975],{"class":240},";",[226,977,968],{"class":236},[226,979,980],{"class":240}," \u003C",[226,982,237],{"class":236},[226,984,414],{"class":240},[226,986,987],{"class":236},"width",[226,989,975],{"class":240},[226,991,968],{"class":236},[226,993,994],{"class":240},"++",[226,996,997],{"class":279},") ",[226,999,1000],{"class":240},"{\n",[226,1002,1004,1007,1009,1011,1014,1016,1018,1020,1022,1024,1026,1028,1031,1033,1035,1037,1039],{"class":228,"line":1003},13,[226,1005,1006],{"class":959},"    for",[226,1008,963],{"class":279},[226,1010,233],{"class":232},[226,1012,1013],{"class":236}," y",[226,1015,273],{"class":240},[226,1017,387],{"class":328},[226,1019,975],{"class":240},[226,1021,1013],{"class":236},[226,1023,980],{"class":240},[226,1025,237],{"class":236},[226,1027,414],{"class":240},[226,1029,1030],{"class":236},"height",[226,1032,975],{"class":240},[226,1034,1013],{"class":236},[226,1036,994],{"class":240},[226,1038,997],{"class":279},[226,1040,1000],{"class":240},[226,1042,1044,1047,1049,1052,1054,1057,1059,1061,1063,1066,1068,1070,1072,1074,1076,1079,1082],{"class":228,"line":1043},14,[226,1045,1046],{"class":236},"      figura",[226,1048,414],{"class":240},[226,1050,1051],{"class":257},"set",[226,1053,280],{"class":279},[226,1055,1056],{"class":236},"x",[226,1058,332],{"class":240},[226,1060,1013],{"class":236},[226,1062,332],{"class":240},[226,1064,1065],{"class":257}," color",[226,1067,280],{"class":279},[226,1069,1056],{"class":236},[226,1071,332],{"class":240},[226,1073,1013],{"class":236},[226,1075,332],{"class":240},[226,1077,1078],{"class":328}," 150",[226,1080,1081],{"class":279},"))",[226,1083,241],{"class":240},[226,1085,1087],{"class":228,"line":1086},15,[226,1088,1089],{"class":240},"    }\n",[226,1091,1093],{"class":228,"line":1092},16,[226,1094,1095],{"class":240},"  }\n",[226,1097,1099,1101,1103,1106,1108],{"class":228,"line":1098},17,[226,1100,270],{"class":236},[226,1102,414],{"class":240},[226,1104,1105],{"class":257},"updatePixels",[226,1107,261],{"class":279},[226,1109,241],{"class":240},[226,1111,1113],{"class":228,"line":1112},18,[226,1114,300],{"class":240},[226,1116,1118],{"class":228,"line":1117},19,[226,1119,248],{"emptyLinePlaceholder":247},[226,1121,1123,1125,1128,1130],{"class":228,"line":1122},20,[226,1124,254],{"class":232},[226,1126,1127],{"class":257}," draw",[226,1129,261],{"class":240},[226,1131,264],{"class":240},[226,1133,1135,1137,1139,1141,1143,1145,1147,1149,1151],{"class":228,"line":1134},21,[226,1136,345],{"class":257},[226,1138,280],{"class":279},[226,1140,350],{"class":328},[226,1142,332],{"class":240},[226,1144,355],{"class":328},[226,1146,332],{"class":240},[226,1148,360],{"class":328},[226,1150,292],{"class":279},[226,1152,241],{"class":240},[226,1154,1156],{"class":228,"line":1155},22,[226,1157,1158],{"class":370},"  \u002F\u002F Calcula um valor de transparência proporcional à\n",[226,1160,1162],{"class":228,"line":1161},23,[226,1163,1164],{"class":370},"  \u002F\u002F posição horizontal do cursor do mouse, usando para\n",[226,1166,1168],{"class":228,"line":1167},24,[226,1169,1170],{"class":370},"  \u002F\u002F isso a função map()\n",[226,1172,1174,1177,1180,1182,1185,1187,1190,1192,1194,1196,1199,1201,1203,1205,1208,1210],{"class":228,"line":1173},25,[226,1175,1176],{"class":232},"  let",[226,1178,1179],{"class":236}," alpha",[226,1181,273],{"class":240},[226,1183,1184],{"class":257}," map",[226,1186,280],{"class":279},[226,1188,1189],{"class":236},"mouseX",[226,1191,332],{"class":240},[226,1193,387],{"class":328},[226,1195,332],{"class":240},[226,1197,1198],{"class":236}," width",[226,1200,332],{"class":240},[226,1202,387],{"class":328},[226,1204,332],{"class":240},[226,1206,1207],{"class":328}," 255",[226,1209,292],{"class":279},[226,1211,241],{"class":240},[226,1213,1215,1218,1220,1223,1225,1227,1229],{"class":228,"line":1214},26,[226,1216,1217],{"class":257},"  tint",[226,1219,280],{"class":279},[226,1221,1222],{"class":328},"255",[226,1224,332],{"class":240},[226,1226,1179],{"class":236},[226,1228,292],{"class":279},[226,1230,241],{"class":240},[226,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1257,1259],{"class":228,"line":1233},27,[226,1235,377],{"class":257},[226,1237,280],{"class":279},[226,1239,382],{"class":236},[226,1241,332],{"class":240},[226,1243,387],{"class":328},[226,1245,332],{"class":240},[226,1247,387],{"class":328},[226,1249,332],{"class":240},[226,1251,1198],{"class":236},[226,1253,332],{"class":240},[226,1255,1256],{"class":236}," height",[226,1258,292],{"class":279},[226,1260,241],{"class":240},[226,1262,1264],{"class":228,"line":1263},28,[226,1265,300],{"class":240},[402,1267],{"code":1268},"let figura;\n\nfunction setup() {\n  createCanvas(500, 500);\n  figura = createImage(200, 200);\n  figura.loadPixels();\n  for (let x = 0; x \u003C figura.width; x++) {\n    for (let y = 0; y \u003C figura.height; y++) {\n      figura.set(x, y, color(x, y, 150));\n    }\n  }\n  figura.updatePixels();\n}\n\nfunction draw() {\n  background(220, 220, 240);\n  let alpha = map(mouseX, 0, width, 0, 255);\n  tint(255, alpha);\n  image(figura, 0, 0, width, height);\n}\n",[696,1270,1271,1276],{},[189,1272,1273],{},[201,1274,1275],{},"Atividade 2",[189,1277,1278,1279,1286],{},"Modifique o Código para tingir a imagem com uma coloração avermelhada dependendo da posição horizontal do cursor do mouse, sem alterar a transparência. Consulte a ",[1280,1281,1285],"a",{"href":1282,"rel":1283},"https:\u002F\u002Fp5js.org\u002Freference\u002Fp5\u002Ftint\u002F",[1284],"nofollow","referência da função tint()"," para mais informações.",[714,1288,1290],{"id":1289},"combinando-transformações-e-imagens","Combinando transformações e imagens",[189,1292,1293],{},"Da mesma forma que os desenhos vetoriais, as imagens matriciais também podem ser manipuladas por transformações geométricas em p5.js.",[189,1295,1296,1297,1300,1301,1304,1305,1307,1308,1311,1312,425,1315,1318],{},"A função ",[201,1298,1299],{},"imageMode()"," funciona de maneira análoga ao ponto de referência usado por outras formas geométricas, determinando a partir de qual ponto a imagem é posicionada. Dessa forma, ",[201,1302,1303],{},"imageMode(CORNER)"," (comportamento padrão) faz com que as coordenadas passadas para a função ",[201,1306,441],{}," sejam interpretadas como a posição do canto superior esquerdo, e ",[201,1309,1310],{},"imageMode(CENTER)"," faz com que sejam interpretadas como a posição do centro da imagem. Essa função pode ser combinada com ",[201,1313,1314],{},"translate()",[201,1316,1317],{},"rotate()",", exatamente como vimos no capítulo de translação e rotação, para girar ou posicionar imagens de forma mais flexível.",[696,1320,1321,1326,1342],{},[189,1322,1323],{},[201,1324,1325],{},"Atividade 3",[189,1327,1328,1329,421,1331,425,1333,1335,1336,6,1338,1341],{},"Usando ",[201,1330,1299],{},[201,1332,1314],{},[201,1334,1317],{}," combinados com as variáveis ",[201,1337,1189],{},[201,1339,1340],{},"mouseY",", modifique o Código para gerar uma interação semelhante à mostrada na animação a seguir.",[189,1343,1344],{},[709,1345],{"alt":1346,"src":1347},"Animação de referência da atividade 3",".\u002Fimg\u002F05-imagens\u002Fativ3-animacao.gif",[1349,1350,1351],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":5,"searchDepth":244,"depth":244,"links":1353},[1354,1355],{"id":716,"depth":244,"text":717},{"id":1289,"depth":244,"text":1290},null,"Carregando, exibindo, colorindo e transformando imagens matriciais (raster) em p5.js","md",{},{"title":164,"description":1357},"EQWp10qVthN_lapGcvMPoZSsM5ngHuQcEG_vSP31E20",[1363,1365],{"title":160,"path":161,"stem":162,"description":1364,"children":-1},"Veja como exportar o conteúdo do Canvas em SVG",{"title":169,"path":175,"stem":176,"description":1366,"children":-1},"Listas de dados (arrays) em p5.js: declaração, acesso por índice e uso em animações",1786195204387]