# Perlin noise implementation in p5.js

**URL:** <https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009>\
**Category:** Coding Questions\
**Created:** [August 27, 2018, 5:27am UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009 "2018-08-27T05:27:24Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 5:27am UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/1 "2018-08-27T05:27:24Z")

</div>

Hi.

I noticed the outcomes of noise() function in Processing and p5.js is different (setting the same seeds). Do they use different implementations? Why?

---

<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:** [August 27, 2018, 2:39pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/2 "2018-08-27T14:39:52Z")

</div>

Let’s take a look at the source!

> <https://github.com/processing/p5.js/blob/master/src/math/noise.js>

You’ll have to ctrl-f “noise” to get to the definition:

> <https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java>

As far as I can tell (on mobile 😬) they use the same implementation, but use their own native Random-objects. In the end, a result of their environments.

---

<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:** [August 27, 2018, 2:59pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/3 "2018-08-27T14:59:05Z")

</div>

> [@tony](#):
>
> You’ll have to ctrl-f “noise” to get to the definition.

> <https://github.com/processing/p5.js/blob/0.7.1/src/math/noise.js#L107-L185>

> <https://github.com/processing/processing/blob/processing-0265-3.4/core/src/processing/core/PApplet.java#L5228-L5300>

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 5:40pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/4 "2018-08-27T17:40:08Z")

</div>

But I am getting _different_ results (for the same seed). Try this simple code:

```auto
// PROCESSING CODE
float x = 0.0;

void setup() {
  noiseSeed(10);
  for(int i = 1; i <=10; i++) { 
   println(noise(x));
   x = x + 0.01;
  }
}

```

```auto
// P5.JS CODE
var x = 0.0;

function setup() {
  noiseSeed(0);
  for(var i = 1; i <=10; i++) { 
   console.log(noise(x));
   x = x + 0.01;
  }
}

```

I get different values from the two sketches (I am using [Processing](https://processing.org/reference/environment/#PDE) IDE):

```auto
// PROCESSING OUTPUT
0.6847784
0.68429047
0.682773
0.6802819
0.6769151
0.67296404
0.6680481
0.66287524
0.6574523
0.65191317

```

```auto
// P5.JS OUTPUT
0.224947028546012
0.22484679351723308
0.2245499223713059
0.2240676994293296
0.22341822023287683
0.2226253699109923
0.2217174816614504
0.22072575742505776
0.2196825472000809
0.21861959179466206

```

The two vectors do not differ for a constant and their ratio is not constant. Nevertheless, they are positively correlated (Perason 0.9999822).

---

<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:** [August 27, 2018, 6:06pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/5 "2018-08-27T18:06:01Z")

</div>

@HEX0x6C We need to look into formatting the code properly in this forum. Do you know how to do that?

Kf

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 6:31pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/6 "2018-08-27T18:31:27Z")

</div>

No. I do not. Thanks for telling.

---

<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:** [August 27, 2018, 6:50pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/7 "2018-08-27T18:50:26Z")

</div>

### _Please format your code_ 😊

It consist on these two steps:

1. In your code editor (PDE, VS code, Eclipse, etc) ensure you execute the beautifier function. This function automatically indents your code. Auto-indenting makes your code easier to read and helps catching bugs due to mismatch parenthesis, for instance. In the PDE, you use the key combination: `ctrl+t`
2. You copy and paste your code in the forum. Then you select the code and you hit the formatting button aka. the button with this symbol: `</>`

That’s it! Please notice you do not create a new post in case you need to format something you already posted. You can edit your post, copy the code to the PDE, indent the code properly there and then past it back here, format the code and \>\> **save** \<\< the edits.

## Extra info:

Formatting your code makes everybody’s life easier, your code looks much better plus it ensures your code integrity is not affected by the forum’s formatting (Do you know the forum processes markup code?) Please visit the sticky posts or the FAQ section/post to learn about this, other advantages and super powers you can get in this brand new forum.

Kf

---

<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:** [August 27, 2018, 6:57pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/8 "2018-08-27T18:57:23Z")

</div>

On the surface it may look identical, but we have to ask ourselves “what is being seeded?”

Java is calling this:  
`perlin[i] = Math.random();`

while JavaScript is calling this:  
`perlinRandom = new Random();`

I assume that Java and JS implement random seeding differently.

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [August 27, 2018, 7:16pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/9 "2018-08-27T19:16:12Z")

</div>

All right, I did it. Thanks for your patience.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 11, 2018, 3:50pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/10 "2018-09-11T15:50:37Z")

</div>

I think (I am not an expert on JavaScript random) that the issue here isn’t a Java vs JavaScript implementation of a PRNG (pseudo-random number generator)…

…it is Java vs Chrome vs Firefox vs Safari vs Opera vs etc.

> So now the question is: what PRNG does JavaScript use?  
> The answer: none.  
> It’s up to the browser
> 
> From: [How does JavaScript’s Math.random() generate random numbers?](https://hackernoon.com/how-does-javascripts-math-random-generate-random-numbers-ef0de6a20131)

If you want to be able to have specific random seeds produce the exact same effect across Java and JavaScript, and if high-quality randomness is not important to you, then one approach might be to implement your own very simple PRNG in-code in both the Java and JavaScript sketches, and completely ignore the respective language built-in `random()` / `Math.random()`.

For examples and discussion of simple LCG algorithms for PRNGs, see:

- [java - How can I generate a random number without use of Math.Random? - Stack Overflow](https://stackoverflow.com/a/13444172/7207622)
- [Linear congruential generator - Wikipedia](https://en.wikipedia.org/wiki/Linear_congruential_generator)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 11, 2018, 5:54pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/11 "2018-09-11T17:54:58Z")

</div>

So, thinking about this a little further, your essential issue is that `noiseSeed()` and `noise()` in Java are both built on java.util.Random() – and you can’t route around those internal initialization calls, even by providing your own series seeds generated by your own a non-Java source.

> <https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java#L5373-L5378>

> <https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java#L5242-L5245>

So, in addition to needing a cross-platform RPNG for seeds, I believe (?) (on quick inspection) that you cannot then to manually iterate a seed and pass each to `noise`. Instead, as the library currently stands you would _also_ would also have to write your own Perlin functions.

If you want to start with a cross-language PNRG, I would recommend starting with an extremely simple LCG that is already implemented in Python / Java / JavaScript and gives the same results in each. See this answer re XorShift:

> <https://stackoverflow.com/questions/34658565/implementing-xorshift-the-same-in-java-and-python/34659107#34659107>

Note however that the given solution for Java is actually returning a long, not an int (!) There is no such thing as a primitive 32-bit unsigned int in Java.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 11, 2018, 10:14pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/12 "2018-09-11T22:14:15Z")

</div>

Okay, I have posted a preliminary cross-language implementation for `random` / `randomSeed`, here:

> [@Cross-language random numbers](https://discourse.processing.org/t/cross-language-random-numbers/3474):
>
> I have developed a set of demo sketches that implement simple cross-language random numbers. The goal is to make it easy to adapt a sketch between Processing (Java), p5.js (JavaScript), or Processing.py (Python) such that passing the same random seed to each version will generate the same “random” playback from a generative artwork. This is currently not possible using the core modes / libraries, as they each use different underlying systems for generating random numbers. One solution is to im…

There is no `noise` / `noiseSeed` included yet, but that might be built on top of it.

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [September 12, 2018, 6:36am UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/13 "2018-09-12T06:36:32Z")

</div>

Wow, this is _awesome_! Thanks for your endeavor!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 12, 2018, 4:44pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/14 "2018-09-12T16:44:29Z")

</div>

Glad you like it – thanks for sharing an interesting problem. I would also be curious to hear more about what your application is for cross-language noise.

Good luck, and if you can build on it, please share!

---

<div class="post-metadata">

**Author:** ![HEX0x6C](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hex0x6c/32/1251_2.png) [@HEX0x6C](https://discourse.processing.org/u/HEX0x6C)\
**Post date:** [September 12, 2018, 8:20pm UTC](https://discourse.processing.org/t/perlin-noise-implementation-in-p5-js/3009/15 "2018-09-12T20:20:46Z")

</div>

My app is [here](https://github.com/massimo-franceschet/EtherCoil). Originally I developed it in Processing. Then, I noticed that the sketches in P5.js and Processing generate different coils for the same hash string, hence I posted the question.

Thank you.