Assignment1- Self Portrait

When I first heard about creating a self-portrait, my mind immediately gravitated towards something that truly defines me – cricket. As someone deeply passionate about the sport, I couldn’t think of a better way to portray myself than through a project that encapsulates the essence of my love for cricket.

In this self-portrait, I envisioned a scene where a girl, embodying my presence, stands proudly with a cricket bat in her hands. The cricket ball, symbolizing the constant motion and dynamism of the game, is placed on the ground, perpetually moving. To add an interactive element, I incorporated the ability for the ball to jump when the user presses the mouse. The subtle details matter, and in this digital representation of myself, the girl periodically opens and closes her eyes every two seconds.

Code:

// Initializing the variables

let ballX = 220;
let ballY = 525;
let ballSpeedX = 1; 
let ballSpeedY = 0; 
let isJumping = false;
let jumpHeight = 100; 
let eyeColor = '#FFFFFF'; 
let pupilcolour = '#E4DDDD';

function setup() {
  createCanvas(600, 550);
}


function draw(){
  background(200);
// sky
  fill("#E5F7FA");
// gorund
  rect(0,0,599,450);
  fill("rgb(21,144,21)");

  rect(0,442,599,600);
  noStroke();
  fill("#C3ECF1")
// clouds
  circle(70,70,50);
  circle(90,60,50);
  circle(110,55,50);
  circle(130,70,50);
  
  circle(300,100,50);
  circle(320,90,50);
  circle(340,85,50);
  circle(360,100,50);
  
  //   Thumbs of both the hands
  
  fill('#E8BEAC')
  ellipse(263,255,8,20);
  ellipse(504,231,8,15);
  
  
//   bat
  fill('#C29C65')
  ellipse(157,266,10,25);
  // cylinder(20, 50);
  rect(160,255,180,22);
  quad(317,256,326,241,326,288,317,276);
  rect(326,241,250,46);
  ellipse(575,260,20,55)
  stroke('#D5B78B')
  strokeWeight(3);
  quad(327,234,326,241,575,243,573,234)
  
//   face 
  noStroke();
  fill('#252423')
  ellipse(390,200,100,110);
  ellipse(410,200,100,110);
  
  fill('#E8BEAC')
  ellipse(400,200,95,105);
  
  // print(mouseX+ ","+ mouseY);
//   halmet
  rect(389,245,25,40)
  
// hair and head
  fill('#252423')
  arc(400, 190, 100, 100, PI, 0);
  
//   hair
  stroke(50);
  strokeWeight(2);
  line(360,166,360,189);
  line(366,166,366,189);
  line(372,166,372,189);
  line(380,166,380,189);
  line(386,166,386,189);
  line(392,166,392,189);
  line(400,166,400,189);
  line(406,166,406,189);
  line(412,166,412,189);
  line(418,166,418,189);
  line(424,166,424,189);
  line(430,166,430,189);
  line(436,166,436,189);
  line(442,166,442,189);
  
  // eyes
  if (frameCount % 120 == 0) { 
    eyeColor = (eyeColor === '#FFFFFF') ? '#000000' : '#FFFFFF'; 
   
  }
  if (frameCount % 120 == 0) { 

    pupilcolour=(pupilcolour === '#E4DDDD') ? '#000000' : '#E4DDDDF'; 
  }
  fill(eyeColor);
  circle(377, 195, 15); 
  circle(422, 195, 15); 
  fill(pupilcolour); 
  circle(377, 195, 5); 
  circle(422, 195, 5); 
//   lips
  noStroke(197,55,80);
  fill('rgb(228,10,48)')
  arc(400,223,30,15,0,PI)
  
//   body
  // rect(348,270,110,150);
  
  quad(388,270,344,276,458,276,415,270);
  rect(350,276,105,120);
//   left arm
  
  quad(350,274,350,309,287,330,287,300);
  quad(287,300,287,330, 232,279,260,278);
  
//   right aarm
  quad(455,277,455,308,515,330,510,302);
  quad(505,302,512,286,534,286,515,331);
  
//   skirt
  fill('#721781')
  quad(350,396,350,506,455,506,455,396);
  
  // fill('black')
  // arc(350, 396, 50, 200, 0, PI + QUARTER_PI, CHORD);
  // arc(350, 396,50, 100,  0, PI + QUARTER_PI, PIE);
  ellipse(350, 450,30,110);
  ellipse(454, 450,30,110);
  // ellipse(403, 490,115,30);
  ellipse(403, 400,115,30);
  fill('#E8BEAC')
  quad(359,505,368,550,397,550,390,505);
  quad(415,505,415,550,444,550,445,505);
  
//   fingers
  quad(264,282,269,277,224,277,239,286);
  // ellipse(263,255,8,20);
  quad(262,245,251,254,253,261,262,253);
  ellipse(252,257,7,7);
  rect(244,246,7,20);
  ellipse(247.5,266,7,7);
  ellipse(247.5,245,7,7);
  quad(247,241,260,247,253,253,249,248);
  rect(236,248,7,20);
  ellipse(239.5,249,7,7);
  ellipse(239.5,269,7,7);
  rect(228,249,7,18);
  ellipse(231.5,251,7,7);
  ellipse(231.5,267,7,7);
  rect(220,251,6,15);
  ellipse(223,254,7,7);
  ellipse(223,264,7,7);
  
  // right hand fingers
  rect(532,228,6,15);
  ellipse(535,228,6,6);
  ellipse(535,242,6,6);
  rect(524,227,6,20);
  ellipse(527,229,7,7);
  ellipse(527,247,7,7);
  rect(516,224,6,25);
  ellipse(519,225,7,7);
  ellipse(519,247,7,7);
  
  rect(509,220,6,25);
  ellipse(512,223,7,7);
  ellipse(512,246,7,7);
  
  quad(221,259,221,249,248,249,248,241);
  
  quad(536,226,535,235,512,230,512,220);
  
 // Check if mouse is pressed
  if (mouseIsPressed && !isJumping) {
    isJumping = true;
    ballSpeedY = -5; 
  }

  // Move the ball
  ballX += ballSpeedX;
  ballY += ballSpeedY;

  // apply gravity if not jumping
  if (!mouseIsPressed && ballY < 525) {
    ballSpeedY += 0.5; 
  } else if (ballY >= 525) {
    ballY = 525; 
    ballSpeedY = 0;
    isJumping = false;
  }

 
  if (ballX + 25 >= width || ballX - 25 <= 0) { 
    ballSpeedX *= -1; 
  }

  // Ball
  fill('#FFEB3B');
  circle(constrain(ballX, 25, width - 25), ballY, 50); 
  fill('#E91E63');
  ellipse(constrain(ballX, 25, width - 25), ballY, 20, 50);
  ellipse(constrain(ballX, 25, width - 25), ballY, 50, 20);
  
}

Reflection: