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

talha

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();
}

TfGuy44

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.

talha

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();
}

TfGuy44

You have to at least try to make an effort to understand and add the code yourself first.

talha

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?

talha

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 ?

TfGuy44

 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.

Chrisir

// 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;
  }
}

//

talha

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?

Eeyorelife

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.

Chrisir

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

talha

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"?

Chrisir

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

Really?

What Happens?

talha

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;
  }
}

//

Chrisir

you are right, I am sorry. I apologize.

Chrisir

// 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;
  }
}
//

Chrisir

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

talha

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;
  }
}
//

Chrisir

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
}
//

Chrisir

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? "
  , 
};

Chrisir

i come back to you

Chrisir

with more help

talha

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

Chrisir

Why?

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

talha

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.

Chrisir

// 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;
  }
}
//

Chrisir

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

talha

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

Chrisir

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! ;-)

talha

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?

Chrisir

post your entire code

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

talha

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();
}

Chrisir

it might be wise to load mp3 instead of wav-file

talha

there are mp3. you mean wav is wise?

Chrisir

i read your code

please load all mp3 in setup not somewhere else

Chrisir

no, mp3 is good

talha

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?

Chrisir

you need different vars like fallingSnippet etc.

and load their content in setup with loadSnippet

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

talha

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

Chrisir

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

Chrisir

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

talha

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.

talha

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

without null. Does we define the sound not here?

Chrisir

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

Chrisir

did you get my e-mail?

talha

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!

Chrisir

a good evening to you, too, Sir.

talha

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); 
  }

}

Chrisir

We are working with stateBkg

So work with this

void mousePressed(){

if (stateBkg==gettingDarker)

stateBkg=gettingLighter;

}

Chrisir

// 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"
//

talha

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;
}