​

const scene = {

  groundLevel: height - 50,

  wheelDropZone: 150,

  wheelsDownPoint: width - 200,

  stopPoint: width - 42,

  treeStart: 0,

  treeSpacing: 120

};

​

function setup() {

  createCanvas(width, height);

  noStroke();

}

​

// The plane's origin is the center of the back wheel

const airplane = {

  x: 0,

  y: 0,

  wheelDiameter: 6,

  points: [

    [-17, -3],

    [-22, -9],

    [-17, -13],

    [-24, -30],

    [-17, -30],

    [-7, -13],

    [37, -13],

    [42, -9],

    [37, -3]

  ],

  approachAngle: -0.3,

  descent: 0.9

};

​

function drawPlane() {

  function drawWheel(x) {

    fill(0, 0, 0);

    circle(x, 0, airplane.wheelDiameter);

  }

​

  function drawBody() {

    fill(192, 0, 204);

    beginShape();

    airplane.points.forEach(p => vertex(p[0], p[1]));

    endShape();

  }

​

  push();

  translate(airplane.x, airplane.y);

  rotate(airplane.angle);

  drawWheel(0);

  drawWheel(30);

  drawBody();

  pop();

}

​

function movePlane() {

  airplane.x += 1;

  const planeHeight =

    scene.groundLevel - airplane.wheelDiameter / 2 - airplane.y;

  if (planeHeight > 0) {

    airplane.y += airplane.descent;

    airplane.angle = airplane.approachAngle + planeHeight / 400;

  } else if (airplane.x < scene.wheelsDownPoint - scene.wheelDropZone) {

    airplane.angle = airplane.approachAngle;

  } else if (airplane.x < scene.wheelsDownPoint) {

    const wheelDropProgress =

      scene.wheelDropZone - scene.wheelsDownPoint + airplane.x;

    const wheelDropRatio = wheelDropProgress / scene.wheelDropZone;

    airplane.angle =

      airplane.approachAngle - airplane.approachAngle * wheelDropRatio;

  } else if (airplane.x < scene.stopPoint) {

    airplane.x -= 0.6;

    airplane.angle = 0;

  } else {

    noLoop();

  }

}

​

function drawTrees() {

  scene.treeStart -= 16 * Math.cos(airplane.x * Math.PI / 2 / width) ** 2;

  if (scene.treeStart < -scene.treeSpacing) {

    scene.treeStart += scene.treeSpacing;

  }

  for (let tree = scene.treeStart; tree < width; tree += scene.treeSpacing) {

    fill("peru");

    const leavesStart = scene.groundLevel - 40;

    rect(tree - 2, leavesStart, 4, 40);

    fill("springgreen");

    triangle(

      tree - 20,

      leavesStart,

      tree + 20,

      leavesStart,

      tree,

      leavesStart - 70

    );

  }

}

​

function drawGround() {

  fill("darkkhaki");

  rect(0, scene.groundLevel, width, height - scene.groundLevel);

}

​

function draw() {

  background(200, 255, 255);

  drawGround();

  drawTrees();

  drawPlane();

  movePlane();

}

​