# Recreating that Joy Division album cover

**URL:** <https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444>\
**Category:** Coding Questions\
**Created:** [December 16, 2019, 9:02am UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444 "2019-12-16T09:02:41Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dalphabet](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@dalphabet](https://discourse.processing.org/u/dalphabet)\
**Post date:** [December 16, 2019, 9:02am UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/1 "2019-12-16T09:02:41Z")

</div>

I found an [Openprocessing code](https://www.openprocessing.org/sketch/683686) 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.)

```auto
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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 16, 2019, 10:58am UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/2 "2019-12-16T10:58:42Z")

</div>

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

```auto
</> 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

---

<div class="post-metadata">

**Author:** ![dalphabet](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@dalphabet](https://discourse.processing.org/u/dalphabet)\
**Post date:** [December 16, 2019, 11:13am UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/3 "2019-12-16T11:13:45Z")

</div>

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()?

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 16, 2019, 12:14pm UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/4 "2019-12-16T12:14:41Z")

</div>

In the link that you provided

```auto
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

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

```

---

<div class="post-metadata">

**Author:** ![dalphabet](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@dalphabet](https://discourse.processing.org/u/dalphabet)\
**Post date:** [December 16, 2019, 3:49pm UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/5 "2019-12-16T15:49:06Z")

</div>

Revised a bit.

```auto
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?

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 16, 2019, 4:02pm UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/6 "2019-12-16T16:02:18Z")

</div>

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! 🙂

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![dalphabet](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@dalphabet](https://discourse.processing.org/u/dalphabet)\
**Post date:** [December 16, 2019, 4:39pm UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/7 "2019-12-16T16:39:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dalphabet](https://avatars.discourse-cdn.com/v4/letter/d/a183cd/32.png) [@dalphabet](https://discourse.processing.org/u/dalphabet)\
**Post date:** [December 16, 2019, 5:11pm UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/8 "2019-12-16T17:11:33Z")

</div>

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.

```auto
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…

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 16, 2019, 7:16pm UTC](https://discourse.processing.org/t/recreating-that-joy-division-album-cover/16444/9 "2019-12-16T19:16:24Z")

</div>

Thanks for sharing the eventual solution. Sleep tight! 🤓