# Changing colours

**URL:** <https://discourse.processing.org/t/changing-colours/12390>\
**Category:** Coding Questions\
**Created:** [June 29, 2019, 8:27pm UTC](https://discourse.processing.org/t/changing-colours/12390 "2019-06-29T20:27:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![karan26](https://avatars.discourse-cdn.com/v4/letter/k/df788c/32.png) [@karan26](https://discourse.processing.org/u/karan26)\
**Post date:** [June 29, 2019, 8:27pm UTC](https://discourse.processing.org/t/changing-colours/12390/1 "2019-06-29T20:27:44Z")

</div>

hii,i want to change the colour of square with respect to change in the size of the square .i want dark colour in the centre and light colour on the edges. here is my code can anybody tell me what should i do?

```auto
int squareSize=6;
final float DIFF_SIZE=1;
final int MIN_COLOUR=1;
final int MAX_COLOUR=10;
final float INIT_RED=100,INIT_GREEN=50,INIT_BLUE=80;
final float FINAL_RED=255,FINAL_GREEN=200,FINAL_BLUE=250;
final float MAX_SIZE=40;
final float X_SPACING =10;
final float Y_SPACING=10;
 float squareX,squareY;
void setup(){
size(600,600);}

void draw()
{
 squareX=mouseX-squareSize/2;
squareY=mouseY-squareSize/2;
  background(255);

 drawRowsOfBlocks();

 }

    
  void drawOneBlock()
  {
    
   
    rect(squareX,squareY,squareSize,squareSize);
    for(int i=MIN_COLOUR; mousePressed && i <=MAX_COLOUR/10; i++)
  { float redValue=INIT_RED+(i-MIN_COLOUR)/(MAX_COLOUR-MIN_COLOUR)*(FINAL_RED-INIT_RED);
    float greenValue=INIT_GREEN+(i-MIN_COLOUR)/(MAX_COLOUR-MIN_COLOUR)*(FINAL_GREEN-INIT_GREEN);
    float blueValue=INIT_BLUE+(i-MIN_COLOUR)/(MAX_COLOUR-MIN_COLOUR)*(FINAL_BLUE-INIT_BLUE);  
    fill(redValue,greenValue,blueValue);
    rect(squareX,squareY,squareSize,squareSize);
    squareSize+=DIFF_SIZE;
  }
  if (squareSize>MAX_SIZE)
  {
    squareSize=6;}
  }
  
  void drawRowsOfBlocks()
  { drawOneBlock();
  
for (int i=1;keyPressed&& i<=2;i++)
    { drawOneBlock();
    
 float squareY2;
 squareY2=squareY+squareSize+Y_SPACING;
squareY=squareY2;
 }}

```

---

<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:** [June 30, 2019, 8:40am UTC](https://discourse.processing.org/t/changing-colours/12390/2 "2019-06-30T08:40:54Z")

</div>

Good day karan26,

Do you mean you want to fill the square with a single, dark colour and have a light coloured edge around it? If so, [stroke()](https://processing.org/reference/stroke_.html) (see the second example) should suffice. Or did you have something else in mind?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 1, 2019, 1:36am UTC](https://discourse.processing.org/t/changing-colours/12390/3 "2019-07-01T01:36:37Z")

</div>

-a- your code is not usable, please repair the above code posting  
by insert the formatted code ( IDE [Ctrl][t] )  
into the

```auto
</> code tag

```

looks like  
```  
type or paste code here  
```

* * *

-b- if you want to use rectangles with different fill colors  
in overlay

- use noStroke() in setup() {}
- start with draw the biggest first!  
and the smaller ones ( with a different fill color ) over it.

* * *

-c- your use of keyPressed and mousePressed  
inside FOR loops surprised me  
interesting idea ++++

---

<div class="post-metadata">

**Author:** ![karan26](https://avatars.discourse-cdn.com/v4/letter/k/df788c/32.png) [@karan26](https://discourse.processing.org/u/karan26)\
**Post date:** [July 2, 2019, 12:39pm UTC](https://discourse.processing.org/t/changing-colours/12390/4 "2019-07-02T12:39:57Z")

</div>

I want to get different colours.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 2, 2019, 2:45pm UTC](https://discourse.processing.org/t/changing-colours/12390/5 "2019-07-02T14:45:23Z")

</div>

It seems like you want a radial gradient with squares rather than ellipses. You can change ellipse to rect in this example:

[https://processing.org/examples/radialgradient.html](https://processing.org/examples/radialgradient.html)

It is also possible to do this with PShape, or with PShader, or with a mask. It depends on the specifics of what you are trying to accomplish.

For past discussions see:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/21891/gradient-fill-pshape)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.