Grid of points with perlin noise

Processing Coding Questions
1

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 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 :slight_smile:

1 Like
2

i can’t get to processing atm but it’s pretty much the same as this p5js code. it should at least get you started.

3

Thank you very much! Definitely a good place to start :slight_smile:

4
1 Like
5

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

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

4 Likes
6

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

7

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

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
textNoise-190.png600×585 7.14 KB

1 Like