Animating while draggin

superavi

Hello, I have been struggling to do an animation outside of the draw function. Perhaps it should somehow be inside it...because all of the examples i saw had animation inside the draw function. So for example in the brush1 function i am trying to animate an X one line (/) after the other, to leave a trail of animation. I can maybe add a gif but I really am trying to do it with code.

Any clue would be super appreciated.

Thanks.

void setup()
{
 size(640,960); 
 background(0);
 rectMode(CENTER);
}
void draw()
{
 //
}

void mouseDragged()
{
  float red = map(mouseX, 0, width, 0, 255);
  float blue = dist(mouseX,mouseY,width/2,height/2);
  float green = map(mouseY, 0, width, 0, 255);

  float speed = dist(pmouseX, pmouseY, mouseX, mouseY);
  float alpha = map(speed, 0, 20, 0, 10);
  float lineWidth = map(speed, 0, 10, 1, .5);
  lineWidth = constrain(lineWidth, 0, 10);

  noStroke();
  fill(0, alpha/4);
  rect(width/2, height/2, width, height);

  stroke(red, green, blue, 255);
  strokeWeight(lineWidth);
  //line(pmouseX, pmouseY,mouseX, mouseY);
  brush1(pmouseX, pmouseY,mouseX, mouseY,lineWidth);


}

void brush1(float x,float y, float px, float py, float lineWidth) {
  strokeWeight(lineWidth);  
  int jj = 50;
  pushMatrix();

  line(x,y,px-jj,py-jj);  
 // background(0,0,0);
  line(px,py-jj,x-jj,y);

  popMatrix();
return;
}

TfGuy44

In short, don't do any animation outside of your draw function. Your draw function is what redraws the sketch!

void setup() {
  size(640, 960); 
  background(0);
  rectMode(CENTER);
}

void draw() {
  if (mousePressed) {
    float cred = map(mouseX, 0, width, 0, 255);
    float cblue = dist(mouseX, mouseY, width/2, height/2);
    float cgreen = map(mouseY, 0, width, 0, 255);

    float speed = dist(pmouseX, pmouseY, mouseX, mouseY);
    float calpha = map(speed, 0, 20, 0, 10);
    float lineWidth = map(speed, 0, 10, 1, .5);
    lineWidth = constrain(lineWidth, 0, 10);

    noStroke();
    fill(0, calpha/4);
    rect(width/2, height/2, width, height);

    stroke(cred, cgreen, cblue, 255);
    strokeWeight(lineWidth);
    //line(pmouseX, pmouseY,mouseX, mouseY);
    brush1(pmouseX, pmouseY, mouseX, mouseY, lineWidth);
  }
}

void brush1(float x, float y, float px, float py, float lineWidth) {
  strokeWeight(lineWidth);  
  int jj = 50;
  line(x, y, px-jj, py-jj);  
  line(px, py-jj, x-jj, y);
}

superavi

Ok the structure is not clear to me. But I think I still have the same question. The brush is being called when mousePressed. Can I create the animation inside the brush1 function?

Patakk

Can you please explain in more detail what kind of animation you'd like to achieve? Because I'm not exactly sure what you're saying.

superavi

dorcarmon.com/x.gif For example something like this. At the moment when I draw I have static X drawing. I am trying to create a trail of animated Xs.

Chrisir

I guess you need to fill an arraylist (type PVector) with the positions of the trail and loop over it and draw the animated X independently from the mouse

when you move the mouse, just addd elements to the arraylist

String kindOfXString = "\\"; 

void setup()
{
  size(640, 960); 
  background(0);
  rectMode(CENTER);
}
void draw()
{
  //
  background(0);
  if (frameCount%5 == 0) {  
    if (kindOfXString.equals("\\"))  
      kindOfXString = "/";
    else
      kindOfXString = "\\";
  }
  text (kindOfXString, 23, 23 )  ;
}
//

Patakk

I made my own version of what you'd like to get, adjust it as you wish.

Change vel and offset variables to get different behaviour.

ArrayList<PVector> list = new ArrayList<PVector>();

void setup() {
  size(640, 960);
  frameRate(25);
}

float time = 0;
float vel = 0.1;

void draw() {
  background(0);
  stroke(255, 166);
  strokeWeight(2);

  for (int k = 0; k < list.size (); k++) {
    float x = list.get(k).x;
    float y = list.get(k).y; 

    float offset = k*0.1;

    pushMatrix();
    translate(x, y);
    if ((time + offset)%1 < 0.5)
      line(-20, -20, 20, 20);
    else
      line(20, -20, -20, 20);
    popMatrix();
  }

  time += vel;
}

void mouseDragged() {
  list.add(new PVector(mouseX, mouseY));
}