# I need help with the color change of the dots in the image I created

**URL:** <https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [June 25, 2021, 9:19am UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906 "2021-06-25T09:19:41Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![process](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@process](https://discourse.processing.org/u/process)\
**Post date:** [June 25, 2021, 9:19am UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/1 "2021-06-25T09:19:41Z")

</div>

I need help with the color change of the dots in the image I created

I added a colorwheel, I create a point with mousepress and drop it to the ground. The color I choose from Colorwheel changes the color of the dots on the whole screen. However, the falling point should stay in the color I chose first, and its color should not change. After changing the color from ColorWheel the new dots should be in the new color.

Note: I do not know the rules such as asking questions and opening topics very well. I’m sorry in advance if I’m missing something.

```auto
 import controlP5.*;
ControlP5 gui;

color renk;

int liquidity = 10;
int r = 2;

ArrayList <Particle> all = new ArrayList<Particle>();
float[] h;

void setup() 
{
  size(1000, 600);

  gui = new ControlP5(this);
  h = new float[width];
  noSmooth();
  frameRate(60);
  background(255);
  //fill(255);

  gui.addColorWheel("renk", 840, 10, 120)
    .setRGB(color(0, 45, 90));
}

void keyPressed() 
{
  for (int i = 0; i<width; i++) 
  {
    h[i] = 0;
  }
}

void draw() 
{
  rect(-1, -1, width, height);
  if (mouseY<height-h[constrain(mouseX, 0, width-1)]&&mousePressed) 
  {
    for (int i = 0; i<40; i++) 
    {
      all.add(new Particle(mouseX, mouseY));
      stroke(renk);
    }
  }
  for (int i = 0; i<all.size(); i++) 
  {
    all.get(i).show();
  }
  for (int i = 0; i<all.size(); i++) 
  {
    if (all.get(i).dead)
    {
      all.remove(i);
      i--;
    }
  }
  for (int i = 0; i<width; i++) //düşen noktaların sadece düştüğü yerde kalması düşerken oluşturduklarının silinmesi için

  {
    line(i, height, i, height-h[i]);
  }
  for (int n = 0; n<liquidity; n++) //
  {
    for (int i = 1; i<width; i++) 
    {
      if (abs(h[i]-h[i-1])>3) 
      {
        float avg = (h[i]+h[i-1])/2;
        h[i] = avg;
        h[i-1] = avg;
      }
    }
  }
}

class Particle 
{

  boolean dead = false;
  float x, y, vx, vy;
  float px, py;
  Particle(int xp, int yp) 
  {
    x = xp;
    y = yp;
    px = x;
    py = y;
    float d = random(TWO_PI);
    float l = random(r/PI, r);
    vx = cos(d)*l;
    vy = sin(d)*l;
  } 

  void show() 
  {
    //set((int)x, (int)y, color(renk));
    line(x, y, px, py);
    px = x;
    py = y;
    x+=vx;
    y+=vy;
    vy+=0.1;
    if (x!=constrain(x, 0, width-1)) 
    {
      dead = true;
    } else 
    {
      if (y>height-h[(int)x]) 
      {
        h[(int)x]+=1;
        dead = true;
      }
    }
  }
}

```

---

<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:** [June 25, 2021, 9:41am UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/2 "2021-06-25T09:41:18Z")

</div>

you can edit your post

select the code section with the mouse and click the `</>` in the small command bar

then save

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 25, 2021, 9:49am UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/3 "2021-06-25T09:49:03Z")

</div>

> [@process](#):
>
> I do not know the rules such as asking questions and opening topics very well. I’m sorry in advance if I’m missing something.

Hello,

Welcome to the community.

Links to guidelines:

- [Processing FAQ - Frequently asked questions](https://discourse.processing.org/faq)
- [p5.js Community Statement](https://p5js.org/community/)
- [Guidelines - Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147/4)
- [Guidelines - Answering Questions](https://discourse.processing.org/t/guidelines-answering-questions/2145/1)

Please format your code when posting:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

**Author:** ![process](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@process](https://discourse.processing.org/u/process)\
**Post date:** [June 25, 2021, 8:18pm UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/4 "2021-06-25T20:18:41Z")

</div>

Thank you,

Now, it looks good

---

<div class="post-metadata">

**Author:** ![process](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@process](https://discourse.processing.org/u/process)\
**Post date:** [June 25, 2021, 8:21pm UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/5 "2021-06-25T20:21:04Z")

</div>

thanks,  
I will read the links you shared when I get the chance, for now I have taken care of the code image.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 26, 2021, 9:33am UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/6 "2021-06-26T09:33:08Z")

</div>

Hello,

> [@process](#):
>
> After changing the color from ColorWheel the new dots should be in the new color.

Add a color variable for each particle to your particle class.  
Apply the color in show() in the class.

In draw():

```auto
color col = renk;
all.add(new Particle(mouseX, mouseY, col));

```

Nice formatting!

`:)`

---

<div class="post-metadata">

**Author:** ![process](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@process](https://discourse.processing.org/u/process)\
**Post date:** [June 27, 2021, 1:18pm UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/7 "2021-06-27T13:18:51Z")

</div>

Hi Glv,

Thank you for the answer. I tried the code as you stated but unfortunately I couldn’t run the code. What am I doing wrong?

```auto
import controlP5.*;
ControlP5 gui;

color renk;

int liquidity = 10;
int r = 2;

ArrayList <Particle> all = new ArrayList<Particle>();
float[] h;
  
void setup() 
{
  size(1000, 600);

  gui = new ControlP5(this);
  h = new float[width];
  noSmooth();
  frameRate(60);
  background(255);
  //fill(255);

  gui.addColorWheel("renk", 840, 10, 120)
    .setRGB(color(0, 45, 90));
   
  stroke(renk);
}

void keyPressed() 
{
  for (int i = 0; i<width; i++) 
  {
    h[i] = 0;
    //color(renk);
  }
}

void draw() 
{

  rect(-1, -1, width, height);
  if (mouseY<height-h[constrain(mouseX, 0, width-1)]&&mousePressed) 
  {
    for (int i = 0; i<40; i++) 
    {
      all.add(new Particle(mouseX, mouseY));
      stroke(renk);
    }
  }
  for (int i = 0; i<all.size(); i++) 
  {
    all.get(i).show();
    stroke(renk);
  }
  for (int i = 0; i<all.size(); i++) 
  {
    if (all.get(i).dead)
    {
      all.remove(i);
      i--;
    }
  }
  for (int i = 0; i<width; i++) 

  {
    line(i, height, i, height-h[i]);
  }
  for (int n = 0; n<liquidity; n++) 
  {
    for (int i = 1; i<width; i++) 
    {
      if (abs(h[i]-h[i-1])>3) 
      {
        float avg = (h[i]+h[i-1])/2;
        h[i] = avg;
        h[i-1] = avg;
      }
    }
  }
}

class Particle 
{
 
  boolean dead = false;
  float x, y, vx, vy;
  float px, py;
  Particle(int xp, int yp) 
  {
    color col = renk;
    x = xp;
    y = yp;
    px = x;
    py = y;
    float d = random(TWO_PI);
    float l = random(r/PI, r);
    vx = cos(d)*l;
    vy = sin(d)*l;
  } 

  void show() 
  {
    //set((int)x, (int)y, color(renk));
    line(x, y, px, py);
    px = x;
    py = y;
    x+=vx;
    y+=vy;
    vy+=0.1;
   
       if (x!=constrain(x, 0, width-1)) 
    {
      dead = true;
    } else 
    {
      if (y>height-h[(int)x]) 
      {
        h[(int)x]+=1;
        dead = true;
      }
    }
  }
}

```

Regards,

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 27, 2021, 1:59pm UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/8 "2021-06-27T13:59:12Z")

</div>

Keep trying…

You may have to learn about object- oriented programming first to understand what to do.

I provided enough of a hint.

References:

- [Objects \ Processing.org](https://processing.org/tutorials/objects/)
- [class \ Language (API) \ Processing 3+](https://processing.org/reference/class.html)
- [Object \ Language (API) \ Processing 3+](https://processing.org/reference/Object.html)
- [Using Objects - Happy Coding](https://happycoding.io/tutorials/processing/using-objects)

`:)`

---

<div class="post-metadata">

**Author:** ![process](https://avatars.discourse-cdn.com/v4/letter/p/cc9497/32.png) [@process](https://discourse.processing.org/u/process)\
**Post date:** [June 27, 2021, 3:48pm UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/9 "2021-06-27T15:48:03Z")

</div>

i keep going and i will find 😉

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 27, 2021, 10:32pm UTC](https://discourse.processing.org/t/i-need-help-with-the-color-change-of-the-dots-in-the-image-i-created/30906/10 "2021-06-27T22:32:15Z")

</div>

Take a look at examples here:  
_[The Nature of Code](https://natureofcode.com/book/chapter-4-particle-systems/)_

They are adding _lifespan_ to a particle.  
You want to add a color variable and apply color to your particle.

There are resources (tutorials, references, examples) here:  
_[processing.org](http://processing.org)_

One reference is color:  
_[color() \ Language (API) \ Processing 3+](https://processing.org/reference/color_.html)_

`:)`