This project had to have been the hardest art project I have ever done, but having an awesome, patient, and understanding professor gave me the ability to make it the best I could be. At first, I thought I could do the cartoon Mickey Mouse head, but after much failure I decided I might have bitten off more than I could chew. After talking to my mom about a couple ideas she thought that it would be cute to do the city emoji, and I agreed! Below is the city emoji and the graph that I drew my sketch on. HTML is VERY touchy and if you have one number or letter wrong you may ruin your whole project. By graphing my sketch out it was very easy for me to plug in the points and see where things were going to be placed.
TA DA! This is my end product, that I'm honestly very proud of! It took me a lot of time and patience to figure out all of the positions for the shapes. The most difficult part would have probably been the colors, especially the gradient, just because when adding in colors sometimes the whole project would go blank and I would have to figure out what happened and fix it! I would say that my project resembles the emoji very well. If I could change anything it would probably be to figure out the positioning of the curves around the sun better, although it's very difficult to figure out the control points for them... Overall I'm very happy and proud of my product. I had absolutely no knowledge of HTML before this project so now that I do, I can really appreciate other student's intricate projects! Being skilled in this area of art really takes talent!
CODE FOR PROJECT:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//radiance
context.beginPath();
context.moveTo(280,0);
context.lineTo(325,25);
context.stroke();
context.beginPath();
context.moveTo(225, 125);
context.bezierCurveTo(125, 125, 225, 1, 50, 25);
context.stroke();
context.beginPath();
context.moveTo(225,200);
context.lineTo(100,250);
context.stroke();
context.beginPath();
context.moveTo(325, 300);
context.bezierCurveTo(360, 360, 125, 325, 135, 400);
context.stroke();
context.beginPath();
context.moveTo(550,300);
context.lineTo(625,425);
context.stroke();
context.beginPath();
context.moveTo(625, 225);
context.bezierCurveTo(700, 150, 700, 300, 775, 250);
context.stroke();
context.beginPath();
context.moveTo(625,125);
context.lineTo(775,75);
context.stroke();
context.beginPath();
context.moveTo(575, 50);
context.bezierCurveTo(575, 0, 660, 50, 650, 0);
context.stroke();
//circle (sun)
context.beginPath();
context.arc(425, 150, 150, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(375, 50, 100, 425, 100, 200);
grd.addColorStop(0, '#ff9933');
grd.addColorStop(1, '#ffcc00');
context.fillStyle = grd;
context.fill();
context.stroke();
//first rectangle
context.beginPath();
context.rect(0, 375, 100, 225);
context.fillStyle = '#ff9900';
context.fill();
context.stroke();
//windows for first
context.beginPath();
context.rect(5, 390, 20, 20);
context.fillStyle = '#ffffcc';
context.fill();
//third rectangle
context.beginPath();
context.rect(200, 300, 100, 300);
context.fillStyle = '#000000';
context.fill();
context.stroke();
//windows for third
context.beginPath();
context.rect(265, 325, 25, 25);
context.fillStyle = '#ffffcc';
context.fill();
context.beginPath();
context.rect(225, 375, 25, 25);
context.fillStyle = '#ffffff';
context.fill();
context.beginPath();
context.rect(250, 500, 25, 25);
context.fillStyle = '#ffffcc';
context.fill();
//second rectangle
context.beginPath();
context.rect(0, 500, 150, 100);
context.fillStyle = '#cc3300';
context.fill();
context.beginPath();
context.rect(150, 450, 75, 150);
context.fillStyle = '#cc3300';
context.fill();
//windows for second
context.beginPath();
context.rect(25, 550, 25, 25);
context.fillStyle = '#ffffff';
context.fill();
context.beginPath();
context.rect(150, 525, 25, 25);
context.fillStyle = '#ffffcc';
context.fill();
//fourth rectangle
context.beginPath();
context.rect(300, 450, 50, 150);
context.fillStyle = '#ff9900';
context.fill();
context.stroke();
//windows for fourth
context.beginPath();
context.rect(318, 460, 20, 20);
context.fillStyle = '#ffffcc';
context.fill();
//fifth rectangle
context.beginPath();
context.rect(350, 250, 150, 350);
context.fillStyle = '#cc3300';
context.fill();
context.stroke();
//windows for fifth
context.beginPath();
context.rect(400, 300, 20, 20);
context.fillStyle = '#ffffff';
context.fill();
context.beginPath();
context.rect(450, 375, 20, 20);
context.fillStyle = '#ffffcc';
context.fill();
context.beginPath();
context.rect(400, 500, 20, 20);
context.fillStyle = '#ffffff';
context.fill();
//sixth rectangle
context.beginPath();
context.rect(450, 450, 50, 150);
context.fillStyle = '#000000';
context.fill();
context.stroke();
context.beginPath();
context.rect(500, 350, 75, 250);
context.fillStyle = '#000000';
context.fill();
context.stroke();
context.beginPath();
context.rect(575, 450, 50, 150);
context.fillStyle = '#000000';
context.fill();
context.stroke();
//window for sixth
context.beginPath();
context.rect(515, 400, 25, 25);
context.fillStyle = '#ffffff';
context.fill();
context.beginPath();
context.rect(550, 525, 25, 25);
context.fillStyle = '#ffffcc';
context.fill();
context.beginPath();
context.rect(550, 475, 25, 25);
context.fillStyle = '#ffffcc';
context.fill();
context.beginPath();
context.rect(460, 550, 25, 25);
context.fillStyle = '#ffffcc';
context.fill();
//seventh rectangle
context.beginPath();
context.rect(600, 300, 175, 300);
context.fillStyle = '#cc3300';
context.fill();
context.stroke();
context.beginPath();
//windows for seventh
context.rect(700, 325, 20, 20);
context.fillStyle = '#ffffff';
context.fill();
context.beginPath();
context.rect(700, 375, 20, 20);
context.fillStyle = '#ffffcc';
context.fill();
context.beginPath();
context.rect(625, 525, 20, 20);
context.fillStyle = '#ffffff';
context.fill();
context.beginPath();
context.rect(650, 460, 20, 20);
context.fillStyle = '#ffffcc';
context.fill();
//last rectangle
context.beginPath();
context.rect(700, 475, 100, 125);
context.fillStyle = '#000000';
context.fill();
context.stroke();
//windows for last
context.beginPath();
context.rect(735, 500, 20, 20);
context.fillStyle = '#ffffcc';
context.fill();
context.beginPath();
context.rect(760, 535, 20, 20);
context.fillStyle = '#ffffcc';
context.fill();
context.beginPath();
context.rect(710, 550, 20, 20);
context.fillStyle = '#ffffff';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment