scale and movement when mouse over

georges4242

Hi !

I have a problem, I would like that when i put my mouse over my sketche, it make an effect like this web site http://veille.reputationsquad.com/#accueil (scale and movement). i have found different example in different forum but all doesn't work. i know the different function like mouseover, scale but i don't know how to use them :s

thanks a lot for your help

emilie

There is my code :

Particle[] pArray;

void setup() {

size( 1000, 500,P3D);           
smooth(4);            
strokeWeight(1);  
stroke(0, 2, 120); 


pArray = new Particle[2000];   


for( int i=0; i<pArray.length; i++ )
{
    pArray[i] = new Particle( random( width ), random( height ), 0 );
    pArray[i].vel.set( 0, 0, 0);
}

}

void draw() {

background(255);
fill(0);
stroke(0, 70);
strokeWeight(1);

for ( int i=0;i<pArray.length;i++ )    {       pArray[i].update();       }



for (int i = 0; i < pArray.length-1; i++) {
  for (int j = i; j < pArray.length; j++) {
    if (dist(pArray[j].pos.x, pArray[j].pos.y, pArray[i].pos.x, pArray[i].pos.y) < 33) {
      line(pArray[j].pos.x, pArray[j].pos.y, pArray[i].pos.x, pArray[i].pos.y);
    }
  }
}

for ( int i=0;i<pArray.length;i++ ) { pArray[i].draw(); }

}

class Particle {

PVector pos;    // pos.x pos.y pos.z
PVector vel;    // vel.x vel.y vel.z
PVector acc;    // acc.x acc.y acc.z



Particle( float x, float y, float z )
{

    pos = new PVector(x, y, z);   
    vel = new PVector();
    acc = new PVector();

}

//acceleration velocité
void update()
{

    vel.add( acc );              
    pos.add( vel );               
    vel.mult( 0.80f );            

    acc.set( 0, 0, 0 );          
}  

//particules creation

void draw() {

    colorMode( RGB, 255, 255, 255 );    
    ellipse( pos.x, pos.y, 4, 4 );   
    point(pos.x, pos.y);
}  

}

kfrajer

Hey Maybe this could do the trick:

int z=0;
void setup() {
  size(100, 100, P3D); 
}

void draw() {
  background(200);
  stroke(255, 50);
  translate(50, 50, z);  
  fill(mouseX * 2, 0, 160);
  sphere(40);
}

void mousePressed(){

  z=z+10;
  if(z==50)
    z=-50;

}

I hope this helps,

Kf

georges4242

thks for the help, but it doesn't work because i think my particles are random and they are not fixed :s in this example the sphere have y and x.

Eeyorelife

I really don't know how you can solve this problem, but It's an interesting problem so I just wanted to think out loud and maybe that will help you.

Okey, so each point has a location and that location is the preferred location. Which means the point will always be attracted to that location no matter where it is. You can use PVectors and some of its functions to create a magnetic pull towards a location.

This attraction will result in the point to move as much in the direction as it can. So if the points preffered location is 10,10 and it has been forced to 15,15, that means it wants to move -5 pixels on the x axis and -5 on the y axis. But if it for some reason cannot move any pixels on the y axis but as many is it wants on the x axis it will move -5 pixels on the x axis because that means it's closer to the original.

On the other hand there is the circle that you control with your mouse. The circle that pushes away all the points. If the point is within this circle it will move away from the center of the circle. So the circle is the opposite force to the magnetic pull of the point. Which means that these forces must be the same when the point is at rest on outskirt of the circle.

You will have to check if the location of the point is a certain distance for the circle using dist(). If it is within the circle, move in the opposite direction of the center of the circle. Which means you will have to calculate in which direction the center of the circle is and then move according to that. At the same time you have to constantly try to move the point back to it's original location.

Hope this helps and gives you an idea of how to attack the problem. good luck!