# Best way to run processing sketch in webpage

**URL:** https://discourse.processing.org/t/best-way-to-run-processing-sketch-in-webpage/537
**Category:** Project Guidance
**Created:** [May 30, 2018, 3:01pm UTC](https://discourse.processing.org/t/best-way-to-run-processing-sketch-in-webpage/537 "2018-05-30T15:01:43Z")
**Posts on this page:** 1
**Showing post:** 15

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 31, 2018, 1:45am UTC](https://discourse.processing.org/t/best-way-to-run-processing-sketch-in-webpage/537/15 "2018-05-31T01:45:04Z")

</div>

> [@kfrajer](#):
>
> For Pjs you are limited to run Java…

Given Pjs is a JS library inasmuch as p5js is, we can write sketches using JS syntax (or any other language transpilable to JS) for the Pjs library too! 😤

The catch is, that a small part of Processing’s API gives the same name for both a system variable and a function. 😓

For example, the name `frameRate` in Processing can either refer to a variable or a function: 😲

1. Variable _frameRate_: [http://ProcessingJS.org/reference/frameRate/](http://ProcessingJS.org/reference/frameRate/)
2. Function **frameRate()**: [http://ProcessingJS.org/reference/frameRate\_/](http://ProcessingJS.org/reference/frameRate_/)

But alike Java, JS doesn’t offer diff. namespaces for each category.  
Functions, classes, objects and any type of data are simply all stored in variables. 😑  
Therefore, the Pjs library gotta change the name of either the system variable or the function to something else.

Also, some Processing’s function names which match Java’s keywords, like `int` or `float`, are also renamed, both in Processing & Pjs:

1. Function **int()**: [http://ProcessingJS.org/reference/int\_/](http://ProcessingJS.org/reference/int_/)
2. Keyword `int`: [http://ProcessingJS.org/reference/int/](http://ProcessingJS.org/reference/int/)

For example, if we copy & paste the sketch example below:

```java
int a = int(PI);
frameRate(30.7);
println(frameRate);

```

In [http://ProcessingJS.org/tools/processing-helper.html](http://ProcessingJS.org/tools/processing-helper.html)  
And click at “Convert to JS” button; it’s gonna output the following JS syntax:

```javascript
// this code was autogenerated from PJS
(function($p) {

    var a = $p.parseInt($p.PI);
    $p.frameRate(30.7);
    $p.println($p.__frameRate);
})

```

Notice that function **int()** became **parseInt()**, function **frameRate()** stayed the same, but its corresponding system variable became _\_\_frameRate_! 😵

If we take those small quirks into account, it’s perfectly possible to write sketches in JS syntax targeting Pjs in place of p5js. 💪

Although we’d need to write our sketches for Pjs very similarly we’d write to p5js using its “Instance Mode” approach: 🙄

- [Global and instance mode · processing/p5.js Wiki · GitHub](https://GitHub.com/processing/p5.js/wiki/Global-and-instance-mode)

For further details, read from these links: 😼

1. [Can i import my stuff into wallpaper engine? - Coding Questions - Processing Foundation](https://Discourse.Processing.org/t/can-i-import-my-stuff-into-wallpaper-engine/153)
2. [http://ProcessingJS.org/articles/jsQuickStart.html](http://ProcessingJS.org/articles/jsQuickStart.html)

---

_[View the full topic](https://discourse.processing.org/t/best-way-to-run-processing-sketch-in-webpage/537)._