Author: Isaac

Reflection

For this assignment, I created a checkers board using loops and conditionals in p5.js. The program generates an 8×8 grid with alternating black and white squares, and places red and blue checkers pieces on the appropriate black squares using conditionals. The checkers pieces are drawn as circles and are positioned in the top three (red) and bottom three (blue) rows. One of the most interesting parts of the code is how (i + j) % 2 !== 0 ensures that pieces only appear on black squares, while additional conditionals determine their placement. In the future, I could improve this by adding interactivity to allow piece movement, highlighting valid moves, implementing kinged pieces with visual markers, and enabling player turns to make it a fully playable checkers game.

Code

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

function draw() {
  background(30);
  let cols = 8;
  let rows = 8;
  let squareSize = width / cols;

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * squareSize;
      let y = j * squareSize;

      // Alternating black and white squares
      if ((i + j) % 2 === 0) {
        fill(240); 
      } else {
        fill(20); 
      }

      rect(x, y, squareSize, squareSize);

      // Placing checkers pieces only on black squares in the right rows
      if ((i + j) % 2 !== 0) {
        if (j < 3) {
          fill(200, 50, 50); 
          ellipse(x + squareSize / 2, y + squareSize / 2, squareSize * 0.8);
        } else if (j > 4) {
          fill(50, 50, 200); 
          ellipse(x + squareSize / 2, y + squareSize / 2, squareSize * 0.8);
        }
      }
    }
  }
}

 

Reflection

For this self-portrait, I wanted to create a clean, simple, and expressive representation of myself, combining basic shapes like ellipses, arcs, and rectangles. The goal was to balance realism and a playful, cartoon-like aesthetic while incorporating distinct features like a small beard, expressive eyebrows, and stylized hair. I focused on ensuring proportionality and seamless transitions between shapes, such as the neck connecting to the head and the shirt integrating an arc and rectangle for a polished look.

I’m proud of how the self-portrait turned out, as it reflects a good balance of simplicity and personal expression. The use of arcs and ellipses allowed me to create distinct facial features, and the small beard adds a unique touch to the design. However, there is room for improvement. In the future, I’d like to experiment with adding shading or gradients to enhance depth and realism. Additionally, I could explore animations, such as blinking eyes or a waving hand, to bring the portrait to life. This project has been a rewarding exercise in creative coding, helping me better understand shape integration and design principles in p5.js.

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

function draw() {
  background(220);

  // Drawing the neck
  fill(240, 200, 170);
  rect(180, 280, 40, 20);

  // Drawing the head
  fill(240, 200, 170);
  ellipse(200, 200, 150, 180);

  // Drawing the eyes
  fill(255);
  ellipse(170, 190, 30, 20);
  ellipse(230, 190, 30, 20);

  fill(50);
  ellipse(170, 190, 10, 10);
  ellipse(230, 190, 10, 10);

  // Adding eyebrows using arcs for expression
  stroke(50);
  strokeWeight(3);
  noFill();
  arc(170, 175, 40, 10, PI, TWO_PI);
  arc(230, 175, 40, 10, PI, TWO_PI);

  // Drawing the nose
  stroke(150, 100, 80);
  strokeWeight(2);
  line(200, 190, 200, 220);
  arc(200, 220, 20, 10, 0, PI);

  // Adding mouth
  noStroke();
  fill(200, 80, 80);
  arc(200, 250, 50, 30, 0, PI);

  // Adding a small beard below the mouth
  fill(100, 50, 30);
  arc(200, 280, 70, 30, 0, PI);

  // Drawing the hair 
  fill(50);
  arc(200, 150, 160, 120, PI, TWO_PI);
  rect(120, 150, 20, 80);
  rect(260, 150, 20, 80);

  // Drawing ears on both sides of the head
  fill(240, 200, 170);
  ellipse(125, 200, 20, 40);
  ellipse(275, 200, 20, 40);

  // Drawing a shirt 
  fill(100, 150, 200);
  noStroke();
  arc(200, 347, 100, 100, PI, TWO_PI);
  rect(150, 345, 100, 50);
}