Author: Tengis Temuulen

For this assignment, I have decided to use for loops to make a type of black and white optical illusion. I used one global variable to animate both the lines and the circles. Calculating the rotations using the angles were bit difficult at first. Furthermore, used map method for each lines and circles to change the position of the points and the color hues respectively. Particular section that I am proud of is computing the x and y positions of the line using cos and sin to move the lines.

For further improvement, adding user interaction based on mouse clicking or mouse position could be a viable direction. Moreover, randomizing the user interaction to a certain extent is an area that I am trying to improve.

let angle = 0;

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

function draw() {
  background(0);

  let circles = 10;
  let diameter = width / 2 + cos(angle) * 50; 

  for (let i = 0; i < circles; i++) {
    let gray = map(i, 0, circles - 1, 0, 255);
    fill(gray);

    ellipse(width / 2, height / 2, diameter, diameter);
    diameter -= 20;
  }

  drawLines();

  angle += 0.04;
}

function drawLines() {
  let numLines = 12;
  let lineLength = 200;

  for (let i = 0; i < numLines; i++) {
    let rotatingAngle = map(i, 0, numLines, 0, TWO_PI);
    let x1 = width / 2 + cos(rotatingAngle + angle) * (width /6 );
    let y1 = height / 2 + sin(rotatingAngle + angle) * (width /6);
    let x2 = x1 + cos(rotatingAngle) * lineLength;
    let y2 = y1 + sin(rotatingAngle) * lineLength;

    stroke(255);
    strokeWeight(2);
    line(x1, y1, x2, y2);
  }
}

 

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);
  }
}