​

function preload() {

  img = loadImage('https://media.giphy.com/media/BSx6mzbW1ew7K/giphy.gif');

}

function setup() {

  createCanvas(400, 400);

  w = new Walker(img, 100, 100, (Math.random() > 0.5 ? 1 : -1)*Math.ceil(Math.random() * 12),100,100)

}

​

function draw() {

  c = color("#134477")

  background(c);

  w.update()

  w.display()

}

​

function Walker(img,x,y,z,w,h) {

  this.img = img

  // Start Walker in center

  this.pos = createVector(x || (width / 2), y || ( height/2),z||0);

  // Start with 0 velocity

  this.vel = createVector(0, 0, 0);

  this.angle = 0;

  this.width = w || 100

  this.height = h || 100

  this.widthStart = w

  this.heightStart = h

  this.accMagStart = 0.01

  this.update = function() {

    // Vector at mouse location

    var mouse = createVector(mouseX, mouseY, 0);

    // Vector pointing from Walker to mouse

    this.acc = p5.Vector.sub(mouse, this.pos);

    // Setting the magnitude of that vector

    this.acc.setMag(this.accMagStart);

​

    // Position & angle

    this.vel.add(this.acc);

    let x1,y1,z1;

    x1 = this.pos.x

    y1 = this.pos.y

    z1 = this.pos.z

    this.pos.add(this.vel);  

    var deltaX = this.pos.x - x1;

    var deltaY = this.pos.y - y1;

    var rad = Math.atan2(deltaY, deltaX);

    this.angle = rad * (180 / Math.PI)

    //Transparency & size (z)

    let divided = false;

    if (this.pos.z < 0)

    {

      let divider = Math.log(-1*this.pos.z)

      if (divider > 1) {

        divided = true;

        this.width = this.widthStart/divider

        this.height = this.heightStart/divider

        this.acc.setMag(this.accMagStart/divider)

      }

    }

    if (!divided) {

      this.width = this.widthStart;

      this.height = this.heightStart;

      this.acc.setMag(this.accMagStart)

    }

  }

​

  this.display = function() {

    // Draw Walker as circle

    fill(255);

    //ellipse(this.pos.x, this.pos.y, 48, 48);

    imageMode(CENTER);

    //translate(img_x+img_width/2, img_y+img_width/2);

    translate(this.pos.x+this.width/2, this.pos.y+this.height/2);

    rotate(PI/180*this.angle);

    let divider = this.width / this.widthStart;

    if (divider > 0 && divider < 1) {

      tint(255,255*Math.sqrt(divider))

    }

    image(this.img, 0, 0, this.width, this.height);

    rotate(-PI / 180 * this.height);

    translate(-(this.pos.x+this.width/2), -(this.pos.y+this.height/2));

    imageMode(CORNER);

    //rotate_and_draw_image(this.pos.x, this.pos.y, 150,150,this.angle )

  }

}

​

                                                              30,6