# Putting Java Sketches online

**URL:** <https://discourse.processing.org/t/putting-java-sketches-online/4571>\
**Category:** Coding Questions\
**Created:** [October 17, 2018, 6:01pm UTC](https://discourse.processing.org/t/putting-java-sketches-online/4571 "2018-10-17T18:01:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![henri](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/henri/32/2035_2.png) [@henri](https://discourse.processing.org/u/henri)\
**Post date:** [October 17, 2018, 6:01pm UTC](https://discourse.processing.org/t/putting-java-sketches-online/4571/1 "2018-10-17T18:01:33Z")

</div>

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](https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/) 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](http://henrilacoste.com/floating-bubbles)

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

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/118b91336a6b397bf8ed5352ccd8765ac416bc1c.jpeg)

^ 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](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!

---

<div class="post-metadata">

**Author:** ![henri](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/henri/32/2035_2.png) [@henri](https://discourse.processing.org/u/henri)\
**Post date:** [October 17, 2018, 10:02pm UTC](https://discourse.processing.org/t/putting-java-sketches-online/4571/2 "2018-10-17T22:02:48Z")

</div>

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:

[![](https://img.youtube.com/vi/nMUMZ5YRxHI/hqdefault.jpg "11.3: The Pixel Array - p5.js Tutorial") ](https://www.youtube.com/watch?v=nMUMZ5YRxHI)

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

> **[p5.js Web Editor](https://editor.p5js.org/henri_lacoste/sketches/HyPJ9mrim)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

And finally a link to it embedded on my website:

[sketch](http://henrilacoste.com/pixel-blur.html)

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.

---

<div class="post-metadata">

**Author:** ![sasmapori](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@sasmapori](https://discourse.processing.org/u/sasmapori)\
**Post date:** [August 20, 2020, 4:41pm UTC](https://discourse.processing.org/t/putting-java-sketches-online/4571/3 "2020-08-20T16:41:50Z")

</div>

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?