Pages

Wednesday, December 9, 2015

Poster

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.

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

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>

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>

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