# How would my graph and background color change for amp difference?

**URL:** <https://discourse.processing.org/t/how-would-my-graph-and-background-color-change-for-amp-difference/22560>\
**Category:** Libraries\
**Created:** [July 12, 2020, 1:26am UTC](https://discourse.processing.org/t/how-would-my-graph-and-background-color-change-for-amp-difference/22560 "2020-07-12T01:26:41Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hanacho0220](https://avatars.discourse-cdn.com/v4/letter/h/aeb1de/32.png) [@hanacho0220](https://discourse.processing.org/u/hanacho0220)\
**Post date:** [July 12, 2020, 1:26am UTC](https://discourse.processing.org/t/how-would-my-graph-and-background-color-change-for-amp-difference/22560/1 "2020-07-12T01:26:41Z")

</div>

> Hi, I was following the coding train’s sound visualization with p5.js tuturial and decided to make it for the music I composed. However, I want also want to change the color as an amplification changes and I have no idea how to do it. I’m a beginner and slowly learning javascript. Thank you! Here is my code so far. Also if someone knows how to make music start as soon as I make it live or not until I press the play button, it would be very appreciated

```auto
var song;
var button;
var amp; //amp means volume
var volhistory = [];

function setup() {
  song = loadSound('Sol22.mp3', loaded);
  amp = new p5.Amplitude();
  createCanvas(200, 200);
  angleMode(DEGREES);
}

function loaded(){
  button = createButton("play");
  button.mousePressed(togglePlaying);
}

function draw() {
  background(0);
 // push();
  var vol = amp.getLevel();
  volhistory.push(vol);
  stroke (255);
  //noFill();
  //var currentY = map(vol, 0, 1, height, 0);
  translate(width/2, height/2);

  beginShape();
  for (var i = 0; i<360; i++) {
    var r =map(volhistory[i], 0, 1, 30, 130);
    var x = r * cos (i);
    var y = r * sin (i);
    //var y = map(volhistory[i], 0, 1, height, 0);
    vertex(x,y);
    
  }
  endShape();
  
  
  if (volhistory.length > 360){
      volhistory.splice(0,1);
  }
  //stroke (255, 0, 0);
  //line (volhistory.length, 0 , volhistory.length, height)
 
  //ellipse(100,100,200, vol*200);
}

function togglePlaying() {
  if (!song.isPlaying()) {
    song.play();
    button.html("pause");
  }
  else {
    song.pause();
    button.html("play");
  }

}

```