Putting Java Sketches online


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);
  source = loadImage("frog.jpg");
  destination = createImage(source.width, source.height, RGB);

void draw() { 


  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];

  image(destination, width/2, height/2);


^ 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:


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.


1 Like

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:


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.


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?