Can you make a graph go in a spiral? (instead of horizontal)

p5.js Libraries
1

I’ve got a graph mapping the amplitude of a song (titled AYNIL.mp3 in the code) but I want it to travel in a spiral starting from the center rather than along the canvas width. (so it creates this weird spiral made of amplitude peaks). Anyone know how?

var song;
var amp;
var button;


var volhistory = [];

function toggleSong() {
  if (song.isPlaying()) {
    song.pause();
  } else {
    song.play();
  }
}

function preload() {
  song = loadSound('AYNIL.mp3');
}

function setup() {
  createCanvas(400, 400);
  button = createButton('Play/Pause');
  button.mousePressed(toggleSong);
  song.play();
  background(0);
  amp = new p5.Amplitude();

}

function draw() {
  background(0);
  var vol = amp.getLevel();
  if (song.isPlaying()) {
    volhistory.push(vol);
    beginShape();

  }

  for (var i = 0; i < volhistory.length; i = i + 5) {
    var y = map(volhistory[i], 0, 0.5, height, 0);
    stroke(255);
    noFill();
    vertex(i, y);

  }
  endShape();


}
2 Likes
2

Hello,

Please format your code:
https://discourse.processing.org/faq#format-your-code

You can go back and edit it.

:)

1 Like
3

Hello,

You can use the sound amplitude to modulate a point as you are rotating it.
I just wrote a simple example with no frills.

let angle = 0;
let r = 10;
let x= 0, y=0;
let s = 10;

function setup() 
  {
  createCanvas(500, 500);
  }

function draw() 
  {
  if (frameCount%60 == 0)
    background(220);
    
  translate(width/2, height/2);  
  angle += (TAU/60); //Equal angle spacing  
  //r = 100;                //fixed radius
  r = 100+10*sin(angle*5);  //modulated radius
    
  x = r*cos(angle);
  y = r*sin(angle);
    
  strokeWeight(3);  
  stroke(255, 0, 0);  
  point (x, y);
  console.log(x, y);
  }

:)

1 Like