# Help me to change the color

**URL:** <https://discourse.processing.org/t/help-me-to-change-the-color/30263>\
**Category:** Beginners\
**Created:** [May 24, 2021, 10:14pm UTC](https://discourse.processing.org/t/help-me-to-change-the-color/30263 "2021-05-24T22:14:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nico](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@Nico](https://discourse.processing.org/u/Nico)\
**Post date:** [May 24, 2021, 10:14pm UTC](https://discourse.processing.org/t/help-me-to-change-the-color/30263/1 "2021-05-24T22:14:52Z")

</div>

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?

\</\>

```auto
 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)
 
  }
 
}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [May 24, 2021, 11:14pm UTC](https://discourse.processing.org/t/help-me-to-change-the-color/30263/2 "2021-05-24T23:14:37Z")

</div>

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()`](https://p5js.org/reference/#/p5/lerpColor) and [`map()`](https://p5js.org/reference/#/p5/map):

```auto
		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](https://processing.org/tutorials/trig/)  
Recommended viewing: [Polar Coordinates - Nature of Code Lesson #3.4 · The Coding Train](https://thecodingtrain.com/learning/nature-of-code/3.4-polar-coordinates.html)

---

<div class="post-metadata">

**Author:** ![Nico](https://avatars.discourse-cdn.com/v4/letter/n/b5a626/32.png) [@Nico](https://discourse.processing.org/u/Nico)\
**Post date:** [May 25, 2021, 1:01am UTC](https://discourse.processing.org/t/help-me-to-change-the-color/30263/3 "2021-05-25T01:01:31Z")

</div>

Thank you very much, you have helped me a lot