Coming from the Jersey Shore, I love the beach. I also wanted to practice curves in the HTML format, so I chose to create an octopus because it incorporated both. I started with the head and body, then added the arms. I love how my octopus came out, although it is not exactly the same as my beginning sketches. I was able to overcome my challenges of curves, in addition to expressing my love for the ocean.
<!DOCTYPE HTML
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//HEAD
var radius = 100;
context.beginPath();
context.arc(200, 300, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//EYES
var radius = 17;
context.beginPath();
context.arc(155, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();
var radius = 17;
context.beginPath();
context.arc(230, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();
//PUPIL
var radius = 5;
context.beginPath();
context.arc(155, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
var radius = 5;
context.beginPath();
context.arc(230, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
//SMILE
context.beginPath();
context.moveTo(155,330);
context.quadraticCurveTo(195, 360, 230, 330);
context.strokeStyle = 'black';
context.lineWidth = 5;
context.lineCap = 'round';
context.stroke();
//Neck and Body
var x = 150;
var y = 375;
var controlX = 180;
var controlY = 400;
var endX = 160;
var endY = 440;
var controlX2 = 50;
var controlY2 = 500;
var endX2 = 80;
var endY2 = 610;
var controlX3 = 400;
var controlY3 = 475;
var endX3 = 240;
var endY3 = 440;
var controlX4 = 230;
var controlY4 = 375;
var endX4 = 250;
var endY4 = 380;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.lineTo(375, 610);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.strokeStyle = 'rgb(235,142,42)';
context.stroke();
/*
//NECK
var x = 175;
var y = 390;
var controlX= 180;
var controlY= 450;
var endX = 125;
var endY = 450;
var x1 = 250;
var y1 = 275;
var controlX1= 225;
var controlY1= 450;
var endX1 = 275;
var endY1 = 425;
context.beginPath();
context.moveTo(x,y);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.stroke();
context.beginPath();
context.moveTo(x1,y1);
context.quadraticCurveTo(controlX1, controlY1, endX1, endY1);
context.stroke();
//BODY
//line1
context.beginPath();
context.moveTo(200,390);
context.lineTo(75,525);
context.stroke();
//line2
context.beginPath();
context.moveTo(225,375);
context.lineTo(325,475);
context.stroke();
//line3
context.beginPath();
context.moveTo(325,475);
context.lineTo(375,500);
context.stroke();
//line4
context.beginPath();
context.moveTo(375,500);
context.lineTo(375,525);
context.stroke();
//line5
context.beginPath();
context.moveTo(375,525);
context.lineTo(350,550);
context.stroke();
//line6
context.beginPath();
context.moveTo(350,550);
context.lineTo(275,525);
context.stroke();
//line7
context.beginPath();
context.moveTo(275,525);
context.lineTo(200,550);
context.stroke();
//line8
context.beginPath();
context.moveTo(200,550);
context.lineTo(125,550);
context.stroke();
//line9
context.beginPath();
context.moveTo(125,550);
context.lineTo(75,525);
context.stroke();
*/
//Bottom Legs
//A
context.beginPath();
context.moveTo(75,605);
context.quadraticCurveTo(125, 550, 130, 605);
context.lineTo(100,605);
context.closePath();
context.strokeStyle = 'rgb(16,66,122)';
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//A1
context.beginPath();
context.moveTo(100,500);
context.lineTo(125,560);
context.bezierCurveTo(75, 625, 25, 610, -20, 575);
context.bezierCurveTo(0, 575, 50, 575, 120, 465);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//B
context.beginPath();
context.moveTo(185,605);
context.quadraticCurveTo(200, 550, 225, 605);
context.lineTo(100,605);
context.closePath();
context.strokeStyle = 'rgb(16,66,122)';
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//C
context.beginPath();
context.moveTo(275,600);
context.bezierCurveTo(255, 550, 275, 525, 365, 605);
context.closePath();
context.strokeStyle = 'rgb(16,66,122)';
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//C1
context.beginPath();
context.moveTo(365,525);
context.bezierCurveTo(450, 575, 550, 525, 600, 460);
context.bezierCurveTo(610, 425, 650, 430, 655, 450);
context.quadraticCurveTo(550, 650, 375, 600);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arms
//Arm1 (left)
context.beginPath();
context.moveTo(175,475);
context.bezierCurveTo(75, 425, 50, 350, 50, 300);
context.bezierCurveTo(60, 250, 70, 200, 75, 200);
context.bezierCurveTo(150, 40, 100, 25, 75, 75);
context.quadraticCurveTo(-10, 300, 100, 550);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arm 2 (Middle Right)
context.beginPath();
context.moveTo(300,550);
context.bezierCurveTo(450, 500, 500, 350, 700, 330);
context.quadraticCurveTo(720, 300, 650, 300);
context.quadraticCurveTo(470, 300, 410, 425);
context.quadraticCurveTo(390, 450, 330, 500);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arm 3 (Top Right)
context.beginPath();
context.moveTo(250,490);
context.bezierCurveTo(325, 475, 375, 425, 400, 375);
context.bezierCurveTo(475, 275, 550, 200, 550, 150);
context.bezierCurveTo(550, 100, 500, 100, 400, 300);
context.quadraticCurveTo(350, 375, 200, 550);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arm 4 (Left Middle)
context.beginPath();
context.moveTo(175,525);
context.quadraticCurveTo(25, 475, -20, 400);
context.quadraticCurveTo(15, 550, 150, 525);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//BUBBLES
var radius = 17;
context.beginPath();
context.arc(300, 100, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 20;
context.beginPath();
context.arc(350, 150, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 27;
context.beginPath();
context.arc(375, 250, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 15;
context.beginPath();
context.arc(305,200, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 25;
context.beginPath();
context.arc(600, 200, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 20;
context.beginPath();
context.arc(650, 250, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 17;
context.beginPath();
context.arc(625, 150, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 5;
context.beginPath();
context.arc(700, 200, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 30;
context.beginPath();
context.arc(685, 100, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 10;
context.beginPath();
context.arc(600, 260, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 30;
context.beginPath();
context.arc(700, 550, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 15;
context.beginPath();
context.arc(675, 475, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 10;
context.beginPath();
context.arc(650, 545, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment