Making increments change direction?

Processing Coding Questions
1

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.

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;
  }
  
}
2

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

3

Hello,

You may glean some insight from this:
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:

:)

4

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.

:)

1 Like
5

Hello,

other approach:

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

instead, you can say

 //Color Increments
  colorReds += colorRedsAdd ;

and then, also in draw() :


  // 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


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;
  }
}