Creating chalk-like lines

p5.js Beginners
1

Hi all!

I’m so excited to find out there is a forum for p5.js :slightly_smiling_face:

So, I’m trying to create something that will look like chalky, sort of vertical lines similar to the attached picture.

chalk_lines
chalk_lines1920×1917 480 KB

Using the below code, I managed to create random vertical lines but they have no chalk effect.

The question is how do you add to what I did to arrive at the final result?

Here is my code

function setup() {
  createCanvas(600, 600, SVG);
}

function draw() {
  
  background(0);
  stroke("#ffffff");
  strokeWeight(1.3);
  noFill();

  let xoff = 0.0;

  beginShape();
  for (x = 0; x < width; x++) {
    
    //let y = random(height*1.5)
    let y = map(noise(xoff), 0, 1, 0, height);
    
    
    vertex(x, y*2);
    
    vertex(x+0.2, y);
    vertex(x+0.3, y);
    vertex(x+0.4, y);
  
    
    xoff += 0.3;
  }
  endShape();

  //noLoop();
}
1 Like