Weight Line

contributed by Prof WM Harris, using the random function with events to color/weight a line
How to use the random function with events to color/ weight a line dependent on mouse location, left mouse button clicks, character key types, and random key releases.
Functions are created for both the canvas set up as well as the creation of the line. Depending on the action taken by the user the line can vary in width and color. Left mouse button clicks result in a color change to blue, while the typing of any character key will change the color to turquoise, each resulting in a variable stroke weight; the width of the former will be between 0 – 1 while the width of the latter will be 0 – 5. The release of any key will result in a random hue, saturation, and brightness change to the line.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function setup() {
    createCanvas(400, 400);
    background("beige");
    colorMode(HSB);
  }
  
  function draw() {
    //Line from prev pt to current pt
    //of mouse position
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  
  //listen when we click the mouse
  function mouseClicked() {
    //weights 0 to 1
    stroke("slateBlue");
    strokeWeight(random());
  
    //what if want weights 0 to .4?
    //strokeWeight( random(.4) );
  }
  
  //listen when we release *any* key
  function keyReleased() {
    //color hue values between 20 and 145
    //saturation 0 to 100
    //brightness 80 to 100
    stroke(random(20, 145), random(100), random(80, 100));
  }
  
  //listen for only character keys
  function keyTyped() {
    //weights 0 to 5
    stroke("turquoise");
    strokeWeight(random(5));
  }
X

Language Settings

Weight Line