如何使椭圆缓和以从 p5.js 开始？答案

【问题标题】：How can I make an ellipse ease down to start in p5.js?如何使椭圆缓和以从 p5.js 开始？
【发布时间】：2020-08-03 21:28:53
【问题描述】：

我在 p5.js 中进行了一个小交互，当按下鼠标时椭圆会移动，然后在松开鼠标时缓和到起始位置。

代码如下：

var easing = 0.01;
var start =  290;
var x = 0;
var y = 190;

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

function draw() {
  background(220);

if (mouseIsPressed) {
  
ellipse (mouseX, mouseY, 20, 20);
  } else {
    var targetX = mouseX;
    x += (mouseX - x) * easing;
    ellipse(start, y, 20, 20);
  }
}

【问题讨论】：

请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。

标签： javascript p5.js

【解决方案1】：

这应该可以解决问题。

var easing = 0.01;
var startX = 290;
var startY = 190;
var x = 0;
var y = 0;

function setup() {
  createCanvas(400, 200);
  x = startX;
  y = startY;
}

function draw() {
  background(220);

  if (mouseIsPressed) {
    x = mouseX;
    y = mouseY;
  } else {
    x += (startX - x) * easing;
    y += (startY - y) * easing;
  }
  
  ellipse(x, y, 20, 20);
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

【讨论】：

有没有办法让椭圆保持在画布的范围内？感谢您的帮助！
在绘制椭圆之前检查 x 和 y 以查看它们是否在相机旁边，如果是，请将值设置为可以达到的最大值