Weather App with p5.js help


I’ve got this working in a barebones kind of way, I wanted to implement the p5.js library to possibly add some animation later on… my question is, the weather icon is displayed after my canvas and I cant figure out why… or how to remove it… any help would be much appreciated…

I am not familiar with p5.js, but I was playing around with your Codepen code and did notice the following line in your getData function:

cImg = createImg(img);

creates the image outside of the canvas.

Then later in your draw function, the following line:

image(cImg,x1, height*0.52 - 120, scalar, scalar); 

puts a larger animated version of the image into the canvas.

hmm maybe i need to move that into the draw loop

ok nope haha… that actually just caused it to draw over and over again outside the canvas

I tried that, but then it kept making duplicates forever. You maybe can “hack” your way to a solution if you can figure out how to make the original call to createImg put the image into a div whose css is display:none.

Ah ok… so if anyone somehow gets into a similar quandary i figured it out… I shouldve been using the loadImage() method rather than createImg()

1 Like