Two-Dimensional Noise

Load Pixels

p5.loadPixels();

The For-Loops

for (let column = 0; column < p5.width; column++) {
  row_offset = 0.0;

  for (let row = 0; row < p5.height; row++) {

Set the Intensity

let intensity = p5.noise(column_offset, row_offset) * MAXIMUM_INTENSITY;
p5.set(column, row, intensity);

End the For-Loops

    row_offset += NOISE_OFFSET_INCREMENT;
  } //end row-for

  column_offset += NOISE_OFFSET_INCREMENT;
} // end column-for

Update the Pixels and Stop the Loop

  p5.updatePixels();
  p5.noLoop();
} // end draw

new p5(simple_sketch, STATIC_NOISE_GRAPH_DIV);

The Noise Plotter Class

class NoisePlotter {

constructor(p5, slider) {
  this.slider = slider;
  this.p5 = p5
} // end constructur

The Draw Method

draw() {
  let intensity;
  let column_offset;
  let offset_increment = this.slider.value()
  let row_offset = 0;
  let pixel_index;

  this.p5.loadPixels();

  for (let y=0; y < this.p5.height; y++) {
    column_offset = 0;
    for (let x=0; x < this.p5.width; x++) {
      pixel_index = (x + y * this.p5.width) * PIXEL_ARRAY.CELLS_PER_PIXEL;
      intensity = (this.p5.noise(column_offset, row_offset)
                   * PIXEL_ARRAY.RGB_MAX);
      this.p5.pixels[pixel_index +
                     PIXEL_ARRAY.RED] = intensity;
      this.p5.pixels[pixel_index +
                     PIXEL_ARRAY.GREEN] = intensity;
      this.p5.pixels[pixel_index +
                     PIXEL_ARRAY.BLUE] = intensity;
      this.p5.pixels[pixel_index +
                     PIXEL_ARRAY.ALPHA] = PIXEL_ARRAY.RGB_MAX;
      column_offset += offset_increment;        
    } // end x for
    row_offset += offset_increment;
  }// end x for
  this.p5.updatePixels();
} // end draw

The Closure Function

function static_pixels(p5) {
  const HEIGHT = 400;

  let plotter;
  let slider;

Set Up

p5.setup = function() {

• You Are My Density
  

  p5.pixelDensity(1);
  

  To draw the noise I'm going to set the values in the pixels array directly but that's actually not so straightforward as you might think. When we refer to a pixel, there's two things to consider - there's a logical pixel, which is what we referred to using the set function, and what most people probably think of when working with p5 - it's the (x, y) coordinate you've come to know and love, but that pixel doesn't necessarily map one-to-one with the physical pixels in a display. Because of this, the size of the pixels array and the number of cells within the array dedicated to each pixel depends on the display.

  The pixels documentation shows the proper way to set all the physical pixels, which requires you to check the pixelDensity and then for each logical pixel you would loop over the sub-pixels that represent it… maybe some other time. For now, setting pixelDensity(1) will turn off matching the pixel density of the user's display and let us just worry about the one logical pixel. I don't know if that means it wont' take advantage of a higher density display or not, but p5 is about making it easier to code visualizations, not high performance (to me, anyway) - and as we'll see, the for-loops we're using are already slow enough, adding two more nested loops will just make things even slower.

• The Canvas
  

  p5.createCanvas(
    document.getElementById(STATIC_NOISE_PIXELS_DIV).offsetWidth,
    HEIGHT);
  

  This is the usual code I use, nothing fancy.

• The Slider
  

  slider = p5.createSlider(SLIDER.min,
                           SLIDER.max,
                           SLIDER.default_value,
                           SLIDER.step_size);
  slider.style("width", "500px");
  

  This is also a pretty straight-forward slider (although I think that just dropping it in after the canvas like this isn't what you're supposed to do). The main difference is that I'm adding a callback:

  slider.input(() => p5.redraw());
  

  This uses javascript's crazy arrow function syntax (not that I think the idea behind it is crazy, but the weird looking syntax and the fact that there's so many ways to declare functions seems to make the language too complicated for the little advantage you get with all the variations).

  Since this is a mostly static drawing I'm going to turn off re-drawing the canvas, but this callback tells p5 that if the user changes the slider's value then it should re-draw the canvas. p5 also has a similar function called changed, but that doesn't trigger the callback until you let go of the mouse button, while input lets you see the changes as you drag the slider.

  Note: input and changed don't show up under the slider documentation but rather under the DOM category of the documentation so I don't know how anyone is supposed to know that they exist without searching forum posts. This seems to suggest that there might be other features of the p5 language that exist but aren't well documented so it's just luck if you figure out that they are there…

• Text Setup
  

  p5.fill("white");
  p5.stroke("white");
  p5.textAlign(p5.CENTER);
  p5.textSize(32);
  p5.noStroke()
  

  This sets the values that I'll use to show what the current slider value is to the user. Since I'm setting the pixel array values directly and not calling any functions like stroke or fill to do the visualization, setting it here will stick for the life of the sketch.

• A Noise Plotter
  

  plotter = new NoisePlotter(p5, slider);
  

  I thought that it was getting cluttered up enough that it would make sense to break the plotting of the noise into a class, since I findi it easier to work with an object-oriented approach.

• No Loop
  

    p5.noLoop();
  } // end setup
  

  The last thing in the setup is turning off the re-drawing of the canvas. I'm still not clear on what the difference is between putting it here and in the draw function. It seems to work the same in both cases.

Draw

p5.draw = function() {
  plotter.draw();
  // add a label to show the amount the noise changes
  p5.text(`Noise Change: ${slider.value().toFixed(3)}`,
          p5.width/2 , p5.height - 10);
} // end draw

The P5 Instance

new p5(static_pixels, STATIC_NOISE_PIXELS_DIV);