The formula for calculating the speed of the mouse’s horizontal motion is the absolute value of the difference between mouseX and pmouseX. The absolute value of a number is defined as that number without its sign:
  • The absolute value of –2 is 2.
  • The absolute value of 2 is 2.
In Processing, we can get the absolute value of the number by placing it inside the abs() function. The speed at which the mouse is moving is therefore:
  • abs(mouseX – pmouseX)
Update Example 3-4 so that the faster the user moves the mouse, the wider the drawn line.
Example

exercise_3_7

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

void setup() {
  size(200, 200);
  background(255);
  smooth();
}

void draw() {
  stroke(0);
  strokeWeight(abs(pmouseX - mouseX));
  line(pmouseX, pmouseY, mouseX, mouseY);
}

7 Comments
»

  1. I was interested to see the solution for this, I arrived the same solution printed but I thought that there may be a way to get the stroke width operating on the Y axis too. I tried to make the strokewidth the total of abs(pmouseX – mouseX) and abs(pmouseY – mouseY) then dividing this by figure 2 to get the average…no joy! I’m not yet proficient enough to know where my error is!

    Comment by Abdul — August 26, 2009 @ 8:38 am

  2. That’s right, try this!

    strokeWeight((abs(pmouseX – mouseX) + abs(pmouseY-mouseY))/2);

    Comment by admin — August 26, 2009 @ 6:10 pm

  3. Thanks that was really helpful, (I think I got a little muddled my parenthesis before) – spot the punn!

    Comment by Abdul — August 30, 2009 @ 9:28 am

  4. How can someone do the opposite?The slower the mouse moves the wider the drawn line ?

    Comment by Lalaios — November 1, 2009 @ 2:39 pm

  5. You can use the map() function to map a range that goes from 0-10 to, say, 10-0. You can also do this with simple math of course:

    int x = 10 – x;

    if x is 0, x becomes 10, if x is 2, x becomes 8, etc.

    You have to watch out though b/c you can’t have a strokeWeight of less than 0. Here is some code to start with:

      float mouseSpeed = constrain(abs(pmouseX - mouseX),0,20);
  float thickness = map(mouseSpeed,0,20,20,0);

  strokeWeight(thickness);
  line(pmouseX, pmouseY, mouseX, mouseY);

    Comment by admin — November 2, 2009 @ 11:34 am

  6. How about this one?

    float thickness = sqrt(sq(pmouseX-mouseX)+sq(pmouseY-mouseY));
    strokeWeight(thickness);
    line(pmouseX, pmouseY, mouseX, mouseY);

    Of course this then can be modified like this to invert the behaviour:
    float thickness = 10 / sqrt(sq(pmouseX-mouseX)+sq(pmouseY-mouseY));

    Comment by Nils — December 31, 2009 @ 1:14 pm

  7. how about this :
    (it seems to work, though i havent really read up the if and else functions)

    void setup() {
  size(1000,500);
  background(0);      // line repeating drawing
  smooth();
  stroke(225);
}

void draw() {
float a = abs(pmouseX-mouseX);  // specifying a variablle to set limits to
  if (a >10)  {                 // limit set
    strokeWeight(50);       // max thickness
  }
  else
  {
      strokeWeight (a);       // variable within limit
  }
  line(pmouseX,pmouseY,mouseX,mouseY);
}

    Comment by meto — March 9, 2010 @ 12:55 pm

Leave a comment