HTTP/2 200 date: Sun, 12 Oct 2025 06:18:15 GMT content-type: text/html server: cloudflare last-modified: Thu, 28 Oct 2010 14:02:44 GMT cf-cache-status: DYNAMIC vary: Accept-Encoding nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=Vmzp3qWO07U%2B1nGjKbdTXE2tUK%2B4CnjtF2N5AchCMtrdmivasG7lM1DeZi%2BVsyQsU6nETEP2wS3tRPkPNe3ijw5lByYvs4ssH%2BBaqRw%3D"}]} content-encoding: gzip cf-ray: 98d47a942dee428a-BOM alt-svc: h3=":443"; ma=86400

Processing.js

Reach3

Based on code from Keith Peters (www.bit-101.com) The arm follows the position of the ball by calculating the angles with atan2().

Original Processing.org Example: Reach3

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
int numSegments = 6;
float[] x = new float[numSegments];
float[] y = new float[numSegments];
float[] angle = new float[numSegments];
float segLength = 15;
float targetX, targetY;
float ballX = 50;
float ballY = 50;
int ballXDirection = 1;
int ballYDirection = -1;
void setup() {
  size(200, 200);
  smooth(); 
  strokeWeight(20.0);
  stroke(0, 100);
  noFill();
  x[x.length-1] = width/2;     // Set base x-coordinate
  y[x.length-1] = height;  // Set base y-coordinate
}
void draw() {
  background(226);
  
  strokeWeight(20);
  ballX = ballX + 1.0 * ballXDirection;
  ballY = ballY + 0.8 * ballYDirection;
  if(ballX > width-25 || ballX < 25) {
    ballXDirection *= -1; 
  }
  if(ballY > height-25 || ballY < 25) {
    ballYDirection *= -1; 
  }
  ellipse(ballX, ballY, 30, 30);
  
  reachSegment(0, ballX, ballY);
  for(int i=1; i<numSegments; i++) {
    reachSegment(i, targetX, targetY);
  }
  for(int i=x.length-1; i>=1; i--) {
    positionSegment(i, i-1);  
  } 
  for(int i=0; i<x.length; i++) {
    segment(x[i], y[i], angle[i], (i+1)*2); 
  }
}
void positionSegment(int a, int b) {
  x[b] = x[a] + cos(angle[a]) * segLength;
  y[b] = y[a] + sin(angle[a]) * segLength; 
}
void reachSegment(int i, float xin, float yin) {
  float dx = xin - x[i];
  float dy = yin - y[i];
  angle[i] = atan2(dy, dx);  
  targetX = xin - cos(angle[i]) * segLength;
  targetY = yin - sin(angle[i]) * segLength;
}
void segment(float x, float y, float a, float sw) {
  strokeWeight(sw);
  pushMatrix();
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  popMatrix();
}