var setAngleP

var setLengthP;

var setAngleS;

var setLengthS;

var setAnglePw;

var setLengthPw;

var run;

​

function setup() {

  createCanvas(400, 400);

  bob = new Bob(width / 2, height / 2, 100, 45);

  setAngleP = createP("Angle from 0 to 359 degrees");

  setAngleP.position(0, 410);

  setAngleP.style("color: white; font-size: 15px");

  setAngleS = createSlider(0, 359, 45, 1);

  setAngleS.position(0, 450);

  setLengthP = createP("Length from 1 to 190 pixels");

  setLengthP.position(200, 410);

  setLengthP.style("color: white; font-size: 15px");

  setLengthS = createSlider(1, 190, 100, 1);

  setLengthS.position(200, 450);

  setAnglePw = createP("45°");

  setAnglePw.position(60, 460);

  setAnglePw.style("color: white; font-size: 20px");

  setLengthPw = createP("100");

  setLengthPw.position(260, 460);

  setLengthPw.style("color: white; font-size: 20px");

}

​

function draw() {

  background(0);

  setAnglePw.html(setAngleS.value() + "°");

  setLengthPw.html(setLengthS.value());

  push();

  translate(width / 2, height / 2);

  rotate(-radians(setAngleS.value()) + PI / 2);

  noFill();

  stroke(255, 100);

  strokeWeight(3);

  line(0, 0, setLengthS.value(), 0);

  ellipse(setLengthS.value(), 0, 20, 20);

  pop();

  bob.update();

  bob.show();

}

​

function change() {

  bob.angleVel = 0;

  bob.angle = -radians(setAngleS.value()) + PI;

  bob.len = setLengthS.value();

}

​

function drawArrow(base, vec, myColor) {

  push();

  stroke(myColor);

  strokeWeight(vec.mag() / 15);

  fill(myColor);

  translate(base.x, base.y);

  line(0, 0, vec.x, vec.y);

  rotate(vec.heading());

  let arrowSize = vec.mag() * 3 / 14;

  translate(vec.mag() - arrowSize, 0);

  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);

  pop();

}

​

function Bob(px, py, length, angle) {

  this.pivot = createVector(px, py);

  this.angle = -radians(angle) + PI;

  this.angleVel = 0;

  this.angleAcc = 0;

  this.len = length;

  this.g = 0.25;

  this.damping = 0;

​

  this.getAcc = function() {

    var g = this.g;

    var R = this.len;

    var theta = this.angle;

    var acc = g / R * sin(theta);

    return acc;

  };

​

  this.update = function() {

    this.angleAcc = this.getAcc();

    this.angleVel += this.angleAcc;

    this.angleVel *= (1 - this.damping / 25);

    this.angle += this.angleVel;

  };

​

  this.show = function() {

    push();

    translate(this.pivot.x, this.pivot.y);

    rotate(this.angle - PI / 2);

    fill(255);

    stroke(255);

    strokeWeight(3);

    drawArrow(createVector(this.len, 0), createVector(0, this.angleVel * 1000), "red");

    line(0, 0, this.len, 0);

    ellipse(this.len, 0, 20, 20);

    pop();

  };

}