在我的项目中,我有 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);
}
最佳答案
要执行您想要的操作,您必须删除 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>
关于javascript - p5js - 具有 3 个不同位置的动画线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56393345/