migrating from processing to processing.js

Question

I am having troubles while migrating my processing code to processing.js. My processing code contains jars, images, fonts in data folder, I want to use same pde files that i have created in processing while migrating to processing.js. Processing.js tutorial shows how to include .pde files in web page but does not tell anything about Where to mention about images or jars in data folder in your web page. Also @preload for image is also not working.

hello.html -->

<html>
<title>Hello Web - Processing.js Test</title>  
<script src="processing-1.3.6.js"></script>  
<p>  Processing.js Test</p>  
<canvas data-processing-sources="hello/hello.pde"></canvas>  
</html>

score 2 · Accepted Answer · answered Nov 02 '11 at 02:10

Quick migration strategy:

Move all of your images to the same folder as your sketch
Your .vlw fonts won't work with Processing.js, so you'll need to change to .ttf fonts
As George said, jars do not work with Processing.js, so you'll need to code your sketch to not use them, or port them to native JavaScript
@preload for images depends on the correct paths, and I'd guess they're not correct unless you move the images out of the data folder

score 0 · Answer 2 · answered Mar 03 '17 at 14:54

Processing js will handle fonts different to Processing Java. In Processing Java fonts are pulled from your machine. Too see a list of your fonts run this.

size(200, 200);
String[] fontList = PFont.list();
printArray(fontList);

As a designer I like to use custom fonts that not everyone will have installed. Because of this, you will need to upload a version of the font to your server so all users will have the same experience on the web.

First add this to the top of your sketch and add your font to the data folder. Depending on your project setup you might need to add it in the top of your directory.

/* @pjs
crisp=true;
font=/yourfont.ttf;
*/

Next, in your setup reference the font. ( This is where i had a few problems ) I was loading lineto-brown-pro-bold.ttf and had to reference it under Brown even tho in my fontlist it was Brown-bold. Add this line to your setup.

font_name = createFont("/yourfont.ttf", 32);

and in your draw use

textFont(font_name);

So the code all together is

    /* @pjs
    crisp=true;
    font=/yourfont.ttf;
    */

    PFont font_name;
    void setup() {
    size (200, 330);
    background (34);
    font_name = createFont("/yourfont", 32);
    smooth();
    }

    void draw() {
    background (34);
    textFont(font_name);
    textSize(100);
    fill(255);
    text ("futura in pjs", 20, 310);
    }

For more information check out the processing.js docs http://processingjs.org/reference/font/ and also a good example and write up on http://alsoko.net/processing.js-custom-fonts/

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

You need to understand that Processing.js is a JavaScript port or the Processing language, and since JavaScript isn't the same as Java, you will not be able to use .jar libraries with Processing.js unless you write/find ports of the libraries to JavaScript.

Have a look at this answer for more details.

edited May 23 '17 at 12:17

Community

1
1

answered Nov 01 '11 at 21:50

George Profenza

50,687
19
144
218

migrating from processing to processing.js

3 Answers3