Как частично повернуть линию вокруг исходной точки? (Делая фигурку волной) - PullRequest
Новая
       27

Как частично повернуть линию вокруг исходной точки? (Делая фигурку волной)

2 голосов
/ 26 февраля 2020

Я нарисовал фигурку в 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>

1 Ответ

2 голосов
/ 26 февраля 2020

Чтобы использовать вращение для создания волны изображения, вы можете сначала перевести точку шарнира руки изображения в центр вращения, повернуть и затем перевести обратно туда, где рука соединяется с телом. 

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>
...