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

【问题标题】：How to partially rotate a line around a point of origin? (Making a stick figure wave)如何围绕原点部分旋转一条线？（做一个简笔画波浪）
【发布时间】：2020-02-26 00:45:54
【问题描述】：

我在 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);

}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript animation rotation transform p5.js

【解决方案1】：

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

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;  
  }
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"&gt;&lt;/script&gt;

【讨论】：