如何围绕原点部分旋转一条线？（做一个简笔画波）

Question

我在 p5.js 中画了一个简笔画，我正试图让它挥动。本质上，我必须部分地旋转构成其绕原点（坐标（40,290））的手臂的线。

我想让它在下面代码中给出的红线和蓝线之间跳动，让它看起来像是在挥舞。不过，我不太确定该怎么做。我一直在尝试使用 rotate() 函数，但没有取得多大成功。

如有任何帮助，我们将不胜感激。

function setup() {
  createCanvas(400, 400);
  background(220);
}

/*
MY SKETCH OVERVIEW:

Person 1 is waving using animation
*/

function draw() {
  //person1
  stroke('black');
  line(20, 395, 40, 355); //left leg
  line(40, 355, 60, 395); //right leg
  line(40, 355, 40, 250); //body
  line(40, 290, 20, 320); //left arm
  ellipse(40, 220, 60); //head

  //person1 waving (animation)
  stroke('red');
  line(40, 290, 60, 250); //p1 right arm

  stroke('blue');
  line(40, 290, 80, 285);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

为了使用旋转使图像波动，您可以先将图像手臂的铰链点平移到旋转中心，旋转然后平移回手臂连接 body 的位置。

function setup() {
  createCanvas(400, 400);
  background(220);
}

// Person 1 is waving using animation

var theta=0;
var increaseAngle=true;
function draw() {
  // set background so we get animation
  background(220);
  //person1
  stroke('black');
  line(20, 395, 40, 355); //left leg
  line(40, 355, 60, 395); //right leg
  line(40, 355, 40, 250); //body
  line(40, 290, 20, 320); //left arm
  ellipse(40, 220, 60); //head

  // translate so that the hinge point of the right arm is centered
  translate(40, 290);
  rotate(theta);
  translate(-40, -290);

  //person1 waving (animation)
  stroke('red');
  line(40, 290, 60, 250); //p1 right arm
  if (increaseAngle){
    theta += 0.01;
  } else {
    theta -= 0.01;
  }
  // reverse motion when theta reaches an extreem
  if (theta > PI/2){
   increaseAngle = false;  
  } 
  if (theta < 0){
    increaseAngle = true;  
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

如何围绕原点部分旋转一条线？（做一个简笔画波）

How to partially rotate a line around a point of origin? (Making a stick figure wave)

javascript

animation

transform

rotation

p5.js

如何围绕原点部分旋转一条线？ （做一个简笔画波）

How to partially rotate a line around a point of origin? (Making a stick figure wave)

javascript

animation

transform

rotation

p5.js

如何围绕原点部分旋转一条线？（做一个简笔画波）