Help me to change the color

p5.js Beginners
1

I want the small circles to be green when they approach the big circle and change to red when they move away from it, can you help me?

</>

 let puntos = 80/3
let angulo = 360/puntos

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES)
}


function draw() {
  background(30);
  
  
  
  translate (width/2, height/2)
   fill(255, 255, 255,200);
  stroke(255, 0, 0, 120);
  strokeWeight(15)
 
  ellipse(0,0, 30,30);
 
  ellipse(0,0,30,30);
  fill(255,0,0);
  noStroke()
  


  
  let x, y
  for(let p=1;p<=puntos; p++){
    rotate(angulo)
    if(p%2==0){ 
    x= cos(angulo +frameCount)*70
    y= sin(angulo +frameCount)*30
   } 
    else{
     x= cos(angulo +frameCount)*40
    y= sin(angulo +frameCount)*70
  }
  ellipse (x,y,5)
 
  }
 
}
2

If you ignore the rotation, what you have is two points moving in an ellipse around a center point. Calculating the proximity of the point is a simple matter of applying the pythagorean theorem to your x and y points. The distance from the center for each point is sqrt(x * x + y * y). You know the range of possible distances: from 30 at the closest approach to 70 at the furthest distance, so setting the color can be done using lerpColor() and map():

		let dist = sqrt(x * x + y * y);
		// When sin is 1/-1 and cos is 0 the first dot will be at its closest approach: 30
		// When cos is 1/-1 and sin is 0 the second dot will be at its closest approach: 40
		// Both dots will reach there furthest distance at the opposite time, at 70
		// Lerp will linearly interpolate colors from green to red based on distance from the center.
		fill(lerpColor(color('green'), color('red'), map(dist, 30, 70, 0, 1)));
		ellipse(x, y, 5)

Recommended reading: Trigonometry Primer \ Processing.org
Recommended viewing: Polar Coordinates - Nature of Code Lesson #3.4 · The Coding Train

2 Likes
3

Thank you very much, you have helped me a lot