[{"data":1,"prerenderedAt":1323},["ShallowReactive",2],{"navigation_docs":3,"-pcs3021-imagens-matriciais":139,"-pcs3021-imagens-matriciais-surround":1318},[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,48,74,92,108,124,133],{"title":15,"path":11,"stem":16},"Exemplo","pcs3021\u002Findex",{"title":18,"icon":19,"path":20,"stem":21,"children":22,"page":47},"Formas geométricas","i-lucide-drafting-compass","\u002Fpcs3021\u002Fgeometrias","pcs3021\u002F2.geometrias",[23,27,31,35,39,43],{"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",false,{"title":49,"icon":50,"path":51,"stem":52,"children":53,"page":47},"Transformações","i-lucide-rotate-3d","\u002Fpcs3021\u002Ftransformacoes","pcs3021\u002F2.transformacoes",[54,58,62,66,70],{"title":55,"path":56,"stem":57},"Rotação","\u002Fpcs3021\u002Ftransformacoes\u002Frotacao","pcs3021\u002F2.transformacoes\u002F1.rotacao",{"title":59,"path":60,"stem":61},"Translação","\u002Fpcs3021\u002Ftransformacoes\u002Ftranslacao","pcs3021\u002F2.transformacoes\u002F2.translacao",{"title":63,"path":64,"stem":65},"Escala","\u002Fpcs3021\u002Ftransformacoes\u002Fescala","pcs3021\u002F2.transformacoes\u002F3.escala",{"title":67,"path":68,"stem":69},"Cisalhamento","\u002Fpcs3021\u002Ftransformacoes\u002Fcisalhamento","pcs3021\u002F2.transformacoes\u002F4.cisalhamento",{"title":71,"path":72,"stem":73},"Push e Pop","\u002Fpcs3021\u002Ftransformacoes\u002Fpush-pop","pcs3021\u002F2.transformacoes\u002F5.push-pop",{"title":75,"icon":76,"path":77,"stem":78,"children":79,"page":47},"Programação","i-lucide-square-code","\u002Fpcs3021\u002Fprogramacao","pcs3021\u002F3.programacao",[80,84,88],{"title":81,"path":82,"stem":83},"Variáveis","\u002Fpcs3021\u002Fprogramacao\u002Fvariaveis","pcs3021\u002F3.programacao\u002F1.variaveis",{"title":85,"path":86,"stem":87},"Expressões numéricas","\u002Fpcs3021\u002Fprogramacao\u002Fexpressoes-numericas","pcs3021\u002F3.programacao\u002F2.expressoes-numericas",{"title":89,"path":90,"stem":91},"Laço FOR","\u002Fpcs3021\u002Fprogramacao\u002Ffor","pcs3021\u002F3.programacao\u002F3.for",{"title":93,"path":94,"stem":95,"children":96,"icon":107},"Imagens","\u002Fpcs3021\u002Fimagens","pcs3021\u002F4.imagens\u002F1.index",[97,99,103],{"title":98,"path":94,"stem":95},"Usando SVG",{"title":100,"path":101,"stem":102},"Exportando SVG","\u002Fpcs3021\u002Fimagens\u002Fexportando","pcs3021\u002F4.imagens\u002F4.exportando",{"title":104,"path":105,"stem":106},"Imagens Matriciais","\u002Fpcs3021\u002Fimagens\u002Fmatriciais","pcs3021\u002F4.imagens\u002F5.matriciais","i-lucide-pen-tool",{"title":109,"path":110,"stem":111,"children":112,"icon":123},"Animações","\u002Fpcs3021\u002Fanimacao","pcs3021\u002F5.animacao\u002F1.index",[113,115,119],{"title":114,"path":110,"stem":111},"Introdução à animação",{"title":116,"path":117,"stem":118},"Variáveis locais e globais","\u002Fpcs3021\u002Fanimacao\u002Fusando-variaveis","pcs3021\u002F5.animacao\u002F2.usando-variaveis",{"title":120,"path":121,"stem":122},"Eventos","\u002Fpcs3021\u002Fanimacao\u002Feventos","pcs3021\u002F5.animacao\u002F3.eventos","i-lucide-clapperboard",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":47},"Vetores","i-lucide-spline-pointer","\u002Fpcs3021\u002Fvetores","pcs3021\u002F6.vetores",[130],{"title":125,"path":131,"stem":132},"\u002Fpcs3021\u002Fvetores\u002Fvetores","pcs3021\u002F6.vetores\u002F7.vetores",{"title":134,"path":135,"stem":136,"children":137,"icon":126},"Funções","\u002Fpcs3021\u002Ffuncoes","pcs3021\u002F7.funcoes\u002F1.index",[138],{"title":134,"path":135,"stem":136},{"id":140,"title":104,"body":141,"categoria":1312,"creditoLink":1312,"creditos":1312,"descricao":1312,"description":1313,"eaulas":1312,"extension":1314,"meta":1315,"navigation":203,"path":105,"seo":1316,"stem":106,"video":1312,"youtube":1312,"youtubeLink":1312,"__hash__":1317},"docs\u002Fpcs3021\u002F4.imagens\u002F5.matriciais.md",{"type":142,"value":143,"toc":1308},"minimark",[144,153,165,357,361,371,392,403,409,571,574,651,669,674,699,705,720,784,801,1222,1225,1243,1247,1250,1275,1304],[145,146,147,148,152],"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\" (",[149,150,151],"em",{},"picture element","), correspondente a um elemento da matriz de imagem.",[145,154,155,156,160,161,164],{},"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 ",[157,158,159],"strong",{},"loadImage()"," dentro de ",[157,162,163],{},"preload()"," — exatamente como fizemos com arquivos SVG. O exemplo a seguir demonstra como isso pode ser feito.",[166,167,168,169],"code-preview",{},"Código 5.1 - Carregando e exibindo uma imagem matricial",[170,171,172],"template",{"v-slot:code":5},[173,174,178],"pre",{"className":175,"code":176,"language":177,"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",[179,180,181,198,205,221,251,257,262,274,296,321,328,352],"code",{"__ignoreMap":5},[182,183,186,190,194],"span",{"class":184,"line":185},"line",1,[182,187,189],{"class":188},"spNyl","let",[182,191,193],{"class":192},"sTEyZ"," figura",[182,195,197],{"class":196},"sMK4o",";\n",[182,199,201],{"class":184,"line":200},2,[182,202,204],{"emptyLinePlaceholder":203},true,"\n",[182,206,208,211,215,218],{"class":184,"line":207},3,[182,209,210],{"class":188},"function",[182,212,214],{"class":213},"s2Zo4"," preload",[182,216,217],{"class":196},"()",[182,219,220],{"class":196}," {\n",[182,222,224,227,230,233,237,240,244,246,249],{"class":184,"line":223},4,[182,225,226],{"class":192},"  figura",[182,228,229],{"class":196}," =",[182,231,232],{"class":213}," loadImage",[182,234,236],{"class":235},"swJcz","(",[182,238,239],{"class":196},"'",[182,241,243],{"class":242},"sfazB","minha_imagem.jpg",[182,245,239],{"class":196},[182,247,248],{"class":235},")",[182,250,197],{"class":196},[182,252,254],{"class":184,"line":253},5,[182,255,256],{"class":196},"}\n",[182,258,260],{"class":184,"line":259},6,[182,261,204],{"emptyLinePlaceholder":203},[182,263,265,267,270,272],{"class":184,"line":264},7,[182,266,210],{"class":188},[182,268,269],{"class":213}," setup",[182,271,217],{"class":196},[182,273,220],{"class":196},[182,275,277,280,282,286,289,292,294],{"class":184,"line":276},8,[182,278,279],{"class":213},"  createCanvas",[182,281,236],{"class":235},[182,283,285],{"class":284},"sbssI","400",[182,287,288],{"class":196},",",[182,290,291],{"class":284}," 500",[182,293,248],{"class":235},[182,295,197],{"class":196},[182,297,299,302,304,307,309,312,314,317,319],{"class":184,"line":298},9,[182,300,301],{"class":213},"  background",[182,303,236],{"class":235},[182,305,306],{"class":284},"220",[182,308,288],{"class":196},[182,310,311],{"class":284}," 220",[182,313,288],{"class":196},[182,315,316],{"class":284}," 240",[182,318,248],{"class":235},[182,320,197],{"class":196},[182,322,324],{"class":184,"line":323},10,[182,325,327],{"class":326},"sHwdD","  \u002F\u002F Apresenta a imagem na janela do programa\n",[182,329,331,334,336,339,341,344,346,348,350],{"class":184,"line":330},11,[182,332,333],{"class":213},"  image",[182,335,236],{"class":235},[182,337,338],{"class":192},"figura",[182,340,288],{"class":196},[182,342,343],{"class":284}," 0",[182,345,288],{"class":196},[182,347,343],{"class":284},[182,349,248],{"class":235},[182,351,197],{"class":196},[182,353,355],{"class":184,"line":354},12,[182,356,256],{"class":196},[358,359],"p5-sketch",{"code":360},"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",[145,362,363,364,367,368,370],{},"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 ",[179,365,366],{},"assets","), com o caminho referenciado em ",[157,369,159],{},".",[145,372,373,374,377,378,381,382,385,386,388,389,370],{},"O p5.js é capaz de ler imagens nos formatos ",[157,375,376],{},"JPG",", ",[157,379,380],{},"PNG"," e ",[157,383,384],{},"GIF",". No caso dos formatos PNG e GIF, a informação de transparência é preservada. Se um GIF animado for carregado com ",[157,387,159],{},", ele é exibido já animado automaticamente ao ser desenhado repetidamente dentro de ",[179,390,391],{},"draw()",[145,393,394,395,398,399,402],{},"Na forma apresentada no exemplo anterior, a função ",[157,396,397],{},"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 ",[157,400,401],{},"rect()","). Nesse caso, a imagem é apresentada em seu tamanho original.",[145,404,405,406,408],{},"Também é possível especificar mais dois parâmetros para a função ",[157,407,397],{},", 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:",[166,410,411,412],{},"Código 5.2 - Exibindo a imagem com dimensões diferentes das originais",[170,413,414],{"v-slot:code":5},[173,415,417],{"className":175,"code":416,"language":177,"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",[179,418,419,427,431,441,461,465,469,479,495,518,538,567],{"__ignoreMap":5},[182,420,421,423,425],{"class":184,"line":185},[182,422,189],{"class":188},[182,424,193],{"class":192},[182,426,197],{"class":196},[182,428,429],{"class":184,"line":200},[182,430,204],{"emptyLinePlaceholder":203},[182,432,433,435,437,439],{"class":184,"line":207},[182,434,210],{"class":188},[182,436,214],{"class":213},[182,438,217],{"class":196},[182,440,220],{"class":196},[182,442,443,445,447,449,451,453,455,457,459],{"class":184,"line":223},[182,444,226],{"class":192},[182,446,229],{"class":196},[182,448,232],{"class":213},[182,450,236],{"class":235},[182,452,239],{"class":196},[182,454,243],{"class":242},[182,456,239],{"class":196},[182,458,248],{"class":235},[182,460,197],{"class":196},[182,462,463],{"class":184,"line":253},[182,464,256],{"class":196},[182,466,467],{"class":184,"line":259},[182,468,204],{"emptyLinePlaceholder":203},[182,470,471,473,475,477],{"class":184,"line":264},[182,472,210],{"class":188},[182,474,269],{"class":213},[182,476,217],{"class":196},[182,478,220],{"class":196},[182,480,481,483,485,487,489,491,493],{"class":184,"line":276},[182,482,279],{"class":213},[182,484,236],{"class":235},[182,486,285],{"class":284},[182,488,288],{"class":196},[182,490,291],{"class":284},[182,492,248],{"class":235},[182,494,197],{"class":196},[182,496,497,499,501,504,506,509,511,514,516],{"class":184,"line":298},[182,498,226],{"class":192},[182,500,229],{"class":196},[182,502,503],{"class":213}," createImage",[182,505,236],{"class":235},[182,507,508],{"class":284},"200",[182,510,288],{"class":196},[182,512,513],{"class":284}," 200",[182,515,248],{"class":235},[182,517,197],{"class":196},[182,519,520,522,524,526,528,530,532,534,536],{"class":184,"line":323},[182,521,301],{"class":213},[182,523,236],{"class":235},[182,525,306],{"class":284},[182,527,288],{"class":196},[182,529,311],{"class":284},[182,531,288],{"class":196},[182,533,316],{"class":284},[182,535,248],{"class":235},[182,537,197],{"class":196},[182,539,540,542,544,546,548,550,552,554,556,558,560,563,565],{"class":184,"line":330},[182,541,333],{"class":213},[182,543,236],{"class":235},[182,545,338],{"class":192},[182,547,288],{"class":196},[182,549,343],{"class":284},[182,551,288],{"class":196},[182,553,343],{"class":284},[182,555,288],{"class":196},[182,557,513],{"class":284},[182,559,288],{"class":196},[182,561,562],{"class":284}," 100",[182,564,248],{"class":235},[182,566,197],{"class":196},[182,568,569],{"class":184,"line":354},[182,570,256],{"class":196},[358,572],{"code":573},"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",[145,575,576,577,620,621,650],{},"a imagem será apresentada com ",[182,578,581,602],{"className":579},[580],"katex",[182,582,585],{"className":583},[584],"katex-mathml",[586,587,589],"math",{"xmlns":588},"http:\u002F\u002Fwww.w3.org\u002F1998\u002FMath\u002FMathML",[590,591,592,598],"semantics",{},[593,594,595],"mrow",{},[596,597,508],"mn",{},[599,600,508],"annotation",{"encoding":601},"application\u002Fx-tex",[182,603,607],{"className":604,"ariaHidden":606},[605],"katex-html","true",[182,608,611,616],{"className":609},[610],"base",[182,612],{"className":613,"style":615},[614],"strut","height:0.6444em;",[182,617,508],{"className":618},[619],"mord"," pixels de largura e ",[182,622,624,638],{"className":623},[580],[182,625,627],{"className":626},[584],[586,628,629],{"xmlns":588},[590,630,631,636],{},[593,632,633],{},[596,634,635],{},"100",[599,637,635],{"encoding":601},[182,639,641],{"className":640,"ariaHidden":606},[605],[182,642,644,647],{"className":643},[610],[182,645],{"className":646,"style":615},[614],[182,648,635],{"className":649},[619]," 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.",[652,653,654,659,662],"blockquote",{},[145,655,656],{},[157,657,658],{},"Atividade 1",[145,660,661],{},"Modifique o Código 5.1 para desenhar a imagem várias vezes na janela, como mostrado a seguir, utilizando comandos de repetição.",[145,663,664],{},[665,666],"img",{"alt":667,"src":668},"Resultado esperado da atividade 1",".\u002Fimg\u002F05-imagens\u002Fativ1-resultado.png",[670,671,673],"h2",{"id":672},"manipulando-informações-de-cor","Manipulando informações de cor",[145,675,676,677,377,680,381,683,686,687,690,691,694,695,698],{},"Em diversas funções do p5.js, como ",[157,678,679],{},"background()",[157,681,682],{},"fill()",[157,684,685],{},"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, ",[149,688,689],{},"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 ",[179,692,693],{},"background(255)"," corresponde a ",[179,696,697],{},"background(255, 255, 255)",". Assim, obteremos tonalidades de cinza.",[145,700,701,702,704],{},"É 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 ",[157,703,397],{},", efetivamente copiamos essas informações de cor para a janela do programa.",[145,706,707,708,711,712,715,716,719],{},"É possível alterar as configurações de representação de cor do p5.js através da função ",[157,709,710],{},"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 (",[149,713,714],{},"hue","), saturação e brilho (",[149,717,718],{},"brightness",") da cor. Os parâmetros seguintes são usados para indicar os limites numéricos para cada parâmetro. Por exemplo:",[173,721,723],{"className":175,"code":722,"language":177,"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",[179,724,725,730,746,750,755,760],{"__ignoreMap":5},[182,726,727],{"class":184,"line":185},[182,728,729],{"class":326},"\u002F\u002F usar representação RGB sendo que cada componente de cor tem um valor variando entre 0 e 100\n",[182,731,732,735,738,740,742,744],{"class":184,"line":200},[182,733,734],{"class":213},"colorMode",[182,736,737],{"class":192},"(RGB",[182,739,288],{"class":196},[182,741,562],{"class":284},[182,743,248],{"class":192},[182,745,197],{"class":196},[182,747,748],{"class":184,"line":207},[182,749,204],{"emptyLinePlaceholder":203},[182,751,752],{"class":184,"line":223},[182,753,754],{"class":326},"\u002F\u002F usar representação HSB sendo que a tonalidade varia entre 0 e 360 e a saturação e o brilho variam\n",[182,756,757],{"class":184,"line":253},[182,758,759],{"class":326},"\u002F\u002F entre 0 e 100\n",[182,761,762,764,767,769,772,774,776,778,780,782],{"class":184,"line":259},[182,763,734],{"class":213},[182,765,766],{"class":192},"(HSB",[182,768,288],{"class":196},[182,770,771],{"class":284}," 360",[182,773,288],{"class":196},[182,775,562],{"class":284},[182,777,288],{"class":196},[182,779,562],{"class":284},[182,781,248],{"class":192},[182,783,197],{"class":196},[145,785,786,787,790,791,793,794,797,798,800],{},"Por fim, a função ",[157,788,789],{},"tint()"," permite definir uma cor que será multiplicada pelas cores das imagens desenhadas pela função ",[157,792,397],{},". A função ",[157,795,796],{},"noTint()"," pode ser utilizada para cancelar chamadas anteriores da função ",[157,799,789],{},". 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).",[166,802,803,804],{},"Código 5.3 - Uso de tint() para aplicar transparência a uma imagem, controlada pelo mouse",[170,805,806],{"v-slot:code":5},[173,807,809],{"className":175,"code":808,"language":177,"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",[179,810,811,819,823,833,838,843,847,851,861,878,898,911,957,997,1040,1046,1052,1066,1071,1076,1088,1109,1115,1121,1127,1168,1187,1217],{"__ignoreMap":5},[182,812,813,815,817],{"class":184,"line":185},[182,814,189],{"class":188},[182,816,193],{"class":192},[182,818,197],{"class":196},[182,820,821],{"class":184,"line":200},[182,822,204],{"emptyLinePlaceholder":203},[182,824,825,827,829,831],{"class":184,"line":207},[182,826,210],{"class":188},[182,828,214],{"class":213},[182,830,217],{"class":196},[182,832,220],{"class":196},[182,834,835],{"class":184,"line":223},[182,836,837],{"class":326},"  \u002F\u002F em um projeto real:\n",[182,839,840],{"class":184,"line":253},[182,841,842],{"class":326},"  \u002F\u002F figura = loadImage('minha_imagem.jpg');\n",[182,844,845],{"class":184,"line":259},[182,846,256],{"class":196},[182,848,849],{"class":184,"line":264},[182,850,204],{"emptyLinePlaceholder":203},[182,852,853,855,857,859],{"class":184,"line":276},[182,854,210],{"class":188},[182,856,269],{"class":213},[182,858,217],{"class":196},[182,860,220],{"class":196},[182,862,863,865,867,870,872,874,876],{"class":184,"line":298},[182,864,279],{"class":213},[182,866,236],{"class":235},[182,868,869],{"class":284},"500",[182,871,288],{"class":196},[182,873,291],{"class":284},[182,875,248],{"class":235},[182,877,197],{"class":196},[182,879,880,882,884,886,888,890,892,894,896],{"class":184,"line":323},[182,881,226],{"class":192},[182,883,229],{"class":196},[182,885,503],{"class":213},[182,887,236],{"class":235},[182,889,508],{"class":284},[182,891,288],{"class":196},[182,893,513],{"class":284},[182,895,248],{"class":235},[182,897,197],{"class":196},[182,899,900,902,904,907,909],{"class":184,"line":330},[182,901,226],{"class":192},[182,903,370],{"class":196},[182,905,906],{"class":213},"loadPixels",[182,908,217],{"class":235},[182,910,197],{"class":196},[182,912,913,917,920,922,925,927,929,932,934,937,939,941,944,946,948,951,954],{"class":184,"line":354},[182,914,916],{"class":915},"s7zQu","  for",[182,918,919],{"class":235}," (",[182,921,189],{"class":188},[182,923,924],{"class":192}," x",[182,926,229],{"class":196},[182,928,343],{"class":284},[182,930,931],{"class":196},";",[182,933,924],{"class":192},[182,935,936],{"class":196}," \u003C",[182,938,193],{"class":192},[182,940,370],{"class":196},[182,942,943],{"class":192},"width",[182,945,931],{"class":196},[182,947,924],{"class":192},[182,949,950],{"class":196},"++",[182,952,953],{"class":235},") ",[182,955,956],{"class":196},"{\n",[182,958,960,963,965,967,970,972,974,976,978,980,982,984,987,989,991,993,995],{"class":184,"line":959},13,[182,961,962],{"class":915},"    for",[182,964,919],{"class":235},[182,966,189],{"class":188},[182,968,969],{"class":192}," y",[182,971,229],{"class":196},[182,973,343],{"class":284},[182,975,931],{"class":196},[182,977,969],{"class":192},[182,979,936],{"class":196},[182,981,193],{"class":192},[182,983,370],{"class":196},[182,985,986],{"class":192},"height",[182,988,931],{"class":196},[182,990,969],{"class":192},[182,992,950],{"class":196},[182,994,953],{"class":235},[182,996,956],{"class":196},[182,998,1000,1003,1005,1008,1010,1013,1015,1017,1019,1022,1024,1026,1028,1030,1032,1035,1038],{"class":184,"line":999},14,[182,1001,1002],{"class":192},"      figura",[182,1004,370],{"class":196},[182,1006,1007],{"class":213},"set",[182,1009,236],{"class":235},[182,1011,1012],{"class":192},"x",[182,1014,288],{"class":196},[182,1016,969],{"class":192},[182,1018,288],{"class":196},[182,1020,1021],{"class":213}," color",[182,1023,236],{"class":235},[182,1025,1012],{"class":192},[182,1027,288],{"class":196},[182,1029,969],{"class":192},[182,1031,288],{"class":196},[182,1033,1034],{"class":284}," 150",[182,1036,1037],{"class":235},"))",[182,1039,197],{"class":196},[182,1041,1043],{"class":184,"line":1042},15,[182,1044,1045],{"class":196},"    }\n",[182,1047,1049],{"class":184,"line":1048},16,[182,1050,1051],{"class":196},"  }\n",[182,1053,1055,1057,1059,1062,1064],{"class":184,"line":1054},17,[182,1056,226],{"class":192},[182,1058,370],{"class":196},[182,1060,1061],{"class":213},"updatePixels",[182,1063,217],{"class":235},[182,1065,197],{"class":196},[182,1067,1069],{"class":184,"line":1068},18,[182,1070,256],{"class":196},[182,1072,1074],{"class":184,"line":1073},19,[182,1075,204],{"emptyLinePlaceholder":203},[182,1077,1079,1081,1084,1086],{"class":184,"line":1078},20,[182,1080,210],{"class":188},[182,1082,1083],{"class":213}," draw",[182,1085,217],{"class":196},[182,1087,220],{"class":196},[182,1089,1091,1093,1095,1097,1099,1101,1103,1105,1107],{"class":184,"line":1090},21,[182,1092,301],{"class":213},[182,1094,236],{"class":235},[182,1096,306],{"class":284},[182,1098,288],{"class":196},[182,1100,311],{"class":284},[182,1102,288],{"class":196},[182,1104,316],{"class":284},[182,1106,248],{"class":235},[182,1108,197],{"class":196},[182,1110,1112],{"class":184,"line":1111},22,[182,1113,1114],{"class":326},"  \u002F\u002F Calcula um valor de transparência proporcional à\n",[182,1116,1118],{"class":184,"line":1117},23,[182,1119,1120],{"class":326},"  \u002F\u002F posição horizontal do cursor do mouse, usando para\n",[182,1122,1124],{"class":184,"line":1123},24,[182,1125,1126],{"class":326},"  \u002F\u002F isso a função map()\n",[182,1128,1130,1133,1136,1138,1141,1143,1146,1148,1150,1152,1155,1157,1159,1161,1164,1166],{"class":184,"line":1129},25,[182,1131,1132],{"class":188},"  let",[182,1134,1135],{"class":192}," alpha",[182,1137,229],{"class":196},[182,1139,1140],{"class":213}," map",[182,1142,236],{"class":235},[182,1144,1145],{"class":192},"mouseX",[182,1147,288],{"class":196},[182,1149,343],{"class":284},[182,1151,288],{"class":196},[182,1153,1154],{"class":192}," width",[182,1156,288],{"class":196},[182,1158,343],{"class":284},[182,1160,288],{"class":196},[182,1162,1163],{"class":284}," 255",[182,1165,248],{"class":235},[182,1167,197],{"class":196},[182,1169,1171,1174,1176,1179,1181,1183,1185],{"class":184,"line":1170},26,[182,1172,1173],{"class":213},"  tint",[182,1175,236],{"class":235},[182,1177,1178],{"class":284},"255",[182,1180,288],{"class":196},[182,1182,1135],{"class":192},[182,1184,248],{"class":235},[182,1186,197],{"class":196},[182,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1213,1215],{"class":184,"line":1189},27,[182,1191,333],{"class":213},[182,1193,236],{"class":235},[182,1195,338],{"class":192},[182,1197,288],{"class":196},[182,1199,343],{"class":284},[182,1201,288],{"class":196},[182,1203,343],{"class":284},[182,1205,288],{"class":196},[182,1207,1154],{"class":192},[182,1209,288],{"class":196},[182,1211,1212],{"class":192}," height",[182,1214,248],{"class":235},[182,1216,197],{"class":196},[182,1218,1220],{"class":184,"line":1219},28,[182,1221,256],{"class":196},[358,1223],{"code":1224},"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",[652,1226,1227,1232],{},[145,1228,1229],{},[157,1230,1231],{},"Atividade 2",[145,1233,1234,1235,1242],{},"Modifique o Código 5.3 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 ",[1236,1237,1241],"a",{"href":1238,"rel":1239},"https:\u002F\u002Fp5js.org\u002Freference\u002Fp5\u002Ftint\u002F",[1240],"nofollow","referência da função tint()"," para mais informações.",[670,1244,1246],{"id":1245},"combinando-transformações-e-imagens","Combinando transformações e imagens",[145,1248,1249],{},"Da mesma forma que os desenhos vetoriais, as imagens matriciais também podem ser manipuladas por transformações geométricas em p5.js.",[145,1251,1252,1253,1256,1257,1260,1261,1263,1264,1267,1268,381,1271,1274],{},"A função ",[157,1254,1255],{},"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, ",[157,1258,1259],{},"imageMode(CORNER)"," (comportamento padrão) faz com que as coordenadas passadas para a função ",[157,1262,397],{}," sejam interpretadas como a posição do canto superior esquerdo, e ",[157,1265,1266],{},"imageMode(CENTER)"," faz com que sejam interpretadas como a posição do centro da imagem. Essa função pode ser combinada com ",[157,1269,1270],{},"translate()",[157,1272,1273],{},"rotate()",", exatamente como vimos no capítulo de translação e rotação, para girar ou posicionar imagens de forma mais flexível.",[652,1276,1277,1282,1298],{},[145,1278,1279],{},[157,1280,1281],{},"Atividade 3",[145,1283,1284,1285,377,1287,381,1289,1291,1292,6,1294,1297],{},"Usando ",[157,1286,1255],{},[157,1288,1270],{},[157,1290,1273],{}," combinados com as variáveis ",[157,1293,1145],{},[157,1295,1296],{},"mouseY",", modifique o Código 5.3 para gerar uma interação semelhante à mostrada na animação a seguir.",[145,1299,1300],{},[665,1301],{"alt":1302,"src":1303},"Animação de referência da atividade 3",".\u002Fimg\u002F05-imagens\u002Fativ3-animacao.gif",[1305,1306,1307],"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":200,"depth":200,"links":1309},[1310,1311],{"id":672,"depth":200,"text":673},{"id":1245,"depth":200,"text":1246},null,"Carregando, exibindo, colorindo e transformando imagens matriciais (raster) em p5.js","md",{},{"title":104,"description":1313},"bQ1qifY4odHPTZvtjvosVxQ_CBlcR5ZdPUBiWpq_BBo",[1319,1321],{"title":100,"path":101,"stem":102,"description":1320,"children":-1},"Veja como exportar o conteúdo do Canvas em SVG",{"title":114,"path":110,"stem":111,"description":1322,"children":-1},"Entenda como fazer projetos animados com p5.js",1784150369055]