CODEWITHSUNDEEP
p5.js
tofuninja
tofuninja

Reputation: 45

How do I create a line that recedes as you draw more in p5.js?

Currently working on a site that features some line drawing while hovering. How can I make the line recede naturally as you draw more? Right now I've figured out how to draw a continual line.

var canvas;
var button;

function windowResized() {
    console.log('resized');
    resizeCanvas(windowWidth, windowHeight);
}

function setup () {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0,0);
    canvas.style('z-index', '-1')
    background(175);
    // button = createButton("Start Your Walk");
}

function draw () {
    strokeWeight(4);
    console.log('button')
    line(pmouseX, pmouseY, mouseX, mouseY)
}

Upvotes: 1

Views: 187

Answers (1)

xImperiak
xImperiak

Reputation: 384

You may store the values of your mouse position in an array and then draw the points of the array in order. When the array is updated, if it is full, you will have to erase the last point of the array, move all the points one position backwards and add the new point. The following would be an example code. I recomend you to consult this page for documentation and also the p5 reference.

var mousePositions = [];

function setup() {
  createCanvas(400, 400);
}


function draw() {
  background(220);
  v = createVector(mouseX, mouseY);
  mousePositions.push(v);
  noFill();
  beginShape();
  for(var i = 0; i < mousePositions.length; i++){
    vertex(mousePositions[i].x, mousePositions[i].y);
  }
  endShape();
  if(mousePositions.length > 25){
    mousePositions.shift();
  }
}

Upvotes: 2

Related Questions