Exploring Creative Coding with p5.js: How to Build an Audio Reactive 3D Box Grid

Creative coding has emerged as a popular and exciting way to express creativity through coding. By combining the principles of art and design with coding, creatives can develop interactive and dynamic visual experiences that are both engaging and immersive. One of the most popular libraries for creative coding is p5.js, which is built on top of the JavaScript language and is specifically designed for the web.

In this post, we’ll take a look at a piece of code written in p5.js and explore each section in detail. The code creates a dynamic and interactive 3D animation that responds to audio input.

Section 1: Initializing Variables

box_size = 30

This line initializes a variable called box_size with a value of 30. This variable is used to define the size of each box that will be drawn in the animation.

Section 2: Setting up the Canvas

function setup() {
  createCanvas(700, 700, WEBGL);
  camera(0, 350, 700, 0, 0, 0, 0, 1, 0)
  mic = new p5.AudioIn()
  mic.start()
}

This section defines the setup() function, which is called once when the program starts. The createCanvas() function sets up a canvas with a width and height of 700 pixels and the WEBGL mode, which enables 3D graphics rendering. The camera() function sets up the position and orientation of the camera, and the mic variable is initialized with a new p5.AudioIn() object, which is used to get audio input from the user’s microphone.

Section 3: Drawing the Animation

function draw() {
  background(220);
  ambientLight(100);
  directionalLight(0, 255, 0, 0.25, 0.25, 0);
  pointLight(0, 0, 255, -250, -250, 250);
  
  for(x = -width; x <= width; x += box_size) {
    for (y = -height; y <= height; y += box_size) {
      push();
      translate(x, y, 0);
      let vol = mic.getLevel()
      depth = random(0, vol * 300 * (frameCount * 0.005))
      box(box_size, box_size, depth)
      pop()
    }
  }
}

This is the heart of the code. The draw function is called continuously, and it’s where we’ll create our box grid. The background function sets the background color to a light gray. The ambientLight, directionalLight, and pointLight functions create three different types of lighting.

Next, we have two nested for loops that create our box grid. The for loops go from the negative half of the width and height to the positive half of the width and height in increments of box_size. This creates a grid of boxes with a distance box_size between them.

Inside the loops, we first use push and translate to move the origin to the current position in the grid. Then, we get the current volume of the microphone input with mic.getLevel(). We use this value to set the depth of the box using depth = random(0, vol * 300 * (frameCount * 0.005)). The random function generates a random number between 0 and the calculated maximum depth.

Finally, we use the box function to create a box with dimensions box_size x box_size x depth. We use pop to restore the origin and orientation of the canvas.

And that’s it! With just a few lines of code, we’ve created an audio-reactive 3D box grid. Play around with the code and see what kind of variations you can come up with. With p5.js, the possibilities are endless.

Result

Complete Code

box_size = 30

function setup() {
  createCanvas(700, 700, WEBGL);
  camera(0, 350, 700, 0, 0, 0, 0, 1, 0)
  mic = new p5.AudioIn()
  mic.start()
}

function draw() {
  background(220);
  ambientLight(100);
  directionalLight(0, 255, 0, 0.25, 0.25, 0);
  pointLight(0, 0, 255, -250, -250, 250);
  
  for(x = -width; x <= width; x += box_size) {
    for (y = -height; y <= height; y += box_size) {
      push();
      translate(x, y, 0);
      let vol = mic.getLevel()
      depth = random(0, vol * 300 * (frameCount * 0.005))
      box(box_size, box_size, depth)
      pop()
    }
  }
}

Creative coding with p5.js offers a fascinating way to explore the intersection of art and technology. With its intuitive syntax and powerful visualization capabilities, p5.js enables artists and developers to create engaging and interactive projects that respond to real-world data and user input. Whether you are a seasoned developer or a curious beginner, p5.js offers endless possibilities for creative expression and experimentation. So why not start exploring today and see where your creativity takes you?