Chapter 3: Exercise 3-7: Continous Line with Varying Thickness

• http://www.vspline.com Abdul

  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!

• admin

  That’s right, try this!

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

• http://www.vspline.com Abdul

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

• Lalaios

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

• admin

  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);
  

• Nils

  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));

• meto

  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);
  }
  

• mercedes

  first when I WAS DOING IT WITHOUT YHE EXAMPLE ,AS EVERY TIME I STATED TO DRAW A VERY THIK LINE APPAREAD ,I TOOUGHT I WAS DOING SOMETHING WRONG,BUT COPING AND PASTING HAD THE SAME RESULTS

• maria

  Hello,
  I am loving the book! I am working on my lesson 1 project now! I am making buildings but when I use the quad() to make the side (to look like perspective) it looks wrong when I use smooth() but not if I don’t use it. What’s going on?Here is my code:

  void setup(){
  size(400,200);
  background(104,199,245);
  smooth();
  }

  void draw(){

  rectMode(CORNER);
  rect(25, 150, 40, 50);//1st building
  quad(25, 150, 20, 165, 20, 200, 25, 200);//1st building side
  }

  Thanks!!

• http://twitter.com/shiffman Daniel Shiffman

  Sorry, I don’t see any difference between having smooth() or not. What exactly isn’t working?

• maria

  Well, I practice on different computers and I realize that the very old one, when I used this code without the smooth() the lines of the quad shape would go above the rect shape. But it doesnt happen with my other computers! weird. I am soo passed that now:) My end project for that was this: http://www.openprocessing.org/visuals/?visualID=25799
  I am learning so much thanks again!!

• Angelozhang

  Hi, here is may code.

  void setup(){
  size(500,500);
  smooth();
  stroke(170,230,120);
  background(150,10,70);
  }

  void draw(){
  strokeWeight(abs((pmouseX-mouseY)/5));
  line(pmouseX,mouseY,mouseX,mouseY);
  }

• Anonymous

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

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