javascript - 如何使椭圆缓和以从 p5.js 开始?
问题描述
我在 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);
}
}
解决方案
这应该可以解决问题。
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>
推荐阅读
- python-3.x - VOCBboxDataset 在应用于我的数据集时返回不正确的数据集大小
- r - 以持久的方式将新的用户输入和修改保存到本地文件
- java - 我应该如何正确使用@Value?
- hyperledger-fabric - 超级账本结构:不能注册多个用户
- python - python 3.5 / 我正在尝试在 python 中的文件夹中绘制图像并在每个文件夹上绘制一个框,然后关闭它并打开下一个
- ibm-watson - 关于扬声器标签如何在 android 中显示扬声器标签
- javascript - 从 div 获取 data-id 的函数
- angular - 通过 HTTP CRUD 工作流上的通用方法发送标头
- javascript - 发送 JSON 到不同的地址然后 res
- python-3.x - Web Scraping Linkedin 分页不适用于搜索