​

​

// sets number of rows and columns

var rows = 2;

var columns = 2;

​

// sets the steps

var stepX;

var stepY;

​

//declares a image set

let pics = [];

let randImg

​

// declares a color set 

var randomColor

var popColors = ['#0BB3A8', '#F3E9CE', '#FFC55F', '#EE635B', '#FFB2C5', '#4759F3', '#BA0C2F', '#AC1A00', '#942022', '#BCBCBC', '#641E1D', '#606064', '#E8EAEB', '#FFFFFF', '#BA0C2F', '#009A44', '#003DA5', '#FE5000', '#FFD700', '#C31229', '#4759F3', '#FFFE00', '#024D98', '#0274B6', '#ACC6E9', '#676D6E', '#D3D4D8', '#F5F5F5', '#3FBAC2', '#101315', '#C0220E', '#FAD800', '#3178C9', '#3A9DDF', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51', '#FE0879', '#FF82E2', '#FED715', '#0037B3', '#70BAFF'];

​

​

function preload() {

  img1 = loadImage("bride.png");

  img2 = loadImage("creature.png");

  img3 = loadImage("cyclops.png");

  img4 = loadImage("devil.png");

  img5 = loadImage("dracula.png");

  img6 = loadImage("frankenstein.png");

  img7 = loadImage("ghoul.png");

  img8 = loadImage("gorilla.png");

  img9 = loadImage("kazimoto.png");

  img10 = loadImage("moonMonster.png");

  img11 = loadImage("mummy.png");

  img12 = loadImage("phantom.png");

  img13 = loadImage("screamingSkull.png");

  img14 = loadImage("skull.png");

  img15 = loadImage("spaceMonster.png");

  img16 = loadImage("vampire.png");

  img17 = loadImage("werewolf.png");

  pics = [

    img1,

    img2,

    img3,

    img4,

    img5,

    img6,

    img7,

    img8,

    img9,

    img10,

    img11,

    img12,

    img13,

    img14,

    img15,

    img16,

    img17,

  ];

  //-----------------------------------------------------------------

}

​

// sets the canvas size, color and frame refresh speed

function setup() {

  createCanvas(400, 400);

  background(220);

  frameRate(2);

  noStroke();

}

​

function draw() {

  background(220);

​

  //calculates the steps

  stepX = width / columns;

  stepY = height / rows;

​

  // for loop to iterate columns

  for (let c = 0; c < columns; c++) {

    for (let r = 0; r < rows; r++) {

      //calls the rectangles

      rect(c*stepX, r*stepY, stepX, stepY);

      //sets the colorset array to be used

      randomColor = (popColors[int(random(0, popColors.length))]);

      fill(randomColor);

      //calls the random images

      randImg = pics[int(random(0, pics.length))];

      image(randImg, c*stepX, r*stepY, stepX, stepY);

    }

  }

}

//--------------------------------------------------------------------

​

  function mousePressed(){ //1. If mouse clicked will pause the frame. 2. click the mouse again to resume

  if(pause==false){

    noLoop();

    pause=true;

  }else{

    loop();

    pause = false;

  }

  }

  //--------------------------------------------------------------------

function keyTyped() {

  if (key === "s") {

    save("myCanvas.png");

​

  }

​

} 

  //--------------------------------------------------------------