# Adding Color and music to Ripple effect

**URL:** <https://discourse.processing.org/t/adding-color-and-music-to-ripple-effect/16009>\
**Category:** Coding Questions\
**Created:** [December 1, 2019, 5:27am UTC](https://discourse.processing.org/t/adding-color-and-music-to-ripple-effect/16009 "2019-12-01T05:27:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Swagific](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@Swagific](https://discourse.processing.org/u/Swagific)\
**Post date:** [December 1, 2019, 5:27am UTC](https://discourse.processing.org/t/adding-color-and-music-to-ripple-effect/16009/1 "2019-12-01T05:27:06Z")

</div>

Hi im trying to create a ripple using mouse dragged. i have the code but i dont know how to change the color im hopping to have it be random whenever its dragged across, and for it to play music and stop once the mouse is released.

int cols=200;  
int rows=200;  
float[][] current= new float [cols][rows];  
float[][] past= new float [cols][rows];  
float damp=0.999;  
void setup()  
{  
size(1000,1000);  
cols=width;  
rows=height;  
current= new float [cols][rows];  
past= new float [cols][rows];  
}

void draw()  
{  
background(0);  
loadPixels();  
for(int i=1;i\<cols-1; i++){  
for(int j=1; j\<cols-1; j++){

```
  current[i][j] = (past[i-1][j]
  +past[i+1][j]
                    +past[i][j-1]+past[i][j+1])/2-
                     current[i][j];  
                     int b=i+j*cols;
                     float c=random(255);
                     current[i][j]=current[i][j]*damp;
                     pixels[b]= color(current[i][j]);

```

}  
}

updatePixels();  
float [][] temp=past;  
past=current;  
current=temp;  
}

void mouseDragged(){  
past[mouseX][mouseY]=500;

}

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 1, 2019, 5:48am UTC](https://discourse.processing.org/t/adding-color-and-music-to-ripple-effect/16009/2 "2019-12-01T05:48:49Z")

</div>

Inside the for loops you appoint a colour to a pixel:

```auto
pixels[b]= color(current[i][j]);

```

Because it’s only one value, it becomes a grey colour. Add two more values and you’ll have colour:

```auto
pixels[b]= color(current[i][j], 0, 0);

```

You could replace these 0’s work with a global value that randomises each time you drag the mouse.

---

<div class="post-metadata">

**Author:** ![Swagific](https://avatars.discourse-cdn.com/v4/letter/s/2bfe46/32.png) [@Swagific](https://discourse.processing.org/u/Swagific)\
**Post date:** [December 1, 2019, 5:42pm UTC](https://discourse.processing.org/t/adding-color-and-music-to-ripple-effect/16009/3 "2019-12-01T17:42:07Z")

</div>

I tried doing that earlier but it just randomized all the pixels on the screen not just those on the ripple effect

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 1, 2019, 6:07pm UTC](https://discourse.processing.org/t/adding-color-and-music-to-ripple-effect/16009/4 "2019-12-01T18:07:56Z")

</div>

> [@Swagific](#):
>
> it just randomized all the pixels on the screen

I see, it seems like my assumption of global variables isn’t working.

Another option is to save the ripple pixels to a PImage, and alter its colour with `tint` at the end of `void draw`. Easy to implement, but perhaps not the best solution performance wise.

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [December 1, 2019, 6:37pm UTC](https://discourse.processing.org/t/adding-color-and-music-to-ripple-effect/16009/5 "2019-12-01T18:37:57Z")

</div>

I just tested your Code on IOS and you might want to use pixels[b] = color(constrain(current[i][j],0,255)); because i got some random white spots inbetween and this removes them.

As for random color, i tried playing around with noise, but it only gives it a purple tint…