Islamic pattern anim

let side = 100;

let d, s;

let minlim = side;

let maxlim = side * 3;

​

let s1, s2, s3, s4,bg;

​

let pat;

function preload() {

  s1 = loadImage("sq1.png");

  s2 = loadImage("sq2.png");

  s3 = loadImage("sq3.png");

  s4 = loadImage("sq4.png");

  bg = loadImage("bg.jpg");  

}

​

function setup() {

  createCanvas(side * 4, side * 4);

  frameRate(120);

  imageMode(CENTER);

  pat= [PTN.stripePolygon(random(3,8)),PTN.wave(10,2,5,1),PTN.dot(5,random(1,3)),PTN.triangle(5,5),PTN.checked(2,4)];

​

​

  d = [

    new Square(minlim, minlim, 1, 45, 1, true,s1),

    new Square(maxlim, minlim, 2, 45, 1, false,s2),

    new Square(maxlim, maxlim, 3, 45, 1, false,s3),

    new Square(minlim, maxlim, 4, 45, 1, false,s4),

  ];

​

  s = [

    new Square(minlim, minlim, 1, 0, -1, false,s3),

    new Square(maxlim, minlim, 2, 0, -1, false,s4),

    new Square(maxlim, maxlim, 3, 0, -1, false,s1),

    new Square(minlim, maxlim, 4, 0, -1, false,s2),

  ];

}

​

function draw() {

  background(110,100,100);

​

  rectMode(CENTER);

  s.forEach((i) => {

    i.move();

    i.display();

  });

​

  d.forEach((i) => {

    i.move();

    i.display();

  });

}

​

class Square {

  constructor(x, y, state, angle, dir, rot, img) {

    this.x = x;

    this.y = y;

    this.state = state;

    this.agl = angle;

    this.dir = dir;

    this.rot = rot;

    this.easing = 0;

    this.img = img;

​

    this.side = side;

    this.rotationSpeed = 0.45;

    this.fc = 0;

    this.speed = 120;

    this.ta = this.agl + 180;

    this.p = random(pat);

  }

​

  easeInOutCubic(x) {

    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;

  }

​

  easeInOutElastic(x) {

    const c1 = 1.70158;

    const c2 = c1 * 1.525;

​

    return x < 0.5

      ? (Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2

      : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;

  }

​

  move() {

    if (this.dir == 1) {

      if (this.x >= maxlim && this.state == 1) {

        this.state++;

        this.fc = 0;

        this.ta += 180;

      }

      if (this.y >= maxlim && this.state == 2) {

        this.state++;

        this.ta += 180;

​

        this.fc = 0;

      }

      if (this.x <= minlim && this.state == 3) {

        this.state++;

        this.fc = 0;

        this.ta += 180;

      }

      if (this.y <= minlim && this.state == 4) {

        this.state = 1;

        this.fc = 0;

        this.ta += 180;

      }

​

      this.fc++;

      this.easing = this.easeInOutCubic(map(this.fc, 0, this.speed, 0, 1));

​

      if (this.state == 1) {

        this.x = this.x + (maxlim - this.x) * this.easing;

      }

​

      if (this.state == 2) {

        this.y = this.y + (maxlim - this.y) * this.easing;

      }

​

      if (this.state == 3) {

        this.x = this.x + (minlim - this.x) * this.easing;

      }

​

      if (this.state == 4) {

        this.y = this.y + (minlim - this.y) * this.easing;

      }

​

      if (this.rot) this.agl = this.agl + (this.ta - this.agl) * this.easing;

    }

​

    if (this.dir == -1) {

      if (this.y >= maxlim && this.state == 1) {

        this.state++;

        this.ta += 180;

​

        this.fc = 0;

      }

      if (this.x >= maxlim && this.state == 2) {

        this.state++;

        this.ta += 180;

​

        this.fc = 0;

      }

      if (this.y <= minlim && this.state == 3) {

        this.state++;

        this.ta += 180;

​

        this.fc = 0;

      }

      if (this.x <= minlim && this.state == 4) {

        this.state = 1;

        this.ta += 180;

​

        this.fc = 0;

      }

​

      this.fc++;

      this.easing = this.easeInOutCubic(map(this.fc, 0, this.speed, 0, 1));

​

      if (this.state == 1) {

        this.y = this.y + (maxlim - this.y) * this.easing;

      }

​

      if (this.state == 2) {

        this.x = this.x + (maxlim - this.x) * this.easing;

      }

​

      if (this.state == 3) {

        this.y = this.y + (minlim - this.y) * this.easing;

      }

​

      if (this.state == 4) {

        this.x = this.x + (minlim - this.x) * this.easing;

      }

​

      if (this.rot) this.agl = this.agl + (this.ta - this.agl) * this.easing;

    }

  }

​

  display() {

    push();

    translate(this.x, this.y);

    rotate(radians(this.agl));

    image(this.img,0, 0, this.side, this.side);

    //pattern(this.p);

    //squarePattern(0,0,this.side);

    pop();

  }

}