<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx, endy);
//background
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 300, 800, 300);
grd.addColorStop(0, 'rgb(0, 255, 255)');
grd.addColorStop(.4, 'rgb(255, 255, 255)');
grd.addColorStop(1, 'rgb(255, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();
//top half//
context.beginPath();
context.moveTo(155, 200);
context.quadraticCurveTo(146, 209, 195, 175);
context.quadraticCurveTo(225, 150, 245, 115);
context.quadraticCurveTo(255, 97, 280, 70);
context.quadraticCurveTo(300, 46, 345, 38);
context.quadraticCurveTo(375, 35, 395, 60);
context.quadraticCurveTo(407, 80, 406, 80);
context.quadraticCurveTo(445, 46, 480, 45);
context.quadraticCurveTo(520, 48, 542, 80);
context.quadraticCurveTo(560, 100, 570, 130);
context.quadraticCurveTo(600, 176, 645, 200);
context.lineWidth = 1;
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
//small corner
context.quadraticCurveTo(655, 210, 648, 230);
context.quadraticCurveTo(600, 268, 575, 300);
context.quadraticCurveTo(540, 350, 515, 400);
context.quadraticCurveTo(478, 472, 450, 485);
context.quadraticCurveTo(435, 496, 400, 498);
//bottom half
context.quadraticCurveTo(300, 410, 245, 370);
context.quadraticCurveTo(200, 282, 182, 247);
context.quadraticCurveTo(168, 230, 157, 220);
context.quadraticCurveTo(150, 210, 155, 200);
//150, 205);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();
//tongue
context.beginPath();
context.moveTo(324, 200);
context.quadraticCurveTo(300, 203, 255, 225);
context.quadraticCurveTo(225, 250, 198, 279);
context.quadraticCurveTo(168, 318, 151, 350);
context.quadraticCurveTo(141, 375, 138, 400);
context.quadraticCurveTo(130, 445, 151, 500);
context.quadraticCurveTo(148, 499, 174, 525);
context.quadraticCurveTo(200, 548, 245, 555);
context.quadraticCurveTo(285, 560, 324, 552);
context.quadraticCurveTo(347, 550, 370, 532);
context.quadraticCurveTo(395, 515, 405, 496);
//line gets thicker//
context.quadraticCurveTo(420, 465, 430, 422);
context.quadraticCurveTo(440, 398, 460, 350);
context.quadraticCurveTo(470, 325, 495, 301);
context.quadraticCurveTo(514, 277, 553, 250);
context.quadraticCurveTo(575, 229, 550, 218);
context.quadraticCurveTo(530, 205, 510, 207);
context.quadraticCurveTo(475, 203, 450, 219);
context.quadraticCurveTo(425, 225, 400, 229);
context.quadraticCurveTo(350, 248, 325, 275);
context.quadraticCurveTo(285, 325, 258, 403);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(258, 403);
context.quadraticCurveTo(265, 350, 280, 310);
context.quadraticCurveTo(300, 274, 326, 249);
context.quadraticCurveTo(365, 225, 335, 203);
context.quadraticCurveTo(335, 203, 324, 200);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();
//teeth
context.beginPath();
context.moveTo(265, 165, 297, 135);
context.quadraticCurveTo(325, 135, 348, 149);
context.quadraticCurveTo(375, 165, 400, 157);
context.quadraticCurveTo(425, 150, 450, 148);
context.quadraticCurveTo(476, 150, 500, 168);
context.quadraticCurveTo(532, 205, 515, 220);
context.quadraticCurveTo(500, 225, 473, 205);
context.quadraticCurveTo(465, 213, 430, 215);
context.quadraticCurveTo(404, 208, 395, 198);
context.quadraticCurveTo(373, 203, 348, 208);
context.quadraticCurveTo(325, 202, 310, 172);
context.quadraticCurveTo(277, 182, 265, 165);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
//white circle 1
context.beginPath();
context.moveTo(315, 95);
context.quadraticCurveTo(312,73, 330, 58);
context.quadraticCurveTo(348, 46, 376, 59);
context.quadraticCurveTo(395, 75, 387, 88);
context.quadraticCurveTo(374, 109, 352, 98);
context.quadraticCurveTo(348, 95, 350, 95)
context.quadraticCurveTo(330, 105, 315, 95)
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
//white circle 2
context.beginPath();
context.moveTo(450, 85);
context.quadraticCurveTo(440, 65, 470, 59);
context.quadraticCurveTo(495, 56, 515, 70);
context.quadraticCurveTo(528, 82, 522, 99);
context.quadraticCurveTo(510, 108, 498, 105);
context.quadraticCurveTo(484, 100, 477, 90);
context.quadraticCurveTo(454, 98, 450, 85);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
//tongue oval 1
context.beginPath();
context.moveTo(301, 250);
context.quadraticCurveTo(278, 252, 256, 275);
context.quadraticCurveTo(232, 300, 218, 321);
context.quadraticCurveTo(200, 349, 190, 375);
context.quadraticCurveTo(180, 400, 182, 400);
context.quadraticCurveTo(176, 420, 184, 430);
context.quadraticCurveTo(212, 423, 217, 400);
context.quadraticCurveTo(225, 375, 236, 350);
context.quadraticCurveTo(245, 325, 262, 300);
context.quadraticCurveTo(287, 253, 278, 292);
context.quadraticCurveTo(280, 289, 301, 250);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
//tongue oval 2
context.beginPath();
context.moveTo(476, 252);
context.quadraticCurveTo(470, 253, 450, 270);
context.quadraticCurveTo(420, 296, 415, 305);
context.quadraticCurveTo(400, 325, 387, 350);
context.quadraticCurveTo(372, 375, 360, 399);
context.quadraticCurveTo(345, 425, 335, 450);
context.quadraticCurveTo(326, 467, 328, 478);
context.quadraticCurveTo(343, 500, 363, 479);
context.quadraticCurveTo(373, 467, 378, 450);
context.quadraticCurveTo(387, 424, 400, 400);
context.quadraticCurveTo(414, 368, 425, 350);
context.quadraticCurveTo(434, 325, 445, 310);
context.quadraticCurveTo(455, 290, 476, 252);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
//inside mouth
context.beginPath();
context.moveTo(266, 166);
context.quadraticCurveTo(248, 179, 236, 188);
context.quadraticCurveTo(215, 198, 200, 205);
context.quadraticCurveTo(210, 210, 216, 215);
context.quadraticCurveTo(238, 240, 240, 240);
//context.fillStyle = '#000000';
//context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
////////COMMENTS///////////
This project turned out to be a lot harder than I thought it would be but it really just took more time than anything. I simplified the Rolling Stones logo a little because the bold lines around the tongue just didn't seem to look well with coding as it was difficult to generate the flow like the original. I also took out the black back in the mouth area but only because i felt like it looked better this way. I used quadratic curves the entire time which was also difficult but once I realized that all I needed to do was plot the points closer, it manipulated the image more easily. I attached some of the graph photos too to show how many little points I had to graph. I tried to keep up with the numbers on the graph and in the coding but not all of them match up because it was hard to keep up with. Too many number started to make my head hurt. This project was interesting to say the least, I like my end result a lot more than I thought I would but now I know that coding is not my specialty.
No comments:
Post a Comment