We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpSyntax Questions › Making the rectangles grow in size upon rollover
Page Index Toggle Pages: 1
Making the rectangles grow in size upon rollover (Read 461 times)
Making the rectangles grow in size upon rollover
Jan 13th, 2008, 5:56pm
 
Hi, you can probably tell by the name of this subject how new I am to Processing... I am learning about it in school, and I've been working on this code for a project...

I was just wondering how I could manage to make the individual rectangles grow in size upon rollover while they move in a wave like motion... I used the Additive Wave example as a basis, and I'm making changes from there.

Here is the code so far:


int xspacing = 10;  
int w;            
int maxwaves = 15;

float theta = 0.0f;
float[] amplitude = new float[maxwaves];  
float[] dx = new float[maxwaves];        
float[] yvalues;                        

void setup() {
 size(800,600);
 frameRate(60);
 colorMode(RGB, 255, 255, 255, 100);
 smooth();
 w = width+16;

 for (int i = 0; i < maxwaves; i++) {
   amplitude[i] = random(10,30);
   float period = random(100,200);
   dx[i] = (TWO_PI / period) * xspacing;
 }

 yvalues = new float[w/xspacing];
}

void draw() {
 background(255);
 calcWave();
 renderWave();
}

void calcWave() {

 theta += 0.03;


 for (int i = 0; i < yvalues.length; i++) {
   yvalues[i] = 0.0f;
 }

 for (int j = 0; j < maxwaves; j++) {
   float x = theta;
   for (int i = 0; i < yvalues.length; i++) {

     if (j % 2 == 0)  yvalues[i] += sin(x)*amplitude[j];
     else yvalues[i] += cos(x)*amplitude[j];
     x+=dx[j];
   }
 }
}

void renderWave() {
 noStroke();
 fill(120, 30);
 rectMode(CENTER);
 for (int x = 0; x < yvalues.length; x++) {
   rect(x*xspacing,width/2+yvalues[x],30,30);
 }
}

If any of you experts could give me some idea of how to integrate the mouseX or mouseY function into this to make the shapes grow, I'd be utterly grateful!!!
Re: Making the rectangles grow in size upon rollov
Reply #1 - Jan 13th, 2008, 7:51pm
 
1) you can draw a bigger square when the distance between the cursor (mouseX, mouseY) and the position of your square (x*xspacing, width/2+yvalues[x]) is under a specified threshold.

2) if you want something smoother (like, not only draw bigger squares, but increment/decrement size depending on mouse position), you'll have to store each square's size. you can do that with a separate array (just as the y values are stored in the yvalues array) or - object oriented way - merge all these data in an array of Square objects (x, y, size).
Re: Making the rectangles grow in size upon rollov
Reply #2 - Jan 13th, 2008, 11:00pm
 
Thanks very much for the help.
Page Index Toggle Pages: 1