​

const frames = 4;

​

const lines = "#000000";

const bg = "#F4E8C1";

const orthArrows = "#70A0AF";

const diagOutArrows = "#706993";

const diagInArrows = "#A0C1B9";

​

function mouseReleased() {

  console.log(mouseX, mouseY);

}

​

function setup() {

  createCanvas(400, 400);

  noFill();

}

​

function draw() {

  background(bg);

  //Outter Lines

  //cordoba(400);

  for (let i = 0; i < width ; i+= (width )/frames){

    for (let j = 0; j < height ; j+= (height)/frames){

      push();

      translate(i,j);

      cordoba(width/frames);

      pop();

    }

  }

  noLoop();

​

}

​

function cordoba(size){

  push()

  translate(size/2, size/2);

  // Orthoganal arrows

  push();

  fill(orthArrows);

  for(let i = 0; i < 4; i ++) {

    rotate(PI/2);

    beginShape();

    vertex(0, size/2);

    vertex(size * 6/50, size/4);

    vertex(0, size * 1/5);

    vertex(-size * 6/50, size/4);

    endShape(CLOSE);

  }

  pop();

  // Diagonal arrows (OUT)

  push();

  fill(diagOutArrows);

  for(let i = 0; i < 4; i ++) {

    rotate(PI/2);

    beginShape();

    vertex(size * 25/72, size * 25/72);

    vertex(size * 6/50, size/4);

    vertex(size * 13/80, size * 13/80);

    vertex(size/4, size * 6/50);

    endShape(CLOSE);

  }

  pop();

  // Diagonal arrows (IN)

  push();

  fill(diagInArrows);

  for(let i = 0; i < 4; i ++) {

    stroke(lines);

    rotate(PI/2);

    beginShape();

    vertex(size * 33/80, size/2);

    vertex(size * 25/72, size * 25/72);

    vertex(size/2, size * 33/80);

    endShape();

    noStroke();

    beginShape();

    vertex(size/2, size/2);

    vertex(size * 33/80, size/2);

    vertex(size/2, size * 33/80);

    endShape();

  }

  pop();

  pop();

}