Estou usando o p5.js - uma biblioteca javascript - para capturar imagens de uma API de notícias. Gostaria que essas imagens fossem sobrepostas, mas com opacidade, de forma que as imagens se mesclem.
Não estou conseguindo aplicar a opacidade direto pelo código javascript. Consigo alterar a posição das imagens ( fotos.position(x ,y); ), mas não encontro o caminho para aplicar a opacidade.
function setup() {
createCanvas(900,600);
loadJSON("https://newsapi.org....ec6490",gotData);
}
function gotData(data) {
console.log(data);
var img = data.articles;
var imgs = [];
for (var i = 0; i < img.length; i++) {
imgs.push(img[i].urlToImage);
var fotos = createImg(img[i].urlToImage);
fotos.position(0, 0);
}
}
Uma solução que encontrei lendo alguns posts aqui no stackflow, foi alterar manualmente a opacidade das imagens, uma por uma, através do inspetor HTML do browser, mas isso serve apenas para poucas imagens.
Mas isso fica impossível no caso de 2 mil imagens, por exemplo. Preciso automatizar esse processo.
Portanto, como faço para aplicar opacidade numa imagem - elemento DOM direto pelo código javascript?
img{ opacity: .3; }
.. isso irá aplicar a opacidade em todas as imagens dentro do body.