# Rotation / sound reactive / stopping drawing

**URL:** <https://discourse.processing.org/t/rotation-sound-reactive-stopping-drawing/20160>\
**Category:** Libraries\
**Created:** [April 26, 2020, 2:45am UTC](https://discourse.processing.org/t/rotation-sound-reactive-stopping-drawing/20160 "2020-04-26T02:45:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![malindra](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@malindra](https://discourse.processing.org/u/malindra)\
**Post date:** [April 26, 2020, 2:45am UTC](https://discourse.processing.org/t/rotation-sound-reactive-stopping-drawing/20160/1 "2020-04-26T02:45:22Z")

</div>

i’m totally new to coding and p5 - i’ve been messing creating a visualiser from the intro tutorials and grabbing bits and pieces from different tuts.

Basically -

1. is there away to rotate all the ellipses/objects on the canvas around a point (so it’s like the canvas has rotated)?
2. is there a way for the ellipses to disappear after a set amount of time (10s for example)?

Thanks in advance \<3

```auto
var song;

function setup() {
  // URL copied from the Glitch assets folder
  song = loadSound('https://www.zeligsound.com/s/idont.mp3');
 createCanvas(512, 512);
  background(220);
  frameRate(15)

    // create a new Amplitude analyzer
  analyzer = new p5.Amplitude();

  // Patch the input to an volume analyzer
  analyzer.setInput(song);

   fft = new p5.FFT(0.5,512);
   //smoothing, bins

}

function mousePressed() {
  if ( song.isPlaying() ) { // .isPlaying() returns a boolean
    song.stop();
  } else {
    song.play();
  }
}

function draw() {
let rms = analyzer.getLevel();
//calls amp thing

var spectrum = fft.analyze();
for (var i = 0; i < spectrum.length; i++) 
  //calls fft thing
{
	var amp = spectrum[i];
	var y = map(amp, 0, 256, height, 0)
	fill(random(255), random(255), random(255),height); // colour of ellipse
	ellipse(y+10, random(i+1, i+300), 5 + rms * 150, 5 + rms * 150,); // ellipse
}
}

```

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 26, 2020, 4:06am UTC](https://discourse.processing.org/t/rotation-sound-reactive-stopping-drawing/20160/2 "2020-04-26T04:06:13Z")

</div>

Welcome to the forum!

> [@malindra](#):
>
> 1. is there away to rotate all the ellipses/objects on the canvas around a point (so it’s like the canvas has rotated)?

To do this, you’ll want to make a separate PGraphic, do all your drawing on it, and then rotate/draw it every frame.

> [@malindra](#):
>
> 1. is there a way for the ellipses to disappear after a set amount of time (10s for example)?

This one’s a little trickier. You’re going from “draw an ellipse” to “keep track of every ellipse I draw, keep track of how long it’s been a live, and do something once it reaches the end of its life” . You’re gonna want to start looking into classes and the concept of object-oriented programming.

If that sounds like a lot, don’t worry, they’re pretty intuitive ideas, and they’re programming concepts that you’ll run into again and again.

If you have any more questions, just ask! Happy coding

---

<div class="post-metadata">

**Author:** ![malindra](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@malindra](https://discourse.processing.org/u/malindra)\
**Post date:** [April 26, 2020, 1:03pm UTC](https://discourse.processing.org/t/rotation-sound-reactive-stopping-drawing/20160/3 "2020-04-26T13:03:37Z")

</div>

awesome, thanks a bunch Tony 🙂