// https://www.stevenson.info/exhibition/3088/work/3

​

// set canvas dimensions

let canvasWidth = 800;

let canvasHeight = 800;

let shapesPerSide = 8;

​

// save list of colors

var colorList = [

  ["#ffac00", "#008a97", "#ffac00", "#0052ae", "#008a97", "#f8856c", "#008a97", "#ffac00"],

  ["#0052ae", "#f8856c", "#008a97", "#f8856c", "#ffac00", "#0052ae", "#f8856c", "#0052ae"],

  ["#008a97", "#ffac00", "#f8856c", "#0052ae", "#f8856c", "#008a97", "#0052ae", "#ffac00"],

  ["#f8856c", "#0052ae", "#008a97", "#ffac00", "#0052ae", "#ffac00", "#f8856c", "#008a97"],

  ["#0052ae", "#ffac00", "#0052ae", "#f8856c", "#ffac00", "#008a97", "#ffac00", "#0052ae"],

  ["#f8856c", "#008a97", "#ffac00", "#008a97", "#0052ae", "#f8856c", "#008a97", "#f8856c"],

  ["#ffac00", "#0052ae", "#008a97", "#f8856c", "#008a97", "#ffac00", "#f8856c", "#0052ae"],

  ["#008a97", "#f8856c", "#ffac00", "#0052ae", "#f8856c", "#0052ae", "#008a97", "#ffac00"]

]

​

// save list of colors

var angleList = [

  [0, 90, 180, 270, 180, 270, 0, 90],

  [270, 180, 90, 0, 90, 0, 270, 180],

  [180, 270, 0, 90, 0, 90, 180, 270],

  [90, 0, 270, 180, 270, 180, 90, 0],

  [180, 270, 0, 90, 0, 90, 180, 270],

  [90, 0, 270, 180, 270, 180, 90, 0],

  [0, 90, 180, 270, 180, 270, 0, 90],

  [270, 180, 90, 0, 90, 0, 270, 180],

]

​

class Shape {

  constructor(px, py, sw, row, column) {

    this.positionX = px;

    this.positionY = py;

    this.shapeWidth= sw;

    this.c = colorList[row][column];

    this.angle = angleList[row][column];

  }

​

  display() {

    // shape parameters

    // points need to be relative to origin for rotate to work properly

    let x1 = 0 - (this.shapeWidth / 2);

    let y1 = 0 - (this.shapeWidth / 2);

    let x2 = 0 - (this.shapeWidth / 2);

    let y2 = 0 + (this.shapeWidth / 2);

    let x3 = 0 + (this.shapeWidth / 2);

    let y3 = 0 + (this.shapeWidth / 2);

    let x4 = 0 + (this.shapeWidth * 0.15);

    let y4 = 0 - (this.shapeWidth * 0.2);

    // shape color

    stroke(this.c);

    fill(this.c);

    // draw shape

    push();

    translate(this.positionX, this.positionY);

    rotate(this.angle + frameCount);

    quad(x1, y1, x2, y2, x3, y3, x4, y4);

    pop();

  }

}

​

class ShapeGrid {

  constructor() {

    this.shapes = [];

    this.gridSize = shapesPerSide;

    this.shapesize = (canvasWidth/this.gridSize) * 1.0;

    this.spacing = this.shapesize * 1.0;

    this.positionX = width / 2 - ((this.gridSize - 1) * this.spacing) / 2;

    this.positionY = height / 2 - ((this.gridSize - 1) * this.spacing) / 2;

​

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

      let row = [];

      for (let j = 0; j < this.gridSize; j++) {

        row.push(

          new Shape(

            this.positionX + this.spacing * i,

            this.positionY + this.spacing * j,

            this.shapesize,

            j,

            i

          )

        );

      }

      this.shapes.push(row);

    }

  }

​

  display() {

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

      for (let j = 0; j < this.gridSize; j++) {

        this.shapes[i][j].display();

      }

    }

  }

}

​

// set up background canvas

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  angleMode(DEGREES);

  grid = new ShapeGrid();

  // function for creating gif loop

  // createLoop({duration:10, gif:true})

}

​

// draw shapes

function draw() {

  background(149, 151, 138);

  grid.display();

}

​