processing-to-p5js

0.1.3 verified Fri May 01 auth: no javascript

A transpiler that converts Processing (Java) source code to p5.js (JavaScript). Current stable version 0.1.3 transforms syntax like void functions, size(), and Processing APIs into p5.js equivalents. Released as an early-stage tool with TypeScript type declarations. Suitable for migrating Processing sketches to the browser. Does not cover all Processing features; manual adjustments may be needed.

Common errors

error TypeError: (0 , processing_to_p5js.transformProcessing) is not a function ↓

cause Incorrect import due to mistaken belief that package has default export.

fix

Use named import: import { transformProcessing } from 'processing-to-p5js'

error Cannot find module 'processing-to-p5js' or its corresponding type declarations. ↓

cause Missing installation or TypeScript not configured for ESM.

fix

Run 'npm install processing-to-p5js' and ensure 'moduleResolution' is 'node16' or 'bundler' in tsconfig.json.

Warnings

gotcha transformProcessing replaces Processing built-in functions like size(), background(), ellipse() but does not handle all Processing APIs. ↓

fix Review output for untranslated functions and manually implement p5.js equivalents.

gotcha The package does not transform Java language features beyond basic syntax (e.g., classes, generics, libraries). ↓

fix Rewrite complex Java patterns manually.

deprecated transformCode() function is experimental and may change in future versions. ↓

fix Prefer transformProcessing() for full transformation.

Install

npm install processing-to-p5js

yarn add processing-to-p5js

pnpm add processing-to-p5js

Imports

transformCode

wrong

const transformCode = require('processing-to-p5js').transformCode

correct

import { transformCode } from 'processing-to-p5js'

Package is ESM; Named import from package.

transformProcessing

wrong

import processingToP5js from 'processing-to-p5js'

correct

import { transformProcessing } from 'processing-to-p5js'

Default export not available; use named import.

isStaticModeSketch

import { isStaticModeSketch } from 'processing-to-p5js'

Named export; TypeScript types included.

Quickstart

Transpile a simple Processing sketch with setup() and draw() to p5.js code.

import { transformProcessing } from 'processing-to-p5js';

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

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

const p5jsCode = transformProcessing(processingCode);
console.log(p5jsCode);