I will start my blog this time with my self portrait. I had so much fun with this challenging week’s worksheet, but the knowledge in practice allowed me to improve my self portrait. I probably will be learning more about doing other types of patterns and applying it to other sketches.

Grabación de pantalla 2025-09-28 a la(s) 20.55.42.mov

I used the cells principle to make a pattern of itself. I used functions to do this. I figured it was the clearest way to replicate it for me. I still would like to keep experimenting with other patterns aside this one. The code is:

var s;
let x, y, w, h;

let cellsRow = 10;

function setup() {
  createCanvas(600, 500);
  x = width / cellsRow;
  y = height / cellsRow;
  w = width;
  h = height;

  frameRate(4);
}

function draw() {
  background(0, 190, 200);

  for (let i = 0; i < cellsRow; i++) {
    if (i % 2 != 0) {
      for (let j = 0; j < cellsRow; j++) {
        if (j % 2 === 0) {
          s = 0.1;
          // fill(0, 190, 200); //0, 190, 200
        } else {
          s = random(0.1);
        }
        noStroke();
        rect(j * x, i * y, w, h);
        fill(255);
        drawFace(j * x, i * y, s);
      }
    } else {
      for (let j = 0; j < cellsRow; j++) {
        if (j % 2 === 0) {
          s = random(0.1);
        } else {
          s = 0.1;
          // fill(random(0), random(190), random(200)); //0, 190, 200
        }
        noStroke();
        rect(j * x, i * y, w, h);
        fill(255);
        drawFace(j * x, i * y, s);
      }
    }
  }

  drawFace(x, y, 1);
}

function drawFace(x, y, s) {
  push();
  translate(x, y);
  scale(s);
  //frame
  // fill(199, 129, 80);
  // stroke(199, 183, 80);
  // strokeWeight(30);
  // rect(150, 50, 300, 400);

  //helmet like skin colour part
  noStroke();
  fill(240, 204, 186);
  arc(300, 250, 255, 255, HALF_PI + QUARTER_PI, PI + PI, PIE);

  //pink rest of the head
  noStroke();
  //stroke(255, 150, 200);
  //strokeWeight(2);
  fill(random(199), 80, random(148));
  arc(300, 250, 200, 200, 0, HALF_PI + QUARTER_PI);

  //right eye small circle
  fill(80, random(199), random(142));
  stroke(84, 111, 114);
  strokeWeight(2);
  circle(350, 200, 30);

  //left eye ellipse
  fill(random(169), random(199), random(80));
  stroke(199, 129, 80);
  strokeWeight(5);
  ellipse(250, 210, 60, 100);

  //mouth-like rectangle
  fill(71, 70, 64);
  stroke(255, 214, 206);
  strokeWeight(5);
  rect(270, 310, 60, 10);

  //nose triangle
  stroke(71, 70, 64);
  strokeWeight(2);
  fill(random(199), 183, 80);
  triangle(300, 250, 350, 290, 300, 300);

  //hair triangles
  noStroke();
  fill(190, 81, 3);
  triangle(280, 125, 180, 220, 90, 180);

  noStroke();
  fill(190, 81, 3);
  triangle(330, 120, 500, 220, 180, 130);

  pop();
}

Worksheet

Now for the worksheet, I think I managed to do every exercise. I’ll share the codes and results.

For Q1, I used no loop, while loop and for loop. I felt that there has to be a better way of drawing the no loop one with less code but wasn’t able to do it. These are the three different codes. No loop code is the following:

let colWidth;
let numCol = 0;

function setup() {
  createCanvas(400, 400);
  colWidth = width / 20;
}

function draw() {
  background(220);
  
  
  drawRect(numCol);
  drawRect(numCol + 1);
  drawRect(numCol + 2);
  drawRect(numCol + 3);
  drawRect(numCol + 4);
  drawRect(numCol + 5);
  drawRect(numCol + 6);
  drawRect(numCol + 7);
  drawRect(numCol + 8);
  drawRect(numCol + 9);
  drawRect(numCol + 10);
  drawRect(numCol + 11);
  drawRect(numCol + 12);
  drawRect(numCol + 13);
  drawRect(numCol + 14);
  drawRect(numCol + 15);
  drawRect(numCol + 16);
  drawRect(numCol + 17);
  drawRect(numCol + 18);
  drawRect(numCol + 19);
  
}

function drawRect(x){
  if(mouseX >= x * colWidth && mouseX < x * colWidth + colWidth){
    fill(255,0,0);
  } else {
    fill(255);
  }
  rect(x * colWidth, 0, colWidth, height);
}

While loop.

let numCols = 20;
let colPosX = 0;

let col = [numCols];

function setup() {
  createCanvas(400, 400);

  colWidth = width / numCols;
}

function draw() {
  background(220);
  let i = 0;
  while (i < numCols) {
    let posX = colPosX + i * colWidth;

    col[i] = posX;
    // console.log(col[i]);
    if (mouseX > col[i] && mouseX < col[i] + colWidth) {
      fill(255, 0, 0);
    } else {
      fill(255);
    }
    rect(col[i], 0, colWidth, height);
    // console.log(col[i]);
    i = i + 1;
  }
}

For loop.

let numCols = 20;
let colPosX = 0;

let col = [numCols];

function setup() {
  createCanvas(400, 400);
  colWidth = width / numCols;
}

function draw() {
  background(220);

  for (let i = 0; i < numCols; i++) {
    let posX = colPosX + i * colWidth;

    col[i] = posX;
    if (mouseX > col[i] && mouseX < col[i] + colWidth) {
      fill(255, 0, 0);
    } else {
      fill(255);
    }
    rect(posX, 0, colWidth, height);
    // console.log(col[i]);
  }
}

Next, Q2. Skipping column 7.

let numCols = 20;
let colPosX = 0;

let col = [numCols];

function setup() {
  createCanvas(400, 400);
  colWidth = width / numCols;
}

function draw() {
  background(220);

  for (let i = 0; i < numCols; i++) {
    let posX = colPosX + i * colWidth;

    col[i] = posX;
    if (mouseX > col[i] && mouseX < col[i] + colWidth && i != 6) {
      stroke(1);
      fill(255, 0, 0);
    }else {
      stroke(1);
      fill(255);
    }
    rect(posX, 0, colWidth, height);
    console.log(col[i]);
  }
}

Blue and Red columns

let numCols = 20;
let colPosX = 0;

let col = [numCols];

function setup() {
  createCanvas(400, 400);
  colWidth = width / numCols;
}

function draw() {
  background(220);

  for (let i = 0; i < numCols; i++) {
    let posX = colPosX + i * colWidth;

    col[i] = posX;
    if (mouseX > col[i] && mouseX < col[i] + colWidth && mouseX < width / 2) {
      stroke(1);
      fill(0, 0, 255);
    }else if(mouseX > col[i] && mouseX < col[i] + colWidth && mouseX > width / 2){
       stroke(1);
      fill(255, 0, 0);
  }else {
      stroke(1);
      fill(255);
    }
    rect(posX, 0, colWidth, height);
    console.log(col[i]);
  }
}

All blue columns.

let numCols = 20;
let colPosX = 0;

let col = [numCols];

function setup() {
  createCanvas(400, 400);
  colWidth = width / numCols;
}

function draw() {
  background(220);

  for (let i = 0; i < numCols; i++) {
    let posX = colPosX + i * colWidth;

    col[i] = posX;
    if (mouseX > col[i] && mouseX < col[i] + colWidth) {
      stroke(1);
      fill(0, 0, 255);
    }else {
      stroke(1);
      fill(255);
    }
    rect(posX, 0, colWidth, height);
    console.log(col[i]);
  }
}

Random color