# Online editor for processing

**URL:** <https://discourse.processing.org/t/online-editor-for-processing/24398>\
**Category:** Teaching\
**Created:** [October 7, 2020, 1:22am UTC](https://discourse.processing.org/t/online-editor-for-processing/24398 "2020-10-07T01:22:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ch3](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ch3/32/15935_2.png) [@ch3](https://discourse.processing.org/u/ch3)\
**Post date:** [October 7, 2020, 1:22am UTC](https://discourse.processing.org/t/online-editor-for-processing/24398/1 "2020-10-07T01:22:04Z")

</div>

Is there something similar to [editor.p5js.org](http://editor.p5js.org) for processing?

I’d like to introduce my houdini students to some basic programming terms and concepts, starting with datatypes.

It may be more convenient for them to experiment straight in a browser since we are not in the studio this year.

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [October 7, 2020, 3:39am UTC](https://discourse.processing.org/t/online-editor-for-processing/24398/2 "2020-10-07T03:39:51Z")

</div>

Last I checked, [openprocessing.com](http://openprocessing.com) supports both p5.js and processing.js

_Be warned though:_ because processing.js was the precursor to p5, its not been supported in a long time. You’ll just have to be conservative and cautious about the Java you use

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [October 7, 2020, 3:51am UTC](https://discourse.processing.org/t/online-editor-for-processing/24398/3 "2020-10-07T03:51:55Z")

</div>

As @tony has warned: Processing.js was [discontinued in December of 2018](https://en.wikipedia.org/wiki/Processing.js). For Processing.js, you could use [JSFiddle](http://jsfiddle.net/jamitzky/bhxZ6/), or some similar front-end developer playground. I speak under correction here, but Processing.js just ‘fakes’ datatypes. For example, the following are equivalent and all work fine in Processing.js:

```auto
d = 123;
int d = 123;
nonsense d = 123;

```

Another option might be [TypeScript](https://en.wikipedia.org/wiki/TypeScript), which _CodePen_ supports. Here’s an example that combines TypeScript and p5.js, that includes a few datatyped variables: [https://codepen.io/tabreturn/pen/RwRwWvE](https://codepen.io/tabreturn/pen/RwRwWvE)

---

<div class="post-metadata">

**Author:** ![ch3](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ch3/32/15935_2.png) [@ch3](https://discourse.processing.org/u/ch3)\
**Post date:** [October 7, 2020, 12:39pm UTC](https://discourse.processing.org/t/online-editor-for-processing/24398/4 "2020-10-07T12:39:34Z")

</div>

Thanks for the links, that’s great!  
I also appreciate the clarification on running processing on a browser and how it deals with datatypes. Hopefully it should be enough for me to explain what variables are and the distinction between the different datatypes.

@tony it’s [https://www.openprocessing.org/](https://www.openprocessing.org/) (the extra space took me somewhere else)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [October 8, 2020, 2:13am UTC](https://discourse.processing.org/t/online-editor-for-processing/24398/5 "2020-10-08T02:13:49Z")

</div>

> [@ch3](#):
>
> @tony it’s [https://www.openprocessing.org/](https://www.openprocessing.org/) (the extra space took me somewhere else)

Thanks for the catch!