How to create smooth animation for my sketch

p5.js Coding Questions
1

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?

image
image604×504 43.2 KB

2

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().

3

thx. it works:) but I have a new problem :grimacing: 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);
  rotate(radians(frameCount*100));
  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);
}
4

The fact that you moved your push loop into setup() was a good move :+1:. 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 particleRadii = [];

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));
    particleRadii.push(randomGaussian(100,20));
  }
  
}

function draw() { 
  background(220);
  angleMode(DEGREES);
  
  moveParticles();
  drawParticles();
}

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

function drawParticles() {
  
    noStroke(); fill(0);
  
    for(i=0;i<numParticles;i++) {
      //Notice I'm offseting x & y by the canvas center here
      x = centerX + particleRadii[i]*cos(particleAngles[i]);
      y = centerY + particleRadii[i]*sin(particleAngles[i]);
      
      ellipse(x,y,5);
    }
}

A small added point: To me, the variable name “particlesSpawn” is confusing, because it looks like you are using it to hold the array of angles. This is maybe not the most important point, but it was a bit confusing at first.

5

Finally, I’ve found what I want! https://www.instagram.com/p/CC3v7t0igR5/. I guess he somehow used noise function in particle radii change to achieve that smooth motion.

1 Like