COM 210- Beginning Digital Arts: Cat on a Quilt/Canvas Project

HTML5 is hard. It took my the longest time to get a feel for Text Wrangler, but I successfully got through it and this is what I created....

I had to take a screenshot of it because it wouldn't let me save it as .png, not really sure what was going on there.

This is the code:

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start here

//picture frame

context.beginPath();

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

context.fillStyle = 'white';

context.fill();

context.lineWidth = 48;

context.strokeStyle = 'black';

context.stroke();

//quilt

context.beginPath();

context.rect(25,25, 290, 150);

context.fillStyle = '#FF0099';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(100, 25, 190, 230); //first lower# goes left //second goes down//narrows//makes longer

context.fillStyle = '#9900CC';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(395, 280, 390, 299);

context.fillStyle = '#6600FF';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(100, 280, 130, 299);

context.fillStyle = '0033FF';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(25, 280, 120, 100);

context.fillStyle = '#33FF66';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(25, 280, 120, 100);

context.fillStyle = '00FFCC';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(25, 320, 120, 100);

context.fillStyle = 'FF0000';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(25, 176, 100, 100);

context.fillStyle = 'FF6600';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(25, 400, 170, 180);

context.fillStyle = '99FF33';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(230, 190, 70, 199);

context.fillStyle = 'yellow';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(188, 50, 290, 100);

context.fillStyle = 'yellow';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(188, 50, 200, 200);

context.fillStyle = 'CCFF00';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(288, 100, 200, 290);

context.fillStyle = '#FFFFFF';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(580, 170, 200, 290);

context.fillStyle = 'CC66FF';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(288, 100, 200, 290);

context.fillStyle = '#FF6633';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(578, 15, 150, 390);

context.fillStyle = '33FF66';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(430, 15, 190, 390);

context.fillStyle = 'FF0066';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(390, 125, 390, 235);

context.fillStyle = 'blue';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(290, 115, 360, 239);

context.fillStyle = 'white';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(290, 125, 200, 239);

context.fillStyle = 'CC33FF';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(290, 200, 359, 160);

context.fillStyle = '33FFFF';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(310, 229, 470, 90);

context.fillStyle = 'FF33CC';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(300, 229, 390, 90);

context.fillStyle = '6600CC';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(300, 229, 180, 90);

context.fillStyle = 'FF66FF';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

//l ear

context.beginPath();

context.moveTo (220, 145); //left line

context.lineTo(90, 70); //height of line

context.lineTo(130, 250);

context.lineJoin = "round";

context.lineWidth = 10;

context.fillStyle = 'lightgray';

context.fill();

context.stroke();

//r ear

context.beginPath();

context.moveTo (250, 360); //left line

context.lineTo(423, 79); //height of line

context.lineTo(150, 193);

context.lineJoin = "round";

context.lineWidth = 10;

context.fillStyle = 'lightgray';

context.fill();

context.stroke();

//inner l ear

context.beginPath();

context.moveTo(128, 168);

context.quadraticCurveTo(90, 60, 174, 149);

context.lineWidth = 2;

// line color

context.strokeStyle = "black";

context.fillStyle = 'pink';

context.fill();

context.stroke();

//inner r ear

context.beginPath();

context.moveTo(310, 151);

context.quadraticCurveTo(417, 75, 350, 172);

context.lineWidth = 2;

// line color

context.strokeStyle = "black";

context.fillStyle = 'pink';

context.fill();

context.stroke();

//inside body

context.beginPath();

context.rect(344, 339.5, 200, 242);

context.fillStyle = 'gray';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.rect(190, 333.5, 163.5, 252);

context.fillStyle = 'gray';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.rect(389, 450, 266.5, 135);

context.fillStyle = 'gray';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'gray';

context.stroke();

//chest

context.beginPath();

context.moveTo(365, 570);

context.quadraticCurveTo(-98, 620.9, 179, 356);

context.lineWidth = 12;

// line color

context.fillStyle = "gray";

context.fill();

context.strokeStyle = "black";

context.stroke();

context.beginPath();

context.moveTo(379, 570);

context.quadraticCurveTo(-70, 600, 200.5, 356);

context.lineWidth = 12;

// line color

context.fillStyle = "white";

context.fill();

context.strokeStyle = "white";

context.stroke();

context.beginPath();

context.moveTo(383, 570);

context.quadraticCurveTo(-15, 629, 199, 354);

context.lineWidth = 12;

// line color

context.fillStyle = "gray";

context.fill();

context.strokeStyle = "black";

context.stroke();

//head

context.save(); // save state

var centerX = -50;

var centerY = -20;

var radius = 47;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(3.2, 2.5);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.lineWidth = 9;

context.strokeStyle = "black";

context.stroke();

// create radial gradient

var grd = context.createRadialGradient(225, 155, 45, 275, 80, 170);

// light blue

grd.addColorStop(0, "666666");

// dark blue

grd.addColorStop(1, "CCCCCC");

context.fillStyle = grd;

context.fill();

// add stroke

context.lineWidth = 0;

context.strokeStyle = "black";

context.stroke();

//nose

context.save(); // save state

var centerX = -55;

var centerY = -5;

var radius = 7;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(3, 2);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "pink";

context.fill();

context.lineWidth = 8;

context.strokeStyle = "black";

context.stroke();

//l nostril

context.save(); // save state

var centerX = -85.3;

var centerY = -2.1;

var radius = 1.9;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(2,3);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "dark brown";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//r nostril

context.save(); // save state

var centerX = -79.2;

var centerY = -2.1;

var radius = 1.9;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(2,3);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "dark brown";

context.fill();

context.lineWidth = 3;

context.strokeStyle = "black";

context.stroke();

//l eye

context.save(); // save state

var centerX = -70;

var centerY = -33;

var radius = 9;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(3.1, 2.1);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//l eye- iris

context.save(); // save state

var centerX = -109;

var centerY = -23;

var radius = 5;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(2,3);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "66CC66";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//r eye

context.save(); // save state

var centerX = -38;

var centerY = -33;

var radius = 9;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(3.1, 2.1);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//r eye- iris

context.save(); // save state

var centerX = -59;

var centerY = -23;

var radius = 5;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(2,3);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "66CC66";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//l pupil

context.save(); // save state

var centerX = -109;

var centerY = -23;

var radius = 1;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(2,3);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "dark brown";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//r eye- pupil

context.save(); // save state

var centerX = -59;

var centerY = -23;

var radius = 1;

context.translate(canvas.width / 2, canvas.height / 2);

context.scale(2,3);

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); //dont touch

context.restore(); // restore to original state

context.fillStyle = "yellow";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//whisker l uno

context.beginPath();

context.moveTo(70, 220);

context.quadraticCurveTo(50, 300, 180, 280);

context.lineWidth = 4;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//whisker l dos

context.beginPath();

context.moveTo(60, 250);

context.quadraticCurveTo(30, 320, 180, 290);

context.lineWidth = 4;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//whisker l tres

context.beginPath();

context.moveTo(50, 280);

context.quadraticCurveTo(10, 360, 180, 305);

context.lineWidth = 4;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//whisker r uno

context.beginPath();

context.moveTo(406, 222);

context.quadraticCurveTo(430, 304, 293, 275);

context.lineWidth = 4;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//whisker r dos

context.beginPath();

context.moveTo(420, 252);

context.quadraticCurveTo(419, 324, 293, 285);

context.lineWidth = 4;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//whisker r tres

context.beginPath();

context.moveTo(430, 280);

context.quadraticCurveTo(409, 360, 293, 301);

context.lineWidth = 4;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//tongue

var x = 237;

var y = 343.9;

var radius = 16;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.89 * Math.PI;

var counterClockwise = true;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 4;

// line color

context.fillStyle = 'pink';

context.fill();

context.strokeStyle = "black";

context.stroke();

//mouth l

context.beginPath();

context.moveTo(200, 333);

context.quadraticCurveTo(248, 355, 234, 305);

context.lineWidth = 6;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//mouth r

context.beginPath();

context.moveTo(273, 337);

context.quadraticCurveTo(228, 348, 240, 305);

context.lineWidth = 6;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//tail

context.beginPath();

context.moveTo(590, 379);

context.quadraticCurveTo(709, -305, 677, 560);

context.lineWidth = 10;

// line color

context.fillStyle = 'gray';

context.fill();

context.lineWidth = 17;

context.strokeStyle = 'black';

context.strokeStyle = "black";

context.stroke();

//tip of tail

var centerX = 665;

var centerY = 110;

var radius = 18.5;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = "white";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "white";

context.stroke();

//tail

context.beginPath();

context.moveTo(590, 379);

context.quadraticCurveTo(709, -305, 677, 560);

context.lineWidth = 10;

// line color

context.lineWidth = 17;

context.strokeStyle = 'black';

context.strokeStyle = "black";

context.stroke();

//details of body (r lines)

var x = 657.99;

var y = 146;

var radius = 20;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 17;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 655;

var y = 190;

var radius = 27;

var startAngle = 1.49 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 655;

var y = 240;

var radius = 28;

var startAngle = 1.41 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 652;

var y = 290;

var radius = 30;

var startAngle = 1.36 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 645;

var y = 350;

var radius = 39;

var startAngle = 1.33 * Math.PI;

var endAngle = 2.0 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 645;

var y = 410;

var radius = 39;

var startAngle = 1.33 * Math.PI;

var endAngle = 2.0 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

// details on body (l lines)

var x = 655;

var y = 170;

var radius = 27;

var startAngle = 9.9 / Math.PI;

var endAngle = 1.49 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 653;

var y = 210;

var radius = 30;

var startAngle = 9.9 / Math.PI;

var endAngle = 1.49 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 643;

var y = 265;

var radius = 32;

var startAngle = 9.9 / Math.PI;

var endAngle = 1.55 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 636;

var y = 323;

var radius = 38;

var startAngle = 9.9 / Math.PI;

var endAngle = 1.55 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

var x = 636;

var y = 379;

var radius = 40;

var startAngle = 9.9 / Math.PI;

var endAngle = 1.55 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 04;

// line color

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//body

context.beginPath();

context.moveTo(360, 325);

context.bezierCurveTo(385, 409, 698, 179, 669, 593);

context.lineWidth = 17;

// line color

context.fillStyle = "gray";

context.fill();

context.strokeStyle = "black";

context.lineCap = "round";

context.stroke();

//bottom fix

context.beginPath();

context.moveTo(800, 575);

context.lineTo(15, 575);

context.lineWidth = 35;

context.stroke();

// top fix

context.beginPath();

context.moveTo(800, 20);

context.lineTo(15, 20);

context.lineWidth = 35;

context.stroke();

////////////////////////////////////// end here

};

</script>

</head>

<body>

</body>

</html>

I started out with a very basic sketch

of more or less an idea of what I wanted to do. I thought a cat would be easy, yet versatile with what I could do.

I intentionally sketched the cat to the left because I wanted to put some sort of background scenery in, like grass or a bed, but after creating the cat I thought it would look better with an abstract background to make it pop and give a more surreal look.

My sketch started with the cat standing, but after messing around with the coordinates of the curves it ended up in a sitting position.

I had a rough time using the gradient shading on the body which is why its only on the head. I also had a hard time with the bezier curve for the tail which is why it's now a quadratic curve and doesn't look as good. #frustration

COM 210- Beginning Digital Arts

Monday, May 28, 2012

Cat on a Quilt/Canvas Project

No comments:

Post a Comment

About Me

Blog Archive