Doing a fade-in within a for loop

Programming Questions

cingraham

Doing a fade-in within a for loop

in Programming Questions • 2 years ago

Hello all,

I'm creating a modestly interactive area chart. The data is pulled from an array, which I activate with a for loop.

I'm doing mouseovers on the data points, so that a user can roll over the datapoint and have a small window appear with the data value. This part of it works fine. However, I'd like for the small window to fade in when the user mouses over, but I can't figure out how to do this within the context of the loop.

Now, I can do this manually by adjusting the alpha values, like so:

      if (sqrt(sq(disX0) + sq(disY0)) < ellipseSize/2 ) {
        //ellipse redraw
        fill(255);
        stroke(5, 55, 105);
        strokeWeight(2);
        ellipse(plotX1, d0, ellipseSize, ellipseSize);
        strokeWeight(1);

        noStroke();
        fill(250, a);
        rect(mouseX-25, mouseY-35, 50, 30);

        fill(5, 55, 105, a);
        rect(mouseX-25, mouseY-35, 50, 15);
        fill(255, a);
        textAlign(CENTER);
        text(q0, mouseX, mouseY-25);
        fill(100, a);
        text(d0Label, mouseX, mouseY-10);

        if (a < 255 ) {
          a += (255 - a) * easing;
        }
      }

However, since I've got a lot of data points I'm using an array, and a for loop, and I can't figure out how to get the same effect in the context of the following code:

for (int i = 0; i < data.length; i++) {

      float disX = plotX1 - mouseX;
      float x = plotX1;
      String Label = str(data[i]);
      String Quarter = quarter[i];
      if (dataMin < 0) {
        y = (newY - (map(data[i], dataMin, dataMax, 0, 80)) + mapConstant);
      }
      else {
        y = (newY - (map(data[i], dataMin, dataMax, 0, 80)));
      }
      float disY = y - mouseY;

      if (sqrt(sq(disX) + sq(disY)) < ellipseSize/2 ) {

        //ellipse redraw

        fill(255);
        stroke(5, 55, 105);
        strokeWeight(2);
        ellipse(x, y, ellipseSize, ellipseSize);
        strokeWeight(1);

        noStroke();
        fill(250, alph);
        rect(mouseX-25, mouseY+consA, 50, 30);
        fill(5, 55, 105, alph);
        rect(mouseX-25, mouseY+consA, 50, 15);
        fill(255, alph);
        textAlign(CENTER);
        text(Quarter, mouseX, mouseY+consB);
        fill(100, alph);
        text(Label, mouseX, mouseY+consC);

      }
      plotX1 += 25;
    }

Any suggestions? I've tried sticking the code to update the alpha variable all over the place, but to no avail. Note that all this code is within a "chart" class that gets initialized in setup and drawn in draw. Many thanks!

Replies(11)

PhiLho

Re: Doing a fade-in within a for loop

2 years ago

Classical culprit in Processing (see Technical FAQ): all animations you do in loop is lost, because any update is seen only after the end of draw(). So, I often say to use draw() as the main animation loop, which need to adapt to logic around it (wait for next draw() call, increment a counter, maintain a boolean to know something is going on, etc.).

allonestr..

Re: Doing a fade-in within a for loop

2 years ago

Or have a target alpha to ease to each frame.

cingraham

Re: Doing a fade-in within a for loop

2 years ago

Thanks much -- that Technical FAQ item is very helpful, and I *think* I'll be able to apply that method to these charts.

allonestring, could you elaborate on using a target alpha to ease each frame? I'm still fairly new to all this...

allonestr..

Re: Doing a fade-in within a for loop

2 years ago

Something like this [untested]. It this was easing an object to a position, I'd add a trap for when currentPosition is close enough to targetPosition and so stop easing. You may want to do the same here so that the code isn't trying to get closer and closer long past the point where you can tell the difference.

float targetAlpha = 200;
float easeFactor = 0.01;
float currentAlpha = 10;
void setup()
{
size(200, 200);
background(255);
}
void draw()
{
background(255);
noStroke();
fill(0, currentAlpha);
rect(20, 20, 160, 160);
currentAlpha += (targetAlpha - currentAlpha) * easeFactor;
}

cingraham

Re: Doing a fade-in within a for loop

2 years ago

Okay phi.lo, I've given this a shot but to no avail. Relevant code below:

hwdiChart chart1, chart2, chart3, chart4;
PFont axisFont;
PFont testFont;

float[] datapoint = {1.0, 3.5, -2.0, -1.5, 6};
float[] datapoint2 = {8.0, 3.5, 2.0, 1.5, 2};
float[] datapoint3 = {4.5, 3.5, -2.0, 11.5, -2};
float[] datapoint4 = {-7.8, 3.5, -2.0, 1.5, 2};
int alph = 0;
boolean over = false;

void setup() {
smooth();
size(600,400);

axisFont = loadFont("GillSansMT-10.vlw");
testFont = loadFont("GillSansMT-16.vlw");

chart1 = new hwdiChart(20, 100, 8, datapoint, alph);
chart2 = new hwdiChart(155, 100, 8, datapoint2, alph);
chart3 = new hwdiChart(290, 100, 8, datapoint3, alph);
chart4 = new hwdiChart(425, 100, 8, datapoint4, alph);
}

void draw() {
background(255);
chart1.drawhwdiChart();
chart2.drawhwdiChart();
chart3.drawhwdiChart();
chart4.drawhwdiChart();

if (over = true) {
alph += 1;
}
else
{
alph = 0;
}
}

"alph" is the alpha value. In the drawhwdiChart() function, I have a boolean (over) that gets turned on when the mouseover is in effect.

The applet runs, but the alpha appears to be stuck at zero. For grins and giggles I tried initializing the chart objects in draw. This caused the alpha value to increase regardless of whether or not a mouseover was in place.

What am I doing wrong here? How do I get that boolean working like it should? Thanks again!

Chris

PhiLho

Re: Doing a fade-in within a for loop

2 years ago

I see an obvious error: if (over = true) {
That's a pitfall of Java, inherited from C where it is worse (it works for lot more datatypes as well!).
Here, you assign true to the over variable, then test the result (always true, obviously).
That's one of the reason why I recommend to use booleans as such: if (over) is more than enough and, IMO, more readable.
Also I don't know when over is changed, if ever.

Oh, and are you sure that the drawhwdiChart() method uses the alph global variable?

cingraham

Re: Doing a fade-in within a for loop

2 years ago

Hmm I see your point on the (over = true) -- I've changed that, but I think I'm still misunderstanding something. Simplified version of the entire code is below -- you should be able to run this and see what I'm getting. Are you suggesting I take the code for the pop-ups out of the class and put it directly in draw()? I can't seem to wrap my head around how that would work. Thanks again for all your help!

testChart chart1, chart2;

float[] datapoint = {
1.0, 3.5, -2.0, -1.5, 6
};
float[] datapoint2 = {
8.0, 3.5, 2.0, 1.5, 2
};
int alph = 0; //alpha value
boolean over; //test for mouseover

void setup() {
smooth();
size(600, 400);
chart1 = new testChart(20, 200, 8, datapoint, alph);
chart2 = new testChart(20, 300, 8, datapoint2, alph);
}

void draw() {
background(255);

chart1.drawchart();
chart2.drawchart();

if (over) {
    alph += 10;
}
else {
    alph = 0;
}
}

class testChart {
int offsetX, offsetY, ellipseSize, a;
float[] data;

testChart(int offsetX_, int offsetY_, int ellipseSize_, float[] data_, int a_) {
    offsetX = offsetX_; //x-position
    offsetY = offsetY_; //y-position
    ellipseSize = ellipseSize_; //circle size
    data = data_; // data array
    a = a_; // alpha
}

void drawchart() {
    int plotX1 = offsetX;
    int newY = offsetY;
    stroke(5, 55, 105);
    fill(164, 199, 242);

    //draw circles based on data
    for (int i = 0; i < data.length; i++) {
      float x = plotX1;
      float y = newY -(data[i]);
      ellipse (x, y, ellipseSize, ellipseSize);
      plotX1 += 25;
    }
    plotX1 = offsetX;

    //create pop-up windows on circle mouseover
    for (int i = 0; i < data.length; i++) {

      float x = plotX1;
      float y = newY -(data[i]);
      float disX = x - mouseX;
      float disY = y - mouseY;
      if (sqrt(sq(disX) + sq(disY)) < ellipseSize/2 ) {
        over = true;
        fill(5, 55, 105, a); //this is the alpha that needs to fade in!
        rect(mouseX, mouseY-10, 50, 30);
      }
      else {
        over = false;
      }
      plotX1 += 25;
    }
}
}

PhiLho

Re: Doing a fade-in within a for loop

2 years ago

You don't use alph. It should be something like fill(5, 55, 105, alph); but my quick test doesn't work, and I lack time right now to fix that.

PhiLho

Re: Doing a fade-in within a for loop

2 years ago

Found 5 minutes...

testChart chart1, chart2;
float[] datapoint = {
1.0, 3.5, -2.0, -1.5, 6
};
float[] datapoint2 = {
8.0, 3.5, 2.0, 1.5, 2
};
int alph = 255; //alpha value
boolean over; //test for mouseover
void setup() {
size(600, 400);
smooth();
chart1 = new testChart(20, 200, 8, datapoint);
chart2 = new testChart(20, 300, 8, datapoint2);
}
void draw() {
background(255);
over = false;
chart1.drawchart();
chart2.drawchart();
if (over) {
if (alph > 10) {
alph -= 10;
}
}
else {
alph = 255;
}
}
class testChart {
int offsetX, offsetY, ellipseSize;
float[] data;
testChart(int offsetX_, int offsetY_, int ellipseSize_, float[] data_) {
offsetX = offsetX_; //x-position
offsetY = offsetY_; //y-position
ellipseSize = ellipseSize_; //circle size
data = data_; // data array
}
void drawchart() {
int plotX1 = offsetX;
int newY = offsetY;
stroke(5, 55, 105);
fill(164, 199, 242);
//draw circles based on data
for (int i = 0; i < data.length; i++) {
float x = plotX1;
float y = newY -(data[i]);
ellipse (x, y, ellipseSize, ellipseSize);
plotX1 += 25;
}
plotX1 = offsetX;
//create pop-up windows on circle mouseover
for (int i = 0; i < data.length; i++) {
float x = plotX1;
float y = newY -(data[i]);
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < ellipseSize/2 ) {
over = true;
fill(5, 55, 105, alph); //this is the alpha that needs to fade in!
rect(mouseX, mouseY-10, 50, 30);
}
plotX1 += 25;
}
}
}

cingraham

Re: Doing a fade-in within a for loop

2 years ago

You, sir, are a gentleman and a scholar:) This works perfectly -- THANKS!

So I understand that you took the alpha variable out of the constructor, which makes sense -- if the chart objects are being initialized in setup with an alpha of 0, that's never gonna be able to change, right?

It also looks like you didn't set over to false until draw(). This clearly makes a difference, but why? I tried doing an else statement after line 75 ( else { over = false;}) -- why does the former work but the latter doesn't?

This has been a huge help to me.

PhiLho

Re: Doing a fade-in within a for loop

2 years ago

Yes, the a in the class got the value of alph at object construction time but has no way to follow the changes on the original variable.
A cleaner solution could be to pass over and alph as parameters to draw(), perhaps.

over must be managed globally for both sets of charts.
Where it was, the true value was never seen in draw(): it was set for one circle, and reset for the next one!
I tried to move the over = false at the start of drawChart(), but same problem: it worked for one chart but not the other, as it was already reset. Only a really global management can work.

Top Reply