​

let walker;

let stepSize = 1;

let crawlStep = 0.5;

let flyStep = 20;

let tStep;

let buffer = 50;

​

let flyChance = 0.1;

let timeSinceUpdate = 0;

​

let pFly, pCrawl, pStay;

let updateChance = 0;

​

let stateVelocity = {

  "stay":0,

  "crawl":0.5,

  "fly":20

}

function preload() {

  img = loadImage("bug.png");

}

​

function setup() {

  createCanvas(500, 500);

  walker = new Walker();

  background(200);

​

  document

    .getElementById("stayButton")

    .addEventListener("click", () => walker.setState("stay"));

  document

    .getElementById("crawlButton")

    .addEventListener("click", () => walker.setState("crawl"));

  document

    .getElementById("flyButton")

    .addEventListener("click", () => walker.setState("fly"));

}

​

function draw() {

  background(200);

  walker.updateState();

  walker.step();

  walker.show();

}

​

class Walker {

  constructor() {

    this.position = createVector(width / 2, height / 2);

    this.velocity = createVector(0, 0);

    this.tx = 0;

    this.ty = 10000;

    this.state = this.getInitialState();

    this.previousState ="stay";

    console.log("initial state: " + this.state);

  }

​

  getInitialState() {

    let r = random();

    if (r < 0.2) return "stay";

    if (r < 0.7) return "crawl";

    return "fly";

  }

​

  setState(newState) {

    this.previousState = this.state;

    this.state = newState;

    timeSinceUpdate = 0;

    console.log(`State changed to: ${newState}`);

  }

​

  updateState() {

    timeSinceUpdate += 1;

    updateChance = min(0.9, pow(max(0, timeSinceUpdate - 10) * 0.0001, 3));

​

    let r = random();

​

    if (r < updateChance) {

      let pFly, pCrawl, pStay;

      this.previousState = this.state;

​

      if (this.state === "stay") {

        pFly = 0.2;

        pCrawl = 1 - pFly;

        this.state = r < pFly ? "fly" : "crawl";

      } else if (this.state === "crawl") {

        pFly = 0.2;

        pStay = 1 - pFly;

        this.state = r < pFly ? "fly" : "stay";

      } else if (this.state === "fly") {

        pCrawl = 0;

        pStay = 1 - pCrawl;

        this.state = r < pCrawl ? "crawl" : "stay";

      }

​

      timeSinceUpdate = 0;

      console.log(`Bug state updated: ${this.state}`);

    }

  }

​

  step() {

    let speedMultiplier = 1; // Default speed

    console.log(this.previousState)

    if (this.state === "stay") {

      speedMultiplier = stateVelocity[this.previousState] * pow(0.9, timeSinceUpdate/5); // Gradually slows down

      this.updateMovement(0.02, speedMultiplier);

    } else if (this.state === "crawl") {

      this.updateMovement(0.005, stateVelocity[this.state]);

    } else if (this.state === "fly") {

      speedMultiplier = 20; // Faster movement

      this.updateMovement(0.02, stateVelocity[this.state]);

    }

  }

​

  updateMovement(tStep, speedMultiplier) {

    this.tx += tStep;

    this.ty += tStep;

​

    let baseVel = createVector(

      map(noise(this.tx), 0, 1, -stepSize, stepSize),

      map(noise(this.ty), 0, 1, -stepSize, stepSize)

    );

​

    this.velocity = baseVel.mult(speedMultiplier);

    this.position.add(this.velocity);

​

    if (this.position.x <= -buffer) this.position.x = width;

    if (this.position.x >= width + buffer) this.position.x = 0;

    if (this.position.y <= -buffer) this.position.y = height;

    if (this.position.y >= height + buffer) this.position.y = 0;

  }

​

  show() {

    stroke(0);

    ellipse(this.position.x, this.position.y, 20);

    img.resize(0, 100);

    //image(img, this.position.x, this.position.y);

  }

}