Mouse clicked + fade in and fade out

HANkae1346

I have 4 lines of text that I want to fade in and fade out when the mouse is clicked. I want each line to display consecutively(by clicking, the first line fades in. if i click again, it fades out, and then if i click again, the next line displays). How would I go about doing this? Would really appreciate any advice as Im a beginner

Eeyorelife

What do you have so far? What have you tried? Do you know how to diaplay a line of text? Do you know how to use variables? Do you know how to use the function mouseClicked()?

https://processing.org/reference/int.html https://processing.org/reference/text_.html https://processing.org/reference/mouseClicked_.html

HANkae1346

Yes I know how how to display a line of text. I want the text to display over a sketch of mine and I'm just struggling how to format my code - whether to make a class and how to work that into my main code.

This is my main code:

PFont sourceSans;

float t;
float theta, theta2;
int maxFrameCount = 150;
float numRot = 25;
float numOne = 50;
float numTwo = 150;

int a = 49;
int b = 44;

void setup() {
  size(700, 600);
  noFill();
  strokeJoin(ROUND);
  strokeCap(ROUND);
  frameRate(35);

 //text
  textAlign(CENTER);
  sourceSans = createFont ("SourceSansPro-Light", 10);
  textFont (sourceSans);


}

void draw() {
  background(255);
  translate(width/2, height/2);

  t = (float)frameCount/maxFrameCount;
  theta = TWO_PI*t;                    //angle of rotation for wave1
  theta2 = TWO_PI*t*2;                  //angle of rotation for wave2

  for ( int x= -500; x <= 500; x+= 5) {

    float offSet = (x*a); 
    float offSetRot = (x*b); 
    float w1 = map(sin(-theta+offSet), -1, 1, -numOne, numOne);        //wave1 along sine curve
    float w2 = map(cos(-theta2+offSet), -1, 1, -numTwo, numTwo);        //wave2 along cosine curve
    float rotValue = map(sin(-theta+offSetRot), -1, 1, numRot, -numRot);

    stroke(171,232,242);        //stroke color changes according to mouse location
    strokeWeight(0.5);
    waves(x, 0, w1, w2, rotValue);


  }

  //TEXT

}


void waves(float xPos, float yPos, float s1, float s2, float rot) {        //code waves of repeating quads
  pushMatrix();
  translate(xPos, yPos);
  rotate(TWO_PI*(rot/300));
  quad( mouseY/2, 0+numOne, s2, 0, mouseY/2, mouseY/2, 0, s1);     
  popMatrix();
}

and I just to start off, I made a separate sketch of just my text fading in and out:

float timeInterval;
float timePast;

int textAlpha = 100;
int textFade = 2;

PFont sourceSans;

void setup() {
size (700,600);
timePast = millis();
timeInterval = 3000.0f;
textAlign (CENTER);
sourceSans = createFont ("SourceSansPro-Light", 10);
textFont (sourceSans);
}

void textFade() {
  if (millis () > timeInterval + timePast) {
    timePast = millis();
    textFade *= -1;
  }
  textAlpha += textFade;
}



void draw () {
  background (255);
  textFade();
  textSize (10);
  fill (0, textAlpha);
  text ("Science has proven that\n certain forms, colors, and shapes\n can soothe the human mind.", 350, 100);
  text ("With this knowledge, \n what kind of designs can be created \n to address mental health?", 350, 200);
  text ("43.8 billion people in the U.S. \n suffer from mental illness", 350, 300);
  text ("We must consider the ways \n we can design and create \n to raise awareness for mental health.", 350, 400);

}

I am mostly confused about how to make this into a class and also, whether I would use the mouseClicked() function in my class or in my main code in void draw().

koogs

Edit post, highlight code, press Ctrl-o to format

HANkae1346

thank you @koogs

Eeyorelife

I think you are starting at the wrong end. You have tried to get the text to fade, but I think it would be easier to start by making the text appear and disappear then later fade in and out.

If you have an int that keeps track of which line of text you're on, and a boolean to remember if you're fading in or out, you can just check: 1. Am i fading in or out? 2. Fade the number I am on in or out according to 1

HANkae1346

@Eeyorelife thank you!

Eeyorelife

So to start with, you just display the text in your fadeIn or fadeOut functions.

void mousePressed(){
  if (in){
    currentLine += 1;
    fadeIn(currentLine);
  } else fadeOut(currentLine);
}

HANkae1346

@Eeyorelife ok I'll try it out, thank you

jeremydouglass

@HANkae -- you may also be interested in this old discussion of several different approaches to fading. Note that this is for continuous progressive fade-out rather than fade-in:

• https://forum.processing.org/two/discussion/13189/a-better-way-to-fade