var size = 50;

​

function setup() {

  createCanvas(600, 600);

  rectMode(CENTER);

  angleMode(DEGREES);

​

  for (let m = 0; m <= width; m = m + width / 2) {

    for (let n = 0; n <= height; n = n + height / 2) {

      let centerX = m + width / 4;

      let centerY = n + height / 5;         // randomness

      tri.push(new penrose(

        centerX,

        centerY

      ));

    }

  }

}

​

function draw() {

  background(22,133,248);

  for (let i = 0; i < tri.length; i++) {

    tri[i].update();

  }

}

​

class rotator {

  constructor(x, y, w, h, s) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.a = 0; // angle

    this.s = 1;

  }

​

  update() {

    push();

    translate(this.x, this.y);

    rotate(this.a);

    stroke(245,39,137);

    strokeWeight(3);

    fill(250,235,44);

    rect(0, 0, this.w, this.h);

    pop();

    this.a = this.s + this.a;

    this.w = this.s + this.w;

    this.h = this.s + this.h;

        if (this.w >= width/8) {this.w = this.s - this.w;}

    if (this.h >= height/8) {this.h = this.s - this.h;}

  }

}

​

class penrose {

  constructor(centerX, centerY) {

    /*

     *                    p1

     *                  /   \

     *         /       \

     *            s2     s3

     *           /  (x,y)  \

     *        /             \

     *      p2 - s1 - s4 - p3

     *

     * p1 = (x,y-r*(sqrt(3)-1))

     * p2 = (x-r, y+r)

     * p3 = (x+r, y+r)

     */

    this.centerX = centerX;

    this.centerY = centerY;

    this.r = 100; // set

    this.inc = 3;

    this.rectSize = 50;

//    this.rectSize = map(mouseX, 0, width, 50, 100);

    this.count = 0;

​

    this.s1 = [];

    this.s2 = [];

    this.s3 = [];

    this.s4 = []; // extension of s1

​

    for (let x = this.centerX - this.r + this.inc; x < this.centerX; x = x + 2 * this.inc) {

      // p2 = (x-r, y+r)

      // p3 = (x+r, y+r)

      let x1 = this.centerX - this.r;

      let y1 = this.centerY + this.r;

      let x2 = this.centerX + this.r;

      let y2 = this.centerY + this.r;

      // linear equation

      let y = (y2 - y1) / (x2 - x1) * x + (x2 * y1 - x1 * y2) / (x2 - x1);

​

      this.s1.push(new rotator(

        x,

        y,

        this.rectSize,

        this.rectSize,

        (x / 1000) % 1000 // angle

      ));

      this.count++;

    }

​

    for (let x = this.centerX - this.r; x <= this.centerX; x = x + this.inc) {

      // p1 = (x,y-r*(sqrt(3)-1))

      // p2 = (x-r, y+r)

      let x1 = this.centerX;

      let y1 = this.centerY - this.r * (sqrt(3) - 1);

      let x2 = this.centerX - this.r;

      let y2 = this.centerY + this.r;

      // linear equation

      let y = (y2 - y1) / (x2 - x1) * x + (x2 * y1 - x1 * y2) / (x2 - x1);

      this.s2.push(new rotator(

        x,

        y,

        this.rectSize,

        this.rectSize,

        (x / 1000) % 1000 // angle

      ));

    }

​

    for (let x = this.centerX; x <= this.centerX + this.r; x = x + this.inc) {

      // p1 = (x,y-r*(sqrt(3)-1))

      // p3 = (x+r, y+r)

      let x1 = this.centerX;

      let y1 = this.centerY - this.r * (sqrt(3) - 1);

      let x2 = this.centerX + this.r;

      let y2 = this.centerY + this.r;

      // linear equation

      let y = (y2 - y1) / (x2 - x1) * x + (x2 * y1 - x1 * y2) / (x2 - x1);

​

      this.s3.push(new rotator(

        x,

        y,

        this.rectSize,

        this.rectSize,

        (x / 1000) % 1000 // angle

      ));

    }

​

    //  for (let x = centerX + inc; x < centerX / 2 * 3 + inc; x = x + inc * 2) {

    for (let x = this.centerX - this.r + this.inc + this.count * this.inc * 2; x < this.centerX + this.r + this.inc; x = x + this.inc * 2) {

      // p2 = (x-r, y+r)

      // p3 = (x+r, y+r)

      let x1 = this.centerX - this.r;

      let y1 = this.centerY + this.r;

      let x2 = this.centerX + this.r;

      let y2 = this.centerY + this.r;

      // linear equation

      let y = (y2 - y1) / (x2 - x1) * x + (x2 * y1 - x1 * y2) / (x2 - x1);

​

      this.s4.push(new rotator(

        x,

        y,

        this.rectSize,

        this.rectSize,

        (x / 1000) % 1000 // angle

      ));

    }

  }

​

  update() {

    for (let i = 0; i < this.s1.length; i++) {

      this.s1[i].update();

    }

    for (let i = 0; i < this.s2.length; i++) {

      this.s2[i].update();

    }

    for (let i = 0; i < this.s3.length; i++) {

      this.s3[i].update();

    }

    for (let i = 0; i < this.s4.length; i++) {

      this.s4[i].update();

    }

​

  }

​

}