// https://davdata.nl/math/turning_radius.html

​

// Wheel dimensions

// Car = 7W x 5H

// Wheels 3W and 3H apart in each axis

let H = 15;

let W = 1.75*H;

​

// params

const WHEEL_PADDING = H/2;

const MOV_SPEED = 2;

const ROT_SPEED = 0.5;

let ANGLE = 45;

let rotationAngle = 0;

let pivotX = 0;

let pivotY = 0;

let R = 0; // outer circle (red)

let r = 0;

​

function setup() {

  createCanvas(840, 600);

  pivotX = 2*W;

  pivotY = -1.5*H-4*W/tan(ANGLE);

  R = -4*W/sin(ANGLE);

  r = (-pivotY-1.5*H);

}

​

function mouseWheel(event) {

  print(event.delta);

  //move the square according to the vertical scroll amount

  H -= event.delta/100;

  W = 1.75*H;

  //uncomment to block page scrolling

  //return false;

}

​

function draw() {

  background(25);

  stroke(255);

  fill(255, 25);

  rectMode(CENTER);

  angleMode(DEGREES);

  //UI

  push();

  noStroke();

  fill(255, 100);

  textAlign(CENTER);

  textSize(16);

  text("Car Steering Visualization by Gholamreza Dar 2023", width/2, 20);

  pop();

  push();

  noStroke();

  fill("white");

  text("alpha = "+ANGLE+" degrees", 10, 20);

  pop();

  push();

  noStroke();

  fill("red");

  text("r  = "+Math.round(r), 10, 40);

  pop();

  push();

  noStroke();

  fill("rgb(0,147,255)");

  text("R = "+Math.round((-R)), 10, 60);

  pop();

  push();

  noStroke();

  fill("rgba(176,191,204,0.25)");

  text("Use the arrow keys to move the car", 10, 80);

  pop();

  // Get Input (WASD)

  // MOVE

  if(keyIsDown(UP_ARROW)){

    rotationAngle -= MOV_SPEED/R*100;

  }else if(keyIsDown(DOWN_ARROW)){

    rotationAngle += MOV_SPEED/R*100;

  }

  // STEER

  if(keyIsDown(RIGHT_ARROW)){

    ANGLE += ROT_SPEED;

  }else if(keyIsDown(LEFT_ARROW)){

    ANGLE -= ROT_SPEED;

  }

  // Center around pivot

  // push();

  // translate(-pivotX, -pivotY);

  // push();

  // translate(width/2, height/2);

  // Center around the car

  push();

  translate(-pivotX, -pivotY-r+100); // 100 for better center alignment

  push();

  translate(width/2, height/2);

  // Calculate the pivot of rotation here based on ANGLE

  pivotX = 2*W;

  pivotY = -1.5*H-4*W/tan(ANGLE);

  R = -4*W/sin(ANGLE);

  r = -pivotY-1.5*H;

  // red and blue circles

  push();

  stroke("rgba(255,0,0,0.54)");

  noFill();

  circle(pivotX, pivotY, -2*r);

  pop();

  push();

  stroke("rgba(0,190,255,0.54)");

  noFill();

  circle(pivotX, pivotY, 2*(R));

  pop();

  // Pivot point

  translate(pivotX, pivotY);

  push()

  fill("rgba(240,248,240,0.6)");

  noStroke();

  circle(0,0,10);

  pop()

  rotate(rotationAngle);

  translate(-1*pivotX,-1*pivotY);

​

  // Helper Lines

  push()

  stroke(255, 65);

  line(2*W,1.5*H, 2*W, -r-1.5*H);

  line(-2*W,1.5*H, 2*W, -r-1.5*H);

  line(-2*W,-1.5*H, 2*W, -r-1.5*H);

  pop()

  // Car chasis

  rect(0, 0, 7*W, 5*H, H); // radius H

  // Wheels

  // left rear wheel

  push();

  translate(2*W, 2*H-WHEEL_PADDING); 

  rect(0, 0, W, H, H/3); // radius H/3

  pop();

  // right rear wheel

  push();

  translate(2*W, -2*H+WHEEL_PADDING); 

  rect(0, 0, W, H, H/3); // radius H/3

  pop();

  // left front wheel

  push();

  translate(-2*W, 2*H-WHEEL_PADDING);

  rotate(ANGLE);

  rect(0, 0, W, H, H/3); // radius H/3

  pop();

  // right front wheel

  push();

  translate(-2*W, -2*H+WHEEL_PADDING); 

  rotate(ANGLE);

  rect(0, 0, W, H, H/3); // radius H/3

  pop();

  pop();

  pop();

}