# How to create smooth animation for my sketch

Hey! I have a simple circle array program.

``````var particles = [];

function setup() {
createCanvas(400, 400);

}

function draw() {
background(220);

angleMode(DEGREES);
translate(200,200);
for (var i = 0; i < 100; i++) {
particles.push(particle(random(0,360)));
}

}

function particle(angle) {
noStroke();
fill(0);
x=random(150,200)*cos(angle);
y=random(150,200)*sin(angle);
ellipse(x,y,10);
}
``````

But I don’t like how particles flickering. I try to change random() to noise() but faced with a problem that every particle in my array have the same spawn. How to write correct and smoothy noise function to 2 param for a particle?

It looks like you are re-initializing the particle positions randomly on every loop of draw(). I’m guessing, because it’s not clear to me–are you trying to create initial positions and then move the particles randomly from that starting position?

If so, one option would be to create an array of X and Y positions, then change each X and Y by a small random amount with each loop of draw().

thx. it works:) but I have a new problem x and y ® positions of all particles are static. have no idea how to make them move

``````var particles = [];
var particlesSpawn = [];

function setup() {
createCanvas(400, 400);

for(i=0;i<100;i++){
particlesSpawn.push(random(0,360));
}

}

function draw() {
background(220);
angleMode(DEGREES);
translate(200,200);
for (var i = 0; i < 100; i++) {
particle(particlesSpawn[i],i);
}

}

function particle(angle,n) {
noStroke();
fill(0);
x=map(noise(n*0.01),0,1,50,150)*cos(angle);
y=map(noise(n*0.01),0,1,50,150)*sin(angle);
ellipse(x,y,5);
}
``````

The fact that you moved your push loop into setup() was a good move . When I run this, a lot of dots in a mostly random ring rotate around the canvas center. But, this is happening because you use “rotate” to rotate all of the drawn particles around the canvas center. If I comment out that line, the particles are fixed in place.

Again I don’t know 100% what your goal is. Based on my guess, here is a slight variation that would accomplish something that might push you in the right direction. The main point is that the radius & angle of each particle is initiated at the start, and then every time draw() runs, you change each particle’s radius & angle by a small amount. I turned down the number of particles a little bit so that it’s easier to see what’s happening.

``````var particleAngles = [];

var numParticles=15;

//I'm doing this so that I can use the center values in the calculations later, and "translate" isn't necessary
var centerX = 200;
var centerY = 200;

function setup() {
createCanvas(400, 400);

for(i=0;i<numParticles;i++){
particleAngles.push(random(0,360));
}

}

function draw() {
background(220);
angleMode(DEGREES);

moveParticles();
drawParticles();
}

function moveParticles() {

for(i=0;i<numParticles;i++) {
particleAngles[i] += randomGaussian(0,2.5);
}

}

function drawParticles() {

noStroke(); fill(0);

for(i=0;i<numParticles;i++) {
//Notice I'm offseting x & y by the canvas center here