# Grid of points with perlin noise

**URL:** <https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 4, 2019, 10:01am UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923 "2019-03-04T10:01:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![madsogstrup](https://avatars.discourse-cdn.com/v4/letter/m/c2a13f/32.png) [@madsogstrup](https://discourse.processing.org/u/madsogstrup)\
**Post date:** [March 4, 2019, 10:01am UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923/1 "2019-03-04T10:01:50Z")

</div>

Hello!

I’ve recently taken up processing as part of a school project, and I was wondering if anyone would be able to help me explaining how [this instagram post](https://www.instagram.com/p/Bo41O6TgxR5/) was done.

As the artist writes:  
it’s a grid of points, applying a perlin noise to point’s color (only 1 optional dimension of it) - noise is based on point position. offsetting noise by time. copying letters to points, transferring color value from points to letter’s text value fitting 0-10

While this is helpful, I am very new to processing and need some more details and examples to fully understand. I want to apply this effect to simple crosses that extends and shrinks (not changing stroke width) depending on the perlin noise, instead of the numbers.

I’m not sure what the culture is about recreating others work like this, but if it’s ok, I would appreciate any help very much.

Thank you 🙂

---

<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:** [March 4, 2019, 12:05pm UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923/2 "2019-03-04T12:05:27Z")

</div>

i can’t get to processing atm but it’s pretty much the same as [this](https://editor.p5js.org/hotfooted/sketches/99Y-6N3yr) p5js code. it should at least get you started.

---

<div class="post-metadata">

**Author:** ![madsogstrup](https://avatars.discourse-cdn.com/v4/letter/m/c2a13f/32.png) [@madsogstrup](https://discourse.processing.org/u/madsogstrup)\
**Post date:** [March 4, 2019, 12:08pm UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923/3 "2019-03-04T12:08:11Z")

</div>

Thank you very much! Definitely a good place to start 🙂

---

<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:** [March 4, 2019, 12:33pm UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923/4 "2019-03-04T12:33:47Z")

</div>

- [Forum.Processing.org/two/discussion/18026/text-array-in-p5js#Item\_12](http://Forum.Processing.org/two/discussion/18026/text-array-in-p5js#Item_12)

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [March 4, 2019, 2:20pm UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923/5 "2019-03-04T14:20:49Z")

</div>

Hi @madsogstrup,

Upon browsing through @dvdp’s page it seems that:

- he is using Houdini for most of his work (this sketch included ?)
- what he calls “noise” is most probably “curly noise”

There are different ways of computing curly noise but generally it is obtained by adding the sinus and cosinus of the noise to the XY coordinates (in 2D).

What it means here is that you need to find a way to combine `cos(noise)` and `sin(noise)` to a single value before mapping it against a range of 10 integers (the ten digits from 0 to 9 in the sketch).

I don’t know how he did it though, maybe that’s the part where he applies noise to colors before converting their values back to integers. Also it would be interesting to see what kind of curly noise is using Houdini.

Meanwhile, here’s a quick attempt in p5.js -\> [https://editor.p5js.org/solub/sketches/WGqo\_G-EU](https://editor.p5js.org/solub/sketches/WGqo_G-EU)

EDIT: Same sketch but based on Simplex Noise (improved Perlin Noise) for smoother motion -\> [https://editor.p5js.org/solub/sketches/bBd2DkXoT](https://editor.p5js.org/solub/sketches/bBd2DkXoT)

---

<div class="post-metadata">

**Author:** ![madsogstrup](https://avatars.discourse-cdn.com/v4/letter/m/c2a13f/32.png) [@madsogstrup](https://discourse.processing.org/u/madsogstrup)\
**Post date:** [March 4, 2019, 4:22pm UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923/6 "2019-03-04T16:22:33Z")

</div>

Thank you! This is very helpful. And thank you for the quick responses!

---

<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:** [March 7, 2019, 8:54pm UTC](https://discourse.processing.org/t/grid-of-points-with-perlin-noise/8923/7 "2019-03-07T20:54:58Z")

</div>

…and here is a Processing(Java) translation of the p5.js sketch by @solub:

```auto
int cols = 40;
int rows = 40;
int s = 600;
int step;
float factor = 0.01;

void settings(){
  step = (s / cols);
  size(s, s-step);
}

void setup() {
  fill(255);
  textSize(step);
}

void draw() {
  background(0);
  float n, cx, cy;
  for(int y = 1; y < rows; y++) {
    for(int x = 0; x < cols; x++) {
        n = noise(x * factor, y * factor, frameCount*0.01) * 3;
        n = (n - int(n)) * 3;
        cx = cos(n);
        cy = sin(n);
        String val = str(floor(map(cx * cy, -0.5, 0.45, 0, 9)));
      text(val, x * step + 3, y * step);
    }
  }
}

```

 ![textNoise-190](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7c6b06a5c9dd2954c0e9d4ac1c558f816ad7c669.png)