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

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

Détournement and Dada

The Earth itself is its own self-cleansing organ. It produces all humans. All humans are artists. All artists and the minds within them create structure, organization, and set the rules of society of what is considered beautiful. Yet, humans are arrogant and restless creatures. As a society, we do not allow norms and world leadership to go unquestioned. When more and more people question, the world changes. When the world changes, a movement occurs. And it is infectious. Dada was the infectious cultural movement that the world may have cleansed itself from once it ran its course. Yet, the next movement and every movement thereafter has been impacted by these artists. Since Dada, The Earth has forever lost its immune system that kept out the unstructured raw beauty created by this new wave of artists. A lot was in the mind of Swiss artists from 1916 through 1922. Every day was a question during World War I. Artists could answer the question of how their tomorrows would be with ...
Post a Comment
Read more

Constructivism Movement Vs. Constructivism Theory

Constructivism is a word with two entirely different meanings when referred to Art or learning theory. However, an explanation of what the Russian Constructivism Movement has done for the world can be related and personified as how a person might acquire the knowledge from their experiences. One of the first lessons I learned from my parents was when they selflessly confessed that they did not and could never tell me all the answers I would require reaching my goals. Thus, they encourage me to seek out leadership in fields of my interest and learn from experiences beyond their capabilities. I found my passion and motivations for my goals through experiences I had and overcoming obstacles allowed me to work on my flaws and be continuously be guided through trial and error. Similarly, the Russian Constructivism was similar.  The Constructivism movement in Russia originated when a group of about twenty-five artists renounced creating art simply just for the design. Instead, these...
Post a Comment
Read more