I created this poster with inspiration from the Dove "Like A Girl" campaign. I think it's important that girls grow up without the stereotypes that we've always grown up with. It's setting a false idea of who we should be. I put a twist on it by also combining it with Rosie the riveter because I thought it was the perfect way to combine tough and beautiful especially since that's what all women are. That's why I decided to use the campaign as inspiration for my poster.
Wednesday, December 9, 2015
caligram
I recreated a famous image of Audrey Hepburn, my favorite model, actress, humanitarian, etc., using only her quotes. Many of the quotes were from her film, Breakfast At Tiffany's, but I used other quotes of hers as well.
Thursday, November 5, 2015
Recoloring with photoshop
Using photoshop I took a color image of myself, made it black and white, then recolored it using colors that aren't in the original photo.
Thursday, October 22, 2015
OPI Pink Nail Polish
I'm a girly girl and I love painting my nails. It's almost an obsession so I decided to recreate an image of my favorite polish using Adobe Illustrator.
Friday, October 16, 2015
Business Card Logos - Final
After days of hard work and some in class critiquing, I came up with six business cards and original logos for each of them. I'm proud of my work and the effort I put in to each one!
I'd have to say that my favorites are the cat logo, which was so fun to draw, and the "Ritz" bartending logo.
Wednesday, October 14, 2015
Tuesday, September 29, 2015
The Lion King
It's our problem free philosophy... hakuna matata!
code:
//rect
var grdsky = context.createLinearGradient(250,450,225,200);
grdsky.addColorStop(0, 'rgb(25,84,166)');
grdsky.addColorStop(1, "rgb(9,36,74)");
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = grdsky;
context.fill();
context.stroke();
context.closePath();
//moon
var grdmoon = context.createRadialGradient(400,300,20,400,300,200);
grdmoon.addColorStop(0, "white");
grdmoon.addColorStop(1, "rgb(212,212,212)");
context.beginPath();
context.arc(390, 320, 310, 0, 2 * Math.PI, false);
context.fillStyle = grdmoon;
context.fill();
context.stroke();
context.closePath();
//shrubs right
context.beginPath();
context.moveTo(800,300);
context.lineTo(780,310);
context.lineTo(770,320);
context.lineTo(760,330);
context.lineTo(750,350);
context.lineTo(730,375);
context.lineTo(725,405);
context.lineTo(705,480);
context.lineTo(700,550);
context.lineTo(685,600);
context.lineTo(800,600);
context.lineTo(800,300);
context.fillStyle = 'rgb(104,133,97)';
context.fill();
context.stroke();
context.closePath();
///shrubs left
context.beginPath();
context.moveTo(0,270);
context.lineTo(10,280);
context.lineTo(15,300);
context.lineTo(18,310);
context.lineTo(25,330);
context.lineTo(30,370);
context.lineTo(50,400);
context.lineTo(60,450);
context.lineTo(75,510);
context.lineTo(90,550);
context.lineTo(110,575);
context.lineTo(125,600);
context.lineTo(0,600);
context.lineTo(0,270);
context.fillStyle = 'rgb(104,133,97)';
context.fill();
context.stroke();
context.closePath();
//vines
context.beginPath();
context.moveTo(700,0);
context.quadraticCurveTo(700,200,800,250);
context.moveTo(650,0);
context.quadraticCurveTo(700,200,800,200);
context.moveTo(680,0);
context.quadraticCurveTo(700,200,800,175);
context.stroke();
context.closePath();
//branch
context.beginPath();
context.moveTo(0,440);
context.lineTo(100,440);
context.lineTo(200,442);
context.lineTo(300,443);
context.lineTo(450,440);
context.lineTo(600,443);
context.lineTo(700,440);
context.lineTo(800,440);
context.lineTo(800,500);
context.lineTo(700,495);
context.lineTo(500,510);
context.lineTo(400,510);
context.lineTo(300,515);
context.lineTo(200,518);
context.lineTo(100,515);
context.lineTo(0,520);
context.lineTo(0,440);
context.fillStyle = 'rgb(122,102,66)';
context.fill();
context.stroke();
context.closePath();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0,460);
context.quadraticCurveTo(175,440,300,460);
context.moveTo(20,475);
context.lineTo(125,478);
context.lineTo(250,475);
context.lineTo(470,460);
context.moveTo(10,500);
context.quadraticCurveTo(250,480,600,498);
context.moveTo(150,505);
context.lineTo(200,510);
context.lineTo(280,508);
context.lineTo(350,504);
context.lineTo(450,510);
context.moveTo(450,445);
context.lineTo(650,456);
context.moveTo(580,476);
context.lineTo(800,479);
context.stroke();
context.closePath();
context.beginPath();
context.font = 'italic 16pt Arial';
context.fillStyle = 'blue';
context.fillText('Jeslin Ritz', 584, 590);
context.stroke();
context.closePath();
///simba
//front leg - back
context.beginPath();
context.moveTo(294,350)
context.quadraticCurveTo(275,395,275,443);
context.lineTo(302,443);
context.quadraticCurveTo(310,420,292,426);
context.quadraticCurveTo(320,390,294,350);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
//front leg - back - paw
context.beginPath();
context.moveTo(299,443);
context.quadraticCurveTo(305,426,294,429);
context.stroke();
context.closePath();
///back leg - back
context.beginPath();
context.moveTo(133,338);
context.quadraticCurveTo(120,370,135,388);
context.lineTo(114,394);
context.quadraticCurveTo(115,400,125,420);
context.lineTo(126,424);
context.quadraticCurveTo(155,440,138,408);context.lineTo(170,398);
context.quadraticCurveTo(200,370,133,338);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
// mane - under
context.beginPath();
context.moveTo(315,360);
context.quadraticCurveTo(325,380,300,390);
context.lineTo(306,380);
context.quadraticCurveTo(288,400,275,380);
context.lineTo(315,360);
context.fillStyle = 'rgb(224,68,20)';
context.fill();
context.stroke();
context.closePath();
////body
context.beginPath();
context.moveTo(375,430);
context.quadraticCurveTo(375,400,360,417) //back
context.lineTo(345,355);
context.lineTo(300,300);
context.quadraticCurveTo(225,330,140,320);
//tail
context.bezierCurveTo(125,315,45,480,30,380);
context.bezierCurveTo(45,500,125,335,140,340);
context.quadraticCurveTo(130,360,153,390);
context.lineTo(143,415);
context.lineTo(156,440);
context.lineTo(180,440); ///bottom back paw
context.quadraticCurveTo(180,420,168,425);
context.lineTo(166,415);
context.lineTo(184,394);
context.lineTo(182,365);
context.lineTo(183,382);
///belly
context.quadraticCurveTo(275,418,310,370);
//back of front leg
context.lineTo(305,360);
context.lineTo(323,400);
context.lineTo(324,394);
context.lineTo(325,402);
context.lineTo(327,396);
context.lineTo(328,407);
context.lineTo(330,400);
context.lineTo(352,438);
context.quadraticCurveTo(375,435,375,430);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
///mane
context.beginPath();
context.moveTo(286,308);
context.quadraticCurveTo(294,308,303,334);
context.lineTo(313,327);
context.quadraticCurveTo(310,325,320,345);
context.quadraticCurveTo(330,340,325,340);
context.quadraticCurveTo(335,355,348,368);
context.quadraticCurveTo(355,358,353,340);
context.quadraticCurveTo(358,355,353,360);
context.quadraticCurveTo(360,355,360,330);
context.lineTo(363,345);
context.bezierCurveTo(372,340,368,330,370,310);
context.lineTo(372,320);
context.quadraticCurveTo(385,300,376,280);
context.lineTo(380,285);
context.quadraticCurveTo(378,260,360,250);
context.quadraticCurveTo(364,240,376,253);
context.quadraticCurveTo(360,220,328,240);
context.quadraticCurveTo(343,225,350,228);
context.quadraticCurveTo(330,226,318,243);
context.quadraticCurveTo(310,225,290,250);
context.lineTo(296,247);
context.bezierCurveTo(300,260,286,244,278,276);
context.lineTo(282,273);
context.quadraticCurveTo(280,280,282,284);
context.quadraticCurveTo(275,285,275,300);
context.quadraticCurveTo(270,300,270,310);
context.quadraticCurveTo(284,313,286,308);
context.fillStyle = 'rgb(224,68,20)';
context.fill();
context.stroke();
context.closePath();
//face
context.beginPath();
context.moveTo(327,257);
context.lineTo(320,256);
context.quadraticCurveTo(300,260,298,295);
context.lineTo(303,288);
context.quadraticCurveTo(299,305,315,320);
context.lineTo(315,318);
context.quadraticCurveTo(320,312,330,314);
context.quadraticCurveTo(340,325,360,313);
context.quadraticCurveTo(362,310,367,306);
context.quadraticCurveTo(372,284,355,264);
context.quadraticCurveTo(350,246,330,253);
context.lineTo(327,257);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
//nose
context.beginPath();
context.moveTo(343,293);
context.lineTo(327,288);
context.quadraticCurveTo(334,282,348,281);
context.quadraticCurveTo(348,285,343,293);
context.fillStyle = 'rgb(189,106,34)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(327,288);
context.lineTo(322,281);
context.quadraticCurveTo(330,274,341,274);
context.lineTo(348,281);
context.stroke();
context.closePath();
//left eye
context.beginPath();
context.moveTo(322,281);
context.quadraticCurveTo(318,286,310,285);
context.quadraticCurveTo(312,260,322,281);
context.fillStyle = 'rgb(214,145,54)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(313,281);
context.quadraticCurveTo(318,283,319,279);
context.stroke();
context.closePath();
///eyebrow
context.beginPath();
context.moveTo(305,280);
context.quadraticCurveTo(310,260,320,268);
context.moveTo(336,265);
context.quadraticCurveTo(344,250,353,264);
context.stroke();
context.closePath();
//right eye
context.beginPath();
context.moveTo(341,274);
context.quadraticCurveTo(350,274,353,270);
context.quadraticCurveTo(340,252,341,274);
context.fillStyle = 'rgb(214,145,54)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(344,270)
context.quadraticCurveTo(350,271,349,268)
context.stroke();
context.closePath();
//mouth
context.beginPath();
context.moveTo(343,293);
context.lineTo(346,302);
context.lineTo(353,299);
context.lineTo(357,295);
context.lineTo(353,299);
context.lineTo(346,302);
context.lineTo(338,304);
context.lineTo(330,303);
context.stroke();
context.closePath();
//tail - fluff
context.beginPath();
context.moveTo(36,404);
context.quadraticCurveTo(46,385,36,380);
context.lineTo(36,388);
context.lineTo(30,370);
context.quadraticCurveTo(20,380,25,390);
context.lineTo(19,385);
context.quadraticCurveTo(15,395,36,404);
context.fillStyle = 'rgb(224,68,20)';
context.fill();
context.stroke();
context.closePath();
///pumba
//front leg - back
context.beginPath();
context.moveTo(525,407);
context.quadraticCurveTo(522,410,535,433);
context.lineTo(540,435);
context.quadraticCurveTo(535,439,529,435);
context.quadraticCurveTo(531,428,518,412);
context.lineTo(525,407);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
/// back leg - back
context.beginPath();
context.moveTo(460,380);
context.lineTo(453,425);
context.lineTo(455,436);
context.lineTo(460,440);
context.lineTo(452,440);
context.lineTo(447,423);
context.lineTo(460,380);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
//body
context.beginPath();
context.moveTo(520,300);
context.lineTo(490,320);
context.quadraticCurveTo(490,380,435,360);
context.bezierCurveTo(425,350,440,335,430,310);
context.bezierCurveTo(435,335,420,350,430,360);
context.quadraticCurveTo(416,385,430,405);
context.quadraticCurveTo(430,416,418,406);
context.lineTo(418,427);
context.quadraticCurveTo(422,430,423,425);
context.lineTo(423,413);
context.quadraticCurveTo(448,433,450,400);
context.lineTo(447,415);
context.quadraticCurveTo(555,448,545,320);
context.lineTo(520,300);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
///front leg
context.beginPath();
context.moveTo(504,404);
context.lineTo(500,415);
context.lineTo(507,440);
context.lineTo(518,440);
context.lineTo(511,435);
context.lineTo(507,416);
context.lineTo(520,405);
context.quadraticCurveTo(519,390,504,404);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
/////mane
context.beginPath();
context.moveTo(500,335);
context.bezierCurveTo(485,330,478,360,470,350);
context.quadraticCurveTo(480,360,480,355);
context.bezierCurveTo(460,365,460,345,460,355);
context.quadraticCurveTo(475,375,490,370);
context.quadraticCurveTo(505,360,500,335)
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
///face
context.beginPath()
context.moveTo(532,335);
context.quadraticCurveTo(525,342,526,350);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(535,338)
context.lineTo(535,348);
context.quadraticCurveTo(525,345,535,338);
context.fillStyle = 'rgb(153,58,17)';
context.fill();
context.stroke();
context.closePath();
///right ear
context.beginPath();
context.moveTo(500,338);
context.quadraticCurveTo(520,338,505,345);
context.quadraticCurveTo(518,355,523,345);
context.quadraticCurveTo(508,375,500,338);
context.stroke();
context.closePath();
//left ear
context.beginPath();
context.moveTo(495,334);
context.quadraticCurveTo(475,330,485,340);
context.quadraticCurveTo(473,345,468,334);
context.quadraticCurveTo(470,365,495,334);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
///tail
context.beginPath();
context.moveTo(430,310);
context.quadraticCurveTo(425,305,435,300);
context.quadraticCurveTo(428,300,428,303);
context.quadraticCurveTo(430,298,424,290);
context.quadraticCurveTo(424,292,424,300);
context.quadraticCurveTo(412,285,405,310);
context.quadraticCurveTo(415,300,420,305);
context.quadraticCurveTo(410,305,411,315);
context.quadraticCurveTo(420,304,430,310);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
//left tusk
context.beginPath();
context.moveTo(497,318);
context.quadraticCurveTo(480,308,494,300);
context.quadraticCurveTo(466,308,492,324);
context.quadraticCurveTo(494,326,497,318);
context.moveTo(540,320);
context.quadraticCurveTo(557,315,545,300);
context.quadraticCurveTo(573,315,540,328);
context.quadraticCurveTo(538,325,540,320);
context.fillStyle = 'rgb(245,244,213)'
context.fill();
context.stroke();
context.closePath();
///timone
///ears
context.beginPath();
context.moveTo(594,380);
context.bezierCurveTo(585,393,605,393,594,380);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(610,375);
context.bezierCurveTo(597,392,623,380,610,375);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
///head
context.beginPath();
context.moveTo(610,375);
context.quadraticCurveTo(595,365,593,384);
context.quadraticCurveTo(610,395,610,375);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath();
///mouth
context.beginPath();
context.moveTo(606,383);
context.quadraticCurveTo(603,388,597,383);
context.stroke();
context.closePath();
///nose
context.beginPath();
context.arc(603, 379, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
//eyes
context.beginPath();
context.arc(598, 378, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(604, 375, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
///arms
context.beginPath();
context.moveTo(604,392);
context.lineTo(590,398);
context.lineTo(587,408);
context.bezierCurveTo(580,415,595,415,590,408);
context.lineTo(593,400);
context.lineTo(604,395);
context.lineTo(604,392);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(606,392);
context.lineTo(615,404);
context.lineTo(620,397);
context.bezierCurveTo(617,393,630,393,622,399);
context.lineTo(615,410);
context.lineTo(606,394);
context.lineTo(606,392);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath()
///body
context.beginPath();
context.moveTo(604,388);
context.bezierCurveTo(620,396,590,415,611,426);
context.quadraticCurveTo(615,430,610,440);
//foot
context.lineTo(620,440);
context.lineTo(621,442);
context.lineTo(606,442);
context.quadraticCurveTo(612,430,602,428);
context.quadraticCurveTo(605,440,590,435);
//foot
context.lineTo(590,440);
context.lineTo(595,440);
context.lineTo(598,442);
context.lineTo(587,442);
context.lineTo(587,432);
context.quadraticCurveTo(602,434,595,427);
//tail
context.bezierCurveTo(570,435,575,410,557,415);
context.bezierCurveTo(574,405,570,430,593,423);
context.quadraticCurveTo(602,415,602,388);
context.lineTo(604,388);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath();
///tail tip
context.beginPath();
context.moveTo(557,415);
context.quadraticCurveTo(560,410,570,414);
context.lineTo(570,419);
context.quadraticCurveTo(560,410,557,415);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
var grdsky = context.createLinearGradient(250,450,225,200);
grdsky.addColorStop(0, 'rgb(25,84,166)');
grdsky.addColorStop(1, "rgb(9,36,74)");
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = grdsky;
context.fill();
context.stroke();
context.closePath();
//moon
var grdmoon = context.createRadialGradient(400,300,20,400,300,200);
grdmoon.addColorStop(0, "white");
grdmoon.addColorStop(1, "rgb(212,212,212)");
context.beginPath();
context.arc(390, 320, 310, 0, 2 * Math.PI, false);
context.fillStyle = grdmoon;
context.fill();
context.stroke();
context.closePath();
//shrubs right
context.beginPath();
context.moveTo(800,300);
context.lineTo(780,310);
context.lineTo(770,320);
context.lineTo(760,330);
context.lineTo(750,350);
context.lineTo(730,375);
context.lineTo(725,405);
context.lineTo(705,480);
context.lineTo(700,550);
context.lineTo(685,600);
context.lineTo(800,600);
context.lineTo(800,300);
context.fillStyle = 'rgb(104,133,97)';
context.fill();
context.stroke();
context.closePath();
///shrubs left
context.beginPath();
context.moveTo(0,270);
context.lineTo(10,280);
context.lineTo(15,300);
context.lineTo(18,310);
context.lineTo(25,330);
context.lineTo(30,370);
context.lineTo(50,400);
context.lineTo(60,450);
context.lineTo(75,510);
context.lineTo(90,550);
context.lineTo(110,575);
context.lineTo(125,600);
context.lineTo(0,600);
context.lineTo(0,270);
context.fillStyle = 'rgb(104,133,97)';
context.fill();
context.stroke();
context.closePath();
//vines
context.beginPath();
context.moveTo(700,0);
context.quadraticCurveTo(700,200,800,250);
context.moveTo(650,0);
context.quadraticCurveTo(700,200,800,200);
context.moveTo(680,0);
context.quadraticCurveTo(700,200,800,175);
context.stroke();
context.closePath();
//branch
context.beginPath();
context.moveTo(0,440);
context.lineTo(100,440);
context.lineTo(200,442);
context.lineTo(300,443);
context.lineTo(450,440);
context.lineTo(600,443);
context.lineTo(700,440);
context.lineTo(800,440);
context.lineTo(800,500);
context.lineTo(700,495);
context.lineTo(500,510);
context.lineTo(400,510);
context.lineTo(300,515);
context.lineTo(200,518);
context.lineTo(100,515);
context.lineTo(0,520);
context.lineTo(0,440);
context.fillStyle = 'rgb(122,102,66)';
context.fill();
context.stroke();
context.closePath();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0,460);
context.quadraticCurveTo(175,440,300,460);
context.moveTo(20,475);
context.lineTo(125,478);
context.lineTo(250,475);
context.lineTo(470,460);
context.moveTo(10,500);
context.quadraticCurveTo(250,480,600,498);
context.moveTo(150,505);
context.lineTo(200,510);
context.lineTo(280,508);
context.lineTo(350,504);
context.lineTo(450,510);
context.moveTo(450,445);
context.lineTo(650,456);
context.moveTo(580,476);
context.lineTo(800,479);
context.stroke();
context.closePath();
context.beginPath();
context.font = 'italic 16pt Arial';
context.fillStyle = 'blue';
context.fillText('Jeslin Ritz', 584, 590);
context.stroke();
context.closePath();
///simba
//front leg - back
context.beginPath();
context.moveTo(294,350)
context.quadraticCurveTo(275,395,275,443);
context.lineTo(302,443);
context.quadraticCurveTo(310,420,292,426);
context.quadraticCurveTo(320,390,294,350);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
//front leg - back - paw
context.beginPath();
context.moveTo(299,443);
context.quadraticCurveTo(305,426,294,429);
context.stroke();
context.closePath();
///back leg - back
context.beginPath();
context.moveTo(133,338);
context.quadraticCurveTo(120,370,135,388);
context.lineTo(114,394);
context.quadraticCurveTo(115,400,125,420);
context.lineTo(126,424);
context.quadraticCurveTo(155,440,138,408);context.lineTo(170,398);
context.quadraticCurveTo(200,370,133,338);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
// mane - under
context.beginPath();
context.moveTo(315,360);
context.quadraticCurveTo(325,380,300,390);
context.lineTo(306,380);
context.quadraticCurveTo(288,400,275,380);
context.lineTo(315,360);
context.fillStyle = 'rgb(224,68,20)';
context.fill();
context.stroke();
context.closePath();
////body
context.beginPath();
context.moveTo(375,430);
context.quadraticCurveTo(375,400,360,417) //back
context.lineTo(345,355);
context.lineTo(300,300);
context.quadraticCurveTo(225,330,140,320);
//tail
context.bezierCurveTo(125,315,45,480,30,380);
context.bezierCurveTo(45,500,125,335,140,340);
context.quadraticCurveTo(130,360,153,390);
context.lineTo(143,415);
context.lineTo(156,440);
context.lineTo(180,440); ///bottom back paw
context.quadraticCurveTo(180,420,168,425);
context.lineTo(166,415);
context.lineTo(184,394);
context.lineTo(182,365);
context.lineTo(183,382);
///belly
context.quadraticCurveTo(275,418,310,370);
//back of front leg
context.lineTo(305,360);
context.lineTo(323,400);
context.lineTo(324,394);
context.lineTo(325,402);
context.lineTo(327,396);
context.lineTo(328,407);
context.lineTo(330,400);
context.lineTo(352,438);
context.quadraticCurveTo(375,435,375,430);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
///mane
context.beginPath();
context.moveTo(286,308);
context.quadraticCurveTo(294,308,303,334);
context.lineTo(313,327);
context.quadraticCurveTo(310,325,320,345);
context.quadraticCurveTo(330,340,325,340);
context.quadraticCurveTo(335,355,348,368);
context.quadraticCurveTo(355,358,353,340);
context.quadraticCurveTo(358,355,353,360);
context.quadraticCurveTo(360,355,360,330);
context.lineTo(363,345);
context.bezierCurveTo(372,340,368,330,370,310);
context.lineTo(372,320);
context.quadraticCurveTo(385,300,376,280);
context.lineTo(380,285);
context.quadraticCurveTo(378,260,360,250);
context.quadraticCurveTo(364,240,376,253);
context.quadraticCurveTo(360,220,328,240);
context.quadraticCurveTo(343,225,350,228);
context.quadraticCurveTo(330,226,318,243);
context.quadraticCurveTo(310,225,290,250);
context.lineTo(296,247);
context.bezierCurveTo(300,260,286,244,278,276);
context.lineTo(282,273);
context.quadraticCurveTo(280,280,282,284);
context.quadraticCurveTo(275,285,275,300);
context.quadraticCurveTo(270,300,270,310);
context.quadraticCurveTo(284,313,286,308);
context.fillStyle = 'rgb(224,68,20)';
context.fill();
context.stroke();
context.closePath();
//face
context.beginPath();
context.moveTo(327,257);
context.lineTo(320,256);
context.quadraticCurveTo(300,260,298,295);
context.lineTo(303,288);
context.quadraticCurveTo(299,305,315,320);
context.lineTo(315,318);
context.quadraticCurveTo(320,312,330,314);
context.quadraticCurveTo(340,325,360,313);
context.quadraticCurveTo(362,310,367,306);
context.quadraticCurveTo(372,284,355,264);
context.quadraticCurveTo(350,246,330,253);
context.lineTo(327,257);
context.fillStyle = 'rgb(240,152,29)';
context.fill();
context.stroke();
context.closePath();
//nose
context.beginPath();
context.moveTo(343,293);
context.lineTo(327,288);
context.quadraticCurveTo(334,282,348,281);
context.quadraticCurveTo(348,285,343,293);
context.fillStyle = 'rgb(189,106,34)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(327,288);
context.lineTo(322,281);
context.quadraticCurveTo(330,274,341,274);
context.lineTo(348,281);
context.stroke();
context.closePath();
//left eye
context.beginPath();
context.moveTo(322,281);
context.quadraticCurveTo(318,286,310,285);
context.quadraticCurveTo(312,260,322,281);
context.fillStyle = 'rgb(214,145,54)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(313,281);
context.quadraticCurveTo(318,283,319,279);
context.stroke();
context.closePath();
///eyebrow
context.beginPath();
context.moveTo(305,280);
context.quadraticCurveTo(310,260,320,268);
context.moveTo(336,265);
context.quadraticCurveTo(344,250,353,264);
context.stroke();
context.closePath();
//right eye
context.beginPath();
context.moveTo(341,274);
context.quadraticCurveTo(350,274,353,270);
context.quadraticCurveTo(340,252,341,274);
context.fillStyle = 'rgb(214,145,54)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(344,270)
context.quadraticCurveTo(350,271,349,268)
context.stroke();
context.closePath();
//mouth
context.beginPath();
context.moveTo(343,293);
context.lineTo(346,302);
context.lineTo(353,299);
context.lineTo(357,295);
context.lineTo(353,299);
context.lineTo(346,302);
context.lineTo(338,304);
context.lineTo(330,303);
context.stroke();
context.closePath();
//tail - fluff
context.beginPath();
context.moveTo(36,404);
context.quadraticCurveTo(46,385,36,380);
context.lineTo(36,388);
context.lineTo(30,370);
context.quadraticCurveTo(20,380,25,390);
context.lineTo(19,385);
context.quadraticCurveTo(15,395,36,404);
context.fillStyle = 'rgb(224,68,20)';
context.fill();
context.stroke();
context.closePath();
///pumba
//front leg - back
context.beginPath();
context.moveTo(525,407);
context.quadraticCurveTo(522,410,535,433);
context.lineTo(540,435);
context.quadraticCurveTo(535,439,529,435);
context.quadraticCurveTo(531,428,518,412);
context.lineTo(525,407);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
/// back leg - back
context.beginPath();
context.moveTo(460,380);
context.lineTo(453,425);
context.lineTo(455,436);
context.lineTo(460,440);
context.lineTo(452,440);
context.lineTo(447,423);
context.lineTo(460,380);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
//body
context.beginPath();
context.moveTo(520,300);
context.lineTo(490,320);
context.quadraticCurveTo(490,380,435,360);
context.bezierCurveTo(425,350,440,335,430,310);
context.bezierCurveTo(435,335,420,350,430,360);
context.quadraticCurveTo(416,385,430,405);
context.quadraticCurveTo(430,416,418,406);
context.lineTo(418,427);
context.quadraticCurveTo(422,430,423,425);
context.lineTo(423,413);
context.quadraticCurveTo(448,433,450,400);
context.lineTo(447,415);
context.quadraticCurveTo(555,448,545,320);
context.lineTo(520,300);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
///front leg
context.beginPath();
context.moveTo(504,404);
context.lineTo(500,415);
context.lineTo(507,440);
context.lineTo(518,440);
context.lineTo(511,435);
context.lineTo(507,416);
context.lineTo(520,405);
context.quadraticCurveTo(519,390,504,404);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
/////mane
context.beginPath();
context.moveTo(500,335);
context.bezierCurveTo(485,330,478,360,470,350);
context.quadraticCurveTo(480,360,480,355);
context.bezierCurveTo(460,365,460,345,460,355);
context.quadraticCurveTo(475,375,490,370);
context.quadraticCurveTo(505,360,500,335)
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
///face
context.beginPath()
context.moveTo(532,335);
context.quadraticCurveTo(525,342,526,350);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(535,338)
context.lineTo(535,348);
context.quadraticCurveTo(525,345,535,338);
context.fillStyle = 'rgb(153,58,17)';
context.fill();
context.stroke();
context.closePath();
///right ear
context.beginPath();
context.moveTo(500,338);
context.quadraticCurveTo(520,338,505,345);
context.quadraticCurveTo(518,355,523,345);
context.quadraticCurveTo(508,375,500,338);
context.stroke();
context.closePath();
//left ear
context.beginPath();
context.moveTo(495,334);
context.quadraticCurveTo(475,330,485,340);
context.quadraticCurveTo(473,345,468,334);
context.quadraticCurveTo(470,365,495,334);
context.fillStyle = 'rgb(194,62,17)';
context.fill();
context.stroke();
context.closePath();
///tail
context.beginPath();
context.moveTo(430,310);
context.quadraticCurveTo(425,305,435,300);
context.quadraticCurveTo(428,300,428,303);
context.quadraticCurveTo(430,298,424,290);
context.quadraticCurveTo(424,292,424,300);
context.quadraticCurveTo(412,285,405,310);
context.quadraticCurveTo(415,300,420,305);
context.quadraticCurveTo(410,305,411,315);
context.quadraticCurveTo(420,304,430,310);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
//left tusk
context.beginPath();
context.moveTo(497,318);
context.quadraticCurveTo(480,308,494,300);
context.quadraticCurveTo(466,308,492,324);
context.quadraticCurveTo(494,326,497,318);
context.moveTo(540,320);
context.quadraticCurveTo(557,315,545,300);
context.quadraticCurveTo(573,315,540,328);
context.quadraticCurveTo(538,325,540,320);
context.fillStyle = 'rgb(245,244,213)'
context.fill();
context.stroke();
context.closePath();
///timone
///ears
context.beginPath();
context.moveTo(594,380);
context.bezierCurveTo(585,393,605,393,594,380);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(610,375);
context.bezierCurveTo(597,392,623,380,610,375);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
///head
context.beginPath();
context.moveTo(610,375);
context.quadraticCurveTo(595,365,593,384);
context.quadraticCurveTo(610,395,610,375);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath();
///mouth
context.beginPath();
context.moveTo(606,383);
context.quadraticCurveTo(603,388,597,383);
context.stroke();
context.closePath();
///nose
context.beginPath();
context.arc(603, 379, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
//eyes
context.beginPath();
context.arc(598, 378, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(604, 375, 3, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
///arms
context.beginPath();
context.moveTo(604,392);
context.lineTo(590,398);
context.lineTo(587,408);
context.bezierCurveTo(580,415,595,415,590,408);
context.lineTo(593,400);
context.lineTo(604,395);
context.lineTo(604,392);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(606,392);
context.lineTo(615,404);
context.lineTo(620,397);
context.bezierCurveTo(617,393,630,393,622,399);
context.lineTo(615,410);
context.lineTo(606,394);
context.lineTo(606,392);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath()
///body
context.beginPath();
context.moveTo(604,388);
context.bezierCurveTo(620,396,590,415,611,426);
context.quadraticCurveTo(615,430,610,440);
//foot
context.lineTo(620,440);
context.lineTo(621,442);
context.lineTo(606,442);
context.quadraticCurveTo(612,430,602,428);
context.quadraticCurveTo(605,440,590,435);
//foot
context.lineTo(590,440);
context.lineTo(595,440);
context.lineTo(598,442);
context.lineTo(587,442);
context.lineTo(587,432);
context.quadraticCurveTo(602,434,595,427);
//tail
context.bezierCurveTo(570,435,575,410,557,415);
context.bezierCurveTo(574,405,570,430,593,423);
context.quadraticCurveTo(602,415,602,388);
context.lineTo(604,388);
context.fillStyle = 'rgb(250,203,102)';
context.fill();
context.stroke();
context.closePath();
///tail tip
context.beginPath();
context.moveTo(557,415);
context.quadraticCurveTo(560,410,570,414);
context.lineTo(570,419);
context.quadraticCurveTo(560,410,557,415);
context.fillStyle = 'rgb(69,37,0)';
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
Tuesday, September 15, 2015
Sunset
Sunset behind mountains.
Here is the coding for the image:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
context.rect(0, 0, canvas.width, canvas.height);
// create radial gradient
var nuhnight = context.createRadialGradient(230, 350, 80, 230, 75, 600);
// yellow
nuhnight.addColorStop(0, '#F2B93F');
//orange
nuhnight.addColorStop(0.25, '#FA5534');
//red
nuhnight.addColorStop(0.5, '#FA344C');
//pink
nuhnight.addColorStop(0.75, '#FF69AF');
// blue
nuhnight.addColorStop(1, '#4D9EF0');
context.fillStyle = nuhnight;
context.fill();
//mountains
context.beginPath();
context.moveTo(-45,600); //a - starting point
context.lineTo(75,275); //b
context.lineTo(105,376); //c
context.lineTo(150,330); //d
context.lineTo(210,465); //e
context.lineTo(300,350) //f
context.lineTo(400,555); //g
context.lineTo(450,450); //h
context.lineTo(500,500); //i
context.lineTo(575,300); //j
context.lineTo(650,505); //k
context.lineTo(720,360); //l
context.lineTo(860,600); //m
context.lineTo(0,600); //n - ending point
context.lineWidth = 20;
context.lineCap = "square";
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
Sailboat
Here is the code for the sailboat:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
// the radial gradient
context.rect(0,0, canvas.width, canvas.height);
context.stroke();
// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 100;
// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 200;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "gold");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "lightyellow");
// outer color
grd.addColorStop(1, "lightblue");
context.fillStyle = grd;
context.fill();
// boat
context.beginPath();
context.arc(488, 435, 90, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'silver';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
// ocean
context.beginPath();
context.rect(0, 500, 800, 100);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'blue';
context.stroke();
context.closePath();
// mast
context.beginPath();
context.moveTo(480, 435);
context.lineTo(480, 300);
context.lineWidth = 8;
context.strokeStyle = 'black';
context.stroke();
context.closePath();
// right sail
context.beginPath();
context.moveTo(485, 300);
context.lineTo(550, 410);
context.lineTo(485, 400);
context.lineTo(485, 300);
context.lineWidth = 5;
context.lineCap = 'round'
context.lineJoin = 'round';
context.strokeStyle = 'white'
context.stroke();
context.fillStyle = "white";
context.fill();
context.closePath();
//left sail
context.beginPath();
context.moveTo(475, 300);
context.lineTo(475, 400);
context.lineTo(400, 410);
context.lineTo(475, 300);
context.lineWidth = 5;
context.lineCap = 'round'
context.lineJoin = 'round';
context.strokeStyle = 'white'
context.stroke();
context.fillStyle = "white";
context.fill();
context.closePath();
/**/
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
// the radial gradient
context.rect(0,0, canvas.width, canvas.height);
context.stroke();
// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 100;
// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 200;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "gold");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "lightyellow");
// outer color
grd.addColorStop(1, "lightblue");
context.fillStyle = grd;
context.fill();
// boat
context.beginPath();
context.arc(488, 435, 90, 0, Math.PI, false);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'silver';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
// ocean
context.beginPath();
context.rect(0, 500, 800, 100);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'blue';
context.stroke();
context.closePath();
// mast
context.beginPath();
context.moveTo(480, 435);
context.lineTo(480, 300);
context.lineWidth = 8;
context.strokeStyle = 'black';
context.stroke();
context.closePath();
// right sail
context.beginPath();
context.moveTo(485, 300);
context.lineTo(550, 410);
context.lineTo(485, 400);
context.lineTo(485, 300);
context.lineWidth = 5;
context.lineCap = 'round'
context.lineJoin = 'round';
context.strokeStyle = 'white'
context.stroke();
context.fillStyle = "white";
context.fill();
context.closePath();
//left sail
context.beginPath();
context.moveTo(475, 300);
context.lineTo(475, 400);
context.lineTo(400, 410);
context.lineTo(475, 300);
context.lineWidth = 5;
context.lineCap = 'round'
context.lineJoin = 'round';
context.strokeStyle = 'white'
context.stroke();
context.fillStyle = "white";
context.fill();
context.closePath();
/**/
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
Kelvin the Alien
Meet Kelvin the Alien! Here is his code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
//// COLORS
//head
var alienheadgrd = context.createRadialGradient(440, 0, 50, 300, 60, 250);
alienheadgrd.addColorStop(0, 'lightgray');
alienheadgrd.addColorStop(1, 'gray');
//body
var alienbodygrd = context.createRadialGradient(400, 560, 50, 400, 60, 175);
alienbodygrd.addColorStop(0, 'lightgreen');
alienbodygrd.addColorStop(0.5, 'gray');
alienbodygrd.addColorStop(1, 'black');
// right arm
var rightarmgrd = context.createRadialGradient(525,425,30,300,400,200);
rightarmgrd.addColorStop(0, 'lightgreen');
rightarmgrd.addColorStop(1, 'gray');
//left arm
var leftarmgrd = context.createRadialGradient(220,425,30,200,570,220);
leftarmgrd.addColorStop(0, 'lightgreen');
leftarmgrd.addColorStop(1, 'gray');
//right leg
var rightleggrd = context.createRadialGradient(550,535,30,200,570,220);
rightleggrd.addColorStop(0, 'lightgreen');
rightleggrd.addColorStop(1, 'gray');
///left leg
var leftleggrd = context.createRadialGradient(150,535,30,200,570,220);
leftleggrd.addColorStop(0, 'lightgreen');
leftleggrd.addColorStop(1, 'gray');
//right eye
var righteyegrd = context.createRadialGradient(450,10,30,500,650,300);
righteyegrd.addColorStop(0, 'gray');
righteyegrd.addColorStop(1, 'black');
///left eye
var lefteyegrd = context.createRadialGradient(350,10,30,500,650,300);
lefteyegrd.addColorStop(0, 'gray');
lefteyegrd.addColorStop(1, 'black');
///background rect
//// SHAPES
///rect
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(10,22,92)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
/// planet - ground
context.beginPath();
context.rect(0,500,800,600);
context.fillStyle = "rgb(173,154,137)";
context.fill();
context.stroke();
context.closePath();
/// UFO
///custom shape - alien body
context.beginPath();
context.moveTo(400,300);
context.quadraticCurveTo(400,300,400,300);
context.quadraticCurveTo(525,425,450,475);
context.quadraticCurveTo(350,475,350,475);
context.quadraticCurveTo(275,425,400,300);
context.fillStyle = alienbodygrd;
context.fill();
context.stroke();
context.closePath();
/// alien head
context.beginPath();
context.moveTo(400,300); //starting point
context.bezierCurveTo(0,000,800,0,400,300);
context.fillStyle = alienheadgrd;
context.fill();
context.stroke();
context.closePath();
//right eye
context.beginPath();
context.moveTo(450,110);
context.bezierCurveTo(550,250,350,250,450,110)
context.fillStyle = righteyegrd;
context.fill();
context.stroke();
context.closePath();
//left eye
context.beginPath();
context.moveTo(350,110)
context.bezierCurveTo(450,250,250,250,350,110);
context.fillStyle = lefteyegrd;
context.fill();
context.stroke();
context.closePath();
/// nose
context.beginPath();
context.moveTo(395,210);
context.lineTo(395,220);
context.moveTo(405,210);
context.lineTo(405,220);
context.stroke();
context.closePath();
/// mouth
context.beginPath();
context.moveTo(450,240)
context.quadraticCurveTo(400,280,350,240);
context.lineCap = 'round';
context.stroke();
context.closePath();
///alien right arm
context.beginPath();
context.moveTo(445,350)
context.bezierCurveTo(700,500,400,400,445,350);
context.fillStyle = rightarmgrd;
context.fill();
context.stroke();
context.closePath();
//alien left arm
context.beginPath();
context.moveTo(355,350);
context.bezierCurveTo(100,500,400,400,355,350)
context.fillStyle = leftarmgrd;
context.fill();
context.stroke();
context.closePath();
/// right leg
context.beginPath();
context.moveTo(450,475);
context.bezierCurveTo(500,600,400,650,450,475)
context.fillStyle = rightleggrd;
context.fill();
context.stroke();
context.closePath();
///left leg
context.beginPath();
context.moveTo(350,475)
context.bezierCurveTo(400,600,300,650,350,475)
context.fillStyle = leftleggrd;
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
//// COLORS
//head
var alienheadgrd = context.createRadialGradient(440, 0, 50, 300, 60, 250);
alienheadgrd.addColorStop(0, 'lightgray');
alienheadgrd.addColorStop(1, 'gray');
//body
var alienbodygrd = context.createRadialGradient(400, 560, 50, 400, 60, 175);
alienbodygrd.addColorStop(0, 'lightgreen');
alienbodygrd.addColorStop(0.5, 'gray');
alienbodygrd.addColorStop(1, 'black');
// right arm
var rightarmgrd = context.createRadialGradient(525,425,30,300,400,200);
rightarmgrd.addColorStop(0, 'lightgreen');
rightarmgrd.addColorStop(1, 'gray');
//left arm
var leftarmgrd = context.createRadialGradient(220,425,30,200,570,220);
leftarmgrd.addColorStop(0, 'lightgreen');
leftarmgrd.addColorStop(1, 'gray');
//right leg
var rightleggrd = context.createRadialGradient(550,535,30,200,570,220);
rightleggrd.addColorStop(0, 'lightgreen');
rightleggrd.addColorStop(1, 'gray');
///left leg
var leftleggrd = context.createRadialGradient(150,535,30,200,570,220);
leftleggrd.addColorStop(0, 'lightgreen');
leftleggrd.addColorStop(1, 'gray');
//right eye
var righteyegrd = context.createRadialGradient(450,10,30,500,650,300);
righteyegrd.addColorStop(0, 'gray');
righteyegrd.addColorStop(1, 'black');
///left eye
var lefteyegrd = context.createRadialGradient(350,10,30,500,650,300);
lefteyegrd.addColorStop(0, 'gray');
lefteyegrd.addColorStop(1, 'black');
///background rect
//// SHAPES
///rect
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(10,22,92)';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.closePath();
/// planet - ground
context.beginPath();
context.rect(0,500,800,600);
context.fillStyle = "rgb(173,154,137)";
context.fill();
context.stroke();
context.closePath();
/// UFO
///custom shape - alien body
context.beginPath();
context.moveTo(400,300);
context.quadraticCurveTo(400,300,400,300);
context.quadraticCurveTo(525,425,450,475);
context.quadraticCurveTo(350,475,350,475);
context.quadraticCurveTo(275,425,400,300);
context.fillStyle = alienbodygrd;
context.fill();
context.stroke();
context.closePath();
/// alien head
context.beginPath();
context.moveTo(400,300); //starting point
context.bezierCurveTo(0,000,800,0,400,300);
context.fillStyle = alienheadgrd;
context.fill();
context.stroke();
context.closePath();
//right eye
context.beginPath();
context.moveTo(450,110);
context.bezierCurveTo(550,250,350,250,450,110)
context.fillStyle = righteyegrd;
context.fill();
context.stroke();
context.closePath();
//left eye
context.beginPath();
context.moveTo(350,110)
context.bezierCurveTo(450,250,250,250,350,110);
context.fillStyle = lefteyegrd;
context.fill();
context.stroke();
context.closePath();
/// nose
context.beginPath();
context.moveTo(395,210);
context.lineTo(395,220);
context.moveTo(405,210);
context.lineTo(405,220);
context.stroke();
context.closePath();
/// mouth
context.beginPath();
context.moveTo(450,240)
context.quadraticCurveTo(400,280,350,240);
context.lineCap = 'round';
context.stroke();
context.closePath();
///alien right arm
context.beginPath();
context.moveTo(445,350)
context.bezierCurveTo(700,500,400,400,445,350);
context.fillStyle = rightarmgrd;
context.fill();
context.stroke();
context.closePath();
//alien left arm
context.beginPath();
context.moveTo(355,350);
context.bezierCurveTo(100,500,400,400,355,350)
context.fillStyle = leftarmgrd;
context.fill();
context.stroke();
context.closePath();
/// right leg
context.beginPath();
context.moveTo(450,475);
context.bezierCurveTo(500,600,400,650,450,475)
context.fillStyle = rightleggrd;
context.fill();
context.stroke();
context.closePath();
///left leg
context.beginPath();
context.moveTo(350,475)
context.bezierCurveTo(400,600,300,650,350,475)
context.fillStyle = leftleggrd;
context.fill();
context.stroke();
context.closePath();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
Wednesday, September 2, 2015
Post 1
When I first registered for the class I thought it might be strange to be a senior in a class that was designed as a prerequisite for upper level classes or a senior in a class that would probably be mostly underclassmen. However, my advisor assured me that I would gain valuable skills from this course. Now, here I am excited to work with my fellow classmates, professor, and about what I'll be learning over the next few months.
After going through the syllabus and discussing what the semester would entail, honestly, I was a little nervous. Coming into the class I didn't think it would be an "easy A", but I would be lying if I said the work load wasn't a little bit intimidating. I'm also nervous about learning to code and getting used to all these new programs. Regardless, I want to learn how to use these tools that will help me in the future, so I'm excited to do just that.
Jeslin
Subscribe to:
Posts (Atom)