# Make two characters change color after colliding

**URL:** <https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230>\
**Category:** Coding Questions\
**Created:** [December 21, 2021, 5:25pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230 "2021-12-21T17:25:32Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mpsch](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@mpsch](https://discourse.processing.org/u/mpsch)\
**Post date:** [December 21, 2021, 5:25pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/1 "2021-12-21T17:25:32Z")

</div>

I want to make an animation to persuade people to get vaccinated for a school project. I want when a “person” that has red head which indicates that he is not vaccinated, gets in touch with the vaccine change his color to green

class Vaccine  
{  
float x, y, size, speedX, speedY;  
PImage imageVaccine;

Vaccine(float xx, float yy, float vs, float spX, float spY)  
{  
x = xx;  
y = yy;  
speedX = spX;  
speedY =spY;  
imageVaccine = loadImage(“vaccine.png”);  
size = 50;  
}  
void display()  
{

```
image(imageVaccine, x, y, size, size);

```

}  
void moveLeft()  
{  
x = x - speedX;

}

void moveRight()  
{  
x = x + speedX;

}

void moveUp()  
{  
y = y - speedY;  
}

void moveDown()  
{  
y = y + speedY;  
}  
float getX()  
{  
return x;  
}  
float getY()  
{  
return y;  
}  
float getSize()  
{  
return size;  
}  
void setRed(int r)  
{  
r = 0;  
}  
void setGreen(int g)

{

g=255;  
}  
void setBlue(int b)  
{  
b=0;  
}

```auto
class People
{
  color c;
  float xpos;
  float ypos;
  float size;
  boolean vstatus;
  int red, green, blue;
  People ( boolean vs, float x, float y, int s, int r, int g, int b)
  {
    vstatus=vs;
    xpos = x;
    ypos = y;
    size = s;
    green = g;
    red = r;
    blue = b;
   

 
 
  if (vs==true) {c=color (0,240,0);}
    else {c=color (250,0,0);}
    
    xpos=x;
    ypos=y;
    size=s;
  }
  
  void display()
{
  fill(red,green,blue);
ellipse(xpos,ypos,size,size);
ellipse(xpos,ypos,size,size);
}

 float getX()
  {
    return xpos; 
  }
  float getY()
  {
    return ypos; 
  } 
  float getSize()
  {
    return size; 
  }
  
}
   void setRed(int r)
  {
    r = 0;
  }
  void setGreen(int g)
 
 {
 
  g=255;
  }
  void setBlue(int b)
{
b=0;  
}
Vaccine v;
People p1, p2;

void setup()
  {
  size(800,800);
  v= new Vaccine(100,300,400,15,5);
   p1 = new People(false,255,200,150,0,240,0);
  p2 = new People(true,585,200,150,250,0,0);
  }

void draw()
  {
  background(255);
 v.display();
  p1.display();

  p2.display();
   if(dist(v.getX(),v.getY(),p2.getX(),p2.getY()) <= v.getSize()/2+p2.getSize()/2 )
   {
     p2.setRed(0);
     p2.setGreen(255);
     p2.setBlue(0);
  }
  }

void keyPressed() 
{
  if (key == CODED) 
  {
    if (keyCode == LEFT) 
    {
      v.moveLeft();    
    } 
    else if (keyCode == RIGHT) 
    {
      v.moveRight();
    } 
  }

  if (key == CODED) 
  {
    if (keyCode == UP)
    {
      v.moveUp();   
    } 
    else if (keyCode == DOWN)
    {
      v.moveDown();
    } 
  }
```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 21, 2021, 7:21pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/2 "2021-12-21T19:21:10Z")

</div>

Hi @mpsch,

Welcome to the forum! 😉

Please format your code by using the `</>` button when editing a message or putting three backticks around your code like this: ``` code ``` → `code`.

In your post, there are three main things to solve:

- Storing the color information for each person (or if the person is vaccinated or not…)
- Detecting a collision between the vaccine and a non vaccinated person
- Change the color of that person

Could you tell us what you have so far and what is not working?

---

<div class="post-metadata">

**Author:** ![mpsch](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@mpsch](https://discourse.processing.org/u/mpsch)\
**Post date:** [December 22, 2021, 2:22pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/3 "2021-12-22T14:22:09Z")

</div>

```auto

class Vaccine
{
float x, y, size, speedX, speedY;
PImage imageVaccine;

Vaccine(float xx, float yy, float vs, float spX, float spY)
{
x = xx;
y = yy;
speedX = spX;
speedY =spY;
imageVaccine = loadImage(“vaccine.png”);
size = 50;
}
void display()
{

image(imageVaccine, x, y, size, size);
}
void moveLeft()
{
x = x - speedX;

}

void moveRight()
{
x = x + speedX;

}

void moveUp()
{
y = y - speedY;
}

void moveDown()
{
y = y + speedY;
}
float getX()
{
return x;
}
float getY()
{
return y;
}
float getSize()
{
return size;
}
void setRed(int r)
{
r = 0;
}
void setGreen(int g)

{

g=255;
}
void setBlue(int b)
{
b=0;
}

class People
{
  color c;
  float xpos;
  float ypos;
  float size;
  boolean vstatus;
  int red, green, blue;
  People ( boolean vs, float x, float y, int s, int r, int g, int b)
  {
    vstatus=vs;
    xpos = x;
    ypos = y;
    size = s;
    green = g;
    red = r;
    blue = b;
   

 
 
  if (vs==true) {c=color (0,240,0);}
    else {c=color (250,0,0);}
    
    xpos=x;
    ypos=y;
    size=s;
  }
  
  void display()
{
  fill(red,green,blue);
ellipse(xpos,ypos,size,size);
ellipse(xpos,ypos,size,size);
}

 float getX()
  {
    return xpos; 
  }
  float getY()
  {
    return ypos; 
  } 
  float getSize()
  {
    return size; 
  }
  
}
   void setRed(int r)
  {
    r = 0;
  }
  void setGreen(int g)
 
 {
 
  g=255;
  }
  void setBlue(int b)
{
b=0;  
}
Vaccine v;
People p1, p2;

void setup()
  {
  size(800,800);
  v= new Vaccine(100,300,400,15,5);
   p1 = new People(false,255,200,150,0,240,0);
  p2 = new People(true,585,200,150,250,0,0);
  }

void draw()
  {
  background(255);
 v.display();
  p1.display();

  p2.display();
   if(dist(v.getX(),v.getY(),p2.getX(),p2.getY()) <= v.getSize()/2+p2.getSize()/2 )
   {
     p2.setRed(0);
     p2.setGreen(255);
     p2.setBlue(0);
  }
  }

void keyPressed() 
{
  if (key == CODED) 
  {
    if (keyCode == LEFT) 
    {
      v.moveLeft();    
    } 
    else if (keyCode == RIGHT) 
    {
      v.moveRight();
    } 
  }

  if (key == CODED) 
  {
    if (keyCode == UP)
    {
      v.moveUp();   
    } 
    else if (keyCode == DOWN)
    {
      v.moveDown();
    } 
  }

```

---

<div class="post-metadata">

**Author:** ![mpsch](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@mpsch](https://discourse.processing.org/u/mpsch)\
**Post date:** [December 22, 2021, 2:27pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/4 "2021-12-22T14:27:41Z")

</div>

Hello and thanks for trying to help me! I am trying to make a person that is not vaccinated with a red head change his Color. I have used the dist method to make that possible. More specifically I made a vaccine that the user is able to move with the arrow keys. When the vaccine collides with the non vaccinated person I want his Color to change from red to green which indicates that he got vaccinated. I tried to do this but when I put the p2.setRed(0), p2.setGreen (255) etc it doesn’t work and I don’t know how to fix that

---

<div class="post-metadata">

**Author:** ![Brahvim](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brahvim/32/14756_2.png) [@Brahvim](https://discourse.processing.org/u/Brahvim)\
**Post date:** [December 22, 2021, 2:52pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/5 "2021-12-22T14:52:31Z")

</div>

**You named the variables something else!** The variables that handle colors in the `People` class are called `red`, `green`, and `blue`!

Please note that `r`, `g`, and `b` are destroyed once the class’ constructor is done working.

Also, `red()`, `green()` and `blue()` are functions in Processing. Please try to name your variables something else, if possible - to avoid ‘confusion’ (though it isn’t confusing, this is probably a good programming practice…).

---

<div class="post-metadata">

**Author:** ![mpsch](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@mpsch](https://discourse.processing.org/u/mpsch)\
**Post date:** [December 27, 2021, 12:37pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/6 "2021-12-27T12:37:47Z")

</div>

I got really confused how should I name these variables and where is the mistake in my code?How can I correct it?

---

<div class="post-metadata">

**Author:** ![Brahvim](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/brahvim/32/14756_2.png) [@Brahvim](https://discourse.processing.org/u/Brahvim)\
**Post date:** [December 30, 2021, 1:56pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/7 "2021-12-30T13:56:03Z")

</div>

The `People` method inside the `People` class is a constructor - constructors have the same name as the class.

```auto
People ( boolean vs, float x, float y, int s, int r, int g, int b)
  {
    vstatus=vs;
    xpos = x;
    ypos = y;
    size = s;
    green = g;
    red = r;
    blue = b;
   

 
 
  if (vs==true) {c=color (0,240,0);}
    else {c=color (250,0,0);}
    
    xpos=x;
    ypos=y;
    size=s;

```

Here, you made the variables `g`, `r` and `b` as arguments to the method. However, these variables go “out of scope” later, so you cannot use them in the class’ methods.

You instead saved their values in the variables `green`, `red` and `blue`, which are a part of the class. **Use them instead!**

About the naming part - name them whatever you like - how about `p_Color` or just `pColor`? You decide that as the programmer!  
It’s not necessary to do so, though. I told you to do this only because Processing already has something (There are methods called that. Also, you have a variable called ‘size’, which is another Processing method!) called the same, which _could_ get confusing later - therefore the suggestion. **It will still work with the same names** since there is of course, difference between a variable and a method, and so you may ignore this suggestion.

(The problem occurs when you get to languages such as JavaScript, where you often need to write a function’s ‘identifier’/name without the brackets, and if you were to name a variable the same name as another `function`', it would change the `function` to a variable instead! Which makes it impossible to call it again, without redefining it.)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 30, 2021, 2:43pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/8 "2021-12-30T14:43:07Z")

</div>

Yeah, instead of r,g,b you can also just use data type  
color

One of the purposes of the constructor is to copy the parameters into the class’s own variable so that their scope is the entire class (and not only the constructor)

The constructor instantiates one object from the class.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 30, 2021, 2:51pm UTC](https://discourse.processing.org/t/make-two-characters-change-color-after-colliding/34230/9 "2021-12-30T14:51:46Z")

</div>

> [@mpsch](#):
>
> ```auto
> void setRed(int r)
> {
> r = 0;
> }
> 
> ```

For example here: r is the parameter

The name that is used in the entire class is red, not r.

So change to red=r;

Copying the parameter r into the class’s variable red which is used in the entire class.