Rather than recreating a logo for this assignment, I decided to challenge myself and create an image of my own. I started my process by drawing this cute cartoon whale on paper and drawing a graph over it. Then I used Illustrator to graph my image again digitally to help with determining the control points for the curves of the whale's body. Then after some trial and error and a few more details I was able to create the image you see here. I have very little experience working with code to create illustrations like this, so overall, I'm happy with the way it turned out.
- code -
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//tail
context.beginPath();
context.moveTo(475, 285);
context.quadraticCurveTo(474, 279, 470, 275);
context.bezierCurveTo(425, 225, 455, 170, 450, 150);
context.bezierCurveTo(465, 170, 525, 195, 515, 250);
context.bezierCurveTo(565, 230, 620, 265, 630, 257);
context.bezierCurveTo(605, 275, 575, 315, 525, 310);
context.quadraticCurveTo(510, 307, 500, 310);
//body
context.bezierCurveTo(480, 325, 475, 375, 425, 390);
context.quadraticCurveTo(300, 425, 200, 385);
context.bezierCurveTo(130, 350, 140, 225, 200, 200);
context.quadraticCurveTo(275, 175, 340, 200);
context.bezierCurveTo(400, 220, 425, 345, 460, 320);
context.bezierCurveTo(470, 310, 475, 305, 475, 285);
context.closePath();
context.fillStyle = "rgb(200, 255, 250)";
context.fill();
context.lineWidth =2;
context.stroke();
//eye
context.beginPath();
context.moveTo(200, 310);
context.bezierCurveTo(190, 270, 250, 270, 240, 310);
context.quadraticCurveTo(220, 305, 200, 310);
context.fillStyle = "white";
context.fill();
context.lineWidth =1;
context.stroke();
//pupil
context.beginPath();
context.arc(215, 293, 10, 0, 2*Math.PI, false);
context.closePath();
context.fillStyle = "black";
context.fill();
context.strokeStyle = "rgb(120, 70, 180)";
context.lineWidth =4;
context.stroke();
//eye shine
context.beginPath();
context.arc(212, 289, 4, 0, 2*Math.PI, false);
context.closePath();
context.fillStyle = "white";
context.fill();
//blowhole
context.beginPath();
context.moveTo(270, 200);
context.bezierCurveTo(272, 195, 281, 195, 283, 200);
context.bezierCurveTo(281, 205, 272, 205, 270, 200);
context.fillStyle = "rgb(70, 70, 70)";
context.fill();
context.lineWidth =1;
context.strokeStyle = "rgb(0, 0, 0)";
context.stroke();
//belly
context.beginPath();
context.moveTo(425, 389);
context.quadraticCurveTo(300, 424, 201, 385);
context.quadraticCurveTo(175, 371, 166, 350);
context.bezierCurveTo(275, 340, 320, 425, 425, 389)
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
//fin
context.beginPath();
context.moveTo(280, 368);
context.bezierCurveTo(275, 410, 325, 427, 340, 440);
context.quadraticCurveTo(350, 400, 325, 373);
context.fillStyle = "rgb(200, 255, 250)";
context.fill();
context.lineWidth =2;
context.strokeStyle = "rgb(0, 0, 0)";
context.stroke();
//smile
context.beginPath();
context.moveTo(164, 350);
context.quadraticCurveTo(218, 355, 225, 335);
context.lineWidth =1;
context.stroke();
//cheek
context.beginPath();
context.moveTo(230, 325);
context.bezierCurveTo(232, 317, 251, 317, 253, 325);
context.bezierCurveTo(251, 333, 232, 333, 230, 325);
context.closePath();
context.fillStyle = "rgb(255, 190, 225)";
context.fill();
//water droplets
context.beginPath();
context.moveTo(275, 175);
context.bezierCurveTo(255, 130, 240, 125, 225, 125);
context.bezierCurveTo(215, 128, 215, 140, 225, 145);
context.bezierCurveTo(235, 150, 260, 150, 275, 175);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(275, 160);
context.bezierCurveTo(280, 125, 300, 105, 325, 100);
context.bezierCurveTo(347, 100, 342, 128, 325, 130);
context.bezierCurveTo(300, 135, 285, 140, 275, 160);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(270, 140);
context.bezierCurveTo(270, 120, 275, 85, 250, 75);
context.bezierCurveTo(246, 72, 232, 70, 230, 85);
context.bezierCurveTo(230, 105, 255, 100, 270, 140);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
context.beginPath();
context.moveTo(279, 120);
context.bezierCurveTo(280, 120, 277, 87, 289, 86);
context.bezierCurveTo(300, 92, 285, 110, 279, 120);
context.lineWidth =1;
context.closePath();
context.fillStyle = "rgb(240, 255, 250)";
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
- references -
No comments:
Post a Comment