如何解决如何从 p5.js 中的特定点旋转矩形形状
translate(width/2,height/1.87)
rotate(angle);
angle++;
rectMode(CENTER)//can i modify the rectmode and make it rotate at other point of the rect
rect(0,100,30)
我可以修改 rectMode 并让它在 rect 的其他点旋转吗?
解决方法
如果要围绕轴心点旋转,请translate()
移动矩形,使轴心点位于坐标系的原点。之后,rotate()
矩形,最后translate()
它在世界上的位置:
translate(target_x,target_y);
rotate(angle);
translate(-pivot_x,-pivot_y);
function setup() {
createCanvas(300,300);
}
// (-5,15) measured form the center of the rectangle
let pivot_x = -5,pivot_y = 15;
// Position at which the pivot point should be moved in the world
let target_x = 150,target_y = 100;
let angle = 0;
let angle_change = 0.01;
function draw() {
background(255);
push()
translate(target_x,target_y);
rotate(angle);
translate(-pivot_x,-pivot_y);
noFill();
stroke(0)
rectMode(CENTER)
rect(0,100,30);
pop();
noStroke();
fill(255,0);
circle(target_x,target_y,5)
angle += angle_change;
if (abs(angle) > 0.5)
angle_change *= -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。