# Converting from Processing to p5.js

**URL:** <https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394>\
**Category:** Beginners\
**Created:** [August 17, 2022, 4:09pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394 "2022-08-17T16:09:38Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [August 17, 2022, 4:09pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/1 "2022-08-17T16:09:38Z")

</div>

Hi! I have a small little noise graphing code I would love to port to p5.js and have a hard time finding out what needs to change so this code (which works in processing) works in p5.js

```auto
float inc = 0.05;
float start = 0;

void setup(){
  size(600,400);

}

void draw() {
  background(0);
  stroke(255);
  noFill();
  beginShape();
  float xoff = start;
  for (float x = 0; x < width; x +=3) {
  stroke(255);
  strokeWeight(2);

float y = map(noise(xoff),0,1,150,250);
  vertex(x,y);
  xoff += inc;
  noiseDetail(10,0.5);  
}
   
endShape();
start += inc;
}

```

If anyone can help me I would be super happy.  
Thank you!  
Tilman

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 17, 2022, 4:21pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/2 "2022-08-17T16:21:05Z")

</div>

What have you tried in p5.js?

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [August 17, 2022, 5:34pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/3 "2022-08-17T17:34:24Z")

</div>

yes I have I get syntax error:

> SyntaxError: Unexpected identifier  
> at /sketch.js:1:7

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [August 17, 2022, 5:44pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/4 "2022-08-17T17:44:09Z")

</div>

What is the code that produces that error?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 17, 2022, 6:37pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/5 "2022-08-17T18:37:12Z")

</div>

Hi @Tilman ,

When copied and pasted into the online p5.js editor, the Java code that you posted produces this error message, which is the same as yours:

```
SyntaxError: Unexpected identifier
    at /sketch.js:1:7

```

Java code cannot be run in p5.js, which uses JavaScript.

Declaring a variable as `float` has no valid meaning in p5.js, because it is not valid JavaScript, and that explains the error message that you posted.

The translated code should begin as follows:

```auto
let inc = 0.05;
let start = 0;

function setup() {
  createCanvas(600,400);
}

```

Try translating the remainder of the code, and we can help if you have trouble.

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [August 17, 2022, 7:35pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/6 "2022-08-17T19:35:58Z")

</div>

Thank you javager,  
this was the right start. Had to translate a couple of other expressions too:  
“Size” to “createCanvas”  
“void” to “function”

But now it works as expected in p5.js  
Working code:

```auto
let inc = 0.05;
let start = 0;

function setup(){
createCanvas(600,400);
}

function draw() {
  background(0);
  stroke(255);
  noFill();
  beginShape();
  let xoff = start;
  for (let x = 0; x < width; x +=3) {
  stroke(255);
  strokeWeight(2);

let y = map(noise(xoff),0,1,050,350);
  vertex(x,y);
  xoff += inc;
  noiseDetail(10,0.5);  
}
   
endShape();
start += inc;
}

```

Thanks again!

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 17, 2022, 8:06pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/7 "2022-08-17T20:06:37Z")

</div>

That’s much better JavaScript code now. 🙂

It would be a good idea, however, to neaten up the indentation, so that the code becomes easier to read.

---

<div class="post-metadata">

**Author:** ![kalle](https://avatars.discourse-cdn.com/v4/letter/k/aeb1de/32.png) [@kalle](https://discourse.processing.org/u/kalle)\
**Post date:** [May 8, 2024, 7:12pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/8 "2024-05-08T19:12:21Z")

</div>

I have used ChatGPT to convert processingJava to processing javascript.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 8, 2024, 9:05pm UTC](https://discourse.processing.org/t/converting-from-processing-to-p5-js/38394/9 "2024-05-08T21:05:12Z")

</div>

> [@javagar](#):
>
> idea, however, to neaten up the indentation

In menu “Edit” there’s a command “tidy code”