Skip to main content

Huggs 210 Kara Margraf Final Project



I've mentioned that I've lost my cat Huggs about a week ago. It may be an odd thing to do, create him after he has passed on but, I was thinking about him and I'm seeing him up in the sky as the King of the world. He was a little devil to make. I spent easily 15 hours on him. My largest challenge was layering all of the shapes and utilizing the gradients. Also, his whiskers were very time consuming. I am extremely happy with his birthmark on his nose. The code is pasted below.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

<canvas id="myCanvas" width="800" height="1000"></canvas>

<script>


var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
 ////sky
var sky =

context.createLinearGradient(0,0,0,700);
sky.addColorStop(0,"cyan");
sky.addColorStop(1,"white");

context.rect(0,0,1000,1000);
context.stroke();
context.fillStyle = sky;
context.fillRect(0,0,1000,1000);


var greycat = context.createRadialGradient(300,300,10,300,300,200);
greycat.addColorStop(0, "rgba(200,200,200,1)");
greycat.addColorStop(1, "rgba(100,100,100,1)");



///InnerRobe
var inner =
context.createLinearGradient(50,900,200,900);
  inner.addColorStop(0,"white");
  inner.addColorStop(1,"red");

context.beginPath();
context.moveTo(425,900);
context.bezierCurveTo(590,485,90,105,120,900);
context.quadraticCurveTo(285,900,425,900);
context.closePath();
context.fillStyle = inner
context.fill();
context.stroke();

//body
context.beginPath();
context.moveTo(120,850);
//context.lineTo(160,850);
context.bezierCurveTo(145,800,255,800,260,850);
context.quadraticCurveTo(300,900,345,850);
context.bezierCurveTo(350,800,450,800,475,850);
context.bezierCurveTo(500,900,350,900,345,850);
context.lineTo(350,600);
context.quadraticCurveTo(305,550,260,600);
    context.lineTo(260,850);
context.bezierCurveTo(285,900,125,900,120,850);
context.lineTo(175,600);
context.bezierCurveTo(200,360,400,450,450,600);
context.lineTo(475,850);
//context.bezierCurveTo(500,900,300,900,345,850);
//context.lineTo(350,600);
// context.quadraticCurveTo(305,550,260,600);
// context.lineTo(260,850);
// context.bezierCurveTo(260,900,150,900,160,850);
//
//
context.closePath();
context.fillStyle = greycat
context.fill();
context.strokeStyle = "black"
context.stroke();

//belly

var belly = context.createRadialGradient(300,400,5,300,300,200);

belly.addColorStop(1,"white");
belly.addColorStop(0,"gray");

context.beginPath();
context.moveTo(120,850);
//context.lineTo(160,850);
context.bezierCurveTo(145,800,255,800,260,850);
context.quadraticCurveTo(300,900,345,850);
context.bezierCurveTo(350,800,450,800,475,850);
context.bezierCurveTo(500,900,350,900,345,850);
context.lineTo(350,600);
context.quadraticCurveTo(305,550,260,600);
    context.lineTo(260,850);
context.bezierCurveTo(285,900,125,900,120,850);

context.closePath();

context.fillStyle = belly
context.fill();



////robe
var crown =
context.createRadialGradient(320,285,10,275,300,100);
crown.addColorStop(0,"white");
crown.addColorStop(.55,"beige");
crown.addColorStop(1,"gold");

context.beginPath();
context.moveTo(50,900); context.bezierCurveTo(100,105,590,485,500,900);
context.quadraticCurveTo(475,950,425,900);
context.bezierCurveTo(590,485,90,105,120,900);
context.quadraticCurveTo(75,950,50,900);
context.closePath();
context.fillStyle = crown
context.fill();
context.stroke();


// LEFT EAR
    context.beginPath();

context.moveTo(200,210);
context.quadraticCurveTo(10,30,120,290);
 //  context.bezierCurveTo(150,120,410,170,425,270);
// context.quadraticCurveTo(490,-35,320,180);
 
context.closePath();

    context.stroke();
context.fillStyle = greycat;
context.fill();


// RIGHT EAR
 context.beginPath();

context.moveTo(320,180);
context.quadraticCurveTo(490,-35,425,270);
//   context.bezierCurveTo(150,120,410,170,425,270);
// context.quadraticCurveTo(490,-35,320,180);
 
context.closePath();

    context.stroke();
context.fillStyle = greycat;
context.fill();


/////mouth

context.beginPath;
context.moveTo(250,465)
context.bezierCurveTo(235,485,300,510,300,465);
context.closePath();
context.stroke();
context.fillStyle = greycat;
context.fill();
/// FACE


context.beginPath();

context.moveTo(425,270);
// context.quadraticCurveTo(490,-35,425,270);
   context.bezierCurveTo(460,170,100,90,120,290);
// context.quadraticCurveTo(490,-35,320,180);


context.quadraticCurveTo(100,405,230,430)
context.bezierCurveTo(130,405,225,500,275,470);
context.bezierCurveTo(350,500,400,400,350,415);
context.quadraticCurveTo(450,405,425,270);
 
context.closePath();

    context.stroke();
context.fillStyle = greycat;
context.fill();

///// birthmark
var birthmark2 =
context.createRadialGradient(290,410,2,260,400,85);

birthmark2.addColorStop(0,"gray");

birthmark2.addColorStop(1,"white");


context.beginPath();
context.moveTo(370,430);
context.quadraticCurveTo(325,425,270,435);
context.quadraticCurveTo(285,375,280,410);
context.quadraticCurveTo(345,380,365,413);
context.quadraticCurveTo(400,400,375,415);

context.fillStyle = birthmark2
context.fill();
context.closePath();


 
/// bm3


//
// context.beginPath();
// context.moveTo(270,425);
// context.quadraticCurveTo(245,370,185,430);
// context.closePath();
// context.strokeStyle = "black";
// context.stroke();
// context.fillStyle = "black";
// context.fill();
//



//context.quadraticCurveTo(295,425,185,435);
   // context.quadraticCurveTo(185,375,190,420);
 //context.quadraticCurveTo(245,380,215,413);
// context.quadraticCurveTo(400,400,225,415);
context.closePath();

context.fillStyle = birthmark2
context.fill();
 
///// nose bridge
var birthmark =
context.createRadialGradient(215,370,2,240,400,85);

birthmark.addColorStop(0,"gray");
birthmark.addColorStop(.05,"gray");
birthmark.addColorStop(1,"white");




context.beginPath();
context.moveTo(250,430);
context.quadraticCurveTo(275,370,260,300);
context.quadraticCurveTo(280,200,315,300);
context.quadraticCurveTo(280,370,300,430);

context.closePath();
context.strokeStyle = birthmark;
context.stroke();


context.closePath();
context.fillStyle = birthmark;
context.fill();

   
///// nose

context.beginPath();
context.moveTo(250,430);
context.quadraticCurveTo(275,480,300,430);
context.quadraticCurveTo(275,400,250,430);
 
context.closePath();
context.fillStyle = "black";
context.fill();

///// Left Eye

var lefteye = context.createRadialGradient(175,300,5,175,300,100);
lefteye.addColorStop(0,"black");
lefteye.addColorStop(0.1,"green");
lefteye.addColorStop(0.2,"yellow");
lefteye.addColorStop(0.3,"white");

context.beginPath();
context.moveTo(150,290);
context.quadraticCurveTo(150,350,225,325);
context.quadraticCurveTo(225,270,150,290);

context.strokeStyle = greycat;
context.stroke();

context.closePath();
context.fillStyle = lefteye;
context.fill();


///// Right Eye

var righteye = context.createRadialGradient(360,300,5,360,300,100);
righteye.addColorStop(0,"black");
righteye.addColorStop(0.1,"green");
righteye.addColorStop(0.2,"yellow");
righteye.addColorStop(0.3,"white");

context.beginPath();
context.moveTo(335,325);
context.quadraticCurveTo(400,345,400,290);
context.quadraticCurveTo(325,265,335,325);
context.stroke();

context.closePath();
context.fillStyle = righteye;
context.fill();

////Whiskers
context.beginPath();
context.moveTo(320,440);
context.quadraticCurveTo(400,390,475,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();

/////
context.beginPath();
context.moveTo(300,440);
context.quadraticCurveTo(400,390,455,450);

context.strokeStyle = "black"
context.stroke();
context.closePath();

/////
context.beginPath();
context.moveTo(330,460);
context.quadraticCurveTo(400,390,495,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();


////
context.beginPath();
context.moveTo(305,460);
context.quadraticCurveTo(340,430,475,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();

///
context.beginPath();
context.moveTo(250,440);
context.quadraticCurveTo(210,400,125,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();


///
context.beginPath();
context.moveTo(225,440);
context.quadraticCurveTo(180,390,115,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();

////
context.beginPath();
context.moveTo(245,440);
context.quadraticCurveTo(190,410,115,450);

context.strokeStyle = "black"
context.stroke();
context.closePath();

////
context.beginPath();
context.moveTo(245,470);
context.quadraticCurveTo(190,410,130,440);

context.strokeStyle = "black"
context.stroke();
context.closePath();

////crownTop

context.beginPath();
context.moveTo(110,270);
context.quadraticCurveTo(20,100,165,100);
//context.quadraticCurveTo(160,100,185,100);
context.quadraticCurveTo(250,20,310,165);
context.closePath();
context.stroke();
context.closePath();
context.fillStyle = inner
context.fill();

///Crownband
var crown =
context.createRadialGradient(320,285,10,275,300,100);
crown.addColorStop(0,"white");
crown.addColorStop(.55,"beige");
crown.addColorStop(1,"gold");

context.beginPath();
context.moveTo(200,245);
context.lineTo(150,100);
context.lineTo(180,88);
context.lineTo(250,225);
context.lineTo(200,245);

context.fillStyle = crown
context.fill();
context.strokeStyle = crown
context.stroke();

////CrownRim


context.beginPath();

context.moveTo(130,275)
context.quadraticCurveTo(275,260,325,160);
context.bezierCurveTo(300,100,300,225,100,240);
//context.quadraticCurveTo(200,250,110,245);
context.bezierCurveTo(80,250,80,275,130,275);

context.quadraticCurveTo(130,275,100,255);
// context.quadraticCurveTo(100,100,140,100);
context.stroke();


context.closePath();
context.fillStyle = crown
context.fill();
////cloud

context.beginPath();
context.moveTo(45,870);
context.bezierCurveTo(100,850,200,800,290,870);
context.bezierCurveTo(300,820,450,870,450,900);
context.bezierCurveTo(480,870,550,830,525,975);
context.bezierCurveTo(500,980,470,990,450,980);
context.bezierCurveTo(425,1000,300,975,275,950);

context.bezierCurveTo(245,1000,100,999,50,980);
context.bezierCurveTo(35,980,35,860,45,870);
context.fillStyle = "white"
context.fill();
context.strokeStyle ="rgba(0,0,0,1.1)"
context.stroke();


////tail
context.beginPath();
context.moveTo(400,650);
context.bezierCurveTo(430,400,600,400,575,490);
context.lineWidth = 40
context.lineCap = 'round'
context.strokeStyle = greycat
context.stroke();
context.closePath();





//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('Kara Margraf Fall 2017', 20, 950);
context.closePath();

</script>


</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Business Cards/Logo Designs

Here are five business cards with different individual logos. They represent the five positive attributes of being a team player, caring, adaptable, motivated,  devoted/trustworthy.
Post a Comment
Read more

Supergraphics of Tampa Bay

Post-Modernism was an era beginning in the 1970s that allowed artists to find their passion and pursue it. The movement itself fi represented in many different mediums and is recognizable as the highlighted graphic design used today.  One design ideology of this movement was that style was content. Adhering to this ideology, developed the supergraphic which is an extremely sized pictograph that integrates itself to the environment. Immediately recognizable by bold geometric shapes and colors supergraphics have become social media staples and focus points of many places.  Tampa bays is home to many innovative and trendy dining options. As an up and coming city, it prides itself on the number of photo spots the city has to offer. Many of these places utilize supergraphics to get their image posted on social media to build buzz. For example, the recently renovated Channel side is now home to Sparkman’s Wharf. Here, renovated shipping containers with supergraphics affix...
Post a Comment
Read more

New Objectivity: Did Peter Behrens Help or Hurt Human Interaction?

Peter Behrens was the father of corporate identity. Based on research into his work, he created the idea that “form follows function- and it can be beautiful too.” Today our world is not in awe of revelation, we expect it. When a pain-point occurs in our lives, we as people find ways to alieve it. Behrens gave us this industrial framework to create beauty while fulfilling our needs. However, has his standardization and neutrality into the graphic design world brought the world closer together? Or has finding aesthetically pleasing and simplifying solutions reduced the number of channels people have had to undertake thus, hurting the basic human need of interaction.  Peter Behrens was a German artist, architect, and designer who some might say is the “father of industrial design”. He designed and manufactured everyday products such as tea kettles, streetlights, clocks, and more. What differentiated his designs from any others were the simplicity of the designs that standa...
Post a Comment
Read more