Pumpkin Parade

I wanted to create a Halloween pattern using jack-o’-lanterns. A pumpkin face can be made with simple shapes, but we still recognize it as a face. This connects to the assignment’s idea that our brains are especially sensitive to certain patterns, such as faces.

My starting idea was a regular grid of pumpkins. Then I wanted to make the pattern interactive: what if the pumpkins lit up when the mouse approached them, and neighboring columns moved in opposite directions?

Drawing the First Pumpkin

I started by drawing one pumpkin with fixed coordinates. I used three overlapping ellipses: two darker orange shapes on the sides and a brighter one in the middle. A green rectangle forms the stem.

 // stem
  fill(85, 115, 55);
  rect(45, 12, 10, 18, 3);

  // body
  fill(225, 95, 20);
  ellipse(32, 50, 38, 55);
  ellipse(68, 50, 38, 55);

  fill(250, 130, 25);
  ellipse(50, 50, 42, 60);

  // eyes and mouth
  fill(40, 25, 35);
  triangle(26, 45, 35, 32, 44, 45);
  triangle(56, 45, 65, 32, 74, 45);
  arc(50, 56, 40, 25, 0, PI, CHORD);

  // teeth
  fill(250, 130, 25);
  rect(38, 56, 7, 7);
  rect(55, 56, 7, 7);
}

Once I had the basic pumpkin, I replaced the fixed coordinates with positions relative to pumpkinX and pumpkinY, so I could repeat it using loops.

ellipse(pumpkinX - 18, pumpkinY, 38, 55);
ellipse(pumpkinX + 18, pumpkinY, 38, 55);
ellipse(pumpkinX, pumpkinY, 42, 60);

Repeating the Pumpkin

Next, I used two nested for loops to repeat the pumpkin across the canvas. One loop controls the columns, and the other controls the rows.

for (let x = 0; x < width; x += spacing) {
  for (let y = 0; y < height; y += spacing) {
    let pumpkinX = x + spacing / 2;
    let pumpkinY = y + spacing / 2;
  }
}

Lighting Up the Faces

I added a condition to check whether the mouse is inside the area around each pumpkin. When it is, the eyes and mouth change from dark purple to pale yellow, suggesting a candle lighting up inside.

The shapes stay the same, but the color change makes one face stand out from the repeated pattern.

Exploring Movement

I first explored moving all the pumpkins upward together and adding a pulsing size change. I preferred keeping their size constant and creating movement through the arrangement instead.

My next idea was to move odd-numbered columns upward and even-numbered columns downward. I count the leftmost column as column 1.