Senior Project. Help!! Making Rollovers Stay After being Rolled Over

edited November 2016 in Library Questions

Hi!

We're working on our senior project and need help making rollovers stay on the screen once they've been rolled over. We're using basic mouseX and mouseY to define where the rollovers appear. The rollovers appear on top of a live camera feed taken from a webcam. We aren't too advanced and aren't using object oriented programming. We're not sure if the answer is a boolean or maybe a function? We just need a small example to put us in the right direction.

If there's any one who can help we'd greatly appreciate it :)

Here's a look at our code if it helps:

//-----------------------------------------------video stuff

import processing.video.*;
Capture video;

//-----------------------------------------------variables
//Instagram
PImage startscreen;
PImage bellatemp;
PImage celestetemp;
//Ccomments
PImage Ccomment1;
PImage Ccomment2;
PImage Ccomment3;
PImage Ccomment4;
PImage Ccomment5;
PImage Ccomment6;
PImage Ccomment7;
PImage Ccomment8;
PImage Ccomment9;
PImage Ccomment10;
PImage Ccomment11;
PImage Ccomment12;
PImage Ccomment13;


//Bcomments
PImage Bcomment1;
PImage Bcomment2;
PImage Bcomment3;
PImage Bcomment4;
PImage Bcomment5;
PImage Bcomment6;
PImage Bcomment7;
PImage Bcomment8;
//Directions
PImage pressB;
PImage pressC;
boolean clicked = false;//mouse clicked
boolean rPressed = false;//r key
PImage restart;
int rollover = 0;


//-----------------------------------------------setup
void setup() {

  size(1152, 864);
  smooth();
  //Video Camera
  video = new Capture (this, Capture.list()[0]);
  video.start();
  printArray(Capture.list());

  //load ALL images in setup
  startscreen = loadImage ("startscreen.png");
  //Templates
  bellatemp = loadImage ("bellatemp.png");
  celestetemp = loadImage ("celestetemp.png");
  //Ccomments
  Ccomment1 = loadImage ("Ccomment1.png");
  Ccomment2 = loadImage ("Ccomment2.png");
  Ccomment3 = loadImage ("Ccomment3.png");
  Ccomment4 = loadImage ("Ccomment4.png");
  Ccomment5 = loadImage ("Ccomment5.png");
  Ccomment6 = loadImage ("Ccomment6.png");
  Ccomment7 = loadImage ("Ccomment7.png");
  Ccomment8 = loadImage ("Ccomment8.png");
  Ccomment9 = loadImage ("Ccomment9.png");
  // Ccomment10 = loadImage ("Ccomment10.png");
  Ccomment11 = loadImage ("Ccomment11.png");
  Ccomment12 = loadImage ("Ccomment12.png");
  Ccomment13 = loadImage ("Ccomment13.png");

  //Bcommnets
  Bcomment1 = loadImage ("Bcomment1.png");
  Bcomment2 = loadImage ("Bcomment2.png");
  Bcomment3 = loadImage ("Bcomment3.png");
  Bcomment4 = loadImage ("Bcomment4.png");
  Bcomment5 = loadImage ("Bcomment5.png");
  Bcomment6 = loadImage ("Bcomment6.png");
  Bcomment7 = loadImage ("Bcomment7.png");
  Bcomment8 = loadImage ("Bcomment8.png");
  pressC = loadImage ("pressC.png");
  pressB = loadImage ("pressB.png");
  restart = loadImage ("restart.png");
}

void captureEvent(Capture video) {
  video.read();
}


//-----------------------------------------------draw
void draw() {

  image(bellatemp, 0, 0);
  image(celestetemp, 0, 0);
  image(restart, 0, 0);

  //Instagram
  image(pressC, 90, 750);
  image(pressB, 600, 750);
  image(video, 0, 0);
  image(startscreen, 0, 0);

  //boolean



  if (clicked)//bella or celeste
  {
    //background rect
    image(video, 0, 0);
    image(pressC, 90, 750);
    image(pressB, 600, 750);

    //line
    strokeWeight(15);
    stroke(#325d80);
    line(width/2, 0, width/2, height);
  }

  if (rPressed)
  {  
    image(startscreen, 0, 0);
  }
  if (key == 'c') 
  {
    //CAMERA
    image(video, 0, 0);
    image(celestetemp, 0, 0);
    image(restart, 0, 0);

    //ROLLOVERS

    if (mouseY>620 && mouseY<680)
    {
      image(Ccomment2, 0, 0);
    }
    if (mouseY>600 && mouseY<630)
    {
      image(Ccomment1, 0, 0);
    }
    if (mouseY>500 && mouseY<520)
    {
      image(Ccomment4, 0, 0);
    }
    if (mouseY>183 && mouseY<210)
    {
      image(Ccomment6, 0, 0);
    }
    if (mouseY>352 && mouseY<390)
    {
      image(Ccomment7, 0, 0);
    }
    if (mouseY>407 && mouseY<430)
    {
      image(Ccomment8, 0, 0);
    }
    if (mouseY>275 && mouseY<330)
    {
      image(Ccomment9, 0, 0);
    }
    if (mouseY>370 && mouseY<390)
    {
      image(Ccomment11, 0, 0);
    }
  }

  if (key == 'b')
  {
    image(video, 0, 0);
    image(bellatemp, 0, 0);
    image(restart, 0, 0);

    if (mouseY>250 && mouseY<275)

    {
      image(Bcomment1, 0, 0);
    }
    if (mouseY>285 && mouseY<340)
    {
      image(Bcomment2, 0, 0);
    }
    if (mouseY>426 && mouseY<460)
    {
      image(Bcomment4, 0, 0);
    }
    if (mouseY>480 && mouseY<510)
    {
      image(Bcomment5, 0, 0);
    }
    if (mouseY>500 && mouseY<525)
    {
      image(Bcomment6, 0, 0);
    }
    if (mouseY>550 && mouseY<578)
    {
      image(Bcomment7, 0, 0);
    }
    if (mouseY>618 && mouseY<655)
    {
      image(Bcomment8, 0, 0);
    }
  }
}


//-----------------------------------------------mouse pressed
void mousePressed()
{
  if (clicked==false) {
    clicked=true;
  }
  else
  {
    clicked = false;
    rPressed = false;
  }
}
//-----------------------------------------------key pressed

void keyPressed()
{

  if (key=='r') {
    rPressed=true;
  }
}

Answers

  • Here's a look at our code if it helps:

    please format the code, it's obviously a mess

    edit post, highlight the code, press ctrl-o

  • edited November 2016 Answer ✓

    @ccastro --

    Making rollovers stay after being rolled over ... we're not sure if the answer is a boolean or maybe a function?

    Consider your rollover approach:

    • If mouse is here: show image A.

    Now think through adding the boolean approach you suggest:

    • If mouse is here: set flag A to true.
    • If flag A is true: show image A.

    Now, if the mouse is ever here, from then on the image A will always be shown.

    Does this help?

  • edited November 2016

    @jeremydouglass

    Thank you so much!

Sign In or Register to comment.