Is there a way to make brush movement softer, instead of easing or delay function?

djevazi

I have a brush and I want it to move softly. The problem is that if I use delay function, the brush strokes is too dotty, and if I use "easing", all my strokes are connecting, so I get one big line instead of separated strokes. Is there another way to make soft brush movement?

Chrisir

here is an example where the longer you hold the mouse in one spot, the more pixels will appear

did you mean that?

int windowX = 500;
int windowY = 500;

float startX=-1, startY=-1;

final int lineMode   = 0;
final int circleMode = 1;
final int rectMode   = 2;
final int brushMode  = 3;
int mode = brushMode;

void setup() {
  size(500, 500);
  background(255);
  println("Modes: e, r, l (current mode = line mode). Right mouse to start. c to clear. q to quit.");
  fill(0);
  text("Modes: e, r, l, b. mouse to start. c to clear. q to quit.", 14, 14);
} // func 

void draw() {


  if (mode==lineMode) {
    if (startX>=0) {
      stroke(random(pmouseX), random(pmouseY), abs(pmouseX-pmouseY));
      line(startX, startY, pmouseX, pmouseY);
    }
  } else if  (mode==circleMode) {
    //
    if (startX>=0) {
      noFill();
      stroke(random(pmouseX), random(pmouseY), abs(pmouseX-pmouseY));
      ellipse (startX, startY, mouseX-startX, mouseY-startY);
    }
  } else if  (mode==rectMode) {
    //
    if (startX>=0) {
      noFill();
      stroke(random(pmouseX), random(pmouseY), abs(pmouseX-pmouseY));
      rect (startX, startY, mouseX-startX, mouseY-startY);
    }
  } else if  (mode==brushMode) {
    // NEW 
    if (startX>=0) {
      noFill();
      for (int i=0; i<11; i++) {
        float r=random(18);
        float angle = random(TWO_PI); 
        float x1=(r*cos(angle)) + mouseX;
        float y1=(r*sin(angle)) + mouseY;
        stroke(255, 0, 0); 
        point(x1, y1);
      }
    }
  } else {
    println("Error on mode : 176");  
    exit();
  }
} // func 

void keyPressed()
{
  if (keyPressed) {
    if (key == 'c') {
      background(255);
      text("Modes: e, r, l, b. mouse to start. c to clear. q to quit.", 14, 14);
    } else if (key==ESC) {
      key=0;
      startX=-1;
    }
    // ---------------------- modes 
    else if (key=='e') {
      mode = circleMode;
      println ("mode = circle Mode");
      startX=-1;
    } else if (key=='l') {
      mode = lineMode;
      println ("mode = line Mode");
      startX=-1;
    } else if (key=='r') {
      mode = rectMode;
      println ("mode = rect Mode");
      startX=-1;
    } else if (key=='b') {
      mode = brushMode;
      println ("mode = brush Mode");
      startX=-1;
    }

    // ---------------------------- quit 
    else if (key=='q') {
      exit(); // quit
    }
  } //
} // func 

void mousePressed() {
  startX=mouseX;
  startY=mouseY;
}

void mouseReleased() {
  startX=-1;
  startY=-1;
}
//

Chrisir

can you post your code so that we know what you mean ?

djevazi

if (mousePressed == true) { float targetX = mouseX; float dx = targetX - x; x += dx * easing;

float targetY = mouseY; float dy = targetY - y; y += dy * easing;

ellipse(x, y, brushsize, brushsize); } // My code is something like this. I use "easing" from standart example, this works fine for moving objects, but when I tried to use it with drawing brush, it draws me trajectories everywhere, connecting my strokes to one line.

djevazi

and another question - how to post a code like you did it? in separate window with line numbers?

djevazi

oh, I found an english word to describe what I want to do - the word is "lag". the brush have to draw with a little lag, that gives a posiibility to draw a smooth lines. hope that makes sense.

Chrisir

how to format code

you can highlight your code (select it) and hit ctrl-o

empty line before and after it

Chrisir

here is another code, where the dots are connected with a line

float dx, dy, x, y, targetX, easing=.99;

float brushsize= 4.0;

float oldX=-3, oldY;

void setup() {
  size(1400, 800);
}

void draw() {

  if (mousePressed == true) { 
    float targetX = mouseX; 
    float dx = targetX - x; 
    x += dx * easing;

    float targetY = mouseY; 
    float dy = targetY - y; 
    y += dy * easing;

    ellipse(x, y, brushsize, brushsize);
    if (oldX>=0)
      line(oldX, oldY, x, y);
    oldX=x;
    oldY=y;
  } //
}

djevazi

maybe you do not understand me correctly, I want to draw smooth-curved lines without connection of my brush strokes, but the problem is that standart easing connects my strokes, and I'm asking is there another way to draw smooth-curved lines without using easing.

djevazi

djevazi

here is an example - the lines are smooth-curved (this is good), but all the strokes are connected (this is not good, I want every stroke be separate).

Chrisir

do you mean general or the places where the color changes?

I can't help you with that...

djevazi

different colors is the different strokes. I draw them in different places of canvas, but there is always an unwanted connection from one stroke to the next.

Chrisir

I see

post your code

I'll fix it

djevazi

float x; // easing float y; float easing = 0.1; int r1; int g1; int b1;

void setup()
{ size(800,800); background(0); frameRate (100); }

void draw()
{ if (mousePressed == true)
{ float targetX = mouseX; // easing float dx = targetX - x; x += dx * easing;

    float targetY = mouseY;
    float dy = targetY - y;
    y += dy * easing;

    fill(r1, g1, b1); 

    ellipseMode(CENTER);
    noStroke();
    ellipse(x, y, 5, 5);

    ellipseMode(CENTER);
    noStroke();
    ellipse(width-x, y, 5, 5);
  }

}

void mouseReleased() { r1 = int(random(100, 255)); g1 = int(random(100, 255)); b1 = int(random(100, 255)); }

djevazi

still dont understand how to post code correctly, the code below is one piece of code, dont know why site separates it : (

Chrisir

float x; // easing 
float y; 
float easing = 0.1; 
int r1; 
int g1;
int b1;

void setup()
{ 
  size(800, 800); 
  background(0); 
  frameRate (100);
}

void draw()
{ 
  if (mousePressed)
  { 
    float targetX = mouseX; 
    // easing
    float dx = targetX - x; 
    x += dx * easing;

    float targetY = mouseY;
    float dy = targetY - y;
    y += dy * easing;

    fill(r1, g1, b1); 

    ellipseMode(CENTER);
    noStroke();
    ellipse(x, y, 5, 5);

    // mirror
    ellipseMode(CENTER);
    noStroke();
    ellipse(width-x, y, 5, 5);
  }
}

void mousePressed() {
  x=mouseX;
  y=mouseY;
}

void mouseReleased() { 
  r1 = int(random(100, 255)); 
  g1 = int(random(100, 255)); 
  b1 = int(random(100, 255));
}

djevazi

wow! working! thank you : ) but the difference is just in "void mousePressed" ?

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

djevazi

thanks, GoToLoop

Chrisir

the difference is just in "void mousePressed" ?

yes, just in the function mousePressed() - it now sets x and y to the mouse position so that x,y don't interfere with our easing formula anymore

djevazi

cool, thanks again!

Chrisir

this works because the function mousePressed() gets only called once in the moment you press the mouse button initially, whereas the variable mousePressed (in draw() line 17) is true throughout

so with the function mousePressed()we set the next line up (preparing it) whereas in draw we draw the line through the entire time

djevazi

understood