Changing geometry vertices using dat.GUI

Questions
,
1

I’m working on an application that allows a user to change the noise frequencies of a basic plane using dat.GUI. Im using code from the Simplex-noise.js by jwagner to generate the noise. The noise generation works perfectly but I’m having trouble pulling that data into a dat.gui param.

I’m looking for the best way to manipulate a geometries vertices using dat.gui. I’ve been hacking away at this for a while…so close. Would love some assistance.

Here’s my code for getting the noise data and the code for rendering the dat.gui

Getting the data that adds noise to my plane geometry

var simplex = new SimplexNoise(Math.random * 100);
  for (var i = 0, l = geometry.vertices.length; i < l; i++) {
    var v = geometry.vertices[i];
    v.z = simplex.noise2D(v.x / 25.0, v.y / 25.0) * 20;
    noise = v.z;
  }

The dat.GUI code to render params. All params work except the noise

// GUI
  const params = new function() {
    this.rotationX = 0
    this.rotationY = 0
    this.noise = noise
  }

  gui = new dat.GUI({
    height : 5 * 32 - 1
  });
  gui.add(params, 'rotationX', 0, 10).onChange( function() {
    item.rotation.x = (params.rotationX);
  });
  gui.add(params, 'rotationY', 0, 10).onChange( function() {
    item.rotation.y = (params.rotationY);
  });
  gui.add(params, 'noise', -25, 25).onChange( function() {
    for(var i = 0, l = geometry.vertices.length; i < l; i++) {
      var v = geometry.vertices[i];
      v.z = params.noise
    }
  });

Would be forever grateful for help. Thanks!

2

Nevermind, I just figured it out thanks to this post.

Updated dat.gui code

// GUI
  const params = new function() {
    this.rotationX = 0
    this.rotationY = 0
    this.noise = noise
  }

  gui = new dat.GUI({
    height : 5 * 32 - 1
  });
  gui.add(params, 'rotationX', 0, 10).onChange( function() {
    item.rotation.x = (params.rotationX);
  });
  gui.add(params, 'rotationY', 0, 10).onChange( function() {
    item.rotation.y = (params.rotationY);
  });
  gui.add(params, 'noise', -25, 25).onChange( function() {
    for(var i = 0, l = geometry.vertices.length; i < l; i++) {
      var v = geometry.vertices[i];
      v.z = simplex.noise2D(v.x / params.noise, v.y / params.noise) * 20;
    }
  });
1 Like