I want to use a code like the one I made in processing

Question

I'm new to coding and I have a question. I've made this simple code in processing and I was wondering if I could use it and how to do the same with an image inside a div. This is the code:

<i>int  x, y;
PImage img;
void setup () {
  size(800, 739);

  img = loadImage("1.jpg");
}

void draw () {
  for (int i=0; i < mouseX/10; i ++) {
    int x = (int) random(width);  
    int y = (int) random(height);

    color cor = img.get(x, y);

    float t = random(5, 25);
    fill(cor, 30);
    noStroke ();
    ellipse(x, y, t, t);

  }
}
</i>

Answer 1

If you know the location of the image (the src attribute of the <img> tag), then all you need to do is change this line:

img = loadImage("1.jpg");

To something like this:

img = loadImage("http://example.com/YourImageFile.jpg");

If you don't know the location of the image ahead of time, then there are ways to get the location of the image using JavaScript. Any JavaScript you write can call any Processing code you write, so you might have something like this in your Processing code:

void setImageLocation(String location){
  img = loadImage(location);
}

Then all you need to do is write JavaScript that gets the location of the image and calls that function.

Check out the Accessing Processing from JavaScript section of the Processing.js tutorial for more info.