Mapping 3D noise in Processing

[Malvan]

Hello there!

Im considering myself to be very new to this programming language, so please go easy on me.
I came across a pics/video on reddit not so long ago, which has attracted my attention. I’d like to make the same/similar stuff using typography in an experimental way (generative art).
The Video

I’ve tried to dig up some codes or examples regarding to this project, but i’ve found no tutorials or whatsoever.
My question is, are there anyone who could help me by providing any reference regarding to this project?

[paulgoux]

None of these are specifically related to that example, however it should give you some insight into how to code your own. These example make use of a triangle strip to create terrain, which you could replace by simple text and adjust the text size.

example one

int cols, rows;
int scl = 20; //scale
int w = 1200; //width, adjustable
int h = 900; //height, adjustable

int atX = 0;
int atY = 0;

float [][] z;

float moveOffX = 0;
float moveOffY = 0;

void setup() {
  size(1100, 660, P3D);
  frameRate(60);


  cols = w / scl;
  rows = h / scl;
  z = new float[cols][rows];
  float yoff = 0; //small float offset for smooth changes in value
  for (int y = 0; y < rows; y++) {
    float xoff = 0;
    for (int x = 0; x < cols; x++) {
      z[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100); //output of map(last numbers) controlled for height of mountains.
      xoff += 0.2;//change offsets to control smoothness.
    }
    yoff +=0.2;
  }
}

void draw() {
  background(0);
  stroke(255);
  fill(111, 222, 55);

  translate(width/2, height/2); //prepares to rotate everything relative to center of window
  rotateX(radians(45));


  translate(-w/2, -h/2); //offsets beginning of coordinates so that all of them appear in the screen.

  //TRIANGLE_STRIP: LAND
  for (int y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, z[x][y]);
      vertex(x*scl, (y+1)*scl, z[x][y+1]);
    }
    endShape();
  }

  for (int y = 0; y < rows-1; y++) {
    for (int x = 0; x < cols; x++) {

      if (x == atX && y == atY) {
        fill(255, 0, 0);
        pushMatrix();
        translate(x*scl, y*scl, z[x][y] + 9); //the addition makes the ellipse not intersect the mountains for the most part.
        ellipse(0, 0, 19, 19);
        popMatrix();
      }
    }
  }

  //these are the coordinates now. I can control these to control the thing's movement.
  atX = int(map(mouseX, 0, width, 0, cols));
  atY = int(map(mouseY, 0, height, 0, rows));

}

[paulgoux]

example 2

int cols, rows;
int scl = 20;
int w = 2000;
int h = 1600;

float flying = 0;

float[][] terrain;

void setup() {
  size(600, 600, P3D);
  cols = w / scl;
  rows = h/ scl;
  terrain = new float[cols][rows];
}


void draw() {

  flying -= 0.1;

  float yoff = flying;
  for (int y = 0; y < rows; y++) {
    float xoff = 0;
    for (int x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
      xoff += 0.2;
    }
    yoff += 0.2;
  }



  background(0);
  fill(255);
  text(frameRate,100,10);
  stroke(255);
  fill(120);

  translate(width/2, height/2+50);
  rotateX(PI/3);
  translate(-w/2, -h/2);
  for (int y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      vertex(x*scl, y*scl, terrain[x][y]);
      vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
      //rect(x*scl, y*scl, scl, scl);
    }
    endShape();
  }
}

example 3

//int cols, rows;
int scl = 6;
int w = 2000;
int h = 1600;
int cols = w / scl, rows = h/ scl;

float flying = 0;
float flyingx = 0;
float[][] terrain;
boolean floored = true;
boolean mouse = true;
int floor = -20;
int ceiling = 100;

float sclx = 0.9;
float scly = 0.9;
float scl4 = 0.5;

float staticx = 0.055;
float staticy = 0.039;
float [] offsetx = new float[cols];
float [] offsety = new float[rows];

void setup() {
  size(600, 600, P3D);
  
  terrain = new float[cols][rows];
  
  for(int i=0;i<cols;i++){
    
    offsetx[i] = flying + sclx;
  }
  for(int i=0;i<rows;i++){
    
    offsetx[i] = flyingx + scly;
  }
};

void grid (){
  
  stroke(255,255);
  line(0,height/2,width,height/2);
  line(width/2,0,width/2,height);
}

void Terrain(){
  
  float mx = map(mouseX,0,width,-sclx,sclx);
  float my = map(mouseY,0,height,-scly,scly);
  
  float mx2 = map(mouseX,0,height,-sclx/4,sclx/4);
  float my2 = map(mouseY,0,width,-scly/4,scly/4);
  
  if(mouse){
  flying += my;
  flyingx += mx;
  }else{
  flying += 0.001;
  flyingx += 0.001;
  }
  text(mx2, 90,10);
  text(my2,90,30);
  float yoff = flying;
  for (int y = 0; y < rows; y++) {
    float xoff = flyingx;
    for (int x = 0; x < cols; x++) {
      terrain[x][y] = map(noise(xoff, yoff), 0, 1, -ceiling, ceiling);
      if(mouse){
      xoff += mx;
      }else{
      xoff = sclx;
      }
      //text(xoff,60,10+10*x);
      
      //xoff += offsetx[x];
    }
    
    //text(yoff,60,10+10*y);
    if(mouse){
    yoff += my;
    }else{
    yoff = scly;
    }
    //yoff += offsety[y];
  }
  //stroke(255);
  noStroke();
  noFill();
  
  translate(width/2, height/2+50);
  rotateX(1.1);
  translate(-w/2, -h/2);
  for (int y = 0; y < rows-1; y++) {
    beginShape(TRIANGLE_STRIP);
    for (int x = 0; x < cols; x++) {
      //rect(x*scl, y*scl, scl, scl);
      
      float col = map(terrain[x][y],0,scl/2,0,40);
      
      //float r = 
      fill(col,col,col,col);
      //if(terrain[x][y]< floor && terrain[x][y]< floor - 20){
      //  fill(139,69,19);
      //  //fill(0,0,255,255);
      //}
      //if(terrain[x][y]< floor && terrain[x][y]> floor - 20){
      //  //fill(139,69,19,col+20);
      //  fill(0,0,255,255);
      //}
      
      
      if(col<40){
        fill(139,69,19,150);
        //fill(0,0,255,255);
      }
      
      if(terrain[x][y]< floor){
        //fill(139,69,19,col+20);
        fill(0,0,255,255);
      }
      
      if(terrain[x][y]> floor && terrain[x][y]< ceiling -70){
        fill(0,255,0,col+70);
      }
      if(terrain[x][y]> ceiling -70 && terrain[x][y]< ceiling -40){
        //fill(139,69,19,col+20);
        fill(120,col);
      }
      if(terrain[x][y]> ceiling -40){
        fill(255,col);
      }
      
      if(floored){
      if(terrain[x][y]> floor){
      vertex(x*scl, y*scl, terrain[x][y]);
      }
      else{
        vertex(x*scl, y*scl, floor);
      }
      if(terrain[x][y+1]>floor){
      vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
      }
      else{
        vertex(x*scl, (y+1)*scl, floor);
      }}
      else{
        vertex(x*scl, y*scl, terrain[x][y]);
        vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
      }
      
    }
    endShape(OPEN);
  }
};

void draw() {
  background(0);
  
  fill(255);
  text(frameRate,10,10);
  //fill(120);
  grid();
  Terrain();
  
};

void mouseDragged(){
  
}

[Malvan]

I could use the second example, modified it a bit. Now i only have to find a way to insert type into the mesh.