Connie Rodriguez: ASCII; HTML 5 Codes

For our second assignment, we had to create a a landscape or portrait using html 5. I chose to do the Tampa Bay Lightning ice rink. Considering I am a Lightning fan and the image I used as a reference has gradients, curves, circles and it requires for the spaces between the lines and circles to be precise in order for the image to look good.

Below is the image I made with html 5.

file:///Users/Connie/Downloads/Lightning%20Rink.html

Below is the image I used as a reference from google

Below is the printed reference image in a graph, used to measure the points more accurately.

Challenges

When I started to work with the first layer, the blue ice background with the gradient, I had some trouble trying to figure out how to put in two separate gradients in a single layer. After consulting the professor, we managed to figure out how to make the gradients a single gradient with various shades, having it all in one code paragraph.

Afterwards, the red circles, the center circle, the lines and smaller circles were just a matter of very specific measuring and figuring out how to place them with the appropriate spaces between each element. The graphed reference helped a lot to better visualize the canvas size.

The Lightning logo in the center circle was fairly easy to measure, but the curved lines around it were a bit of a challenge. I used the quadratic curve for both lines surrounding the lightning bolt.

I learned how to try to predict where the lines and curves and how to measure the spaces between lines and other elements that are suppose to have a certain distance between each other.

Below is the coding used to make the image.

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//Light Blue Ice Background

context.beginPath();

context.rect(0, 0, 800, 425);

context.lineWidth = 0;

context.fillStyle = 'rgb(135, 206, 250)';

context.fill();

context.stroke();

//Ice Vertical Reflections

var grd = context.createLinearGradient(95, 400, 675, 400);

grd.addColorStop(.1, 'rgb(130, 201, 245)');

grd.addColorStop(.2, 'rgb(255, 255, 255)');

grd.addColorStop(.3, 'rgb(130, 201, 255)');

grd.addColorStop(.75, 'rgb(130, 201, 245)');

grd.addColorStop(.85, 'rgb(255, 255, 255)');

grd.addColorStop(.95, 'rgb(130, 201, 255)');

context.fillStyle = grd;

context.fill();

//Ice Rink Shape

context.beginPath();

context.moveTo(100, 30)

context.quadraticCurveTo(25, 25, 30, 100)

context.lineTo(30, 300);

context.quadraticCurveTo(25, 405, 100, 400);

context.lineTo(700, 400);

context.quadraticCurveTo(770, 400, 769, 300);

context.lineTo(769, 100);

context.quadraticCurveTo(775, 30, 700, 30);

context.lineTo(100, 30);

context.fillStyle = 'rgb(255, 255, 255)';

context.fill();

context.closePath();

context.lineWidth = 5;

context.strokeStyle = 'gray';

context.stroke();

//Ice Rink Lines

//L Red Line

context.beginPath();

context.moveTo(103, 32);

context.lineTo(103, 398);

context.lineWidth = 3;

context.strokeStyle = 'rgba(255, 0, 0, .5)';

context.stroke();

//R Red Line

context.beginPath();

context.moveTo(697, 32);

context.lineTo(697, 398);

context.lineWidth = 3;

context.strokeStyle = 'rgba(255, 0, 0, .5)';

context.stroke();

//L Blue Line

context.beginPath();

context.moveTo(300, 32);

context.lineTo(300, 398);

context.lineWidth = 5;

context.strokeStyle = 'rgb(58, 150, 230)';

context.stroke();

//Center Red Line

context.beginPath();

context.moveTo(400, 32);

context.lineTo(400, 398);

context.lineWidth = 5;

context.strokeStyle = 'red';

context.stroke();

//R Blue Line

context.beginPath();

context.moveTo(500, 32);

context.lineTo(500, 398);

context.lineWidth = 5;

context.strokeStyle = 'rgb(58, 150, 230)';

context.stroke();

//Ice Rink Goal Lines

//L Goal

context.beginPath();

context.moveTo(103, 199);

context.lineTo(103, 240);

context.bezierCurveTo(70, 250, 70, 190, 103, 199);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(93, 220);

context.lineTo(78, 220);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(103, 199);

context.bezierCurveTo(90, 190, 90, 250, 103, 240);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(103, 196);

context.lineTo(103, 244);

context.bezierCurveTo(140, 244, 140, 195, 103, 196);

context.lineWidth = 1;

context.fillStyle = 'rgb(96, 186, 239)';

context.fill();

context.closePath();

context.strokeStyle = 'red';

context.stroke();

//R Goal

context.beginPath();

context.moveTo(698, 199);

context.lineTo(698, 240);

context.bezierCurveTo(735, 245, 735, 190, 698, 199);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(725, 220);

context.lineTo(710, 220);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(698, 199);

context.bezierCurveTo(714, 187, 714, 250, 698, 240);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(698, 196);

context.lineTo(698, 244);

context.bezierCurveTo(665, 236, 665, 200, 698, 196);

context.fillStyle = 'rgb(96, 186, 239)';

context.lineWidth = 1;

context.fill();

context.closePath();

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//Ice Rink Circles

// TL Red Circle

context.beginPath();

context.arc(175, 125, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//TL Circle Center

context.beginPath();

context.arc(175, 125, 1, 0, 2 * Math.PI, false);

context.fillStyle = 'red';

context.fill();

context.stroke();

//TL Circle Lines

context.beginPath();

context.moveTo(173, 65);

context.lineTo(173, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(177, 65);

context.lineTo(177, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(173, 180);

context.lineTo(173, 185);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(177, 180);

context.lineTo(177, 185);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 116);

context.lineTo(171, 121);

context.lineTo(166, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 116);

context.lineTo(179, 121);

context.lineTo(184, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 134);

context.lineTo(171, 129);

context.lineTo(166, 129);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 134);

context.lineTo(179, 129);

context.lineTo(184, 129);

context.strokeStyle = 'red';

context.stroke();

//BL Red Circle

context.beginPath();

context.arc(175, 300, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//BL Circle Center

context.beginPath();

context.arc(175, 300, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//BL Circle Lines

context.beginPath();

context.moveTo(173, 240);

context.lineTo(173, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(177, 240);

context.lineTo(177, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(173, 355);

context.lineTo(173, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(177, 355);

context.lineTo(177, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 291);

context.lineTo(171, 296);

context.lineTo(166, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 291);

context.lineTo(179, 296);

context.lineTo(184, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(171, 309);

context.lineTo(171, 304);

context.lineTo(166, 304);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(179, 309);

context.lineTo(179, 304);

context.lineTo(184, 304);

context.strokeStyle = 'red';

context.stroke();

//TR Red Circle

context.beginPath();

context.arc(625, 125, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//TR Circle Center

context.beginPath();

context.arc(625, 125, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//TR Circle Lines

context.beginPath();

context.moveTo(623, 65);

context.lineTo(623, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 65);

context.lineTo(627, 70);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(623, 180);

context.lineTo(623, 185);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 180);

context.lineTo(627, 185);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 116);

context.lineTo(621, 121);

context.lineTo(616, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 116);

context.lineTo(629, 121);

context.lineTo(634, 121);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 134);

context.lineTo(621, 129);

context.lineTo(616, 129);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 134);

context.lineTo(629, 129);

context.lineTo(634, 129);

context.strokeStyle = 'red';

context.stroke();

//BR Red Circle

context.beginPath();

context.arc(625, 300, 55, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

//BR Circle Center

context.beginPath();

context.arc(625, 300, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//BR Circle Lines

context.beginPath();

context.moveTo(623, 240);

context.lineTo(623, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 240);

context.lineTo(627, 245);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(623, 355);

context.lineTo(623, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(627, 355);

context.lineTo(627, 360);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 291);

context.lineTo(621, 296);

context.lineTo(616, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 291);

context.lineTo(629, 296);

context.lineTo(634, 296);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(621, 309);

context.lineTo(621, 304);

context.lineTo(616, 304);

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.moveTo(629, 309);

context.lineTo(629, 304);

context.lineTo(634, 304);

context.strokeStyle = 'red';

context.stroke();

//Center Circle

context.beginPath();

context.arc(400, 225, 112, 0, 2 * Math.PI, false);

context.lineWidth = 8;

context.fillStyle = 'rgba(1, 62, 125, 1)';

context.fill();

context.strokeStyle = 'rgb(153, 169, 232)';

context.closePath();

context.stroke();

context.beginPath();

context.arc(400, 225, 100, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'white';

context.stroke();

context.beginPath();

context.arc(400, 225, 95, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.strokeStyle = 'white';

context.stroke();

//Circles Around Center Circle

context.beginPath();

context.arc(325, 125, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.arc(325, 325, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.arc(475, 125, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

context.beginPath();

context.arc(475, 325, 1, 0, 2 * Math.PI, false);

context.lineWidth = 1;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = 'red';

context.stroke();

//Tampa Bay Lightning Center Logo

//Lightning Bolt

context.beginPath();

context.moveTo(445, 158);

context.lineTo(415, 190);

context.lineTo(430, 186);

context.lineTo(400, 222);

context.lineTo(415, 218);

context.lineTo(345, 285);

context.lineTo(377, 238);

context.lineTo(362, 242);

context.lineTo(390, 205);

context.lineTo(375, 209);

context.lineTo(405, 168);

context.lineTo(445, 158);

context.fillStyle = 'white';

context.fill();

context.closePath();

context.strokeStyle = 'white';

context.stroke();

//Lightning Bolt Side Lines

//L Line

context.beginPath();

context.moveTo(404, 169);

context.quadraticCurveTo(275, 200, 359, 265);

context.lineTo(365, 256);

context.quadraticCurveTo(283, 200, 401, 174);

context.lineTo(404, 169);

context.fillStyle = 'white';

context.fill();

context.strokeStyle = 'white';

context.stroke();

//R Line

context.beginPath();

context.moveTo(435, 179);

context.quadraticCurveTo(490, 249, 375, 263);

context.lineTo(366, 272);

context.quadraticCurveTo(525, 250, 444, 176);

context.lineTo(435, 179);

context.fillStyle = 'white';

context.fill();

context.closePath();

context.strokeStyle = 'white';

context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

</body>

Connie Rodriguez

Wednesday, October 21, 2015

ASCII; HTML 5 Codes

No comments:

Post a Comment