Shoulder rotation in svg-CodePudding

Need help gurus svg. The code is provided in the link. Now my smallest arm of the mechanism moves along the slider relative to the first arm. I want to fix it. It is necessary that the smallest shoulder moves relative to the middle shoulder, and not the large one. Please! I will be grateful for your help! https://codesandbox.io/s/beautiful-taussig-z3ct8v?file=/sketch.js

var rotSliderA, rotSliderB, rotSliderC;

var w1 = 150;
var h1 = 25;
var w2 = 100;
var h2 = 20;
var w3 = 150;
var h3 = 15;
/////////////////////////////////////////////////
function setup() {
  createCanvas(720, 400);
  rotSliderA = createSlider(0, 180, 0);
  rotSliderA.position(20, 20);
  rotSliderA.style('width', '200px');
  rotSliderB = createSlider(0, 180, 0);
  rotSliderB.position(20, 50);
  rotSliderB.style('width', '200px');
  rotSliderC = createSlider(0, 180, 0);
  rotSliderC.position(40, 70);
  rotSliderC.style('width', '200px');
}
//////////////////////////////////////////////////
function draw() {
  strokeWeight(3);
  noFill();
  background(200);

  translate(width / 2, height / 2);

  ellipse(0, 0, 3, 3);

  rotate(radians(rotSliderA.value()));
  rect(-10, -h1 / 2, w1, h1);
  translate(w1 - 20, 0);

  ellipse(0, 0, 3, 3);
  
  rotate(radians(rotSliderB.value()));
  rect(-10, -h2 / 2, w2, h2);

  rotate(radians(rotSliderC.value()));
  ellipse(100, 0, 3, 3);
  rect(80, -h3/2, w3/2, h3);
}

CodePudding user response：

after you draw the second arm (rect), you should call translate(w2 - 20, 0); to move the rotate center.

full draw function, please see below:

//////////////////////////////////////////////////
function draw() {
  strokeWeight(3);
  noFill();
  background(200);

  translate(width / 2, height / 2);

  ellipse(0, 0, 3, 3);

  rotate(radians(rotSliderA.value()));
  rect(-10, -h1 / 2, w1, h1);
  translate(w1 - 20, 0);

  ellipse(0, 0, 3, 3);
  rotate(radians(rotSliderB.value()));
  rect(-10, -h2 / 2, w2, h2);
  translate(w2 - 20, 0);

  rotate(radians(rotSliderC.value()));
  ellipse(0, 0, 3, 3);

  rect(-10, -h3 / 2, w3, h3);
}