processing-transpiler

1.0.1 verified Fri May 01 auth: no javascript

A Node.js utility that converts Processing (Java-based) sketches into p5.js JavaScript code. Current stable version is 1.0.1. The tool parses Processing code using java-parser, applies transformations (e.g., converting size() to createCanvas()), and formats output with js-beautify. Unlike manual conversion or similar tools, it provides automated conversion with formatting. Release cadence is low; updates are occasional.

Common errors

error SyntaxError: Unexpected token ↓

cause Processing code contains Java-specific syntax like classes, generics, or enhanced for-loops.

fix

Simplify code to basic functions and variables; avoid OOP constructs.

error TypeError: convertToP5 is not a function ↓

cause Using default import instead of named import.

fix

Use import { convertToP5 } from 'processing-transpiler'.

error Error: Cannot find module 'processing-transpiler' ↓

cause Package not installed or wrong import path.

fix

Run npm install processing-transpiler and ensure the import path is correct.

Warnings

breaking Mismatched braces or semicolons in Processing code can cause parse errors or incomplete transpilation. ↓

fix Ensure Processing code is syntactically correct Java-like code without unsupported constructs (e.g., classes, arrays).

deprecated Some Processing functions (e.g., smooth(), noSmooth()) may not be supported in p5.js; they are either skipped or cause warnings. ↓

fix Check the p5.js reference and manually adjust unsupported calls.

gotcha The library does not handle Processing's built-in classes (e.g., PVector, PFont) or custom Java classes. ↓

fix Manually translate class usage to p5.js equivalents (objects, functions).

Install

npm install processing-transpiler

yarn add processing-transpiler

pnpm add processing-transpiler

Imports

convertToP5

wrong

const convertToP5 = require('processing-transpiler')

correct

import { convertToP5 } from 'processing-transpiler'

ESM-only; CommonJS require is not supported.

convertToP5

wrong

import convertToP5 from 'processing-transpiler'

correct

import { convertToP5 } from 'processing-transpiler'

Named export, not default.

ProcessingTranspiler

wrong

import ProcessingTranspiler from 'processing-transpiler'

correct

import { ProcessingTranspiler } from 'processing-transpiler'

The library also exports a class with additional options.

Quickstart

Shows how to import and use the convertToP5 function to transpile a simple Processing sketch.

import { convertToP5 } from 'processing-transpiler';

const processingCode = `
void setup() {
  size(400, 400);
}

void draw() {
  ellipse(mouseX, mouseY, 50, 50);
}
`;

const jsCode = convertToP5(processingCode);
console.log(jsCode);
// Output:
// function setup() {
//     createCanvas(400, 400);
// }
// function draw() {
//     ellipse(mouseX, mouseY, 50, 50);
// }