Putting Java Sketches online

p5.js Coding Questions
1

Hi,

I have managed to get a few Java sketches embedded on my website but I’m stuck with one and would appreciate any ideas, or things I’m missing about converting to p5.js.

So I found this helpful link a few days ago suggesting it is possible to embed Java sketches.

As a result I fiddled around and got four sketches up. Here is a link to one : sketch

So, I know it can be done. I am trying to get the following sketch up online:

PImage source;
PImage destination;

void setup() {
  size(500, 500);
  smooth();
  source = loadImage("frog.jpg");
  destination = createImage(source.width, source.height, RGB);
  background(0);
}

void draw() { 

  source.loadPixels();
  destination.loadPixels();

  int fuzz = 8;

  for (int x = 0; x < source.width; x++) {
    for (int y = 0; y < source.height; y++) {

      float d = dist(width/2, height/2, mouseX, mouseY);
      float maxDist = dist(0, 0, width/2, height/2);
      float factor = map(d, 0, maxDist, 0, fuzz+(fuzz/4));
      int loc = x + y * source.width;
      if (  0  < x && x < fuzz + ( fuzz/2)) {
        int loc2 = (x + int(random(0, factor)) + y  * source.width);
        destination.pixels[loc] = source.pixels[loc2];
      } else if ( source.width - fuzz - (fuzz/2) < x && x < source.width) {
        int loc2 = (x + int(random(-factor, 0)) + y  * source.width);
        destination.pixels[loc] = source.pixels[loc2];
      } else if ( 0 + fuzz < x && x < source.width - fuzz) {
        int loc2 = (x + int(random(-factor, factor)) + y  * source.width);
        destination.pixels[loc] = source.pixels[loc2];
      }
    }
  }


  destination.updatePixels();
  imageMode(CENTER);
  image(destination, width/2, height/2);
}

frog

^ frog.jpg if anyone wants to try it

The other sketches I have put online aren’t particularly different, so I’m a bit stumped. Is there anything I am trying to do in this sketch that may make it incompatible?

When I tried to rewrite it in p5.js I got a funny result:

https://editor.p5js.org/henri_lacoste/sketches/BkEaPlBj7

Any suggestions on how I can get this sketch online would be greatly appreciated. Sorry if this post is a bit haphazard, I’m very new to processing. Any suggestions on making the code more elegant will also be appreciated.

Thanks!

2

After a great deal of trying I have emerged successful. Thought I would post my solution here incase anyone has a similar issue.

There is a very significant difference between the way Processing in Java and Processing in p5.js organises the pixel array as explained by the brilliant Daniel Sciffmann here:

As such I just had to adjust my code to take this into account. Here is a link to the adjusted sketch:

And finally a link to it embedded on my website:

sketch

In summary I think it is best to work with p5.js if the sketch is intended for use online. The p5.js web editor is pretty neat too.

3

Hello Henri! How are you? im new in this p5.js world and i have a question for you…
I have three sketchs in p5.js and i want to make a web withs this… how can i do it?