javascript - p5js - 具有 3 个不同位置的动画线

Question

在我的项目中，我有 2 行。当您点击屏幕时，每一行都会改变位置。每条线的位置总是随机落在屏幕宽度的三分之一处。我完成了三分之二的点击和随机位置。

现在我想让线条动画到 mousePress 上的新位置，但我不知道该怎么做。我想知道是否必须以其他方式重建。

有人可以指导我吗？ :slight_smile:

https://editor.p5js.org/antoniofrom1984/sketches/8n9le2Wvh

function setup(){
  createCanvas(windowWidth, windowHeight);
}

function draw(){
  noLoop();
  background(backcolor);
}

function mousePressed(){
  loop();
  var h = height;
  var w = width;
  var thirdsH = [h/3, h/2, h/1.5 ];
  var thirdsV = [w/3, w/2, w/1.5];

  var randomthirdsH = random(thirdsH);
  var randomthirdsV = random(thirdsV);
  strokeWeight(2);
  stroke(linecolor);
  line(0, randomthirdsH, w, randomthirdsH);
  line(randomthirdsV, 0 ,randomthirdsV, h);

  print(randomthirdsH);
}

Answer 1

要执行您想要的操作，您必须删除 noLoop() 指令并在 draw() 中实现动画。

为直线的当前位置定义一个current_pos变量，为直线的目标位置定义一个target_pos变量，为直线的目标位置定义一个speed动画。让 current_pos 和 target_pos 未定义:

let current_pos, target_pos;
let speed = 2;

设置目标位置target_pos，当鼠标按下时:

function mousePressed(){
    var h = height;
    var w = width;
    var thirdsH = [h/3, h/2, h/1.5 ];
    var thirdsV = [w/3, w/2, w/1.5];
    target_pos = [random(thirdsV), random(thirdsH)];
}

一旦定义了target_pos，就开始在draw中画线。如果未定义current_pos，则通过target_pos初始化current_pos。第一次绘制线条时会发生这种情况:

if (target_pos) {
    if (!current_pos) {
        current_pos = [target_pos[0], target_pos[1]];
    } else {
        // [...]
    }

    // [...]
}

当 target_pos 改变时，以 speed 改变 current_pos 并朝 target_pos 的方向稍微移动它>:

for (let i = 0; i < 2; ++i) {
  if (current_pos[i] < target_pos[i])
      current_pos[i] = Math.min(target_pos[i], current_pos[i]+speed)
  else if (current_pos[i] > target_pos[i])
      current_pos[i] = Math.max(target_pos[i], current_pos[i]-speed)
}

始终在 current_pos 画线:

line(0, current_pos[1], width, current_pos[1]);
line(current_pos[0], 0, current_pos[0], height);

请参阅示例，其中我将建议应用于您的原始代码:

let backcolor = (0, 0, 0);
let linecolor = (255, 255, 255);
let current_pos, target_pos;
let speed = 2;

function setup(){
    createCanvas(windowWidth, windowHeight);
  
    // this is just to see somthing at start
    target_pos = [10, 10]
}

function draw(){
    background(backcolor);

    if (target_pos) {
        if (!current_pos) {
            current_pos = [target_pos[0], target_pos[1]];
        } else {
            for (let i = 0; i < 2; ++i) {
               if (current_pos[i] < target_pos[i])
                   current_pos[i] = Math.min(target_pos[i], current_pos[i]+speed)
               else if (current_pos[i] > target_pos[i])
                   current_pos[i] = Math.max(target_pos[i], current_pos[i]-speed)
           }
        }

        // draw lines
        strokeWeight(2);
        stroke(linecolor);
        line(0, current_pos[1], width, current_pos[1]);
        line(current_pos[0], 0, current_pos[0], height);

        // draw target marker
        strokeWeight(3);
        stroke(255, 0, 0);
        line(target_pos[0]-10, target_pos[1], target_pos[0]+10, target_pos[1]);
        line(target_pos[0], target_pos[1]-10, target_pos[0], target_pos[1]+10);
    }
}

function mousePressed(){
    var h = height;
    var w = width;
    var thirdsH = [h/3, h/2, h/1.5 ];
    var thirdsV = [w/3, w/2, w/1.5];
    target_pos = [random(thirdsV), random(thirdsH)];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>