How do I embed a Processing sketch in a blog?

applepie

BELOW IS THE SOURCE CODE FOR THE SKETCH:

sketch_151231a.pde:

void setup() {
  size(500,500);
  Test t = new Test();
  t.display();
}

Test.pde:

class Test {
  PImage img;
  Test() {
    // where abstractimage5.jpg is stored to the data directory
    img = loadImage("abstractimage5.jpg");
  }

  void display() {
    img.resize(width,height);
    background(img);
  }
}

I know that ProcessingJS can be used to embed sketches in web pages, but will it work with multiple source code files and image files? Do I have to create a jar file, or can I specify all of these files in a command? How do I organize the directory structure of a sketch to have it work with a web page? Can I use Wordpress to display a web page with a sketch like this?

TechWiz777

Well, here's what I know, you already have a jar upon export. When you go to File, and Export, you know the drill, you will have the Jar File. Now what I recommend is you use something like JarMatey, where you can combine all of the jars in your jar file to one single jar, which shouldn't have any trouble running on your website. WordPress should be able to display the webpage if you know how to properly link it to your website.

applepie

TechWiz77: you answered most of my question but not all. Thank you for your help anyway -- I truly appreciate it. Your information about jar files was most appreciated. I would need help, however, knowing how to display the resulting jar file in WordPress. Perhaps that would be a question for its forum?

I am still interested, however, about using ProcessingJS to display sketches in blogs like WordPress as Javascript. From what I read, some browsers are not supporting applets anymore. How do I create a ProcessingJS sketch based upon the file structure of a conventional Processing sketch?

GoToLoop

@applepie, are you using PDE's "JavaScript Mode"?
It automatically generates an ".html" file for your ".pde" files.
Then it creates a local server and opens up OS' default browser.

You can also study those files in order to have an idea how the whole process works.
Another study option is pasting your sketch code here and see how it's transpiled into JS:
http://ProcessingJS.org/tools/processing-helper.html

As long as we stick w/ PJS' API, the chances for successful conversion from Java to JS are pretty good:
http://ProcessingJS.org/reference/

We can also host our PJS sketches in these sites: :bz
http://studio.SketchPad.cc/
http://www.OpenProcessing.org/sketch/create

GoToLoop

• About your example above, avoid loading anything inside our own classes! =;
• Rather load them all inside setup(), then pass their reference to those classes' constructor.
• If you need to resize() any PImage, do it once within setup() as well.
• And very important, use @pjs's preload directive for loading images in PJS:
  http://ProcessingJS.org/reference/pjs directive/
  http://ProcessingJS.org/reference/preload/

// https://forum.Processing.org/two/discussion/14210/
// how-do-i-embed-a-processing-sketch-in-a-blog

// GoToLoop (2016-Jan-01)

/* @pjs preload = "abstractimage5.jpg"; */

TestBG t;
PImage img;

void setup() {
  size(500, 500);
  smooth(4);
  noLoop();
  imageMode(CORNER);

  (img = loadImage("abstractimage5.jpg")).resize(width, height);

  (t = new TestBG(img)).display();
}

class TestBG {
  final PImage bg;

  TestBG(PImage pic) {
    bg = pic;
  }

  void display() {
    set(0, 0, bg);
  }
}