3D noise (2025)

// make source public, Spring 2025

// schien@mail.ncku.edu.tw

​

// Example code for lecture "Adding Dimensions"

// an example from Pearson (2011)

// displaying a noise grid in 3D boxes

// schien@mail.ncku.edu.tw, DPD 2023

​

let xstart, ystart, zstart;

let xnoise, ynoise, znoise;

let sideLength = 100;

let spacing = 5;

​

function setup() {

  createCanvas(500, 300, WEBGL);

  noStroke();

  xstart = random(10);

  ystart = random(10);

  zstart = random(10);

}

​

function draw() {

  background(0);

  xstart += 0.01;

  ystart += 0.01;

  zstart += 0.01;

  xnoise = xstart;

  ynoise = ystart;

  znoise = zstart;

  translate(-100, -80, -30);

  rotateZ(frameCount * 0.1);

  rotateY(frameCount * 0.1);

  for (let z = 0; z < sideLength; z += spacing) {

    znoise += 0.1;

    ynoise = ystart;

    for (let y = 0; y <= height; y += 5) {

      ynoise += 0.1;

      xnoise = xstart;

      for (let x = 0; x <= width; x += 5) {

        xnoise += 0.1;

        drawPoint(x, y, z, noise(xnoise, ynoise, znoise));

      } 

    }

  }

}

​

function drawPoint(x, y, z, noiseFactor) {

  push();

  translate(x, y, z);

  let gcolor = noiseFactor * 255;

  fill(gcolor, 10);

  box(spacing, spacing, spacing);

  pop();

}