javascript - 使用 p5.js 在 Javascript 中的 2 个角度之间旋转图像
问题描述
我想在流畅的动画cos(20)
之间旋转我的图像。-cos(20)
树是用branch()
函数递归完成的。我不知道如何用循环来做到这一点。是否有内置函数或特定算法可以这样做?
let angles = 0;
var strokeValue = 1;
function setup() {
const canvas = createCanvas(540, 400);
frameRate(8);
}
function draw() {
background(220);
angle = PI/8;
translate(250, height);
// I think the rotate function should be here
branch(90);
}
function branch(length) {
strokeWeight(strokeValue);
line(1, 1, 1, -length);
translate(0, -length);
if (length > 4) {
//Right branches
push();
rotate(angle);
branch(length * 0.72);
pop();
// left branches
push();
rotate(-angle);
branch(length * 0.72);
pop();
push();
// middle
rotate(-angle * 0.2);
branch(length * 0.3);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
解决方案
我试过这个,虽然我不确定这是你要求的,所以请随时发表评论。
let angles = 0;
var strokeValue = 1;
function setup() {
const canvas = createCanvas(540, 400);
frameRate(30);
}
function draw() {
background(220);
angle = PI/8;
translate(250, height);
// I think the rotate function should be here
rotate(cos(map(frameCount / 10,0,100,-20,20)));
branch(90);
}
function branch(length) {
strokeWeight(strokeValue);
line(1, 1, 1, -length);
translate(0, -length);
if (length > 4) {
//Right branches
push();
rotate(angle);
branch(length * 0.72);
pop();
// left branches
push();
rotate(-angle);
branch(length * 0.72);
pop();
push();
// middle
rotate(-angle * 0.2);
branch(length * 0.3);
pop();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
推荐阅读
- cgal - CGAL 枚举/识别网格边界
- python - 在 django 中安装 mysqlclient 时出现以下错误
- python - 如何从每月重新采样到每年并返回到每月值 = 每年的每月?
- javascript - 失败的道具类型:道具`onPress`在`Button`中标记为必填,但其值为`undefined`
- oracle - TOAD 可以选择创建插入脚本来添加新数据吗?
- c - 有没有办法控制gets() 或fgets() 函数何时(或何处)开始接受输入?
- javascript - 在两个对象数组之间相交并仅保留匹配的元素并根据对象的键删除不匹配的元素
- r - 存储在R中列表中的矩阵的列矩阵乘法?
- python - 有没有比将 str 映射到 float 然后映射到 int 更好的方法?
- php - 查询中的变量和 UNION ALL 语法