ICM – Week 4 Assignment

This week, my assignment was to present my competence using for loops. While thinking of projects I often came up with ideas that relied on more advanced concepts – specifically arrays and objects. Initially, I tried to create a yahtzee-esque game, which I intend to complete once I have a mastery of arrays, and particularly, the shuffle function. However, I ended up creating a grid of multiple faces to represent the range of emotions I could be feeling on a given day. As a cute added feature, I included a mouseIspressed function that printed “Lol don’t worry about me, life’s great rn”.

In the future, I believe I could use an array, and the shuffle function, to display a randomized grid of a greater variety of emotions – and would like to do so. Creating the for loops, and aligning these three images in the grid were relatively time-intensive, though creating this project has definitely given me greater insight into how to troubleshoot positioning issues in for loop generated grids.

Below is my code

const GRID_SIZE = 3;
let confused;
// function preload() {
//   img = loadImage('confused.png');}
let frustrated;
// function preload() {
//   img = loadImage('frustrated.png');}
let sleepy;
// function preload() {
//   img = loadImage('sleepy.png');}

function setup() {
  createCanvas(400, 400);
  confused = loadImage('confused.png', img => {
    image(img, 0, 0);
  });
  frustrated = loadImage('frustrated.png', img => {
    image(img, 0, 0);
  });
  sleepy = loadImage('sleepy.png', img => {
    image(img, 2, 2);
  });
}

function draw() {
  background(220);
  textSize(16);
  let rectSide = width / GRID_SIZE;
  for (let x = 0; x < GRID_SIZE; x += 1) {
    for (let y = 0; y < GRID_SIZE; y += 1) {
      let xPos = x * rectSide;
      let yPos = y * rectSide;
      rect(xPos, yPos, rectSide, rectSide);
      let circleSize = width / 3;
      for (let i = 0; i < width; i += GRID_SIZE) {
        image(confused, xPos + 35, height / 2.4, 80, 80);
      }
      for (let i = 0; i < width; i += GRID_SIZE) {
        image(frustrated, xPos + 35, height / 9.7, 80, 80);
      }
      for (let i = 0; i < width; i += GRID_SIZE) {
        image(sleepy, xPos + 38, height / 1.35, 83, 83);
      }
    }
    if (mouseIsPressed){print ("Lol don't worry about me, life's great rn")}
  }
}