| My Project Image |
| Based off Google Clipart |
For this project I began by looking for an image on Google that interested me. I found this clipart of a puppy and thought it was cute :) I then took the picture and drew my own image on the graph. While creating the image in code I changed the colors as well as some of the shapes. In the code I played around with the differences between the quadratic and bezier curves. I really enjoyed this project but did not realize in the beginning the great deal of work that it would take. I believe my image was overall successful. I really like the overall look of it, and most of the curves blend very well together. There are a few areas I could still work on though. I do like writing the codes and seeing my code and work turn into an actual image. It is something I never would have thought I could do. Below is the code I created for the image above:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 40;
context.strokeStyle = 'rgb(0, 153, 51)';
//context.fillStyle = 'rgb(205, 225, 255)';
// add linear gradient
var grd = context.createLinearGradient(0, 0, 800, 600);
grd.addColorStop(0, 'rgb(0, 102, 204)');
grd.addColorStop(1, 'rgb(250, 250, 250)');
context.fillStyle = grd;
context.fill();
context.stroke();
//puppy face
context.beginPath();
context.moveTo(425, 125);
context.quadraticCurveTo(360, 100, 335, 150);
//left ear
context.bezierCurveTo(325, 125, 245, 115, 200, 145);
context.quadraticCurveTo(130, 180, 50, 275);
context.quadraticCurveTo(28, 315, 50, 355);
context.quadraticCurveTo(80, 400, 150, 380);
context.quadraticCurveTo(210, 360, 275, 280);
//left cheek
context.quadraticCurveTo(240, 340, 250, 400);
context.quadraticCurveTo(265, 450, 300, 463);
context.quadraticCurveTo(350, 480, 400, 453);
context.quadraticCurveTo(420, 440, 430, 420);
//right cheek
context.quadraticCurveTo(460, 445, 485, 450);
context.quadraticCurveTo(538, 458, 575, 422);
context.quadraticCurveTo(605, 388, 598, 350);
context.quadraticCurveTo(588, 245, 520, 190);
//right ear
context.quadraticCurveTo(585, 175, 650, 197);
context.quadraticCurveTo(725, 210, 755, 175);
context.quadraticCurveTo(777, 150, 770, 110);
context.quadraticCurveTo(765, 77, 700, 50);
context.quadraticCurveTo(640, 30, 550, 50);
context.quadraticCurveTo(472, 70, 425, 125);
context.fillStyle = 'rgb(152, 102, 0)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//lip
context.beginPath();
context.moveTo(395, 455);
context.quadraticCurveTo(445, 490, 485, 450);
context.quadraticCurveTo(460, 445, 430, 420);
context.quadraticCurveTo(420, 440, 395, 455);
context.fillStyle = 'rgb(152, 102, 0)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//mouth
context.beginPath();
context.moveTo(410, 445);
context.quadraticCurveTo(445, 470, 467, 445);
context.quadraticCurveTo(460, 445, 430, 420);
context.quadraticCurveTo(420, 440, 410, 445);
context.fillStyle = 'rgb(204, 0, 0)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
//nose
context.beginPath();
context.moveTo(428, 420);
context.quadraticCurveTo(450, 400, 462, 375);
context.quadraticCurveTo(465, 355, 450, 350);
context.quadraticCurveTo(430, 350, 425, 370);
context.quadraticCurveTo(415, 355, 400, 355);
context.quadraticCurveTo(384, 365, 390, 380);
context.quadraticCurveTo(410, 405, 428, 420);
context.fillStyle = 'rgb(255, 51, 51)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
//freckles right side
context.beginPath();
context.arc(525, 375, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(485, 385, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(510, 415, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//freckles left side
context.beginPath();
context.arc(380, 410, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(345, 405, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(360, 435, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//left eye
context.beginPath();
context.arc(345, 250, 28, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(347, 260, 18, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
//right eye
context.beginPath();
context.arc(465, 228, 28, 0, 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(468, 237, 18, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
//words
context.font = 'bold 60pt Calibri';
context.fillText('WOOF!', 500, 550);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment