Assignment 1 – Self portrait

For this self portrait assignment, I wanted to illustrate the 2d version of myself in a creative background. The code consists of a setup and draw functions and uses variables for the coordinates, directions, and speed of the animated background balls. The canvas is initially set to a size of 520×520, and the setup function populates an array named ‘balls’ with 20 instances of the Ball class, each representing a colored bouncing ball. The animated balls, governed by the Ball class, contribute a playful and dynamic element to the scene, bouncing randomly within the canvas boundaries.

As for my portrait, it is depicted with distinct features, including dark brown hair in an arc formation, a face represented by an ellipse, ears illustrated as arcs, and bangs with dark brown arcs above the forehead. Additional facial elements consist of black eyebrows, eyeshadow in dark semicircles, eyes depicted as dark brown ellipses with white eyeballs, and eyeglasses fashioned with black rectangular frames connected by a line. 

Further on, I would like to add more smoother and complex animations and user interactivity to it.

Highlighted code:

let balls = [];


function setup() {
  createCanvas(520, 520)
  // Create initial balls
  for (let i = 0; i < 20; i++) {
    balls.push(new Ball());
  }
}

function draw() {
  background(76, 160, 245);
  for (let ball of balls) {
    ball.move();
    ball.display();
  }
  //code for the portrait 
}

class Ball {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.diameter = random(10, 30);
    this.color = color(random(255), random(255), random(255));
    this.xSpeed = random(-2, 4);
    this.ySpeed = random(-2, 4);
  }

  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;

    // Bounce off the walls
    if (this.x < 0 || this.x > width) {
      this.xSpeed *= -1;
    }

    if (this.y < 0 || this.y > height) {
      this.ySpeed *= -1;
    }
  }

  display() {
    fill(this.color);
    noStroke();
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}