Move points with PVector

djevazi

Hello! Need help with PVectors. Here is my sketch, and you can see orange points and a red brush in it. The question is - how to make brush move these points (on mouse pressed), using PVectors. And I want this movement to be smooth - if the point is near the center of the brush, point moves 100%, and if the point is near the border of the brush, the movement power is fading.

void setup()
{
  size(700,700);
}


void draw()
{
  background(#75849D);

  for(int i=10;i<width;i=i+40)
  {
    for(int j=10;j<height;j=j+40)
    {
      PVector tempPos = new PVector(i,j);
      Point p1 = new Point(tempPos);
      p1.display();
    }
  }

  Brush br1 = new Brush();
  br1.display();
}


class Point
{
  PVector pos;

  Point(PVector posIn)
  {
    pos = posIn;
  }

  void display()
  {
    noStroke();
    fill(#DBA350);
    ellipse(pos.x,pos.y,5,5);  
  }
}


class Brush
{
  int size = 200;

  void display()
  {
    noFill();
    stroke(255,0,0);
    ellipse(mouseX,mouseY,size,size);
    ellipse(mouseX,mouseY,size/2,size/2);
    ellipse(mouseX,mouseY,2,2);
  }
}

jeremydouglass

First, you are creating your points every single draw loop. Create them in setup(), then loop through them in draw().

Second, you in order to refer to a list of your points you need to save a list (an array, or an ArrayList) of your points! You are creating each point with the same name, then throwing those names away. See the objects and class demos and examples in the Processing Reference.

Third, you say "if the point is near the center of the brush." How would you write that line, in a line of code? "if" "the point" "is near" "the center of the brush". Then were would you put that line?

djevazi

jeremydouglass, thanks for help, I already did some successful steps. Of course, I need to initialize an ArrayList of class instances in setup, maybe a few weeks without programming makes me forgot something)) Now working on smooth movement, trying to use dist(), but got no result yet. I'll post my code later.

jeremydouglass

@djevazi -- glad to hear that you are making progress. Good luck with it!

Keep in mind that you can also use map() and lerp() if you are trying to scale or interpolate sets of values.

djevazi

these two function I still don't understand, but I'll try to! thanx!

jeremydouglass

Look at the Interpolate Example and the Map Example to help you understand those functions.

kfrajer

@djeazi

Those functions are not difficult to understand and are very very helpful. I will strongly suggest to become familiar with them.

For example for map, imagine you want the user to input a number from 0 to 9 and you want your background color to be shades of gray (including black and white) based on theuser's input. If 0 then your background is black, if the input were 5 then it is a gray color right btw black and white. If 9 then your background is white. You do that with the following code:

color myMoodColor=color(0);

void setup(){
  size(300,200);
}

void draw(){
  background(myMoodColor);
}

void keyPressed(){
   if(key>='0' && key <='9'){
         myMoodColor=color(map(key-'0',0,9,0,255));

         //Another version, key interpreted as ASCII characters
         //It works as the previous line
         //myMoodColor=color(map(key,'0','9',0,255));
    }

}

Kf

djevazi

Thanks for example, will try to use it in my work

djevazi

Code update

ArrayList<Point> points = new ArrayList<Point>();

void setup()
{
  size(700,700);

  for (int i=10;i<width;i=i+40)
  {
    for (int j=10;j<width;j=j+40)
    {
      PVector temp = new PVector(i,j);
      Point pt1 = new Point(temp);
      points.add(pt1);
    }
  }
}


void draw()
{
  background(#626A76);

  for (int i = points.size ()-1; i >= 0; i--)
  { 
    points.get(i).display();
  }

  for (int i = points.size ()-1; i >= 0; i--)
  {
    Point p1 = new Point(points.get(i).pos);
    for(int j = points.size ()-1; j >= 0; j--)
    {
      Point p2 = new Point(points.get(j).pos);
      if(i!=j && dist(p1.pos.x,p1.pos.y, p2.pos.x,p2.pos.y)<20)
      {
        PVector mouse = new PVector(p1.pos.x,p1.pos.y);
        mouse.sub(p2.pos);
        mouse.setMag(0.5);
        p2.pos.sub(mouse);
      }
    }
  }

  PVector tempBrPos = new PVector(mouseX,mouseY);
  Brush br1 = new Brush(tempBrPos);
  br1.display();

  if (mousePressed)
  { 
    for (int i = points.size ()-1; i >= 0; i--)
    { 
      if(dist(points.get(i).pos.x,points.get(i).pos.y,br1.pos.x,br1.pos.y)<br1.size/2)
      {
        float omgX=0;
        float omgY=0;

        float ddd = 100-dist(points.get(i).pos.x,points.get(i).pos.y,br1.pos.x,br1.pos.y);

        if(pmouseX<mouseX)omgX=br1.size;
        if(pmouseX>mouseX)omgX=-br1.size;
        if(pmouseX==mouseX)omgX=0;
        if(pmouseY<mouseY)omgY=br1.size;
        if(pmouseY>mouseY)omgY=-br1.size;
        if(pmouseY==mouseY)omgY=0;

        PVector mouse = new PVector(mouseX*omgX,mouseY*omgY);
        mouse.sub(points.get(i).pos);
        mouse.setMag((ddd/(br1.size))*10);
        if(pmouseX!=mouseX||pmouseY!=mouseY) points.get(i).pos.add(mouse);
      }
    }
  }
}


class Point
{
  PVector pos;

  Point(PVector posIn)
  {
    pos = posIn;
  }

  void display()
  {
    noStroke();
    fill(#DBA350);
    ellipse(pos.x,pos.y,5,5);  
  }
}


class Brush
{
  int size = 200;
  PVector pos;

  Brush(PVector posIn)
  {
    pos = posIn;
  }

  void display()
  {
    noFill();
    stroke(255,0,0);
    ellipse(pos.x,pos.y,size,size);
    ellipse(pos.x,pos.y,size/2,size/2);
    ellipse(pos.x,pos.y,2,2);
  }
}

jeremydouglass

@djevazi -- does "code update" mean that everything is now working for you?

djevazi

@jeremydouglass -- I'm not quite happy about the points behaviour while moving (they running to the border of the brush too much), but that's a great start for experimenting and improving! I think that the task is solved, but if you have any suggestions about improving the code, please, feel free to post.