Multiplicity Project

 I decided to take a bunch of photos of myself in the Palm Apartments lobby and edited them together using masks. 

BW to Color

 Here are my 3 B&W to color projects, and the original image I used for them.  This project was kind of hard for me because I did not understand use of masks at first. 

Poster

 The top one is my original poster project and the bottom on is the one that Professor Echeverry altered.

Calligram

Here is my Calligram project. I chose to include a version with and without a background because I wasn't sure which one looked better. 

 

Business Cards and 3D objects

 

Here are my business cards. I struggled with getting my logo on the 3D objects, but I wanted to show that I understood the concept so I included a different preset logo on the objects because I figured that was the best bet. 

Logos Project

 Here is my final logo for the logo project! The trait I picked was curiosity so for that I combined cats and a question mark because both can symbolize curiosity!

HTML final project

 

Here is my final project. It took a very long time but I am happy with how it turned out. 

Here is the code. 

//context.drawImage(img1, mouseX,mouseY);

 

//context.drawImage(img1, 0,0,canvas.width,canvas.height);

//bkg 

//bkg

//TOP BEAK, GREEN LINE

var mygrad = context.createLinearGradient(500,10,502,206);

mygrad.addColorStop(0,"rgba(255,255,255,1.00");

mygrad.addColorStop(0.7,"rgba(184,191,214,1.00)");

mygrad.addColorStop(1,"blue");

///BACKGROUND

context.beginPath();

context.rect(0,0,800,600);

context.closePath();

context.fillStyle = mygrad;

context.fill();

//bkg

var bkgdgrd = context.createLinearGradient(0,0,mouseX,mouseY)

bkgdgrd.addColorStop(0,"red");

 

var mygrad = context.createLinearGradient(500,10,127,278);

mygrad.addColorStop(0,"#FFFC00");

mygrad.addColorStop(0.7,"rgba(246,255,44,1.00)");

mygrad.addColorStop(1,"rgba(254,101,10,1.00)");

///GRADIENT TEST

context.beginPath();

context.beginPath();

context.moveTo(268,453); //START OF LINE

context.quadraticCurveTo(150,361,215,198)

  //TOP BEAK, RED BORDER GREEN

  context.quadraticCurveTo(295,233,307,264)

//TOP BEAK, ORANGE BORDER GREEN

context.quadraticCurveTo(290,305,263,331)

//TOP BEAK, GREEN LINE 

context.quadraticCurveTo(263,347,247,355)

context.quadraticCurveTo(247,412,268,453)

context.closePath();

context.fillStyle = mygrad;

context.fill();

    

// context.fillStyle = "#FF7C1B" //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

 //WHITE PART OF FACE, RED BORDER GREEN

var mygradlower = context.createLinearGradient(330,390,399,243);

mygradlower.addColorStop(0,"#FCFCCD");

mygradlower.addColorStop(0.7,"rgba(242,237,168,1.00)");

mygradlower.addColorStop(1,"rgba(218,201,190,1.00)");

context.beginPath();

context.moveTo(215,198); //START OF LINE

context.quadraticCurveTo(295,233,307,264)

//WHITE PART OF FACE, RED BORDER ORANGE

context.quadraticCurveTo(298,300,311,316)

//WHITE PART OF FACE, RED BORDER BLUE

context.quadraticCurveTo(416,365,372,417)

//WHITE PART OF FACE, RED BORDERS ORANGE

context.quadraticCurveTo(403,381,417,381)

context.quadraticCurveTo(422,317,449,299)

context.quadraticCurveTo(441,263,441,252)

//WHITE PART OF FACE, RED BORDERS LIME GREEN

context.quadraticCurveTo (404,268,430,196)

//WHITE PART OF FACE, RED BORDERS BLACK 

context.quadraticCurveTo (379,136,342,159)

context.quadraticCurveTo (317,145,282,173)

context.quadraticCurveTo (253,153,220,180)

//WHITE PART OF FACE, RED CONNECTING BLACK BORDER AND GREEN BORDER

context.quadraticCurveTo(208,198,215,198)

context.fillStyle = mygradlower; //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

 context.lineWidth = 2; 

context.strokeStyle = "white"; // COLOR OF LINE

context.stroke();

context.closePath

//LOWER BEAK, BLUE BORDERS red

var bottombeak = context.createLinearGradient(493,221,570,358);

bottombeak.addColorStop(0,"#FFFF00");

bottombeak.addColorStop(0.5,"rgba(255,142,58,1.00)");

bottombeak.addColorStop(1,"rgba(255,115,25,1.00)");

context.beginPath();

context.moveTo(311,316)

context.quadraticCurveTo(415,364,372,417)

//LOWER BEAK, BLUE BORDERS ORANGE

context.quadraticCurveTo(364,425,341,431)

//LOWER BEAK, BLUE LOWEST PART

context.quadraticCurveTo(296,436,259,417)

context.quadraticCurveTo(268,409,274,415)

context.quadraticCurveTo(278,402,284,410)

//LOWER BEAK, BLUE BORDERS YELLOW

context.quadraticCurveTo(322,407,306,372)

//LOWER BEAK, BLUE BORDERS PINK

context.quadraticCurveTo(312,344,301,336)

//LOWER BEAK, BLUE BOARDERS INSIDE ORANGE

context.lineTo(311,316)

context.fillStyle = bottombeak //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

context.closePath();

//BOTTOM MOUTH GAP, YELLOW ON BLUE

context.beginPath();

context.lineTo(284,410)

context.quadraticCurveTo(322,407,306,372)

 

context.lineTo(301,369)

//BOTTOM MOUTH GAP, YELLOW ON PINK

context.quadraticCurveTo(295,358,279,401)

//BOTTOM MOUTH GAP JUST YELLOW

context.lineTo(284,410)

context.closePath

context.fillStyle = "#1D1607" //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

//TONGUE 

//PINK YELLOW BORDER 

var tonguegra = context.createLinearGradient(493,221,269,434);

tonguegra.addColorStop(0,"#FF8686");

tonguegra.addColorStop(0.5,"rgba(219,153,153,1.00)");

tonguegra.addColorStop(1,"rgba(237,214,212,1.00)");

context.beginPath();

context.moveTo(301,369)

context.quadraticCurveTo(295,358,279,401)

//JUST PINK BORDER 

context.quadraticCurveTo(236,420,272,355)

//PINK ORANGE BORDER

context.quadraticCurveTo(299,323,302,337)

//PINK BLUE BORDER 

context.quadraticCurveTo(308,362,306,372)

context.lineTo(301,369)

context.closePath

context.fillStyle = tonguegra //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

context.closePath

//UPPER MOUTH GAP 

//pink border orange 

context.beginPath();

context.moveTo(272,355)

context.quadraticCurveTo(299,323,302,337)

//orange blue border 

context.lineTo(311,316)

//RED BORDERS ORANGE

context.quadraticCurveTo(296,291,308,267)

context.quadraticCurveTo(286,311,275,320)

context.lineTo(272,355)

context.closePath

context.fillStyle = "#1D1607" //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

//NECK

var ngra = context.createLinearGradient(478,535,429,424);

ngra.addColorStop(0,"#FF35A3");

ngra.addColorStop(0.7,"rgba(255,121,100,1.00)");

ngra.addColorStop(1,"rgba(254,101,10,1.00)");

//red boarders orange 

context.beginPath();

context.moveTo(341,431)

context.quadraticCurveTo(379,426,417,381)

context.quadraticCurveTo(422,317,449,299)

context.quadraticCurveTo(441,263,441,252)

//orange boarders green

context.quadraticCurveTo(472,285,483,280)

context.quadraticCurveTo(476,305,497,303)

context.quadraticCurveTo(490,333,514,333)

context.quadraticCurveTo(495,386,526,390)

context.quadraticCurveTo(532,451,483,458)

context.quadraticCurveTo(460,527,369,522)

//just orange neck

context.quadraticCurveTo(365,492,353,498)

context.closePath();

context.fillStyle = ngra //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "#000000"; // COLOR OF LINE

context.closePath();

context.stroke();

///past neck

context.beginPath();

//just green

context.moveTo(370,523)

context.lineTo(359,600)

context.lineTo(558,600)

context.lineTo(554,558)

//green borders black wing 

context.quadraticCurveTo(553,497,600,462)

context.lineTo(572,472)

context.quadraticCurveTo(551,474,548,458)

context.quadraticCurveTo(547,448,560,448)

context.quadraticCurveTo(610,436,588,400)

context.quadraticCurveTo(606,328,575,341)

context.quadraticCurveTo(587,248,555,301)

context.quadraticCurveTo(554,229,499,224)

context.quadraticCurveTo(462,166,430,197)

context.quadraticCurveTo(402,268,442,255)

//orange boarders green

context.quadraticCurveTo(472,285,483,280)

context.quadraticCurveTo(476,305,497,303)

context.quadraticCurveTo(490,333,514,333)

context.quadraticCurveTo(495,386,526,390)

context.quadraticCurveTo(532,451,483,458)

context.quadraticCurveTo(460,527,369,522)

context.closePath();

context.fillStyle = "#EF9E16" //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

//TOP FEATHERS 

var feathersgra = context.createLinearGradient(300,300,793,594);

feathersgra.addColorStop(0,"#FF1414");

feathersgra.addColorStop(0.5,"rgba(140,64,255,1.00)");

feathersgra.addColorStop(1,"rgba(9,23,255,1.00)");

//border with white part 

context.beginPath();

//boarder with green part

context.quadraticCurveTo(553,497,600,462)

context.lineTo(572,472)

context.quadraticCurveTo(551,474,548,458)

context.quadraticCurveTo(547,448,560,448)

context.quadraticCurveTo(610,436,588,400)

context.quadraticCurveTo(606,328,575,341)

context.quadraticCurveTo(587,248,555,301)

context.quadraticCurveTo(554,229,499,224)

context.quadraticCurveTo(462,166,430,197)

context.quadraticCurveTo(376,133, 342,160)

context.quadraticCurveTo(326,142,281,172)

context.quadraticCurveTo(235,148,213,198)

context.quadraticCurveTo(258,93,322,105)

context.quadraticCurveTo(407,69,588,236)

context.lineTo(554,240)

context.lineTo(613,302)

context.lineTo(594,306)

context.lineTo(626,334)

context.lineTo(607,340)

context.lineTo(629,372)

context.lineTo(650,410)

context.lineTo(693,458)

context.quadraticCurveTo(758,468,750,494)

context.lineTo(800,557)

context.lineTo(800,600)

context.lineTo(560,600)

context.quadraticCurveTo(521,515,584,473)

context.closePath();

context.fillStyle = feathersgra //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

//DETAILS

//nostril 

context.beginPath();

context.moveTo(240,415)

context.quadraticCurveTo(240,420,245,425)

context.lineWidth = 2; 

context.strokeStyle = "black"; // COLOR OF LINE

context.stroke();

//EYES

//EYE1

var egra = context.createRadialGradient(366,221,1,364,220,15);

egra.addColorStop(0,"#223DA5");

egra.addColorStop(0.7,"rgba(22,45,135,1.00)");

egra.addColorStop(1,"rgba(9,102,116,1.00)");

context.beginPath();

context.arc(364,220,20,0*Math.PI,2*Math.PI,false);

context.fillStyle = egra //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2;

context.stroke();

//pupil

context.beginPath();

context.arc(364,220,10,0*Math.PI,2*Math.PI,false);

context.fillStyle = "black" //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2;

context.stroke();

//white part of eye

context.beginPath();

context.arc(372,214,4,0*Math.PI,2*Math.PI,false);

context.fillStyle = "white" //COLOR OF TRIANGLE  OR  "rgba(0,0,0,0.5)", THEN HIGHLIGHT INSIDE THE QUOTATION MARKS, RIGHT CLICK, AND GO TO QUICKEDIT TO PICK CUSTOM COLOR.

context.fill();

context.lineWidth = 2;

context.stroke();

//bez curves 

context.beginPath();

context.moveTo(665,466)

context.bezierCurveTo(633,597,694,488,755,600)

context.lineWidth = 2;

context.stroke();

//feather details 

//eye details

context.beginPath();

context.moveTo(413,215)

context.bezierCurveTo(396,293,364,244,314,238)

context.bezierCurveTo(415,307,398,267,413,215)

context.moveTo(323,272)

context.bezierCurveTo(437,325,357,278,424,281)

context.bezierCurveTo(437,355,327,278,323,272)

context.fillStyle = "white"

context.fill();

context.lineWidth = 2;

context.stroke();

///more feather details

context.beginPath();

context.moveTo(380,460)

context.quadraticCurveTo(458,459,423,426)

context.quadraticCurveTo(503,410,456,388)

context.quadraticCurveTo(550,400,459,331)

context.lineWidth = 2;

context.stroke();

/