Interactive Self Portrait 13/09/2024

​

This code draws Tamas his self-portrait 10 times in different sizes and locations on the screen with a delay of 150ms between faces. 

​

Made by Ko de Beer for the Creative Coding classes at I/M/D.

*/

​

let faceDelay = 150; // Delay in milliseconds

let lastFaceTime = 0; // Time since last face

let activeFaces = []; // Currently visible faces

let numFaces = 10; // Number of faces

let faceIndex = 0; // Index of the current face

let faceCounter = 0; // Counter for the number of faces displayed

​

function setup() {

  createCanvas(400, 400);

  background(255); // Clear the canvas

​

  for (let i = 0; i < numFaces; i++) {

    activeFaces.push({

      x: random(width),

      y: random(height),

      size: random(50, 150),

      visible: false,

    });

  }

  lastFaceTime = millis();

}

​

function draw() {

  let currentTime = millis();

​

  // Check if it's time to add a new face

  if (currentTime - lastFaceTime > faceDelay) {

    // Hide the previous face

    if (faceIndex > 0) {

      activeFaces[faceIndex - 1].visible = false;

    }

​

    // Update the face details

    activeFaces[faceIndex] = {

      x: random(width),

      y: random(height),

      size: random(50, 150),

      visible: true,

    };

​

    // Increment the face index and counter

    faceIndex = (faceIndex + 1) % numFaces;

    faceCounter++;

​

    // Clear the canvas and reset the counter after 5 faces

    if (faceCounter >= numFaces) {

      background(255); // Clear the canvas

      faceCounter = 0; // Reset the counter

    }

​

    // Update the last face drawing time

    lastFaceTime = currentTime;

  }

​

  // Draw all visible faces

  for (let i = 0; i < activeFaces.length; i++) {

    if (activeFaces[i].visible) {

      drawFace(activeFaces[i].x, activeFaces[i].y, activeFaces[i].size);

    }

  }

}

​

function drawFace(x, y, s) {

  // Head

  noStroke();

  fill(255, 255, 0); // Yellow

  ellipse(x, y, s, s); // Top of head

  rect(x - s / 2, y + s / 6, s, s / 1.8); // Middle section

  ellipse(x, y + 10 + s / 4 + s / 2, s, s); // Bottom of head

​

  // Eyes

  fill(0); // Black

  ellipse(x - s / 2.5, y - s / -6, s / 5, s / 5); // Left eye

  ellipse(x + s / 2.5, y - s / -6, s / 5, s / 5); // Right eye

​

  // Glasses

  noFill();

  stroke(0);

  strokeWeight(4);

  ellipse(x - s / 2.5, y - s / -6, s / 2.5, s / 2.5); // Left glass

  ellipse(x + s / 2.5, y - s / -6, s / 2.5, s / 2.5); // Right glass

​

  // Mouth

  stroke(0);

  strokeWeight(4);

  line(x - s / 5, y + s / 1.1, x + s / 5, y + s / 1.1);

​

  // Nose

  noStroke();

  fill(255, 0, 255); // Magenta

  ellipse(x, y + 6, s / 5, s / 3); // Top of nose

  rect(x - s / 10, y + s / 10, s / 5, s / 1.9); // Nose base

  ellipse(x, y + s / 1.5, s / 5, s / 4); // Bottom of nose

}