Converting 2d output to 3d

p5.js Project Guidance
1

please format code with </> button * homework policy * asking questions

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((x1noiseScl) + step, (y1noiseScl) + 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();

}

}

}

2

here Java version


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();
    }
  }
}