Basic Mouse rollover

Programming Questions

diamond_e..

in Programming Questions • 5 months ago

Hi I was wondering if anyone would be able help me with my code. I am a total beginner and I know this question must have been asked a thousand times. I have a horizontal graph with 100 lines and I just want each indivudial one to chance colour when the mouse rolls over it.

This is my code so far. I'd really appreciate if anyone could help me

Cell[][]grid;

//call x y position
int rowQty;
int x = 10;
int y = 550;

int cols = 0;
int rows = 200;

float r = random(0, 300);
//spacing of colums
int spacing = 19;
//declare Y position spacing
int newSpacing = 5;
int newY = 24;

//Type of font used
PFont myFont;

void setup() {
//Declare the size of the canvas
size(screen.width, screen.height);

//set size and font type
background(255);

//display Image
PImage Key = loadImage("Key.png");
//Size of key image
Key.resize(400, 0);
//This positions the key image
image(Key, 600, 40);
//This loads the books image
PImage bookworm = loadImage("bookworm.png");
bookworm.resize(400, 0);
//This tints the books image
tint(255, 50);
image(bookworm, 1500, 105);

//Display font type and font size
myFont = createFont("Times", 14, true);
textFont(myFont);
textAlign(RIGHT);

//Display csv file data
String dataLines[] = loadStrings("Book.csv");
//declare rows
rowQty = dataLines.length;
//Show the data within the csv file

//States that book name is text
String[] Book;
//States that number is string
int[] Amount;

//declare the data types
Book = new String [rowQty];

Amount = new int [rowQty];

for (int i = 0; i < rowQty; i++) {
    String[]temp= split(dataLines[i], ',');
    Book[i] = (temp[0]);
    Amount[i] = int(temp[1]);
}
for (int n= 0; n <rowQty; n++) {
    // graph colour
    fill(3, 255, 232);
    rect(x, y, 20, -Amount [n]/.5);
    x = x + spacing;
    rotate(PI/-2);
    //Book names colour
    fill(#FF0000);
    text(Book[n], -630, newY);

//Number text colour
fill (0);

    text(Amount[n], -580, newY);
    newY += newSpacing +14;
    rotate(PI/2);
}
}

void draw() {
grid = new Cell[cols][rows];
for (int i = 0; i <cols; i ++) {
for (int j = 0; j < rows; j ++) {

grid[i][j] = new Cell(i*10, j*10, 10, 10, i+j);
}
}

// values for columns and Rows

for (int i = 0; i <cols; i ++) {
    for (int j = 0; j < rows; j ++) {
      //oscilate and display each object
      grid[i][j].oscillate();
      grid[i][j].display();
    }
}
}

Replies(7)

v.k.

Re: Basic Mouse rollover

5 months ago

The code above will not compile as there is no Cell class in it. That's not very helpful, anyway I made you an example:

int vertSize = 400;
int cellSize = 10;
int numCells = vertSize/cellSize;
Cell[] c = new Cell[numCells];
void setup(){
size(600, vertSize);
for(int i=0; i < c.length; i ++)
{
c[i] = new Cell(0, i*cellSize, cellSize);
//c[i].display();
}
}
///////////////////////////////
void draw(){
background(255);
fill(255,0,255);
rect(100,100,100,100);
for(int i=0; i < c.length; i ++)
{
c[i].display();
}
}
/////////////////////////////
class Cell{
float x_pos, y_pos;
float v_size;
Cell(float _x_pos, float _y_pos, float _v_size){
x_pos = _x_pos;
y_pos = _y_pos;
v_size = _v_size;
}
void display(){
if(isOver())
fill(220, 240, 255);
else
fill(255);
rect(x_pos-2, y_pos, width+2, v_size);
}
boolean isOver(){
float lower = y_pos + v_size;
return mouseY > y_pos && mouseY < lower;
}
}

PhiLho

Re: Basic Mouse rollover

5 months ago

Yes, you forgot a background() call at the start of draw(), and you throw away all the cells created in the previous frame, to create a new array of them, which defeats the purpose of having objects...

(In other words, move the creation and initialization of the array to setup.)

diamond_e..

Re: Basic Mouse rollover

5 months ago

Apologies, I forgot to give the class cell code.

That's it below. Like I said I'm a total beginner and I haven't got a clue what i'm doing. Thanks so much for the help.

//declare cell object and class
class Cell{

float x=0,y=0;// x position y position
float w=0,h=0;// declaring width and height
float angle;// oscillation

Cell(float tempX,float tempY,float tempW,float tempH,float tempAngle){
x = tempX;
y = tempY;
w = tempW;
h = tempH;
angle = tempAngle;
}

//oscillate
void oscillate(){
angle +=0.1;
}
// display the rect's
void display(){
stroke(0);
// rect position / colour / sine
fill(700+700*sin(angle));
rect(x,y,w,h);
}
}

boolean between( int target, int bound1, int bound2 ){
if( target >= bound1 && target <= bound2 ){ return( true ); }
if( target <= bound1 && target >= bound2 ){ return( true ); }
return( false );
}

diamond_e..

Re: Basic Mouse rollover

5 months ago

This is a link to all my code if it makes it any easier to understand

https://gist.github.com/anonymous/5d381824e66e58f9a340

PhiLho

Re: Basic Mouse rollover

5 months ago

Have you tried to follow my advice? Move the the 6 first lines inside draw() to setup() (at its end, for example), and add a background() call at the start of draw().

diamond_e..

Re: Basic Mouse rollover

5 months ago

Thank you PhiLho for your help. And thank you V.K for your code. I took your advice and rearranged my code. I moved the first 6 lines from draw() to setup() like you said but inserting the background() call at the start of draw gave me this error. "The method background(int) in the type PApplet is not applicable for the arguments()" so I just left it out.

I have added more to my code but i think a lot of it may be un-necessary. I have also tried to add a mouse follow that has resulted in small ellipses appearing all over the screen and staying there. My intention was for it to just be a small trail that follows the mouse. I have also tried to implement v.k's code into my own. I am now getting the error "The Constructor Books.Cell (int, int, int, int, int) is undefined"

Here is what my code looks like now

Cell[][]grid;

//call x y position

int rowQty;

int x = 10;

int y = 550;

int cols = 0;

int rows = 200;

float r = random(0, 300);

//spacing of colums

int spacing = 19;

//declare Y position spacing

int newSpacing = 5;

int newY = 24;

//Type of font used

PFont myFont;

void setup() {

//Ensures the size of the canvas fits the size of the csv data file

size(screen.width, screen.height);

//set size and font type

background(255);

//display Image

PImage Key = loadImage("Key.png");

//Size of key image

Key.resize(400, 0);

//This positions the key image

image(Key, 600, 40);

//This loads the books image

PImage bookworm = loadImage("bookworm.png");

bookworm.resize(400, 0);

//This tints the books image

tint(255, 50);

image(bookworm, 1500, 105);

//Display font type and font size

myFont = createFont("Times", 14, true);

textFont(myFont);

textAlign(RIGHT);

//Display csv file data

String dataLines[] = loadStrings("Book.csv");

//declare rows

rowQty = dataLines.length;

//Show the data within the csv file

//States that book name is text

String[] Book;

//States that number is string

int[] Amount;

//declare the data types

Book = new String [rowQty];

Amount = new int [rowQty];

for (int i = 0; i < rowQty; i++) {

String[]temp= split(dataLines[i], ',');

Book[i] = (temp[0]);

Amount[i] = int(temp[1]);

}

for (int n= 0; n <rowQty; n++) {

// graph colour

fill(3, 255, 232);

rect(x, y, 20, -Amount [n]/.5);

x = x + spacing;

rotate(PI/-2);

//Book names colour

fill(#FF0000);

text(Book[n], -630, newY);

//Number text colour

fill (0);

text(Amount[n], -580, newY);

newY += newSpacing +14;

rotate(PI/2);

text("Top 100 selling books Worldwide", 900, 50);

grid = new Cell[cols][rows];

for (int i = 0; i <cols; i ++) {

for (int j = 0; j < rows; j ++) {

grid[i][j] = new Cell(i*10, j*10, 10, 10, i+j);

}

void draw() {

// Body

stroke(0);

fill(#FFFFFF);

ellipseMode(CENTER);

// mouseX is a keyword that the sketch replaces with the horizontal position of the mouse.

// mouseY is a keyword that the sketch replaces with the vertical position of the mouse.

ellipse(mouseX, mouseY, 10, 10);

// values for columns and Rows

for (int i = 0; i <cols; i ++) {

for (int j = 0; j < rows; j ++) {

//oscilate and display each object

grid[i][j].oscillate();

grid[i][j].display();

}

void display(){

if(isOver())

fill(106, 0,178);

else

fill(3, 255, 232);

ellipse(x=0-2, y=0, width+2, v_size);

}

boolean isOver(){

float lower = y_pos +v_size;

return mouseY > y_pos && mouseY < lower;

}

And this is my external class code

//declare cell object and class

class Cell {

float x=0, y=0;// x position y position

float w=0, h=0;// declaring width and height

float angle;// oscillation

float v_size;

Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle, float tempV_size) {

x = tempX;

y = tempY;

w = tempW;

h = tempH;

v = tempV_size;

angle = tempAngle;

}

//oscillate

void oscillate() {

angle +=0.1;

}

// display the rect's

void display() {

stroke(0);

// rect position / colour / sine

fill(700+700*sin(angle));

rect(x, y, w, h);

}

boolean between( int target, int bound1, int bound2 ) {

if ( target >= bound1 && target <= bound2 ) {

return( true );

}

if ( target <= bound1 && target >= bound2 ) {

return( true );

}

return( false );

}

I hope there is a way out of all these errors :)

Thanks

PhiLho

Re: Basic Mouse rollover

5 months ago

background(): we write it this way to avoid typing the parameters, which can vary with your preferences, anyway. Check the reference: you need to put a number between the parentheses, for example.

Constructor: you call it with five parameters, while it expects six.

Top Reply