HW-WEEK2

// create grids to place shapes

// 600 x 600 size

// each cell worth 20 size

// 30 colums and 30 rows

​

//const PADDING = 0;

//const ROWS = 30;

//const COLUMNS = 30;

//const CELL_SIZE = 20;

//const CELL_COLOR = "white";

//const CANVAS_WIDTH = 600;

//const CANVAS_HEIGHT = 600;

​

​

//function setup() {

//createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);

//background(245, 245, 220);

//noStroke();

​

//fill(CELL_COLOR);

//for (let col=0;col<COLUMNS;col++) {

//for (let row=0;row<ROWS;row++) {

// let left = PADDING+(col*CELL_SIZE);

// let top = PADDING+(row*CELL_SIZE);

//   let size = CELL_SIZE - 2;

//     rect(left,top,size,size);

//   }

//  }

//}

​

function setup() {

  createCanvas(600, 600);

  background("beige")

​

}

​

function draw () 

{

​

  // start from -10 + middle of the origin of ellipse

  // triangle(x1, y1, x2, y2, x3, y3)

// EARS

  fill("#2A2A2A");

  noStroke();

  triangle(310, 150, 210, 150, 220, 10)

  fill("#D46A4D");

  noStroke();

  triangle(290, 150, 390, 150, 370, 10)

  fill("#6CA6CD ");

  noStroke();

  ellipse(400, 60, 80,80)

  fill("#ADD8E6");

  noStroke(),

  ellipse(120, 300, 100, 100)

  fill("#4682B4");

  noStroke();

  ellipse(160, 260, 50, 50 )

  //TAIL

  fill("#D46A4D");

  noStroke();

  ellipse(475, 480, 100, 280)

  fill("beige");

  noStroke(); 

  ellipse(455, 440, 100, 240)

  fill("#A84F3B")

  noStroke();

  ellipse(473, 359, 40, 40)

  //BODY

  // rect(x, y, w, h)

  fill("#4A4A4A");

  noStroke();

  ellipse(275, 540, 140, 220)

  fill("#A84F3B");

  stroke(0);

  strokeWeight(2);

  ellipse(200, 575, 60, 20)

  fill("grey");

  arc(450, 580, 260, 400, PI, PI + HALF_PI)

  fill("#232323");

  noStroke();

  rect(250, 160, 90, 420)

  fill("#232323");

  noStroke();

  rect(300, 250, 150, 330, 40)

  fill (245, 245, 220);

  noStroke();

  arc(360, 230, 60, 60, 0, 2*PI )

  fill("#232323");  

  noStroke();

  rect(410, 540, 40, 40)

  fill("#232323");

  noStroke();

  rect(100, 580, 350, 20)

  fill("#2A2A2A");

  noStroke();

  rect(300, 340, 150, 240)

  fill("#B3B1A7");

  arc(435, 565, 140, 200, PI, PI + HALF_PI)

  //FACE

  // TWO_PI radians equals 360˚,

  //PI radians equals 180˚,

  //HALF_PI radians equals 90˚,

  //QUARTER_PI radians equals 45˚.

  // arc( x, y, w, h, start point, the way it goes)

  fill("#4D4D4D");

  arc(300, 155, 180, 130, PI, PI + HALF_PI)

  fill("#4D4D4D");

  arc(300, 155, 180, 170, PI/2, 3*PI)

  fill("#A88F6D");

  arc(300, 155, 180, 130, PI + HALF_PI, TWO_PI)

  fill("#8B2E26");

  arc(300, 155, 180, 170, 0, HALF_PI)

  fill("#2A2A2A");

  arc(255, 155, 60, 50, 0, PI);

  fill("#2A2A2A");

  arc(345, 155, 60, 50, 0, PI);

  fill("pink");

  triangle(280, 185, 320, 185, 300, 200)

  // WHISKERS

  //stroke() is used to set the color of the lines, and strokeWeight() sets the thickness of the whiskers.

  fill("#4D4D4D");

  stroke(0); // Set line color to black

  strokeWeight(2);

​

  // Left whiskers

  // Top left whisker

  line(180, 160, 250, 180); 

  // Middle left whisker

  line(180, 170, 250, 190); 

  // Bottom left whisker

  line(180, 180, 250, 200); 

​

  // Right whiskers

  // Top right whisker

  line(350, 180, 420, 160); 

  // Middle right whisker

  line(350, 190, 420, 170); 

  // Bottom right whisker

  line(350, 200, 420, 180); 

  //TEXT

  // do not know how to place it, where I want to

  textSize(32);

  fill(255);

  stroke(0);

  strokeWeight(3);

  text("Meow!", 60, 60);

​

}