Mouse clicked + fade in and fade out

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

Answers

  • 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

  • edited November 2017

    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().

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

  • 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

  • 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);
    }
    
  • @Eeyorelife ok I'll try it out, thank you

  • @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:

Sign In or Register to comment.