如何创建一条随着您在 p5.js 中绘制更多而后退的线条？

Question

目前在一个网站上工作，该网站在悬停时具有一些线条图。当你画得更多时，我怎样才能让线自然后退？现在我已经想出了如何画一条连续的线。

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

Answer 1

您可以将鼠标位置的值存储在一个数组中，然后依次绘制数组中的点。更新数组时，如果已满，则必须擦除数组的最后一个点，将所有点向后移动一个位置并添加新点。以下是示例代码。我建议你咨询 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();
  }
}

如何创建一条随着您在 p5.js 中绘制更多而后退的线条？

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

p5.js