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

p5.js Coding Questions
1

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

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;
    }
  }
}
1 Like
2

Hello, and welcome! :wave:

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 and use the p5.js Editor to get started.

1 Like