Creating perlin noise spheres/ blobs that reacts to mic on p5.js

p5.js Libraries
1

Hello, I am trying to create spheres that moves/distorts with mic inputs. I am trying to create a “blob” effect and found out that perlin noise creates an effect similar to what I envision. Does anyone knows how to apply perlin noise to my spheres, or if there is any way to create a blob effect that reacts to mic instead of perlin noise.

let mic;
let amp = 0
let amp2 = 0
let amp3 = 0

function setup() {
  createCanvas(720,720,WEBGL);
    // Create an Audio input
  mic = new p5.AudioIn();
  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}


function draw() {
  background(220);
  cyl();
  cyli();
  cylin();
  cylind();
  cylinde();
  cylindd();
  cylinddd();
  shadow();
 
}


function cyl()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.91;
  //sphere
  let y = height/7 - amp * height/2;
  translate(0, 50, 0);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-0.5,-0.3,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(5+y,128);
  pop();
}


function cyli()
{
    micLevel = mic.getLevel();
  amp2 += (micLevel - amp2) * 0.31;
  //sphere
  let p = height/5 - amp2 * height/2;
  translate(150, -50, 0);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylin()
{
    micLevel = mic.getLevel();
  amp3 += (micLevel - amp3) * 0.51;
  //sphere
  let p = height/5 - amp3 * height/2;
  translate(-220, -40, 30);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylind()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.01;
  //sphere
  let p = height/7 - amp * height/2;
  translate(120, -90, 0);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylinde()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.01;
  //sphere
  let p = height/7 - amp * height/2;
  translate(0,270, 0);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
  
  //shadow
  //fill(50,50,50);
  //noStroke();
  //ellipse(0,220,40+y,50);
}

function cylindd()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.01;
  //sphere
  let p = height/7 - amp * height/2;
  translate(-180, -80, 60);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-1,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function cylinddd()
{
    micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.01;
  //sphere
  let p = height/9 - amp * height/2;
  translate(60, 60, -60);
  push();
  rotateZ(frameCount * 0.01);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  //normalMaterial();
  directionalLight(255,0,0,-0.5,-0.5,-1);
  noStroke();
  specularMaterial(250);
  shininess(50);
  sphere(4+p,128);
  pop();
}

function shadow(){
  micLevel = mic.getLevel();
  amp += (micLevel - amp) * 0.91;
  let p = height - amp * height/2;
  fill(50,50,50,150);
  noStroke();
  ellipse(70,130,-180+p,50);
  
}
2

Hi! Welcome to the forum!

I don’t know what you mean by blobs, but Dan made a series of tutorials to distort a sphere. You can use a similar technique with mic input instead of supershape.

original one

p5.js

however… if you want a lighting effect like in your sketch, it will be very tricky to apply the same effect to these custom shapes. You would need to calculate normal vectors for each vertex. In that case, it may be easier and prettier to render a lot of spheres (or cubes) and move their positions with the mic input like this approach:

1 Like