Creating a Story book using Processing

ambigsby

I'm a beginner and I'm trying to code a mildly interactive digital story book using my own illustrations. The idea is that when you open up the program you can choose one of two characters to see their story, and upon completing their story you go back to the beginning and have to choose the other story to get full experience. I'm having trouble coding it such that with each press of the RIGHT key it will go to the next image like you're flipping though pages. I got the first part down where you can choose the first character within those specific coordinates, but I'm stuck beyond what I've done here. Any help would be greatly appreciated.

PImage img, img2, img3, img4;

void setup() {
  size (950, 1000);

  img= loadImage("Start page.jpg");
  img2= loadImage("Page (1-1).jpg");
  img3= loadImage("Page (1-2).jpg");
  img4= loadImage("Page (1-3).jpg");
  image(img, 0, 0);
}

void draw () {

  if ((mouseX>425)&&(mouseX<900)) {
    if (mousePressed==true) {
      image(img2, 0, 0);
    }  
    if (keyCode==RIGHT) {
      image(img3, 0, 0);
    }
    if(keyCode==RIGHT){ //this is obviously not the correct course of action but is where I am stuck 
      image(img4,0,0);
    }
  }
}

Chrisir

that’s not the way.

Idea

Better look at array and load your images in the array (which is a list of images)

Then when RIGHT is pressed just increase the line number (index) so that the next image is shown

In Code

• Before setup()

PImage [] imagesMy = new PImage[4];

• in setup()

load images into the slots of the array

• in draw()

image( imagesMy[currImg], 0,0);

• in keyPressed()

use this as a new function not in draw()!!!! if.... currImg++;

Best regards, Chrisir ;-)

Chrisir

https://processing.org/tutorials/arrays/

Additionally: for extra features like select character you want an extra screen this would be a new int variable named state which tells you which state you are in

BrowseBook would be one (see above), choose character another, finished book page a 3rd state (for example)

ambigsby

That makes sense, I figured I'd have to do something with arrays. Thanks for clarifying, I'm on the right track now

Chrisir

PImage [] imagesMy = new PImage[4];
int currImg=0;

void setup() {
  size (950, 1000);

  imagesMy[0]= loadImage("Start page.jpg");
  imagesMy[1]= loadImage("Page (1-1).jpg");
  imagesMy[2]= loadImage("Page (1-2).jpg");
  imagesMy[3]= loadImage("Page (1-3).jpg");

  //image(img, 0, 0);
}

void draw () {
  image( imagesMy[currImg], 0, 0);
}

void keyPressed() {
  if (keyCode==RIGHT) {
    currImg++;
  }
}

void mousePressed() {
  if ((mouseX>425)&&(mouseX<900)) {
    // ?
  }
}

Chrisir

a new version with a state system to distinguish between start screen and the pages of the book

PImage startImg;

PImage [] imagesMy = new PImage[4];
int currImg=0; // index

// states: 
final int stateStartPage=0;
final int stateBrowsePagesCharacter1=1;
int state = stateStartPage;

void setup() {
  size (950, 1000);

  startImg = loadImage("Start page.jpg");

  imagesMy[0]= loadImage("Page (1-1).jpg");
  imagesMy[1]= loadImage("Page (1-2).jpg");
  imagesMy[2]= loadImage("Page (1-3).jpg");

  //image(img, 0, 0);
}

void draw () {

  switch(state) {

  case stateStartPage:
    image(startImg, 0, 0);
    break; 

  case stateBrowsePagesCharacter1:
    image( imagesMy[currImg], 0, 0);
    break;
  }//switch
}

void keyPressed() {

  switch(state) {

  case stateStartPage:
    // ignore 
    break; 

  case stateBrowsePagesCharacter1:
    if (keyCode==RIGHT) {
      if (currImg<2)
        currImg++;
    }//if
    break;
  }//switch
}

void mousePressed() {
  switch(state) {

  case stateStartPage:
    //
    if ((mouseX>425)&&(mouseX<900)) {
      // 
      state=stateBrowsePagesCharacter1;
    }//if
    break; 

  case stateBrowsePagesCharacter1:
    // ignore
    break;
  }//switch
}
//

ambigsby

Interesting, I neglected to include the fact that there more than 4 images however. There is a starting page, 4 pages for one character, 4 for the other character, and then they share the final page at which point you would be taken back to the beginning if it is your first time through either of the stories. This is where I got with regards to your first reply.

PImage [] imagesMy= new PImage[10];
int currImg= 1; //current image


void setup() {
  size (950, 1000);
  for (int i=0; i< imagesMy.length; i++) {
    imagesMy[i]= loadImage("Page"+i+".jpg");
  }
}
void draw () {
  image(imagesMy[0], 0, 0);
}

void mousePressed() {
  if ((mouseX>450)&&(mouseX<900)) {
    if (mousePressed==true) {
      image(imagesMy[1], 0, 0);

    }
  }
}
void keyPressed() {
  if (keyCode==RIGHT) {
    imagesMy[0]= imagesMy[currImg++];
  }
}

I attempted including your updated code into my own version, but I couldn't get it to work. Also there would have to be an alternate mousePressed input such that you choose the other character. Also just for reference this is a sketch of what the start page will look like.

Chrisir

Beautiful image - I‘d love to see the book.

Can’t wait.

You should also find a publisher.

Anyway, your code looks good!

Technically my code is better, but let’s work with your code:

You can make another mouse Check in mousePressed. if (moouseX..... Then you could set a variable characterChosen to 1 or 2 depending on the area clicked.

Now you could have a second image array for the other pages. Declare before setup, fill in setup, like you did with your first array

In keyPressed depending on var characterChosen you would load either from the array1 or from the array2 into the image you use in draw (). if(characterChosen==1) imagesMay=....

Chrisir

I am writing this because you seem to have two different sets of images

So this

imagesMy[i]= loadImage("Page"+i+".jpg");

Would be accompanied by a second line

imagesMySecondSet[i]= loadImage("SecondSetPage"+i+".jpg");

or so...

Chrisir

Nice project!

ambigsby

Thank you very much :3 I had a chance to work with my teaching assistant earlier and he managed to help me figure it out for the most part

PImage [] imagesMy= new PImage[11];
int currImg= 0; //current image
int state= 1;

void setup() {
  size (950, 1000);
  for (int i=0; i< imagesMy.length; i++) {
    imagesMy[i]= loadImage("Page"+i+".jpg");
  }
}
void draw () {
  image(imagesMy[currImg], 0, 0);
}

void mousePressed() {
  if ((mouseX>450)&&(mouseX<950)) {
    state=1;//boy
    currImg=1;
  } else if ((mouseX<350)&&(mouseX>0)) {
    state=2;
    currImg=6;
  }
}

void keyPressed() {
  if (keyCode==RIGHT) {
    currImg++;

    if (state ==2) {//duck
      if (currImg==11) {
        currImg=0;
      }
    } else {
      //boy
      if (currImg==6) {
        currImg=0;
      }
    }
  }
}

I wanted to make it so that once you get to the end of one story it replaces the first image with a grayed out version of the character you chose such that it indicates that you should choose the other character. It may be a bit complicated to implement, but as long as I have this basic structure in place I won't necessarily be dissatisfied with the final result. Now I just have to get to drawing the damn things. I'll try and get it up on the net for people to see once it's done. Thanks for all the help.

kfrajer

it replaces the first image with a grayed out version of the character you chose such that it indicates that you should choose the other character. It may be a bit complicated to implement,

https://processing.org/reference/tint_.html for changing transparency

https://processing.org/reference/PImage_blend_.html would be another approach

Kf

jeremydouglass

@ambigsby --

Interesting electronic literature form, great concept art.

This reminds me a bit of the menu interface to The Path by Tale of Tales.

As you evolve from being a beginner, this might be a great example of how to use classes to create a general StoryBook framework.

• A StoryBook has a menu with x Characters.
• A Character is viewed or unviewed. If they are viewed, they display gray. If they are unviewed, they can be clicked to display a CharacterStory.
• A CharacterStory displays a series of Pages. When it is done, it returns to the menu.
• A page is a picture (or later you could add audio, animation, et cetera.)