How to lower one number when the other rises?

Question

I take a value from the mouse (mouseX) position in Processing, as this value gets higher, I want the amount of boxes that are rendered to lower in steps of 5 (rotStep).

I did a lot of reading and found out the method I should use is called 'Negative correlation' or at least I think it is. I have never had high-grade math so I'm pretty much in the dark here. Maybe there is a function that already exists to do this. After a lot of googling I came in here to ask.

Tried dividing the mouseX input by itself and some other random sums but it seems this might be more complicated than I anticipated.

I am trying to get into generative art generation and could use a hint to get further with my attempt of rendering more boxes (quads) as the mouseX value lowers.

void setup() {
  pixelDensity(displayDensity());
  size(500, 500);
  background(0);
  noFill();
  stroke(255);
}

void draw() {
  translate(width/2, height/2);
  ellipse(0, 0, 50, 50);
  background(0);
  mouseX= constrain(mouseX, 1, width);
  mouseY= constrain(mouseY, 1, height);

  float rotationMax = 90;
  float rotStep = (mouseX/15)+5;

  //I need to add a negative correlation so the number
  //of squares lowers as the mouseX position gets higher
  //and all this in steps of 5


  float quadSize = mouseX;
  float qs = quadSize;

  for (float i=0; i<rotationMax; i+=rotStep) {
    float deg = rotStep;
    float rad = radians(deg);
    stroke(255);
    strokeWeight(1);
    rotate(rad);
    quad(-qs, -qs, qs, -qs, qs, qs, -qs, qs);
  }
}

The rotStep variable should decrease when the mouseX variable increases and vice versa. The variable rotStep should also increase or decrease in steps of 5.

Answer 1

The best advice I can give you is to get out a piece of paper and a pencil, and draw a table of mouse positions and the number of boxes you want. It might look like this:

mouseX  boxes
---------------
0      | 50
100    | 40
200    | 30
300    | 20
400    | 10
500    | 0

This is just an example, so your numbers would probably be different. But the idea is to have a general mapping of mouseX to the number of boxes you want to draw.

Once you have that, then you can try to find an equation that gets you from mouseX to your box count. That might be a single equation, or it might involve if statements to bucket values together.

You can get a "negative correlation" by subtracting from the maximum possible value, or by using mouseX as a divisor.

float reverseMouseX = width - mouseX;
float inverseMouseX = 1 / mouseX;

For both of these approaches, as mouseX increases, the value of the variable will decrease. Then you can use these values in your equation or in your if statement logic.

To get to the example table I showed above, I might do something like this:

int boxes = (width - mouseX) / 10;

This is a general approach, but you can apply it to your goal to come up with a specific solution.

Good luck!