# Converting from java to p5js, not working as intended

**URL:** <https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179>\
**Category:** Coding Questions\
**Created:** [May 12, 2019, 9:10pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179 "2019-05-12T21:10:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![dakito](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@dakito](https://discourse.processing.org/u/dakito)\
**Post date:** [May 12, 2019, 9:10pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/1 "2019-05-12T21:10:30Z")

</div>

Just like the title says, I have absolutely no idea on what I am supposed to change. I fixed all error messages, replaced variable statements, changed the functions that I know I need to change. I am mostly a newbie to programming and so even after watching a 20 minute video I had no idea of what I had to fix.

Sorry for making anyone that would want to help read through all 200 lines of code, but I have no idea how to localize this problem.

> **[dakiito/platformerJS](https://github.com/dakiito/platformerJS)**
>
> p5js platformer project. Contribute to dakiito/platformerJS development by creating an account on GitHub.

The drawStage() and drawPlayer() functions are the only ones that work, but nothing updates and I have no idea how to debug this.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [May 13, 2019, 3:02am UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/2 "2019-05-13T03:02:28Z")

</div>

it would help anyone who was to help if you included all depedencies (p5.min.js, images, etc) in your repository.

---

<div class="post-metadata">

**Author:** ![dakito](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@dakito](https://discourse.processing.org/u/dakito)\
**Post date:** [May 13, 2019, 8:44pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/4 "2019-05-13T20:44:35Z")

</div>

Sorry for that. Forgot to use them myself…  
Added everything now.

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [May 14, 2019, 2:06am UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/6 "2019-05-14T02:06:28Z")

</div>

if you try and run your code and check the console you will see that you’re script tags are incorrect.

```auto
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="p5js-temp-platformetr7491295074039696125.js"></script>
  <script language="javascript" type="text/javascript" src="p5js-temp-js_test3078609402461503628.js"></script>

```

you would need to add an libraries folder for the p5.min.js file. as for the other two scripts one of them you don’t need “p5js-temp-platformetr7491295074039696125.js” as it contains no code. the other needs to be renamed “js\_test.js” so you would replace the above highlighted code with

```auto
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="js_test.js"></script>

```

in your input handler functions a few things need to be changed

```auto
function setSignal ( setTo) {
  if (keyCode == LEFT) {
    holdLeft = setTo;
  }
  if (keyCode == RIGHT) {
    holdRight = setTo;
  }
}

```

to

```auto
function setSignal ( setTo) {
  if (keyCode == LEFT_ARROW) {
    holdLeft = setTo;
  }
  if (keyCode == RIGHT_ARROW) {
    holdRight = setTo;
  }
}

```

and

```auto
    if (keyCode == UP) { //when up is pressed then increase flight value
      flight+=15;
      canJump1=false;
    }

```

to

```auto
    if (keyCode == UP_ARROW) { //when up is pressed then increase flight value
      flight+=15;
      canJump1=false;
    }

```

further you don’t want to load images every draw but once in either preload or setup so you can move this code in the drawStage function

```auto
    spike= loadImage("spike.png"); 
    flag = loadImage("flag.png");
    wallObstacle = loadImage("wallObstacle.png"); 
    wallObstacleFlipped = loadImage("wallObstacleFlipped.png");

```

into the setup or preload function (probably preload is better) and one last thing change the draw order so your backgrond is drawn before all other objects else you won’t see the player etc.

do all of that and you will have something closer to what you are after but i have to say there are still issues and the way you have done some things are not optimal. it is probably a good idea to go and do some tutorials on creating 2d platformers i recommend [this one](http://www.somethinghitme.com/2013/01/09/creating-a-canvas-platformer-tutorial-part-one/) as it is super simple and written in javascript which would not need alot of change to get working in p5js at least not as much as converting something from processing or java.

i’ll include [this link](https://editor.p5js.org/hotfooted/sketches/_QSayGavO) to a sketch of your code which includes the edits i’ve recommeded above and you can look at as an example. i have commented out some code in the playerMove function as you need to address some collision related stuff first. anyways best of luck

---

<div class="post-metadata">

**Author:** ![dakito](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@dakito](https://discourse.processing.org/u/dakito)\
**Post date:** [May 14, 2019, 2:29pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/7 "2019-05-14T14:29:43Z")

</div>

Thank you for helping me out with this. I am going to remake the game once I have more experience with js, as right now I just need it for a portfolio.

Thanks

Edit:

Do you have any idea on why the gravity variable constantly 0? It worked fine in basic processing. My only guesses on why its not working as intended is that it is a function that does not exist in p5js or that If statements work differently.

If the player coordinates are not in the specified rectangles above platforms, then gravity should gradually increase to 3.5. But something is preventing that and the basic debug from processing does not exist in p5js. I have updated my code repository with whatever I have changed now for it to work in basic processing and for jumping to be included.

---

<div class="post-metadata">

**Author:** ![dakito](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@dakito](https://discourse.processing.org/u/dakito)\
**Post date:** [May 14, 2019, 9:34pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/8 "2019-05-14T21:34:03Z")

</div>

So I have now made the game completely functional. The problem lied in the difference between Java variables and p5js.  
When creating a java variable that isnt an object, since you specify what type it will be, it has an automatic default value like “true”, “0”, etc. When I converted my code, I did not add false or true to my variables and that caused them to be undefined. That caused the collision detection to stall.

But now the problem is that I will need to embed the script on a local page, but the script can not find the images when just running the html file. It works perfectly fine if running a local server through processing though. Would I need to add the images somewhere on a file host on the web? Or would I need to make a local server to run the .html? I could maybe use processing to run the webpages and then just put the game somewhere, but I dont know how practical that is. I have updated the repository once again.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [May 15, 2019, 6:20am UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/9 "2019-05-15T06:20:35Z")

</div>

@dakito What do you mean with:

> [@dakito](#):
>
> I will need to embed the script on a local page

In addition, what do you mean in your statement: `It works perfectly fine if running a local server`. How are you running this local server?

Just to make sure we are on the same page, a local server simulates a server in your computer and I am assuming that is what you are referring to. You do not need to have a local server to run p5.js code. To run p5js, at a minimum, you will need your html and js code plus additional resources like images. In the simple case, all files (html,js,jpg,png,etc) could reside in the same folder. Then you can move this folder anywhere in your computer (or share it) and your html should work when loaded in any browser (chrome, firefox, safari, etc).

Kf

---

<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 15, 2019, 6:25am UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/10 "2019-05-15T06:25:17Z")

</div>

> [@Code 800A0404 issue](https://discourse.processing.org/t/code-800a0404-issue/2036/3):
>
> Easiest & fastest recipe to run “.js” sketches under p5.js: running_man Install any Firefox-based browser in your OS and use it to open your “index.html” file: fox_faceInstall Notepad2 or Notepad++ (or both) in your OS and use it to type in your “sketch.js” file there: scroll[https://XhmikosR.GitHub.io/notepad2-mod/](https://XhmikosR.GitHub.io/notepad2-mod/)[https://Notepad-Plus-Plus.org](https://Notepad-Plus-Plus.org) You can setup those text editors to use UTF-8 and LF line endings for better compatibility. bulbHere’s my minimum “index.html” te…

> [@Cannot Create Classes](https://discourse.processing.org/t/cannot-create-classes/8756/17):
>
> AFAIK, Firefox-based browsers treat the file:// URL scheme the same way as the http:// URL scheme. fox_face Thus far I haven’t found any issues at all when running Processing sketches on Firefox under its file:// URL scheme. partying_face Firefox-based browsers use the Gecko Spidermonkey JS engine. spider But if we prefer/need to test JS on the Chrome’s Blink V8 engine instead, we can use the Vivaldi browser: musical_score Similarly to Firefox, Vivaldi doesn’t restrict the file:// …

---

<div class="post-metadata">

**Author:** ![dakito](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@dakito](https://discourse.processing.org/u/dakito)\
**Post date:** [May 15, 2019, 1:36pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/11 "2019-05-15T13:36:16Z")

</div>

My script uses images. If I run it using the local server p5js app provides, it runs perfectly fine but I can not have my site properly set up. I have tried using codepen and some other apps for it but none have let me use images in my code so far.

 ![scr1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2d7e5dcad98a37dfb056d7b33f0682c05b52a0dd.png) ![scr2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/675e9b9f667e7030c9dc6149c228e0965c754452.png)

Image 1 is me running the script using p5js program  
image 2 is me running the html file

---

<div class="post-metadata">

**Author:** ![dakito](https://avatars.discourse-cdn.com/v4/letter/d/848f3c/32.png) [@dakito](https://discourse.processing.org/u/dakito)\
**Post date:** [May 15, 2019, 8:52pm UTC](https://discourse.processing.org/t/converting-from-java-to-p5js-not-working-as-intended/11179/12 "2019-05-15T20:52:35Z")

</div>

Figured it out.

You can use p5.js web editor embed feature to embed it into a html file.  
A little jumping back and forth and you can also resize it to be max size.

Thanks to everyone who helped.