Recreating that Joy Division album cover

I found an Openprocessing code of an album cover of Joy Division’s ‘Unknown Pleasures’. The code was originally written by Craig S. Kaplan. So overwhelmed by the beauty of it, I attempted to translate this to pde. However, I’m a beginner. And I’ve been bamboozled by my previous renders. The code underneath is currently where I am. (Please visit the link first, so you could see the original p5js code.)

float inc = 1;
float start = 0;

void setup() {
  size(300, 500);
}

void draw() {
 background(0); stroke(255); noFill();
 for(int y = 100; y < 500; y += 5) {
 beginShape();
 float xoff = start;
 for(int x = 0; x < height; x++) {
   float joyDivision = (1+pow(x-150,4)/8000000) * noise(x/30+xoff/50+y);
   vertex(x, y-80/joyDivision);
   vertex(x, 10000);
   xoff += inc;
}
}
endShape();

start += inc;
}

Conclusion: Instead of exploring the the beauty and possibilities of Perlin noise lines, I ended up drawing pointy white mountain.

1 Like

sorry, you used the " quote formatter, better
please format your code posting by pasting it into the

</> code button

of the editor header menu ( context name: Preformatted text )
it looks like
```
type or paste code here
```

also can use the ``` manually above and below your code.

thank you.


from here looks like you

  • do 80 beginShape and
  • only one endShape

?? but possibly i see the structure { } wrong

Oops, got it! I changed it to formal code text.

  • So if I’m understanding your reply correctly, the ‘beginShape’ and ‘endShape’ is not working on all 80 lines.
  • And that fault could be find at the structure { } ?

…Edit…
What should I apply to make it into 80 horizontal Perlin noise lines with beginShape()?

In the link that you provided

for(x=0;x<b;++x)
   v(x,y-80/(1+pow(x-150,4)/8e6)*noise(x/30+f/50+y))

is the same as

for(x=0;x<b;++x) {
   v(x,y-80/(1+pow(x-150,4)/8e6)*noise(x/30+f/50+y))
}

Revised a bit.

for(int x = 0; x < height; x++) {
   float joyDivision = (1+pow(x-150,4)/8000000) * noise(x/30+xoff/50+y);
   vertex(x, y-80/joyDivision);
   vertex(x, 10000);
 }
   endShape();

Now the noise function became slower. It’s still a rocky mountain shape and it’s much taller…
Any function or revision to escape from rocky mountain shape to horizontal lines with Perlin noise?

Seeing you’re using the same dimensions as the original sketch, the issue isn’t with the formulas. The reason I emphasized the for(x=0;x<b;++x), is because it only contains a single line of code, which is the first vertex. The second vertex is outside of this loop! :slight_smile:

When I try to convert the original code to Processing Java, I’m a bit closer to your desired result:

int x;
float f = 0;

void setup() {
  size(300, 500);
}

void draw() {
  f++;
  background(0); 
  fill(0);
  stroke(255);
  for (int y = 100; y < height; y += 5) {
    beginShape();
    for (x = 0; x < height; ++x) {
      float joyDivision = y - 80 / (1 + pow(x - 150, 4) / 8e6) * noise(x / 30 + f / 50 + y);
      vertex(x, joyDivision);
    }
    vertex(x, 1e4);
    endShape();
  }
}

edit

In your linked example, put both vertices between { curly brackets }. You’ll reproduce an error similar to your first sketch.

1 Like

Wow, wow! Huge thanks to you :smile:
I’ll reply if I found the precise code.

So I emailed to professor Craig Kaplan, whom I mentioned.
The reason why I couldn’t get the exact waveform from @Tiemen was the way Java treats integer.

Javascript believes that all numbers are floating-point; Java treats integers specially, and uses integer division (with truncation) when it can. --from Craig Kaplan’s reply.

And here’s the code he written down.

float joyDivision = y - 80.0 / (1.0 + pow(x - 150.0, 4.0) / 8e6) * noise(x / 30.0 + f / 50.0 + y); 

Whew, that was a long journey.
Imma go sleep now, it’s 2am…

2 Likes

Thanks for sharing the eventual solution. Sleep tight! :nerd_face:

1 Like