Rollover issues using Class/Objects

Hey guys!

I'm relatively new to Processing and I am still getting the hang of code placement. I have created a simple visualisation of a scatter graph using a series of classes and would like to get the circles to rollover in a different colour when the mouse hovers over them. I'm sure this is a relatively simple fix but I cannot seem to figure it out so some help would be really appreciated! If you would like to obtain the whole sketch folder I would be more than happy to upload that too.

Thanks in advance, Ryan

//DECLARE 
ArrayList ballCollection; 
Table stateData;
int rowCount;

//Network Display   Soma | Light Blue | Teal | Red | Lavender
color[] SomaScheme = {
  #FDE7DC, #74C8CC, #219399, #FF5C74
};
color[] palette = SomaScheme;
int SomaColour = palette[0];
int ellipseColour = palette[1];

float age;
float degree;
float circleSize = 20;

void setup() {
  size(600, 600);
  smooth();

  //INITIALISE
  //Initialise Table
  stateData = new Table("stateData.tsv"); 
  rowCount = stateData.getRowCount();



  //Initialise ArrayList
  ballCollection = new ArrayList();

  //Provide values for x & y
  for (int row = 0; row < rowCount; row++) {
    float degree = stateData.getFloat(row, 3);
    float age = stateData.getFloat(row, 4);
    float ellipseX = map(age, 30, 41, 0, width); 
    float ellipseY = map(degree, 14, 47, 0, height);

    for (int i = 0; i < rowCount; i++) { 
      Ball myBall = new Ball (ellipseX, ellipseY, circleSize, circleSize); 
      ballCollection.add(myBall); 
    }
  }
}

void draw() {
  background(0);
  for (int row = 0; row < rowCount; row++) {
    float degree = stateData.getFloat(row, 3);
    float age = stateData.getFloat(row, 4);
    float ellipseX = map(age, 30, 41, 0, width); 
    float ellipseY = map(degree, 14, 47, 0, height); 

    //Detect hovering over circle
    if (dist (ellipseX, ellipseY, mouseX, mouseY) < circleSize/2) {
      ellipseColour=palette[2];
      fill(ellipseColour, 160);
      ellipse(ellipseX, ellipseY, circleSize, circleSize);
    } else {
      ellipseColour=palette[3];
      fill(ellipseColour, 160);
      ellipse(ellipseX, ellipseY, circleSize, circleSize);
    }
  }

  //CALL FUNCTIONALITY
  for (int i = 0; i < ballCollection.size (); i++) { 
    Ball myBall = (Ball) ballCollection.get(i); 
    myBall.run();
  }
}
Tagged:

Answers

  • Answer ✓

    There is no code for the class Ball :-?

  • Hey guys, thanks for the reply, I have actually got it kind of working but with serious lag that is causing some issues for the next section of code I need to work on. I have listed the new code below.

    GoToLoop, that was a previous post a while back that i posted where I wasn't using classes. The answers you guys provided there worked in that case but did not work when I changed the code to use classes and ArrayLists.

    Quark, I didn't want to fill up the whole page with code but I will upload the whole sketch folder to a dropbox link here if you want to have a go with it. New code:

    //DECLARE 
    ArrayList ballCollection; 
    Table stateData;
    int rowCount;
    
    //Network Display   Soma | Light Blue | Teal | Red | Lavender
    color[] SomaScheme = {
      #FDE7DC, #74C8CC, #219399, #FF5C74
    };
    color[] palette = SomaScheme;
    int SomaColour = palette[0];
    int ellipseColour = palette[1];
    
    //Circle Create Stuff
    float age;
    float degree;
    float circleSize = 20;
    
    
    void setup() {
      size(600, 600);
      smooth();
    
      //INITIALISE
      //Initialise Table
      stateData = new Table("stateData.tsv"); 
      rowCount = stateData.getRowCount();
    
      //Initialise ArrayList
      ballCollection = new ArrayList();
    
      //Provide values for x & y
      for (int row = 0; row < rowCount; row++) {
        float degree = stateData.getFloat(row, 3);
        float age = stateData.getFloat(row, 4);
        float ellipseX = map(age, 30, 41, 0, width); 
        float ellipseY = map(degree, 14, 47, 0, height);
    
        for (int i = 0; i < rowCount; i++) { 
          Ball myBall = new Ball (ellipseX, ellipseY, circleSize, circleSize); 
          ballCollection.add(myBall);
        }
      }
    }
    
    void draw() {
      background(0);
    
    
      //CALL FUNCTIONALITY
      for (int i = 0; i < ballCollection.size (); i++) { 
        Ball myBall = (Ball) ballCollection.get(i); 
        myBall.over();
        myBall.display();
      }
    }
    

    Ball class: class Ball {

      // GLOBAL VARIABLES
      float x = 0; //declares these variables
      float y = 0;
      //float speedX = random(-1, 1); //speed not being used
      //float speedY = random(-1, 1); //speed not being used
      float circleSizeX;
      float circleSizeY;
      boolean over = false;
      boolean drag = false;
    
    
      //CONSTRUCTOR
      Ball(float tempX, float tempY, float tempcircleSizeX, float tempcircleSizeY) {  //Necessary to build the object, provides function arguments and can give 'setup' values that happens just once when called
        x = tempX; //intialises these variables so that they can be accessed anywhere
        y = tempY;
        circleSizeX = tempcircleSizeX;
        circleSizeY = tempcircleSizeY;
      }
    
      //FUNCTIONS
      void run() { //user function but standard?. used to describe behaviour in this case anyway
        //display   - here Jose is listing all of the behaviours he wants the sketch to include
        display(); //this is already written below so refer to it as a method
      }  
    
      void display() {   //this is a user function but seems to be pretty standard. 
        fill(palette[1]);
        if (over) {
          fill(palette[2]);
        }
        ellipse(x, y, circleSizeX, circleSizeY);
      }
    
      void over() {
        if (dist (x, y, mouseX, mouseY) < circleSize/2){
        over = true;
        }
        else{
        over = false;
        }
      }
    }
    
  • Edit: Figured this out, cheers guys!

Sign In or Register to comment.