When first receiving this homework assignment, I had very low hopes for what my final project would turn out to be. Trying to draw a heart last week was the most difficult, and frustrating experience. However; after professor Corrigan demonstrated how to do it correctly in class, using a graph to pick the points, everything suddenly clicked. My mind works much better mathematically than artistically; I realized the key to making a good figure is as simple as plotting points. I printed out graph paper and began picking symmetrical points that were easy to work with (ex. 300,500). In a fourth of the time it took me to sketch the heart, my ice cream cone was complete. I then tried to include as many shapes off the HTML 5 Canvas tutorials as possible. Learning in class that placing a curve code under another curve code, connects the two curves, also was a huge help and wave of frustration released. My little ice cream cone and two candies by the side is a little silly looking, but I'm very proud of my work, even just as a personal feat.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Cone
context.beginPath();
context.moveTo(300,300);
context.lineTo(400,500);
context.lineTo(500,300);
context.lineTo(300,300);
context.strokeStyle = 'rgb(255,204,153)';
context.lineWidth = 10;
var grd = context.createLinearGradient(300, 300, 500, 500);
grd.addColorStop(0, 'rgb(255,153,51)');
grd.addColorStop(1, 'rgb(204,153,102)');
context.fillStyle = grd;
context.lineCap = "round";
context.fill();
context.stroke();
// Cone horizontal line middle
context.beginPath();
context.moveTo(300,300);
context.lineTo(450,400);
context.stroke();
//Cone horizontal line bottom
context.beginPath();
context.moveTo(345,385);
context.lineTo(425,450);
context.stroke();
//Cone horizontal line top
context.beginPath();
context.moveTo(375,300);
context.lineTo(475,350);
context.stroke();
//Cone vertical right line
context.beginPath();
context.moveTo(450,300);
context.lineTo(375,440);
context.stroke();
//Cone vertical left line
context.beginPath();
context.moveTo(388,300);
context.lineTo(345,385);
context.stroke();
var controlX1 = 220;
var controlY1 = 300;
var controlX2 = 220;
var controlY2 = 220;
var endX = 300;
var endY = 225;
var controlX3 = 270;
var controlY3 = 20;
var controlX4 = 530;
var controlY4 = 20;
var endX1 = 500;
var endY1 = 225;
var controlX5 = 580;
var controlY5 = 220;
var controlX6 = 580;
var controlY6 = 300;
var endX2 = 500;
var endY2 = 300;
//Ice cream
context.beginPath();
context.moveTo(300,300);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endX1, endY1);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX2, endY2);
context.strokeStyle = 'rgb(255,204,255)';
context.lineWidth = 10;
var grd = context.createLinearGradient(300, 300, 500, 500);
grd.addColorStop(0, 'rgb(255,153,204)');
grd.addColorStop(1, 'rgb(255,51,153)');
context.fillStyle = grd;
context.lineCap = "round";
context.fill();
context.stroke();
//Eyes Arc left
context.beginPath();
context.arc(360, 175, 20, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(255,204,153)';
context.fillStyle = 'rgb(153,102,51)';
context.fill();
context.stroke();
//Eyes Arc right
context.beginPath();
context.arc(440, 175, 20, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(255,204,153)';
context.fillStyle = 'rgb(153,102,51)';
context.fill();
context.stroke();
//Mouth curve
context.beginPath();
context.moveTo(350,225);
context.quadraticCurveTo(400, 275, 450, 225);
context.stroke();
//Cherry Arc
context.beginPath();
context.arc(400, 75, 28, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(255,102,102)';
context.fillStyle = 'rgb(255,102,102)';
context.fill();
context.stroke();
//Cherry Stem
context.beginPath();
context.moveTo(400,50);
context.quadraticCurveTo(430, 30, 400, 20);
context.stroke();
// green sprinkle
context.beginPath();
context.moveTo(310,240);
context.lineTo(290,250);
context.strokeStyle = 'rgb(204,255,153)';
context.stroke();
// red sprinkle
context.beginPath();
context.moveTo(375,270);
context.lineTo(355,280);
context.strokeStyle = 'rgb(255,51,0)';
context.stroke();
//yellow sprinkle
context.beginPath();
context.moveTo(480,250);
context.lineTo(460,260);
context.strokeStyle = 'rgb(255,255,102)';
context.stroke();
// purple sprinkle
context.beginPath();
context.moveTo(530,270);
context.lineTo(510,280);
context.strokeStyle = 'rgb(153,51,255)';
context.stroke();
// orange sprinkle
context.beginPath();
context.moveTo(360,120);
context.lineTo(340,130);
context.strokeStyle = 'rgb(255,153,0)';
context.stroke();
//blue sprinkle
context.beginPath();
context.moveTo(460,120);
context.lineTo(440,130);
context.strokeStyle = 'rgb(153,255,255)';
context.stroke();
// right candy
context.beginPath();
context.beginPath();
context.moveTo(100,450);
context.quadraticCurveTo(150, 400, 200, 450);
context.moveTo(200,450);
context.quadraticCurveTo(150, 500, 100, 450);
context.strokeStyle = 'rgb(255,153,204)';
context.fillStyle = 'rgb(255,202,255)';
context.fill();
//candy wrapper
context.moveTo(200,450);
context.bezierCurveTo(215, 425, 225, 450, 200, 450);
context.bezierCurveTo(225, 450, 200, 475, 200, 450);
context.moveTo(100,450);
context.bezierCurveTo(85, 425, 75, 450, 100, 450);
context.bezierCurveTo(75, 450, 100, 475, 100, 450);
context.stroke();
//left candy
context.beginPath();
context.moveTo(600,450);
context.quadraticCurveTo(650, 500, 700, 450);
context.moveTo(700,450);
context.quadraticCurveTo(650, 400, 600, 450);
context.strokeStyle = 'rgb(255,153,204)';
context.fillStyle = 'rgb(255,202,255)';
context.fill();
//candy wrapper
context.moveTo(700,450);
context.bezierCurveTo(715, 425, 725, 450, 700, 450);
context.bezierCurveTo(725, 450, 700, 475, 700, 450);
context.moveTo(600,450);
context.bezierCurveTo(585, 425, 575, 450, 600, 450);
context.bezierCurveTo(575, 450, 600, 475, 600, 450);
context.stroke();
//words
context.beginPath();
context.font = 'italic 20pt Calibri';
context.fillText('You Scream!', 150, 100);
context.fillText('I Scream!', 530, 100);
context.fillText('We All Scream, for Ice Cream!', 240, 550);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment