Project One: HTML

Living Room Set:

           It took me a while to really figure out what I wanted to do for the HTML project. I knew off the back that I didn't want to try to replicate another drawing or picture, but I wanted something unique in a way. I wanted to create something random but symbolic at the same time. One evening, I'm sitting in my living room and I noticed that the living room set looked like something I would want to create. I didn't want to make the exact one, but something very similar to the one I have. After that I began to brainstorm on ideas. Ideas such as, how many shelves should I have, what should be in the shelves, colors, and not to mention meeting the requirements for the actual assignment. Keeping all that in mind I came out with this wonderful piece of art. The two bottom shelves under the Tv is dedicated to the current Super Bowl XLVIII Champions & also to my home team the Ny Mets. The other two shelves were very very random I must say. The first shelf on the right has a tissue box along with a loop. The tissue box I added because one: I like the floral designs that come on the Kleenex tissue boxes, and two: I have a tissue box in that same exact corner in my actual living room set. It took me an entire weekend of working on and off to actually finish it. Every time I would work on it I found myself obtaining new inspiration from my surroundings. Overall, I am happy with my finished product.

             Actual Living Room:                                                                                   Graph Drawing:

                                                                                                          

HTML CODE: 

// Living Room Piece

context.beginPath();

context.rect(50, 80, 725, 450); 

context.lineWidth = 15;

context.strokeStyle = 'rgb(0,0,0)';

context.stroke();

// Shelf Break

context.beginPath();

context.moveTo(300, 80);

context.lineTo(300, 530);

context.stroke();

//Shelf One & Two

context.beginPath();

context.moveTo(50, 300);

context.lineTo(300,300);

context.stroke();

//Shelf Break #2

context.beginPath();

context.moveTo(535,425)

context.lineTo(535,530)

context.lineWidth = 10;

context.stroke();

// Tv Stand Break 

context.beginPath();

context.moveTo(300, 425);

context.lineTo(775,425);

context.lineWidth = 10;

context.strokeStlye = 'rgb(250, 0, 0)';

context.stroke();

// Tv Outline

context.beginPath();

context.rect(360, 150, 350, 200);

context.font = 'Bold 7pt Times New Roman';

context.fillText('Emerson', 515, 340);

context.fillText('LED Dolby Sound HDMI', 385, 340);

context.strokeStyle = 'black';

context.stroke();

// Tv Screen

context.beginPath();

context.rect(390, 175, 285, 150);

context.fillStyle = 'black';

context.fill();

context.lineWidth = 6;

context.strokeStyle = 'black';

context.stroke();

// Roku Name #1 

context.font = 'italic 10pt Calibri';

context.textAlign = 'center';

context.textBaseline = 'middle';

context.fillStyle = 'purple';

context.fillText('ROKU', 530, 200);

// Roku Name #2

context.font = 'italic 10pt Calibri';

context.textAlign = 'center';

context.textBaseline = 'middle';

context.fillStyle = 'purple';

context.fillText('ROKU', 530, 300);

// Roku Name #3

context.font = 'italic 10pt Calibri';

context.textAlign = 'center';

context.textBaseline = 'middle';

context.fillStyle = 'white';

context.fillText('ROKU', 650, 250);

// Roku Name #4 

context.font = 'italic 10pt Calibri';

context.textAlign = 'center';

context.textBaseline = 'middle';

context.fillStyle = 'white';

context.fillText('ROKU', 430, 250);

context.stroke();

// Tissue Box 

context.beginPath();

context.rect(65, 212, 64, 75);

context.fillStyle = 'green';

context.fill();

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

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

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, 69, 220);

};

imageObj.src = 'file:///Users/AnthonyOcasio/Documents/Flower.png';

context.stroke();

// Bezier Curve 

context.beginPath();

context.moveTo(180, 110);

context.bezierCurveTo(360, 210, 130, 245, 220, 100);

context.lineWidth = 9;

context.strokeStyle = 'rgb(81, 195, 252)';

context.stroke();

// Quadratic Curve

context.beginPath();

context.moveTo(280, 310);

context.quadraticCurveTo(210, 725, 175, 310);

context.lineWidth = 10;

context.strokeStyle = 'rgb(201,18,48)';

context.stroke();

// Triangle  

context.beginPath();

context.moveTo(340, 450);

context.lineTo(516, 450);

context.lineTo(313, 517);

context.lineTo(340, 450);

context.lineWidth = 5;

context.strokeStyle = 'rgb(70,230,29)';

context.fillStyle = 'rgb(18,39,173)';

context.fill();

context.stroke();

// Seahawks

context.font = 'italic 10pt Times';

context.fillText('SEAHAWKS!', 405, 510);

 

// Signature 

context.font = 'italic bold 10pt Big Caslon';

context.fillText('ANTHONY D. OCASIO :) ', 655, 455);

// NY Mets Circle #1

context.beginPath();

context.arc(570, 495, 20, 0, 2 * Math.PI, false);

context.fillStyle = 'rgb(0, 0, 204)';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'rgb(255,128,0)';

context.stroke();

// NY Mets Circle #2

context.beginPath();

context.arc(645, 495, 15, 0, 2 * Math.PI, false);

context.fillStyle = 'rgb(0, 0, 204)';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'rgb(255,128,0)';

context.stroke();

// NY Mets Circle #3

context.beginPath();

context.arc(725, 495, 20, 0, 2 * Math.PI, false);

context.fillStyle = 'rgb(0, 0, 204)';

context.fill();

context.lineWidth = 7;

context.strokeStyle = 'rgb(255,128,0)';

context.stroke();