# Making increments change direction?

**URL:** <https://discourse.processing.org/t/making-increments-change-direction/24202>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 28, 2020, 6:17pm UTC](https://discourse.processing.org/t/making-increments-change-direction/24202 "2020-09-28T18:17:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AlexW](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@AlexW](https://discourse.processing.org/u/AlexW)\
**Post date:** [September 28, 2020, 6:17pm UTC](https://discourse.processing.org/t/making-increments-change-direction/24202/1 "2020-09-28T18:17:19Z")

</div>

Hello,

I’m taking a processing class at university and I’m working on our first project which is to make a reproduction of a piece of artwork and add some interaction and animation to it.

So far I’ve come up with a nearly complete piece but I want the color gradients to increment darker to a point then turn around and increment lighter instead of just jumping back to the brighter color.

I am not sure how to make it behave the way I want it to but I’m sure it’s possible. We probably haven’t reached that point in the class yet.

This is my code.

```auto
int colorReds = 200;
int colorReds2 = 200;
int darkGreyR = 162;
int darkGreyG = 171;
int darkGreyB = 188;
int lightGrey = 222;
int yellowR = 255;
int yellowG = 195;
int yellowR2 = 255;
int yellowG2 = 195;
int yellowR3 = 255;
int yellowG3 = 195;
int blueB = 200;

void setup() {
  size(800, 800);
  surface.setLocation(110, 110);
  frameRate(15);
}
void draw() {
  background(255);
  
  //Color Increments
  colorReds --;
  yellowR --;
  yellowG --;
  yellowR2 --;
  yellowG2 --;
  yellowR3 --;
  yellowG3 --;
  blueB --;
  
  fill(colorReds, 0, 0);
  stroke (000);
  strokeWeight(7);
  rect(86, 98, 403, 399); //Big Red Rectangle
  
  fill(colorReds2, 0, 0);
  rect(750, 614, 53, 189); //Rectangle 19, Red
  
  fill(darkGreyR, darkGreyG, darkGreyB); // Dark Grey Rectangles
  rect(-4, -4, 189, 95); //Rectangle 1
  rect(-4, 303, 83, 299); //Rectangle 3
  rect(294, 504, 195, 104); //Rectangle 9
  rect(294, 615, 195, 92); //Rectangle 10
  
  fill(lightGrey, lightGrey, lightGrey); // Light Grey Rectangles
  rect(-4, 98, 83, 198); //Rectangle 2
  rect(192, -4, 297, 95); //Rectangle 5
  rect(86, 714, 201, 100); //Rectangle 8
  rect(294, 775, 195, 31); //Rectangle 12
  rect(496, 304, 121, 193); //Rectangle 14
  rect(624, 304, 119, 193); //Rectangle 15
  rect(496, 504, 247, 104); //Rectangle 16
  rect(496, 775, 247, 31); //Rectangle 18
  
  fill(yellowR, yellowG, 0); //Yellow Rectangles
  rect(-4, 609, 83, 198); //Rectangle 4
  fill(yellowR2, yellowG2, 0); //2
  rect(496, -4, 247, 95); //Rectangle 6
  fill(yellowR3, yellowG3, 0); //3
  rect(496, 98, 247, 199); //Rectangle 13
  
  fill(0, 0, 0); //Black Rectangles
  rect(86, 504, 201, 203); //Rectangle 7
  rect(294, 714, 195, 54); //Rectangle 11
  
  fill(0, 0, blueB); //Blue Rectangle
  rect(496, 615, 247, 153); //Rectangle 17
  
  fill(159, 193, 220); //Bluegrey Rectangle
  rect(750, -4, 53, 611); //Rectangle 18
  
  // Color Cycling Corrections
  if (colorReds <= 100) {
    colorReds = 200;
  }
  
  if (yellowR <= 155) {
  yellowR = 255;
  }
  if (yellowG <= 95) {
  yellowG = 195;
  } 
  if (yellowR2 <= 155) {
  yellowR = 255;
  }
  if (yellowG2 <= 95) {
  yellowG = 195;
  } 
  if (yellowR2 <= 155) {
  yellowR = 255;
  }
  if (yellowG2 <= 95) {
  yellowG = 195;
  } 
  if (blueB <= 100) {
  blueB = 200;
  }  
}

void mousePressed(){
  if(mouseX >86 && mouseX<489 && mouseY>98 && mouseY<497) {
  colorReds=255;
  }
  if(mouseX >750 && mouseX<803 && mouseY>614 && mouseY<803) {
  colorReds2=255;
  }
  if(mouseX >496 && mouseX<743 && mouseY>615 && mouseY<768) {
  blueB=255;
  }
  
  if(mouseX >-4 && mouseX<83 && mouseY>609 && mouseY<800) {
  yellowR=255;
  yellowG=195;
  }
  if(mouseX >496 && mouseX<743 && mouseY>-4 && mouseY<95) {
  yellowR2=255;
  yellowG2=195;
  }
  if(mouseX >496 && mouseX<743 && mouseY>98 && mouseY<297) {
  yellowR3=255;
  yellowG3=195;
  }
  
}

```

---

<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:** [September 28, 2020, 6:45pm UTC](https://discourse.processing.org/t/making-increments-change-direction/24202/2 "2020-09-28T18:45:39Z")

</div>

Without reading your code

Look at lerpColor in the regards

When amt Reaches 1 (use a additional if clause here, set a flag named colorDecreases to true and use lerpColor in a way, that the color decreases

---

<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:** [September 28, 2020, 10:41pm UTC](https://discourse.processing.org/t/making-increments-change-direction/24202/3 "2020-09-28T22:41:51Z")

</div>

Hello,

You may glean some insight from this:  
[https://processing.org/examples/bounce.html](https://processing.org/examples/bounce.html)

And all the other resources…

One of the best tools in a programmer’s tool chest is knowing the resources available to you and learning to navigate, filter, and use them.

A short list of resources to peruse:

> **Resources \< Click here to expand !**
>
> Explore the resources available here:
> 
> - The Processing _website_ has references, examples, tutorials, links to resources, etc.  
> [https://processing.org/](https://processing.org/)
> 
> - The Processing PDE (IDE) has lots to offer!  
> An exploration of the menu bar will reveal what is available; libraries, tools, local examples, and other goodies are in there.
> 
> - The Coding Train \< Experience the unbridled enthusiasm of Daniel Shiffman  
> [https://shiffman.net/](https://shiffman.net/)  
> [https://www.youtube.com/user/shiffman](https://www.youtube.com/user/shiffman)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> 
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> 
> - The source code can give insight if you are adventurous:  
> [GitHub - processing/processing: Source code for the Processing Core and Development Environment (PDE)](https://github.com/processing/processing)
> 
> - Explore Processing on GitHub:  
> [Processing Foundation · GitHub](https://github.com/processing)  
> [processing/core/src/processing/core/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java) \< Many of the Processing functions are here!
> 
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the menu.  
> In the education menu, there is a reference to the Coding Train.
> 
> - And the Internet. `:)`

`:)`

---

<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:** [September 28, 2020, 11:17pm UTC](https://discourse.processing.org/t/making-increments-change-direction/24202/4 "2020-09-28T23:17:49Z")

</div>

Hell again!

Some thoughts… this may be advanced.

If you work in HSB mode you can manipulate the brightness directly.

Incrementing and decrementing in steps is linear and a triangle waveform.

You may want to consider doing a bit of trigonometry for a nice smooth sinusoidal response.

`100/2 + 100/2*sin(theta)` gives a nice sinusoidal response between 0 and 100.

`:)`

---

<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:** [September 29, 2020, 12:08pm UTC](https://discourse.processing.org/t/making-increments-change-direction/24202/5 "2020-09-29T12:08:30Z")

</div>

Hello,

other approach:

at the moment you just say `--` (meaning -1) for every color

instead, you can say

```auto
 //Color Increments
  colorReds += colorRedsAdd ;

```

and then, also in draw() :

```auto

  // Color Cycling Corrections
  if (colorReds < 100) {
    colorReds = 102;
    colorRedsAdd = 7;
  }
  if (colorReds > 255) {
    colorReds = 255;
    colorRedsAdd = -5;
  }

```

color bounces like a ball in a Pong Game

I did this for red only…

I love Mondrian!

Chrisir

**Full Sketch**

```auto

int colorReds = 200;
int colorReds2 = 200;
int darkGreyR = 162;
int darkGreyG = 171;
int darkGreyB = 188;
int lightGrey = 222;
int yellowR = 255;
int yellowG = 195;
int yellowR2 = 255;
int yellowG2 = 195;
int yellowR3 = 255;
int yellowG3 = 195;
int blueB = 200;

int colorRedsAdd = -5; 

void setup() {
  size(800, 800);
  surface.setLocation(110, 110);
  // frameRate(15);
}
void draw() {
  background(255);

  //Color Increments
  colorReds += colorRedsAdd ;
  yellowR --;
  yellowG --;
  yellowR2 --;
  yellowG2 --;
  yellowR3 --;
  yellowG3 --;
  blueB --;

  fill(colorReds, 0, 0);
  stroke (000);
  strokeWeight(7);
  rect(86, 98, 403, 399); //Big Red Rectangle

  fill(colorReds2, 0, 0);
  rect(750, 614, 53, 189); //Rectangle 19, Red

  fill(darkGreyR, darkGreyG, darkGreyB); // Dark Grey Rectangles
  rect(-4, -4, 189, 95); //Rectangle 1
  rect(-4, 303, 83, 299); //Rectangle 3
  rect(294, 504, 195, 104); //Rectangle 9
  rect(294, 615, 195, 92); //Rectangle 10

  fill(lightGrey, lightGrey, lightGrey); // Light Grey Rectangles
  rect(-4, 98, 83, 198); //Rectangle 2
  rect(192, -4, 297, 95); //Rectangle 5
  rect(86, 714, 201, 100); //Rectangle 8
  rect(294, 775, 195, 31); //Rectangle 12
  rect(496, 304, 121, 193); //Rectangle 14
  rect(624, 304, 119, 193); //Rectangle 15
  rect(496, 504, 247, 104); //Rectangle 16
  rect(496, 775, 247, 31); //Rectangle 18

  fill(yellowR, yellowG, 0); //Yellow Rectangles
  rect(-4, 609, 83, 198); //Rectangle 4
  fill(yellowR2, yellowG2, 0); //2
  rect(496, -4, 247, 95); //Rectangle 6
  fill(yellowR3, yellowG3, 0); //3
  rect(496, 98, 247, 199); //Rectangle 13

  fill(0, 0, 0); //Black Rectangles
  rect(86, 504, 201, 203); //Rectangle 7
  rect(294, 714, 195, 54); //Rectangle 11

  fill(0, 0, blueB); //Blue Rectangle
  rect(496, 615, 247, 153); //Rectangle 17

  fill(159, 193, 220); //Bluegrey Rectangle
  rect(750, -4, 53, 611); //Rectangle 18

  // Color Cycling Corrections
  if (colorReds < 100) {
    colorReds = 102;
    colorRedsAdd = 7;
  }
  if (colorReds > 255) {
    //colorReds = 200;
    colorRedsAdd = -5;
  }

  if (yellowR <= 155) {
    yellowR = 255;
  }
  if (yellowG <= 95) {
    yellowG = 195;
  } 
  if (yellowR2 <= 155) {
    yellowR = 255;
  }
  if (yellowG2 <= 95) {
    yellowG = 195;
  } 
  if (yellowR2 <= 155) {
    yellowR = 255;
  }
  if (yellowG2 <= 95) {
    yellowG = 195;
  } 
  if (blueB <= 100) {
    blueB = 200;
  }
}

void mousePressed() {
  if (mouseX >86 && mouseX<489 && mouseY>98 && mouseY<497) {
    colorReds=255;
  }
  if (mouseX >750 && mouseX<803 && mouseY>614 && mouseY<803) {
    colorReds2=255;
  }
  if (mouseX >496 && mouseX<743 && mouseY>615 && mouseY<768) {
    blueB=255;
  }

  if (mouseX >-4 && mouseX<83 && mouseY>609 && mouseY<800) {
    yellowR=255;
    yellowG=195;
  }
  if (mouseX >496 && mouseX<743 && mouseY>-4 && mouseY<95) {
    yellowR2=255;
    yellowG2=195;
  }
  if (mouseX >496 && mouseX<743 && mouseY>98 && mouseY<297) {
    yellowR3=255;
    yellowG3=195;
  }
}

```