Draw Detectable Buttons in a Loop
in
Programming Questions
•
1 year ago
Hi everyone,
I'm trying to create a timeline, where each circular node on a line represents a year.
Using a "startyear" and "endyear" variable, I can adapt the timeline to whatever range of years I need.
What I'm trying to do, though, is make it so each node will change color when it is rolled over.
What I have right now, is that the node directly to the right of the node I've rolled over changes color! So clearly, there's some kind of incrementing issue...
I'm pasting the code below - I hope someone can help!
Thanks,
V
- //global variables
- int distFromEdge = 100; //distance from the edge of the window
- int startYear = 1997; //first year
- int endYear = 2012; //last year
- int currentYear = startYear; //current year in the loop; start at startyear
- int yearSpacing = (endYear-startYear); //how many spaces are there?
- int circleSize = 30; //node diameter
- float x = distFromEdge; // X-Position of node for the loop
- int circleY = height/2; // Y-Position of nodes always - must be along the line
- float[] circleX = new float[yearSpacing+1]; //an array of each nodes x position
- int indexYear = 0; //this will be the index for circleX[] above
- boolean circleOver = false;//are we over a node?
- void setup() {
- size(1080, 240);
- smooth();
- background(151, 151, 2);
- fill(255);
- //circle pos
- ellipseMode(CENTER);
- //the line
- strokeWeight(10);
- strokeCap(ROUND);
- line(0+distFromEdge, height/2, width-distFromEdge, height/2);
- }
- void draw() {
- int intervals = (width-(2*distFromEdge))/yearSpacing; //get intervals between nodes in px
- strokeWeight(6);
- update(mouseX, mouseY, circleX[indexYear], height/2);
- if (circleOver) {
- stroke(255, 206, 0); //change color
- } else {
- stroke(0); //or stay black
- }
- if (currentYear>endYear){ //stop loop from going off the screen
- currentYear = startYear;
- x = distFromEdge;
- }
- indexYear=currentYear-startYear; //as currentYear increments, this will too
- circleX[indexYear]=x;
- if (currentYear%5==0){ //div by 5 or 0? EX: year 2000, 2005, 2010, etc.
- ellipse(x, height/2, circleSize, circleSize);
- } else {
- ellipse(x, height/2, circleSize/2, circleSize/2);
- }
- x = x + intervals; //move to next node
- currentYear++; //increment year
- }
- void update(int x, int y, float circleX, int circleY){
- if( overCircle(circleX, height/2, circleSize) ) {
- circleOver = true;
- } else {
- circleOver = false;
- }
- }
- boolean overCircle(float x, int y, int diameter)
- {
- float disX = x - mouseX;
- float disY = y - mouseY;
- if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
- return true;
- } else {
- return false;
- }
- }
1