​

// defined image variables

let test1;

let test2;

let test3;

let test4;

let test5;

let test6;

let test7;

let test8;

let test9;

let test10;

let test11;

let test12;

let test13;

let test14;

let test15;

let test16;

let test17;

let test18;

let test19;

let test20;

let test21;

let test22;

​

//set up array for images

let imageArray = [];

​

// control frame rate

let fr = 12;

​

//preload runs once before setup

​

function preload() {

  // set images to variables

  test1 = loadImage('shape01.svg');

  test2 = loadImage('shape02.svg');

  test3 = loadImage('shape03.svg');

  test4 = loadImage('shape04.svg');

  test5 = loadImage('shape05.svg');

  test6 = loadImage('shape06.svg');

  test7 = loadImage('shape07.svg');

  test8 = loadImage('shape08.svg');

  test9 = loadImage('shape09.svg');

  test10 = loadImage('shape10.svg');

  test11 = loadImage('shape11.svg');

  test12 = loadImage('shape12.svg');

  test13 = loadImage('shape13.svg');

  test14 = loadImage('shape14.svg');

  test15 = loadImage('shape15.svg');

  test16 = loadImage('shape16.svg');

  test17 = loadImage('shape17.svg');

  test18 = loadImage('shape18.svg');

  test19 = loadImage('shape19.svg');

  test20 = loadImage('shape20.svg');

  test21 = loadImage('shape21.svg');

  test22 = loadImage('shape22.svg');

  test23 = loadImage('shape23.svg');

​

}

​

function setup() {

  c = createCanvas(400, 400);

  background('#ffffff');

​

  //put images into an array

  imageArray = [test1, test2, test3, test4, test5, test6, test7, test8, test9, test10, test11, test12, test13, test14, test15, test16, test17, test18, test19, test20, test21, test22, test23];

}

​

​

function draw() {

  frameRate(3);

  //14, 22

  let i = int(random(0, imageArray.length));

  let j = int(random(0, imageArray.length));

  let k = int(random(0, imageArray.length));

  let l = int(random(0, imageArray.length));

​

    image(imageArray[i], width / 400, height / 400, width / 2, height / 2);

    image(imageArray[j], width / 400 + 200, height / 400, width / 2, height / 2);

    image(imageArray[k], width / 600, height / 400 + 200, width / 2, height / 2);

    image(imageArray[l], width / 800 + 200, height / 800 + 200, width / 2, height / 2);

  // loops through the width and height

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

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

      // draws border lines

      stroke('#fff');

      strokeWeight(5);

      line(x, 0, x, height);

      line(0, y, width, y);

    }

  } 

}

​

​

function keyTyped() {

  if (key === 's') {

    saveCanvas(c, 'myCanvas', 'jpg');

  }

}