# Loading an array of images on mouse position - going from processing to p5.js

**URL:** https://discourse.processing.org/t/loading-an-array-of-images-on-mouse-position-going-from-processing-to-p5-js/20780
**Category:** Coding Questions
**Created:** [May 12, 2020, 12:03pm UTC](https://discourse.processing.org/t/loading-an-array-of-images-on-mouse-position-going-from-processing-to-p5-js/20780 "2020-05-12T12:03:05Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![mixel](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@mixel](https://discourse.processing.org/u/mixel)
#### Post date: [May 12, 2020, 12:03pm UTC](https://discourse.processing.org/t/loading-an-array-of-images-on-mouse-position-going-from-processing-to-p5-js/20780/1 "2020-05-12T12:03:05Z")

</div>

Hi,

I’ve created this working code in processing and would like to implement it on a website - I am completely new to this, so I am not sure whether or not it is possible to convert this to p5.js with just a few changes? Or if there’s another way around it?

Thanks a lot in advance!

/ Mikkel

```auto
PImage img;
int i = 1;
float x0, y0;

function setup() {
  size(800, 800);
  img = loadImage("image01.png");
  imageMode(CENTER);
  background(0);
  x0 = -200;
  y0 = -200;
}

function draw() {
  if (mouseX != 0 && mouseY != 0) {
    image(img, x0, y0);
    img = loadImage("image"+i+".png");

    if (dist(mouseX, mouseY, x0, y0) > 100) {
      img = loadImage("image"+i+".png");
      i++;
      if (i == 20) {
        i = 1;
      }
      x0 = mouseX;
      y0 = mouseY;
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)
#### Post date: [May 12, 2020, 10:19pm UTC](https://discourse.processing.org/t/loading-an-array-of-images-on-mouse-position-going-from-processing-to-p5-js/20780/2 "2020-05-12T22:19:19Z")

</div>

Hello, and welcome! 👋

There are old ways around it, but p5.js is definitely the way to go now. Especially if you’re new to programming. The sketch looks easy enough, I think you should be able to convert it relatively easy once you get a grasp of p5.js.

Read the [Processing transition guide](https://github.com/processing/p5.js/wiki/Processing-transition) and use the [p5.js Editor](https://editor.p5js.org) to get started.