# Converting 2d output to 3d

**URL:** <https://discourse.processing.org/t/converting-2d-output-to-3d/35210>\
**Category:** Project Guidance\
**Created:** [February 16, 2022, 6:08pm UTC](https://discourse.processing.org/t/converting-2d-output-to-3d/35210 "2022-02-16T18:08:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![elonmusk](https://avatars.discourse-cdn.com/v4/letter/e/b2d939/32.png) [@elonmusk](https://discourse.processing.org/u/elonmusk)\
**Post date:** [February 16, 2022, 6:08pm UTC](https://discourse.processing.org/t/converting-2d-output-to-3d/35210/1 "2022-02-16T18:08:28Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hello Team,

I was given a task, I was able to get the output in 2D format, but I have to make use use of 3D perlin noise for my output. What is your advice on this here’s my code.

let x;

let y;

let X;

let Y;

let step;

function setup() {

createCanvas(windowHeight, windowWidth);

step = 0.05;

strokeWeight(5);

}

function draw() {

if(X \< 0) X = 0;

if(Y \< 0) Y = 0;

if(X \> width) X = width;

if(Y \> height) Y = height;

line(x, y, X, Y);

x = X;

y = Y;

step += 1.1;

background(28);

let noiseScl = 0.07;  
for (let x1 = 0; x1 \<= width; x1 += 20) {  
for (let y1 = 0; y1 \<= height; y1 += 20) {

let noiseValue = noise((x1_noiseScl) + step, (y1_noiseScl) + step);

let angle = map(noiseValue,0,1,-360,360);

```
  stroke( floor( noiseValue * 255 ), 77, 239);

push();

```

translate(x1,y1);

var a = map(step, 0, 360, 1, 0, true);

rotate( noiseValue \* TWO\_PI\* a );

```
  line(-10, 0, 10, 0);

```

pop();

}

}

}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 5, 2022, 9:32pm UTC](https://discourse.processing.org/t/converting-2d-output-to-3d/35210/2 "2022-03-05T21:32:32Z")

</div>

here Java version

```auto

float x;
float y;

float X;
float Y;
float step;

void setup() {
  size(displayHeight, displayWidth);
  step = 0.05;
  strokeWeight(5);
}

void draw() {

  if (X < 0) X = 0;
  if (Y < 0) Y = 0;

  if (X > width) X = width;
  if (Y > height) Y = height;

  line(x, y, X, Y);

  x = X;
  y = Y;

  step += 1.1;

  background(28);

  float noiseScl = 0.07;
  for (int x1 = 0; x1 <= width; x1 += 20) {
    for (int y1 = 0; y1 <= height; y1 += 20) {

      float noiseValue = noise((x1*noiseScl) + step, (y1*noiseScl) + step);
      // float angle = map(noiseValue, 0, 1, -360, 360);
      stroke( floor( noiseValue * 255 ), 77, 239);

      pushMatrix();
      translate(x1, y1);
      float a = map(step, 0, 360, 1, 0);
      rotate( noiseValue * TWO_PI* a );
      line(-10, 0, 10, 0);
      popMatrix();
    }
  }
}

```