# Help me to change the color

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)

}

}
``````

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

Thank you very much, you have helped me a lot