Hello! Which code is trigger events based on some text's position?

edited May 2016 in Questions about Code

I have a story that is read by mouseWheel scrolling. At the some words there could be events like as fading screen out, playing an audio while we are scrolling the text. How can i achieve this events based on the text position? This is the code is below;

String[] headlines = {
"Aniden yerimden fırladım ve üzerine atladım. Ayağım takıldı ve düşmemle birlikte kafamı yere çarptım.  Uyandığımda sırılsıklamdım",
};
String c="Please scroll the mouse wheel to read the story";

PFont f;
PFont f2;
float x;
int index = 0;

void setup() {
  size(800, 450);
  textAlign(CENTER);
  f = createFont("calibri", 16, true); 
  f2 = createFont("calibri", 10); 
  x = width;
}

void draw() {
  background(245);

  stroke(255, 200, 0);
  fill(255, 200, 0);
  rect(293, 164, 220, 20);

  textFont(f, 16);        
  fill(100, 100, 100);
  text(headlines[index], x, 180); 

  textFont(f2, 10);
  fill(70);
  text(c, 400, 400);

  stroke(255, 255, 255);
  fill(255, 255, 255);
  rect(500, 164, 400, 20);
  rect(0, 164, 293, 20);

  if (x < -textWidth(headlines[index])) {
    x = width; 
    index = (index + 1) % headlines.length;
  }
}

void mouseWheel(MouseEvent event) {
  x-=event.getCount();
}
«1

Answers

  • You have two variables that decide which text is drawn and where it is drawn.

    The first variable is index. This decides which of the strings in the headlines array are drawn. Since there is only one string in that array, index is always 0, so the first and only string is the one that gets drawn.

    Where it is drawn is a different matter. The variable x remembers how much of the text has been scrolled, and adjusts the text's position by that much.

    If you want different things to happen, you will have to make them happen when the x variable reaches a certain value. You can use if statements to make things happen when x is in a certain range of values by checking the value of x against some other value in an if statement.

    For example:

    if( x < -10 ) { println("x less than -ten!"); }
    

    Notice that this causes this event (of printing a string to the console) to happen continuously! If you want to cause one time events, you might consider adding boolean variables to track when they happen.

    boolean fade = false;
    //....
    if( fade ) { 
      //... make background darker. How?
    }
    //....
    if( x < -10 && !fade ) { fade = true; }
    

    How do you make the background darker? Have another variable that remembers how dark it is, use it when you draw the background, and make it a "darker" value when the fadeing code block runs.

  • I see. We need boolean to cause one time events. Could you edit this code for me? I translated the story to english. After the sentence "i hit my head to floor" could you cause fade out screen one time, then turn the light on to continue story ?

    String[] headlines = {
    "I suddenly leap up and throw myself to it. I stumble and fell off, then i hit my head to floor. When I woke up, I was sopping wet… ",
    };
    String c="Please scroll the mouse wheel to read the story";
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    
    void setup() {
      size(800, 450);
      textAlign(CENTER);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width;
    }
    
    void draw() {
      background(245);
    
      stroke(#E2E9CB);
      fill(#F5EAB2);
      rect(293, 164, 220, 20);
    
      textFont(f, 16);        
      fill(80, 80, 80);
      text(headlines[index], x, 180); 
    
      textFont(f2, 10);
      fill(60);
      text(c, 400, 400);
    
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
    }
    
    
    void mouseWheel(MouseEvent event) {
      x-=event.getCount();
    }
    
  • You have to at least try to make an effort to understand and add the code yourself first.

  • Of course I tried it, your boolean code didn't work, and I couldnt find how to make events in boolean for example fading out. When I type your code, it says "fade" is not suitable. Then I asked your help to edit the code for me. Do you know I have making effort for 3 months for this project. If nobody tell, I can't solve this technical problems, and my English is not much good, it is not my native language. Progressing uses English only?

  • What is the meaning of the statement that you wrote "x < -10 && !fade )& !fade"
    Boolean statements uses < , >, =, ! .... so how should i get this? this statement doesn't interact the value of my text.

    Now In my project we need text orientation "x". Right? So how should i connect the value text x to the boolean fade? Should i start to learn the sublect in that link; https://processing.org/reference/logicalAND.html ?

  •  if( x < -10 && !fade ) {
    

    This is a conditional expression that causes code to run only when the expression evaluates to TRUE.

    There are two parts. On the left, we are checking to see if the value stored in the variable x is less than negative ten. For example, if x is -11, this is TRUE since -11 < -10. If x is instead, for example, 4, then it is FALSE since 4 < -10 is not a true statement.

    On the right side we are looking at the boolean variable fade. This variable can either be TRUE or FALSE. But we are using the NOT operator (!) to change this to the other value. So when fade is TRUE, !fade is FALSE. When fade is FALSE, !fade is TRUE.

    Then we combine them using a LOGICAL AND (&&). This returns true if both sides are TRUE. If either side is FALSE, it returns FALSE.

    In total, the expression is making sure that the following code only happens when x is less than negative ten and variable fade is set to false.

  • // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor. "
      +"When I woke up, I was soacking wet… ", 
    };
    // help text
    String c="Please scroll the mouse wheel to read the story";
    
    final int normal=0;
    final int gettingDarker=1;
    final int waiting=2;
    final int gettingLighter=3;
    int stateBkg=normal;
    
    int darkerVar=244; 
    int countwaiting=0;
    boolean darkSequenceHasBeenDone=false; 
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    
    void setup() {
      size(800, 450);
      textAlign(CENTER);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width;
    }
    
    void draw() {
    
      manageBackground(); 
    
      if ( stateBkg==normal) {
        stroke(#E2E9CB);
        fill(#F5EAB2);
        rect(293, 164, 220, 20);
      }
    
      // story text
      textFont(f, 16);        
      fill(80, 80, 80);
      text(headlines[index], x, 180); 
    
      // help text
      textFont(f2, 10);
      fill(60);
      text(c, 400, 400);
    
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
      println(x);
    }
    
    void mouseWheel(MouseEvent event) {
      // println(event.getCount()    );
      if (stateBkg==normal)
        if (event.getCount()>0)
          x-=5;
    }
    // ------------------------------------------------
    
    void manageBackground() {
    
      switch(stateBkg) {
      case normal:
        background(245);
        if (x<325&&!darkSequenceHasBeenDone) {
          stateBkg=gettingDarker;
          darkSequenceHasBeenDone=true;
        }
        break; 
      case gettingDarker:
        background(darkerVar);
        darkerVar-=3;
        if (darkerVar<1) {
          darkerVar=0;
          stateBkg = waiting;
        }
        break; 
      case waiting:
        // 
        countwaiting++;
        // how long do we wait?
        if (countwaiting>90) 
          stateBkg=gettingLighter;
        darkerVar=0;
        break; 
      case gettingLighter:
        background(darkerVar);
        darkerVar+=3;
        if (darkerVar>251) {
          darkerVar=255;
          stateBkg = normal;
        }
        break;
      }
    }
    
    //
    
  • Chrisir, thank you so much. The part of case and break structure are diffucult to understand for me for now. I hope to learn it soon. By the way, if i continue to write the story in string, the text position is changing. How can i change the starting position of my text? x value seems not editable because of the mousewheel sliding control x. I couldn't achieve it.

    Second; I made the text mask with patch rectangles around it. But my patch method seems weird while the bg color fading out. How can i mask the text in middle box? Is it possible to use PImage masking on text? or how?

  • Switch() is a lot like if(), but instead of saying if(stateBkg == normal) you say case normal. It's a way of checking for different states for a variable. If the case is normal (stateBkg == normal) the code follong will be executes. If then the case is gettingDarker (stateBkg == getting darker) the following code will be executed as well as the first code. Unless you use break;

    break; tells the programming to break out from the current code. If you use it in a for loop the code will stop the iteration and go on to the code after the for loop. When you are using it in switch() you are saying "stop executing this code"

    You can check the reference for a different explanation if this didn't help.

    How can you change the starting position of your text? By changing x! In setup you are defining x with the line: x=width; if you don't want x to be the size of the width you can for example say x = 7; instead.

  • edited May 2016

    if i continue to write the story in string, the text position is changing.

    Are you sure? When the Story gets longer, start is still the same.

    Second: yeah, I noticed that too. Instead of using background, you could use a rect with growing opacity (see fill())

  • Yes Chrisir, I am sure. The text start position is changing when i type more words to write the story in string. I tried to define start value for x, but i couldn't achieve it. Instead of using bg, If i want to use rect to fade out, Where should i type rect fill() ? under the part "switch"?

  • edited May 2016

    text start position is changing when i type more words to write the story

    Really?

    What Happens?

  • What do you mean? If you want to see it, type more words in string text and you can see the change text position in preview.

    // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor. "
      +"When I woke up, I was soacking wet… ", 
    };
    // help text
    String c="Please scroll the mouse wheel to read the story";
    
    final int normal=0;
    final int gettingDarker=1;
    final int waiting=2;
    final int gettingLighter=3;
    int stateBkg=normal;
    
    int darkerVar=244; 
    int countwaiting=0;
    boolean darkSequenceHasBeenDone=false; 
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    
    void setup() {
      size(800, 450);
      textAlign(CENTER);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width;
    }
    
    void draw() {
    
      manageBackground(); 
    
      if ( stateBkg==normal) {
        stroke(#E2E9CB);
        fill(#F5EAB2);
        rect(293, 164, 220, 20);
      }
    
      // story text
      textFont(f, 16);        
      fill(80, 80, 80);
      text(headlines[index], x, 180); 
    
      // help text
      textFont(f2, 10);
      fill(60);
      text(c, 400, 400);
    
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
      println(x);
    }
    
    void mouseWheel(MouseEvent event) {
      // println(event.getCount()    );
      if (stateBkg==normal)
        if (event.getCount()>0)
          x-=5;
    }
    // ------------------------------------------------
    
    void manageBackground() {
    
      switch(stateBkg) {
      case normal:
        background(245);
        if (x<325&&!darkSequenceHasBeenDone) {
          stateBkg=gettingDarker;
          darkSequenceHasBeenDone=true;
        }
        break; 
      case gettingDarker:
        background(darkerVar);
        darkerVar-=3;
        if (darkerVar<1) {
          darkerVar=0;
          stateBkg = waiting;
        }
        break; 
      case waiting:
        // 
        countwaiting++;
        // how long do we wait?
        if (countwaiting>90) 
          stateBkg=gettingLighter;
        darkerVar=0;
        break; 
      case gettingLighter:
        background(darkerVar);
        darkerVar+=3;
        if (darkerVar>251) {
          darkerVar=255;
          stateBkg = normal;
        }
        break;
      }
    }
    
    //
    
  • edited May 2016

    you are right, I am sorry. I apologize.

  • // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor. "
      +"When I woke up, I was soacking wet… "
      +"I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor. "
      +"When I woke up, I was soacking wet… "
      +"I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor. "
      +"When I woke up, I was soacking wet… ", 
    };
    // help text
    String c="Please scroll the mouse wheel to read the story";
    
    // some variables for the part where it's getting dark 
    final int normal=0;
    final int gettingDarker=1;
    final int waiting=2;
    final int gettingLighter=3;
    int stateBkg=normal;
    
    // in the part where it's getting dark we cover the screen
    // with a rect and fill
    int darkerVar=0; // 0 = no opacity 
    int countwaiting=0;
    
    boolean sequenceHasBeenDoneDark=false; 
    boolean sequenceHasBeenDoneBall=false; 
    
    int ballY=-30; 
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    int fullOpacity=255; // full opacity is 255
    
    void setup() {
      size(800, 450);
      //  textAlign(CENTER);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width/2-55;
    }
    
    void draw() {
    
      background(245);
    
      //if ( stateBkg==normal) {
      stroke(#E2E9CB);
      fill(#F5EAB2, fullOpacity);
      rect(293, 164, 220, 20);
      //}
    
      // story text
      textFont(f, 16);        
      fill(80, 80, 80, fullOpacity);
      text(headlines[index], x, 180); 
    
      // help text
      textAlign(CENTER);
      textFont(f2, 10);
      fill(60, fullOpacity);
      text(c, 400, 400);
      textAlign(LEFT);
    
      // cover the sides
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
    
      manageRectCoveringTheScreen();
      manageBallFalling();
    
      println(x);
    }
    
    void mouseWheel(MouseEvent event) {
      // println(event.getCount()    );
      if (stateBkg==normal)
        if (event.getCount()>0)
          x-=5;
    }
    
    // ------------------------------------------------
    
    void manageRectCoveringTheScreen() {
    
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-115 && !sequenceHasBeenDoneDark) {
          // starting sequence 
          stateBkg=gettingDarker;
          noCursor();
          // make sure we do this only once
          sequenceHasBeenDoneDark=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=1;
        fullOpacity-=2;
        // it it's totally dark we start to wait 
        if (darkerVar>=255) {
          darkerVar = 255; // totally dark 
          stateBkg  = waiting;
        }
        break; 
      case waiting:
        // waiting 
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting++;
        // how long do we wait?
        if (countwaiting>90) {
          // stop waiting 
          stateBkg=gettingLighter;
        }
        // darkerVar=0;
        break; 
      case gettingLighter:
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=1;
        fullOpacity+=2;
        if (darkerVar<=0) {
          darkerVar=0;      
          fullOpacity=255;
          cursor(); 
          stateBkg = normal;
        }
        break;
      }
    }
    
    void manageBallFalling() {
      // manage Ball Falling
      if (x<145 && !sequenceHasBeenDoneBall) {
        ballY+=5;
        fill(255, 0, 0); 
        ellipse(width-66, ballY, 8, 8);
        if (ballY>height+33)
          sequenceHasBeenDoneBall=true;
      }
    }
    //
    
  • edited May 2016

    in this new version I changed a few things.

    First, you said, we have a problem with the text when it gets longer (and I didn't believe you, sorry). It was caused by textAlign(CENTER); in setup(). It centers the text. Thus when we make the text longer, it shifts left (as you said). To avoid this, I deleted textAlign(CENTER); in setup().

    (The small help text still uses textAlign(CENTER); in draw() but after the text I reset the alignment of the text back to LEFT with the line textAlign(LEFT); (which is the default).)

    Second, I improved the part where the screen is getting dark. Instead of using manageBackground(); (using background()) at the beginning of draw(), I now use manageRectCoveringTheScreen() (using a rect covering the entire screen) at the end of draw(). Here I just cover the entire screen with a rect. The opacity of the rect increases from 0 until it is full opaque (covers completely all underneath).

    (Additionally, I remove opacity from the text and the yellow rect and the help text using fullOpacity)

    Also, I hide the mouse.

    a word about switch()

    Let me say a word about switch(). It has been explained already. But the idea behind it is that we have 4 situations:

    • normal display (before in the story he falls to the floor),

    • then the rect is getting darker (more opaque),

    • it stays totally dark a second (more or less) and

    • then it gets brighter again.

    To have full control over the 4 situations, I use a small trick: I use a var stateBkg (state of background, should be named state of rect now or so) which can have different values: 0,1,2,3, to which I gave names: normal, gettingDarker, waiting, gettingLighter. So from the value of stateBkg (normal, gettingDarker, waiting, gettingLighter) I always know which situation we have. So I have full control of the process, getting darker, stay dark, getting bright again. I now evaluate stateBkg with switch() in manageRectCoveringTheScreen() and act different for each situation (case... and break; are the brackets around the handling of each situation if I may say so).

    Third, I implemented another event that occurs at a certain point in the story, a red ball falls down in the function manageBallFalling().

  • Chrisir. You are great! Thank you so much.

    I am improving the code according the story with teachings by you. Can you check my last editing code please? I did add some different events as much as learned from you. But i couldn't achieve to put different rect color to covering screen in different times. I would color the first one to black when the story "hit his head to floor" Because of eyes off. After getting lighter story will continue from the sentence"When I woke up". I wrote the code for it but didn't work with two rect. It worked with one rect.

    Then in the continuing of story "the water getting dark" i want to color it dark blue and make cursor visible, also manageable but text didn't slide when i continue to mouseWheel.

    By the way, how can we add sound effect based on text position?

    // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor... "
      +"When I woke up, I was soacking wet… "
      +"I was in a sea, maybe in a lake, i don't know. "
      +"Oh! What was happening! The water was getting dark... " //rect will be getting dark blue then back to white.
      +"Suddenly I went adrift to water than i started dragged... " //letters will flowing down.
      +"When the stream end, i hit the ground and i was out of breath, I lost my head. "//rect will be interactive with mouse click. When clicking on rect, it will be getting lighter, when we don't click it will be darker. when we click faster it will be disable and will be light.
      +"When I opened my eyes, i was hearing some weird voices. " //an audio will be here
      +"Then I heard a noise of bumping... Noises stooped. "//an audio will be here
      +"I was just hearing some purrings and i was swinging from left to right. "//an audio will be here
      +"Then I came across with a fish, we catch out eyes. " 
      +"I think i am going to fall in love! "
      +"She said that Hi! and asked me who i am. I think, think, think... "
      +"I am trying to remember. Who am i, where am i, what am i doing here?! "
      +"How could i talk with a fish? "
      , 
    };
    // help text
    String c="Please scroll the mouse wheel to read the story";
    
    // some variables for the part where it's getting dark 
    final int normal=0;
    final int gettingDarker=1;
    final int waiting=2;
    final int gettingLighter=3;
    int stateBkg=normal;
    
    // in the part where it's getting dark we cover the screen
    // with a rect and fill
    int darkerVar=0; // 0 = no opacity 
    int countwaiting=0;
    int countwaiting2=0;
    
    boolean sequenceHasBeenDoneDark=false; 
    boolean sequenceHasBeenDoneDark2=false; 
    boolean sequenceHasBeenDoneBall=false; 
    boolean sequenceHasBeenDoneType=false; 
    
    int ballY=-30; 
    int typE=-30;
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    int fullOpacity=255; // full opacity is 255
    
    void setup() {
      size(800, 450);
      //  textAlign(CENTER);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width/2-55;
    }
    
    void draw() {
    
      background(245);
    
      //if ( stateBkg==normal) {
      stroke(#E2E9CB);
      fill(#F5EAB2, fullOpacity);
      rect(293, 164, 220, 20);
      //}
    
      // story text
      textFont(f, 16);        
      fill(80, 80, 80, fullOpacity);
      text(headlines[index], x, 180); 
    
      // help text
      textAlign(CENTER);
      textFont(f2, 10);
      fill(60, fullOpacity);
      text(c, 400, 400);
      textAlign(LEFT);
    
      // cover the sides
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
    
      manageRectCoveringTheScreen();
      manageBallFalling();
      manageChanginStoryPoint1();
      manageRectCoveringTheScreen2();
      manageTypeFalling(); 
    
      println(x);
    }
    
    void mouseWheel(MouseEvent event) {
      // println(event.getCount()    );
      if (stateBkg==normal)
        if (event.getCount()>0)
          x-=5;
    }
    
    // ---------------------1. EVENT------------------
    
    void manageRectCoveringTheScreen() {
    
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-116 && !sequenceHasBeenDoneDark) {
          // starting sequence 
          stateBkg=gettingDarker;
          noCursor();
          // make sure we do this only once
          sequenceHasBeenDoneDark=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=5;
        fullOpacity-=0;
        // it it's totally dark we start to wait 
        if (darkerVar>=255) {
          darkerVar = 255; // totally dark 
          stateBkg  = waiting;
        }
        break; 
      case waiting:
        // waiting 
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting++;
        // how long do we wait?
        if (countwaiting>40) {
          // stop waiting 
          stateBkg=gettingLighter;
        }
        // darkerVar=0;
        break; 
      case gettingLighter:
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=1;
        fullOpacity+=2;
        if (darkerVar<=0) {
          darkerVar=0;      
          fullOpacity=255;
          cursor(); 
          stateBkg = normal;
        }
        break;
    
      }
    }
    
    void manageChanginStoryPoint1() {
         if  (darkerVar >= 255) {
         x=-327;
    
     }
    }
    
    // ---------------------2. EVENT------------------
    
    void manageBallFalling() {
      // manage Ball Falling
      if (x<-500 && !sequenceHasBeenDoneBall) {
        ballY-=1; 
        fill(#BCEDFF);
        stroke(#67C1E3);
        ellipse(width-66, ballY+50, 6, 6);
        ellipse(width-360, ballY+150, 8, 8);
        ellipse(width-500, ballY+120, 9, 9);
        ellipse(width-600, ballY+220, 6, 6);
        ellipse(width-120, ballY+280, 6, 6);
        ellipse(width-200, ballY+330, 7, 7);
        ellipse(width-400, ballY+365, 8, 8);
        if (ballY>height+33)
          sequenceHasBeenDoneBall=true;
      }
    }
    
    
    
    
    
    // ---------------------3. EVENT------------------
    
    void manageRectCoveringTheScreen2() {
    
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-1020 && !sequenceHasBeenDoneDark2) {
          // starting sequence 
          stateBkg=gettingDarker;
    
          // make sure we do this only once
          sequenceHasBeenDoneDark2=true;
       }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=0;//what is for?
        fullOpacity-=0;//what is for?
        // it it's totally dark we start to wait 
        if (darkerVar>=180) {
          darkerVar = 180; // totally dark 
          stateBkg  = waiting;
        }
        break; 
      case waiting:
        // waiting //bekleme durumu
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting2++;
        // how long do we wait? 
        if (countwaiting2>50) {
          // stop waiting 
          stateBkg=gettingLighter;
        }
        // darkerVar=0;
        break; 
      case gettingLighter: 
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=0;
        fullOpacity+=0;
        if (darkerVar<=0) {
          darkerVar=0;      
          fullOpacity=0;
    
          stateBkg = normal;
        }
        break;
      }
    }
    
    // ---------------------4. EVENT------------------
    
    void manageTypeFalling() {
      // manage Ball Falling
      if (x<-1100 && !sequenceHasBeenDoneType) {
        typE+=1.5;
        fill(#505050);
        textFont(f, 16);
        text("s",300,typE+233);
        text("t",306,typE+232);
        text("a",312,typE+227);
        text("d",350,typE+222);
        text("h",380,typE+232);
        text("C",400,typE);
        text("i",550,typE-25);
        text("d",408,typE+216);
        text("a",430,typE+225);
        text("g",460,typE+220);
        text("e",478,typE+225);
        text("f",222,typE+3);
        if (typE>height+0)
          sequenceHasBeenDoneType=true;
      }
    }
    //
    
  • when you download the library minim, you see it comes with a lot of examples, e.g. TriggerASample what you want.

    here is another example for sound with the library minim :

    import ddf.minim.*;
    Minim minim = null;
    AudioPlayer groove = null;
    
    void setup() {
      size(512, 200, P3D);
      minim = new Minim(this);
      groove = minim.loadFile("groove.mp3", 2048);
      if (groove==null) {
        println ("failed to load file (mp3) or something else went wrong"); 
        exit();
      } else {
        groove.loop();
      } // else
    }
    
    void draw() {
    
      background(0);
      stroke(255);
    
      if (groove!=null) {
        for (int i = 0; i < groove.bufferSize () - 1; i++) {
          line(i, 50  + groove.left.get(i)*50, i+1, 50  + groove.left.get(i+1)*50);
          line(i, 150 + groove.right.get(i)*50, i+1, 150 + groove.right.get(i+1)*50);
        } // for
      } // if
    }
    //
    
  • I corrected some mistakes here

    // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then I hit my head on the floor... "
      +"When I woke up, I was soaking wet... "
      +"I was in a sea, maybe in a lake, I don't know. "
      +"Oh! What was happening! The water was getting dark... " //rect will be getting dark blue then back to white.
      +"Suddenly I went adrift to water than I started dragged... " //letters will flowing down.
      +"When the stream ended, I hit the ground and I was out of breath, "
      +"I lost my head. "//rect will be interactive with mouse click. When clicking on rect, it will be getting lighter, when we don't click it will be darker. when we click faster it will be disable and will be light.
      +"When I opened my eyes, I was hearing some weird voices. " //an audio will be here
      +"Then I heard a noise of bumping... Noises stooped. "//an audio will be here
      +"I was just hearing some purrings and I was swinging from left to right. "//an audio will be here
      +"Then I came across with a fish, we catch our eyes. "
      +"I think I am going to fall in love! "
      +"She said Hi! and asked me who I am. I think, think, think... "
      +"I am trying to remember. Who am I, where am I, what am I doing here?! "
      +"How could I talk with a fish? "
      , 
    };
    
  • i come back to you

  • with more help

  • Okay Chrisir. I appreciate so much. I am trying to improve and create some different events but i got stuck in show different rect or different image in different times (x position)...

  • edited May 2016

    Why?

    Just check if(x< -288) then start event and set a boolean somethingHasBeenDone to true

  • I duplicate the manageRect, int and other parameters required by rect fading in and out. Then i set different colors to rects which are in different times. But each rect are same color unluckily.... why? I think I need a sample.

  • // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor... "
      +"When I woke up, I was soacking wet… "
      +"I was in a sea, maybe in a lake, I don't know. "
      +"Oh! What was happening! The water was getting dark... " //rect will be getting dark blue then back to white.
      +"Suddenly I went adrift to water than i started dragged... " //letters will flowing down.
      +"When the stream end, i hit the ground and i was out of breath, I lost my head. "//rect will be interactive with mouse click. When clicking on rect, it will be getting lighter, when we don't click it will be darker. when we click faster it will be disable and will be light.
      +"When I opened my eyes, i was hearing some weird voices. " //an audio will be here
      +"Then I heard a noise of bumping... Noises stooped. "//an audio will be here
      +"I was just hearing some purrings and i was swinging from left to right. "//an audio will be here
      +"Then I came across with a fish, we catch out eyes. "
      +"I think i am going to fall in love! "
      +"She said that Hi! and asked me who i am. I think, think, think... "
      +"I am trying to remember. Who am i, where am i, what am i doing here?! "
      +"How could i talk with a fish? "
      , 
    };
    
    // help text
    
    String c="Please scroll the mouse wheel to read the story.";
    
    // some variables for the part where it's getting dark 
    final int normal=0;
    final int gettingDarker=1;
    final int waiting=2;
    final int gettingLighter=3;
    int stateBkg=normal;
    
    // in the part where it's getting dark we cover the screen
    // with a rect and fill
    int darkerVar=0; // 0 = no opacity 
    
    int countwaiting=0;
    int countwaiting2=0;
    
    boolean sequenceHasBeenDoneDark=false; 
    boolean sequenceHasBeenDoneDark2=false; 
    
    boolean sequenceHasBeenDoneBall=false;
    
    boolean sequenceHasBeenDoneType=false; 
    
    int ballY=-30; 
    int typE=-30;
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    int fullOpacity=255; // full opacity is 255
    
    void setup() {
      size(800, 450);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width/2-55;
    }
    
    void draw() {
    
      background(245);
    
      //if ( stateBkg==normal) {
      stroke(#E2E9CB);
      fill(#F5EAB2, fullOpacity);
      rect(293, 164, 220, 20);
      //}
    
      // story text
      textFont(f, 16);        
      fill(80, 80, 80, fullOpacity);
      text(headlines[index], x, 180); 
    
      // help text
      textAlign(CENTER);
      textFont(f2, 10);
      fill(60, fullOpacity);
      text(c, 400, 400);
      textAlign(LEFT);
    
      // cover the sides
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
    
      manageRectCoveringTheScreen();
      manageBallFalling();
      manageChanginStoryPoint1();
      manageRectCoveringTheScreen2();
      manageTypeFalling(); 
    
      println(x);
    }
    
    void mouseWheel(MouseEvent event) {
      // println(event.getCount()    );
      if (stateBkg==normal)
        if (event.getCount()>0)
          x-=5;
    }
    
    // ---------------------1. EVENT------------------
    
    void manageRectCoveringTheScreen() {
    
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-116 && !sequenceHasBeenDoneDark) {
          // starting sequence 
          stateBkg=gettingDarker; // next state 
          noCursor();
          // make sure we do this only once
          sequenceHasBeenDoneDark=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a black rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=5;
        fullOpacity-=0;
        // it it's totally dark we start to wait 
        if (darkerVar>=255) {
          darkerVar = 255; // totally dark 
          stateBkg  = waiting; // next state
        }
        break; 
      case waiting:
        // waiting 
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting++;
        // how long do we wait?
        if (countwaiting>40) {
          // stop waiting 
          stateBkg=gettingLighter; // next state
        }
        // darkerVar=0;
        break; 
      case gettingLighter:
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=1;
        fullOpacity+=2;
        if (darkerVar<=0) {
          // reset 
          darkerVar=0;      
          fullOpacity=255;
          cursor(); 
          stateBkg = normal; // reset state
        }
        break;
      }
    }
    
    void manageChanginStoryPoint1() {
      // ?????????????????????????????????????????????
      if  (darkerVar >= 255) {
        x=-327;
      }
    }
    
    // ---------------------2. EVENT------------------
    
    void manageBallFalling() {
      // manage Ball Falling
      if (x<-500 && !sequenceHasBeenDoneBall) {
        ballY-=1; 
        fill(#BCEDFF);
        stroke(#67C1E3);
        ellipse(width-66, ballY+50, 6, 6);
        ellipse(width-360, ballY+150, 8, 8);
        ellipse(width-500, ballY+120, 9, 9);
        ellipse(width-600, ballY+220, 6, 6);
        ellipse(width-120, ballY+280, 6, 6);
        ellipse(width-200, ballY+330, 7, 7);
        ellipse(width-400, ballY+365, 8, 8);
        if (ballY>height+33)
          sequenceHasBeenDoneBall=true;
      }
    }
    
    // ---------------------3. EVENT------------------
    
    void manageRectCoveringTheScreen2() {
    
      // are we allowed to run this function? 
      boolean okToGoOn=false;
    
      // make sure we run this function only when one of those 2 conditions applies: 
      if (stateBkg==normal) okToGoOn=true; // 1
      if (stateBkg!=normal&&sequenceHasBeenDoneDark2) okToGoOn=true; // 2
    
      // none applied, we quit here 
      if (!okToGoOn) return; 
    
      // one applied 
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-1020 && !sequenceHasBeenDoneDark2) {
          // starting sequence 
          stateBkg=gettingDarker;
    
          // make sure we do this only once
          sequenceHasBeenDoneDark2=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=0;//what is for?
        fullOpacity-=0;//what is for?
        // it it's totally dark we start to wait 
        if (darkerVar>=180) {
          darkerVar = 180; // totally dark 
          stateBkg  = waiting;
        }
        break; 
      case waiting:
        // waiting //bekleme durumu
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting2++;
        // how long do we wait? 
        if (countwaiting2>50) {
          // stop waiting 
          stateBkg=gettingLighter;
        }
        // darkerVar=0;
        break; 
      case gettingLighter: 
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=0;
        fullOpacity+=0;
        if (darkerVar<=0) {
          darkerVar=0;      
          fullOpacity=0;
    
          stateBkg = normal;
        }
        break;
      }
    }
    
    // ---------------------4. EVENT------------------
    
    void manageTypeFalling() {
    
      // manage Ball Falling
    
      if (x<-1100 && !sequenceHasBeenDoneType) {
        typE+=1.5;
        fill(#505050);
        textFont(f, 16);
        text("s", 300, typE+233);
        text("t", 306, typE+232);
        text("a", 312, typE+227);
        text("d", 350, typE+222);
        text("h", 380, typE+232);
        text("C", 400, typE);
        text("i", 550, typE-25);
        text("d", 408, typE+216);
        text("a", 430, typE+225);
        text("g", 460, typE+220);
        text("e", 478, typE+225);
        text("f", 222, typE+3);
        if (typE>height+110)
          sequenceHasBeenDoneType=true;
      }
    }
    //
    
  • small improvement, first rect black, second blue now

    reason: you used stateBkg falsely for both rects

    I kept it that way but manageRectCoveringTheScreen2() does now some checks whether it should run already

  • Thank you Chrisir. I see that function must be stateBkg==normal. I couldn't think of adding boolean too. I should study more... I downloaded minim library. Tomarrow I will try to add some sound effects. See u. Thanks

  • edited May 2016

    you are welcome! ;-)

    I used a trick to check whether manageRectCoveringTheScreen2() is allowed to run.

    Alternatively, you could use stateBkg and stateBkg2 to avoid this problem!!!!

    see you! ;-)

  • Hi Chrisir. How are you? I have been studying using audio in processing for 5 days. I could add bg sound and also managing a sound efect for a specific text position. But I have a problem with memory... Java preview is getting slow and stuck :( Do you know what cause to this?

  • edited May 2016

    post your entire code

    it's important you load sounds only in setup() and not in or from draw()

  • Okay. I add below. There is 2 sound files if u want to get. Maybe i can send via mail.

    // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then i hit my head on the floor... "
      +"When I woke up, I was soacking wet… "
      +"I was in a sea, maybe in a lake, I don't know. "
      +"Oh! What was happening! The water was getting dark... " //rect will be getting dark blue then back to white.
      +"Suddenly I went adrift to water than i started dragged... " //letters will flowing down.
      +"When the stream end, i hit the ground and i was out of breath, I lost my head. "//rect will be interactive with mouse click. When clicking on rect, it will be getting lighter, when we don't click it will be darker. when we click faster it will be disable and will be light.
      +"When I opened my eyes, i was hearing some weird voices. " //an audio will be here
      +"Then I heard a noise of bumping... Noises stooped. "//an audio will be here
      +"I was just hearing some purrings and i was swinging from left to right. "//an audio will be here
      +"Then I came across with a fish, we catch out eyes. "
      +"I think i am going to fall in love! "
      +"She said that Hi! and asked me who i am. I think, think, think... "
      +"I am trying to remember. Who am i, where am i, what am i doing here?! "
      +"How could i talk with a fish? "
      , 
    };
    
    // help text
    
    String c="Please scroll the mouse wheel to read the story.";
    // variables for sounds
    import ddf.minim.*;
    Minim minim = null;
    AudioPlayer groove = null; 
    AudioSnippet player;
    // some variables for the part where it's getting dark 
    final int normal=0;
    final int gettingDarker=1;
    final int waiting=2;
    final int gettingLighter=3;
    int stateBkg=normal;
    
    // in the part where it's getting dark we cover the screen
    // with a rect and fill
    int darkerVar=0; // 0 = no opacity 
    
    int countwaiting=0;
    int countwaiting2=0;
    
    boolean sequenceHasBeenDoneDark=false; 
    boolean sequenceHasBeenDoneDark2=false; 
    
    boolean sequenceHasBeenDoneBall=false;
    boolean sequenceHasBeenDoneBall2=false;
    boolean sequenceHasBeenDoneType=false; 
    boolean sequenceHasBeenDoneManFallingSound=false;
    
    int ballY=-30; 
    int ballY2=-30; 
    int typE=-30;
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    int fullOpacity=255; // full opacity is 255
    
    void setup() {
      size(800, 450);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width/2-55;
      // for sound
      minim = new Minim(this);
      groove = minim.loadFile("underwater.mp3");
      if (groove==null) {
        println ("failed to load file (mp3) or something else went wrong"); 
        exit();
      } else {
        groove.loop();
      } // else
    
    }
    
    void draw() {
    
      background(245);
      //if ( stateBkg==normal) {
      stroke(#E2E9CB);
      fill(#F5EAB2, fullOpacity);
      rect(293, 164, 220, 20);
      //}
    
      // story text
      textFont(f, 16);        
      fill(80, 80, 80, fullOpacity);
      text(headlines[index], x, 180); 
    
      // help text
      textAlign(CENTER);
      textFont(f2, 10);
      fill(60, fullOpacity);
      text(c, 400, 400);
      textAlign(LEFT);
    
      // cover the sides
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
    
      manageRectCoveringTheScreen();
      manageBallFalling();
      manageBallFalling2();
      manageChanginStoryPoint1();
      manageRectCoveringTheScreen2();
      manageTypeFalling(); 
      manageManFallingSound();
      println(x);
    }
    
    void mouseWheel(MouseEvent event) {
      // println(event.getCount()    );
      if (stateBkg==normal)
        if (event.getCount()>0)
          x-=5;
    }
    
    // ---------------------1. EVENT------------------
    
    void manageRectCoveringTheScreen() {
    
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-116 && !sequenceHasBeenDoneDark) {
          // starting sequence 
          stateBkg=gettingDarker; // next state 
          noCursor();
          // make sure we do this only once
          sequenceHasBeenDoneDark=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a black rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=5;
        fullOpacity-=0;
        // it it's totally dark we start to wait 
        if (darkerVar>=255) {
          darkerVar = 255; // totally dark 
          stateBkg  = waiting; // next state
        }
        break; 
      case waiting:
        // waiting 
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting++;
        // how long do we wait?
        if (countwaiting>40) {
          // stop waiting 
          stateBkg=gettingLighter; // next state
        }
        // darkerVar=0;
        break; 
      case gettingLighter:
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=1;
        fullOpacity+=2;
        if (darkerVar<=0) {
          // reset 
          darkerVar=0;      
          fullOpacity=255;
          cursor(); 
          stateBkg = normal; // reset state
        }
        break;
      }
    }
    
    void manageChanginStoryPoint1() {
      // ?????????????????????????????????????????????
      if  (darkerVar >= 255) {
        x=-327;
      }
    }
    
    // ---------------------2. EVENT------------------
    
    void manageBallFalling() {
      // manage Ball Falling
      if (x<-450 && !sequenceHasBeenDoneBall) {
        ballY-=1; 
        fill(#BCEDFF);
        stroke(#67C1E3);
        ellipse(width-66, ballY+50, 6, 6);
        ellipse(width-360, ballY+150, 8, 8);
        ellipse(width-500, ballY+120, 9, 9);
        ellipse(width-600, ballY+220, 6, 6);
        ellipse(width-120, ballY+280, 6, 6);
        ellipse(width-200, ballY+330, 7, 7);
        ellipse(width-400, ballY+365, 8, 8);
        ellipse(width-300, ballY+450, 7, 7);
        ellipse(width-350, ballY+500, 6, 6);
        ellipse(width-170, ballY+530, 6, 6);
        ellipse(width-580, ballY+515, 5, 5);
        ellipse(width-550, ballY+600, 6, 6);
        ellipse(width-200, ballY+630, 5, 5);
        ellipse(width-360, ballY+660, 5, 5);
        ellipse(width-425, ballY+690, 5, 5);
        if (ballY>height+33)
          sequenceHasBeenDoneBall=true;
      }
    }
    
    // ---------------------3. EVENT------------------
    
    void manageRectCoveringTheScreen2() {
    
      // are we allowed to run this function? 
      boolean okToGoOn=false;
    
      // make sure we run this function only when one of those 2 conditions applies: 
      if (stateBkg==normal) okToGoOn=true; // 1
      if (stateBkg!=normal&&sequenceHasBeenDoneDark2) okToGoOn=true; // 2
    
      // none applied, we quit here 
      if (!okToGoOn) return; 
    
      // one applied 
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-1020 && !sequenceHasBeenDoneDark2) {
          // starting sequence 
          stateBkg=gettingDarker;
    
          // make sure we do this only once
          sequenceHasBeenDoneDark2=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=0;//what is for?
        fullOpacity-=0;//what is for?
        // it it's totally dark we start to wait 
        if (darkerVar>=180) {
          darkerVar = 180; // totally dark 
          stateBkg  = waiting;
        }
        break; 
      case waiting:
        // waiting //bekleme durumu
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting2++;
        // how long do we wait? 
        if (countwaiting2>50) {
          // stop waiting 
          stateBkg=gettingLighter;
        }
        // darkerVar=0;
        break; 
      case gettingLighter: 
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=0;
        fullOpacity+=0;
        if (darkerVar<=0) {
          darkerVar=0;      
          fullOpacity=0;
    
          stateBkg = normal;
        }
        break;
      }
    }
    //-------------------
    void manageBallFalling2() {
      // manage Ball Falling 
       if (x<-1070 && !sequenceHasBeenDoneBall2) {
        ballY2-=9; 
        fill(#BCEDFF);
        stroke(#67C1E3);
        ellipse(width-66, ballY2+50, 6, 6);
        ellipse(width-360, ballY2+150, 8, 8);
        ellipse(width-500, ballY2+120, 14, 14);
        ellipse(width-600, ballY2+220, 11, 11);
        ellipse(width-120, ballY2+280, 6, 6);
        ellipse(width-200, ballY2+330, 10, 10);
        ellipse(width-400, ballY2+365, 9, 9);
        ellipse(width-700, ballY2+450, 10, 10);
        ellipse(width-670, ballY2+500, 12, 12);
        ellipse(width-120, ballY2+480, 8, 8);
        ellipse(width-350, ballY2+480, 8, 8);
        ellipse(width-440, ballY2+390, 6, 6);
        ellipse(width-440, ballY2+600, 7, 7);
        ellipse(width-220, ballY2+610, 5, 5);
        ellipse(width-530, ballY2+620, 3, 3);
        ellipse(width-300, ballY2+630, 3, 3);
        ellipse(width-110, ballY2+650, 3, 3);
        ellipse(width-450, ballY2+660, 4, 4);
        ellipse(width-630, ballY2+655, 3, 3);
        ellipse(width-300, ballY2+680, 5, 5);
        ellipse(width-550, ballY2+720, 4, 4);
        ellipse(width-430, ballY2+750, 5, 5);
        ellipse(width-270, ballY2+740, 4, 4);
        ellipse(width-160, ballY2+765, 3, 3); 
        ellipse(width-500, ballY2+790, 4, 4);
        ellipse(width-400, ballY2+830, 4, 4);
        if (ballY2>height+33)
          sequenceHasBeenDoneBall2=true;
      }
    }  
    
    // ---------------------4. EVENT------------------
    
    void manageTypeFalling() {
    
      // manage Ball Falling
    
      if (x<-1350 && !sequenceHasBeenDoneType) {
        typE+=1.5;
        fill(#505050);
        textFont(f, 16);
        text("s", 300, typE+233);
        text("t", 306, typE+232);
        text("a", 312, typE+227);
        text("d", 350, typE+222);
        text("h", 380, typE+232);
        text("d", 408, typE+216);
        text("a", 430, typE+225);
        text("g", 460, typE+220);
        text("e", 478, typE+225);
    
        if (typE>height+110)
          sequenceHasBeenDoneType=true;
      }
    }
    //-----------------------5. Event---------------------
    void manageManFallingSound() {
      // manage Man Falling Sound
      if (x<250 && !sequenceHasBeenDoneManFallingSound) {
      minim = new Minim(this);
    
      player = minim.loadSnippet("man_falling_down.mp3"); //use an mp3 file and it works
      player.play();
    }
    
    }
    
    void stop()
    {
    player.close();
    minim.stop();
    super.stop();
    }
    
  • it might be wise to load mp3 instead of wav-file

  • there are mp3. you mean wav is wise?

  • i read your code

    please load all mp3 in setup not somewhere else

  • no, mp3 is good

  • I see. But i managed one sound in another void at the end (for text x position to trigger it) How can i load all in setup with this trigger?

  • you need different vars like fallingSnippet etc.

    and load their content in setup with loadSnippet

    when the effect occurs just say fallingSnippet.play();

  • I tried that, but i could't achieve. Should i put the var as below?

    int fallingSnippet=man_falling_down.mp3;

    and;

    void setup() { minim = new Minim(this); player = minim.loadSnippet("fallingSnippet"); }

    then;

    void manageManFallingSound() {
      if (x<250 && !sequenceHasBeenDoneManFallingSound) {
    
      fallingSnippet.play();
      player.play();
    
  • here:

    void manageManFallingSound() {
      if (x<250 && !sequenceHasBeenDoneManFallingSound) {
    
          fallingSnippet.play();
          player.play();
    
    }
    

    you forgot to say

    sequenceHasBeenDoneManFallingSound=true; 
    

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    so he does it again and again!!!!!!

    I sent you an e-mail concerning the sound

  • line 369 above is also wrong since you have defined minim in setup() already

  • I got it. Thank you so much. How we use "null"? I thought it means; "not here". I coulnd't connect the parts in my mind.

  • I mean what is the difference if we write Minim minim; AudioPlayer underwaterSound; AudioSnippet manFallingDown;

    without null. Does we define the sound not here?

  • I am not sure.

    null means that it is not defined, so there is nothing in it, no sound...

    AudioSnippet manFallingDown; 
    

    without = null could also be null automatically

    I am using null to check if the loading of an mp3 was succeful

  • did you get my e-mail?

  • Yes i got you e-mail. Thank you. I see the definition null... Now I am working on interative rect that faded out, the mouseButton for fading as it click more. I hope to achieve it my own way :) If I can't, i may ask. Thank you again and again.

    Have a good evening Chrisir!

  • a good evening to you, too, Sir.

  • I would like to ask you the problem of the code that i write, I am trying to do "rect that is getting darker will be interactive with mouse press. When pressing in rect, it will be getting lighter, when we don't press it will be darker. But i need to make it lighter at last. Getting darker will be disable with maybe press time or passing 5 second. (which one is easy is ok)"

    This is the code i mess up;

    int darkerVar=0;
    
    void setup() {
    size(800, 450);
    }
    
    void draw() {
    background(245);
    manageRectFading();
    }
    
    //-----------------------------------
    
    void manageRectFading() {
    
        if (darkerVar>=255) {
        darkerVar = 255;
    
        if (mousePressed == true) 
        fill(255, darkerVar);
        rect(0, 0, width, height); 
        }    
        else {
        fill(0);
        rect(0, 0, width, height); 
      }
    
    }
    
  • We are working with stateBkg

    So work with this

    void mousePressed(){

    if (stateBkg==gettingDarker)

    stateBkg=gettingLighter;

    }

  • // an interactive story with events
    
    // story
    String[] headlines = {
      "I suddenly leap up and throw myself to it. "
      +"I stumble and fell off, then I hit my head on the floor... "                 // (1)(2)
      +"When I woke up, I was soacking wet… "
      +"I was in a sea, maybe in a lake, I don't know. "                             // (3)
      +"Oh! What was happening! The water was getting dark... "                      // (4)
      +"Suddenly I went adrift to water then I started dragged... "                  // (5), (6)
      +"When the stream end, I hit the ground and I was out of breath, I lost my head. " // (7) 
      +"When I opened my eyes, I was hearing some weird voices. "                        // (8) 
      +"Then I heard a noise of bumping... Noises stopped. "                             // (9)
      +"I was just hearing some purrings and I was swinging from left to right."         // (10)
      +"Then I came across with a fish, we catch our eyes. "
      +"I think I am going to fall in love! "
      +"She said Hi, and asked me who I am."
      +"I think, think, think... "                                                       // (11)
      +"I am trying to remember. Who am I, where am I, what am I doing here?! "
      +"How could I talk with a fish? " 
    };
    
    // events:
    // ------------------------
    // (1) an audio will be here (man falling down and hit his head)
    // (2) rect will be darker, then lighter.
    // (3) drops come the screen. (manageBall)
    // (4) rect will be getting dark blue then continue to little darker blue to story.
    // (5) drops flying suddenly from the screen.
    // (6) letters will flowing down.
    // (7) Rect comes darker to screen. While pressing on rect, it will be getting lighter,
    //     when we don't press it will be darker. Then it will be disable and will be light. So the story goes on in string"When I open my eyes".
    // (8) an audio will be here (cat meow...)
    // (9) an audio will be here (man falling down and hit...)
    // (10) an audio will be here (cat purrings)
    // (11) rect which was blue, becoming lighter slowly and finally white.
    
    // (12) Credits will appear on screen "Code Writer: Chrisir, Script Writer: Talha Mesud" :)
    
    
    
    // help text
    String c1="Please wear your headphones";
    String c="and scroll the mouse wheel to read the story.";
    
    // variables for sounds / mp3 
    import ddf.minim.*;
    
    Minim minim = null;
    AudioPlayer underwaterSound = null; 
    AudioSnippet manFallingDown = null;
    AudioSnippet catPurring = null;
    
    // some variables for the part where it's getting dark 
    final int normal=0;
    final int gettingDarker=1;
    final int waiting=2;
    final int gettingLighter=3;
    int stateBkg=normal;
    
    // in the part where it's getting dark we cover the screen
    // with a rect and fill
    int darkerVar=0; // 0 = no opacity 
    
    int countwaiting=0;
    int countwaiting2=0;
    
    boolean sequenceHasBeenDoneDark1=false; 
    boolean sequenceHasBeenDoneDark2=false; 
    
    boolean sequenceHasBeenDoneBall=false;
    boolean sequenceHasBeenDoneBall2=false;
    boolean sequenceHasBeenDoneType=false; 
    boolean sequenceHasBeenDoneManFallingSound=false;
    boolean sequenceHasBeenDoneCatSound=false;
    
    int ballY=-30; 
    int ballY2=-30; 
    int typE=-30;
    
    PFont f;
    PFont f2;
    float x;
    int index = 0;
    int fullOpacity=255; // full opacity is 255
    
    // ---------------------------------------------------------
    // main functions 
    
    void setup() {
      size(800, 450);
      f = createFont("calibri", 16, true); 
      f2 = createFont("calibri", 10); 
      x = width/2-55;
    
      // for sound
      minim = new Minim(this);
    
      underwaterSound = minim.loadFile("underwater.mp3");
      if (underwaterSound==null) {
        println ("failed to load file ('underwater.mp3') or something else went wrong"); 
        exit();
      } else {
        underwaterSound.shiftGain(-80.0, -10.0, 2000);
        underwaterSound.loop();
      } // else
    
      manFallingDown = minim.loadSnippet("man_falling_down.mp3"); //use an mp3 file and it works
      if (manFallingDown==null) {
        println ("failed to load file ('man_falling_down.mp3') or something else went wrong"); 
        exit();
      }
      catPurring = minim.loadSnippet("cat_purring.mp3"); //use an mp3 file and it works
      if (catPurring==null) {
        println ("failed to load file ('cat_purring.mp3') or something else went wrong"); 
        exit();
      }
    }//function
    
    void draw() {
    
      background(245);
      //if ( stateBkg==normal) {
      stroke(#E2E9CB);
      fill(#F5EAB2, fullOpacity);
      rect(293, 164, 220, 20);
      //}
    
      // story text
      textFont(f, 16);        
      fill(80, 80, 80, fullOpacity);
      text(headlines[index], x, 180); 
    
      // help text
      textAlign(CENTER);
      textFont(f2, 12);
      fill(#905757, fullOpacity);
      text(c, 400, 400);
      textAlign(LEFT);
      text(c1, 330, 385);
    
    
    
      // cover the sides
      stroke(245, 245, 245);
      fill(245, 245, 245);
      rect(500, 164, 400, 20);
      rect(0, 164, 293, 20);
    
      if (x < -textWidth(headlines[index])) {
        x = width; 
        index = (index + 1) % headlines.length;
      }
    
      manageRectCoveringTheScreen();
      manageBallFalling();
      manageBallFalling2();
      manageChanginStoryPoint1();
      manageRectCoveringTheScreen2();
      manageTypeFalling(); 
      manageManFallingSound();
      manageCatSound();
      // println(x);
    } // 
    
    // ---------------------------------------------------------
    // inputs 
    
    void mouseWheel(MouseEvent event) {
      // println(event.getCount()    );
      if (stateBkg==normal)
        if (event.getCount()>0)
          x-=5;
    }
    
    void mousePressed() {
      if (stateBkg==gettingDarker && sequenceHasBeenDoneDark1) {
        stateBkg=gettingLighter;
      }
    }
    
    //-----------------------1. Event---------------------
    
    void manageManFallingSound() {
      // manage Man Falling Sound
      if (x<130 && !sequenceHasBeenDoneManFallingSound) {
        manFallingDown.play();
        println("done Sound - event 1");
        sequenceHasBeenDoneManFallingSound=true;
      }
    }
    
    // ---------------------2. EVENT------------------
    
    void manageRectCoveringTheScreen() {
    
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-116 && !sequenceHasBeenDoneDark1) {
          // starting sequence 
          stateBkg=gettingDarker; // next state 
          noCursor();
          // make sure we do this only once
          sequenceHasBeenDoneDark1=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a black rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=5;
        fullOpacity-=0;
        // it it's totally dark we start to wait 
        if (darkerVar>=255) {
          darkerVar = 255; // totally dark 
          stateBkg  = waiting; // next state
        }
        break; 
      case waiting:
        // waiting 
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting++;
        // how long do we wait?
        if (countwaiting>40) {
          // stop waiting 
          stateBkg=gettingLighter; // next state
        }
        // darkerVar=0;
        break; 
      case gettingLighter:
    
        // cover the screen with a rect 
        fill(0, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=1;
        fullOpacity+=2;
        if (darkerVar<=0) {
          // reset 
          darkerVar=0;      
          fullOpacity=255;
          cursor(); 
          stateBkg = normal; // reset state
        }
        break;
      }
    }
    
    void manageChanginStoryPoint1() {
      // ?????????????????????????????????????????????
      if  (darkerVar >= 255) {
        x=-333;
      }
    }
    
    // ---------------------3. EVENT------------------
    
    void manageBallFalling() {
      // manage Ball Falling
      if (x<-450 && !sequenceHasBeenDoneBall) {
        ballY-=1; 
        fill(#BCEDFF);
        stroke(#67C1E3);
        ellipse(width-66, ballY+50, 6, 6);
        ellipse(width-360, ballY+150, 8, 8);
        ellipse(width-500, ballY+120, 9, 9);
        ellipse(width-600, ballY+220, 6, 6);
        ellipse(width-120, ballY+280, 6, 6);
        ellipse(width-200, ballY+330, 7, 7);
        ellipse(width-400, ballY+365, 8, 8);
        ellipse(width-300, ballY+450, 7, 7);
        ellipse(width-350, ballY+500, 6, 6);
        ellipse(width-170, ballY+530, 6, 6);
        ellipse(width-580, ballY+515, 5, 5);
        ellipse(width-550, ballY+600, 6, 6);
        ellipse(width-200, ballY+630, 5, 5);
        ellipse(width-360, ballY+660, 5, 5);
        ellipse(width-425, ballY+690, 5, 5);
        if (ballY>height+33)
          sequenceHasBeenDoneBall=true;
      }
    }
    
    // ---------------------4. EVENT------------------
    
    void manageRectCoveringTheScreen2() {
    
      // are we allowed to run this function? 
      boolean okToGoOn=false;
    
      // make sure we run this function only when one of those 2 conditions applies: 
      if (stateBkg==normal) okToGoOn=true; // 1
      if (stateBkg!=normal&&sequenceHasBeenDoneDark2) okToGoOn=true; // 2
    
      // none applied, we quit here 
      if (!okToGoOn) return; 
    
      // one applied 
      switch(stateBkg) {
      case normal:
        // normal display. 
        // we don't show a rect normally.  
        // check x
        if (x<-1020 && !sequenceHasBeenDoneDark2) {
          // starting sequence 
          stateBkg=gettingDarker;
    
          // make sure we do this only once
          sequenceHasBeenDoneDark2=true;
        }
        break; 
      case gettingDarker:
        // getting darker
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar+=0;//what is for?
        fullOpacity-=0;//what is for?
        // it it's totally dark we start to wait 
        if (darkerVar>=180) {
          darkerVar = 180; // totally dark 
          stateBkg  = waiting;
        }
        break; 
      case waiting:
        // waiting //bekleme durumu
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        countwaiting2++;
        // how long do we wait? 
        if (countwaiting2>50) {
          // stop waiting 
          stateBkg=gettingLighter;
        }
        // darkerVar=0;
        break; 
      case gettingLighter: 
    
        // cover the screen with a rect 
        fill(#0F3C62, darkerVar);
        rect(0, 0, width, height); 
    
        darkerVar-=0;
        fullOpacity+=0;
        if (darkerVar<=0) {
          darkerVar=0;      
          fullOpacity=0;
    
          stateBkg = normal;
        }
        break;
      }
    }
    //---------------------- 5. EVENT -------------------------
    void manageBallFalling2() {
      // manage Ball Falling 
      if (x<-1070 && !sequenceHasBeenDoneBall2) {
        ballY2-=9; 
        fill(#BCEDFF);
        stroke(#67C1E3);
        ellipse(width-66, ballY2+50, 6, 6);
        ellipse(width-360, ballY2+150, 8, 8);
        ellipse(width-500, ballY2+120, 14, 14);
        ellipse(width-600, ballY2+220, 11, 11);
        ellipse(width-120, ballY2+280, 6, 6);
        ellipse(width-200, ballY2+330, 10, 10);
        ellipse(width-400, ballY2+365, 9, 9);
        ellipse(width-700, ballY2+450, 10, 10);
        ellipse(width-670, ballY2+500, 12, 12);
        ellipse(width-120, ballY2+480, 8, 8);
        ellipse(width-350, ballY2+480, 8, 8);
        ellipse(width-440, ballY2+390, 6, 6);
        ellipse(width-440, ballY2+600, 7, 7);
        ellipse(width-220, ballY2+610, 5, 5);
        ellipse(width-530, ballY2+620, 3, 3);
        ellipse(width-300, ballY2+630, 3, 3);
        ellipse(width-110, ballY2+650, 3, 3);
        ellipse(width-450, ballY2+660, 4, 4);
        ellipse(width-630, ballY2+655, 3, 3);
        ellipse(width-300, ballY2+680, 5, 5);
        ellipse(width-550, ballY2+720, 4, 4);
        ellipse(width-430, ballY2+750, 5, 5);
        ellipse(width-270, ballY2+740, 4, 4);
        ellipse(width-160, ballY2+765, 3, 3); 
        ellipse(width-500, ballY2+790, 4, 4);
        ellipse(width-400, ballY2+830, 4, 4);
        if (ballY2>height+33)
          sequenceHasBeenDoneBall2=true;
      }
    }  
    
    // ---------------------6. EVENT------------------
    
    void manageTypeFalling() {
    
      // manage Ball Falling
    
      if (x<-1350 && !sequenceHasBeenDoneType) {
        typE+=1.5;
        fill(#505050);
        textFont(f, 16);
        text("s", 300, typE+233);
        text("t", 306, typE+232);
        text("a", 312, typE+227);
        text("d", 350, typE+222);
        text("h", 380, typE+232);
        text("d", 408, typE+216);
        text("a", 430, typE+225);
        text("g", 460, typE+220);
        text("e", 478, typE+225);
    
        if (typE>height+110)
          sequenceHasBeenDoneType=true;
      }
    }
    
    //---------------------10. EVENT-------------------------
    void manageCatSound() {
      // manage Cat Sound
      if (x<-2150 &&!sequenceHasBeenDoneCatSound) {
        catPurring.play();
        sequenceHasBeenDoneCatSound=true;
      }
    }
    
    //---------
    void stop()
    {
      manFallingDown.close();
      underwaterSound.close();
      minim.stop();
      super.stop();
    }
    //
    
    //
    //       Credits will appear on screen "Code Writer: Chrisir, Script Writer: Talha Mesud"
    //
    
  • Hello. How can I make this code interactivity real? I press but there is nothing chance. The background must be clicable to change light to dark...

    int normal=0;
    int gettingDarker=1;
    int gettingLighter=1;
    int stateBkg=normal; 
    
    void setup() {
    size(800, 450);
    }
    
    void draw() {
    background(245);
    }
    
    void mousePressed(){
    
    if (stateBkg==gettingDarker)
    stateBkg=gettingLighter;
    }
    
Sign In or Register to comment.