Rotation / sound reactive / stopping drawing

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)?

``````var song;

function setup() {
// URL copied from the Glitch assets folder
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
}
}

``````
1 Like

Welcome to the forum!

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

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

1 Like

awesome, thanks a bunch Tony