Project One: HTML

My Project:

This is the final design I came up with for the HTML project. As simple as it looks, it took me quite a while to put together. Being that I never worked with programming before, it took  me many tries for each shape and curve to get them exactly where I wanted them to be. I had to play with the "X" and "Y" variables to position them in a way where everything was not on top of one another. Although we haven't really used text in class, I decided to add my name and give it a little personalization. I had previously downloaded DaFont for another class, and decided to use one of their fonts to write my name. I have always been fond of abstract art, and when I Googled an image to "inspire" me, I found a couple that I liked. Most of the ones I found consisted mainly of circles and squares or rectangles, and knowing that I had to add curves and customize mine to look different from theirs, I mainly used their color choice as a guiding light for my piece. Lots of bright colors! Below you will find the two visuals I used for motivation, and the HTML code I created for my project.

Inspiration: 

Code:

var x = 0;

var y =0;

var width = canvas.width;

var height = canvas.height;

var startx = 80;

var starty = 200;

var endx = 700;

var endy = 400;

var x1 = 460;

var y1 = 70;

var x2 = 600;

var y2 = 400;

var x3 = 500;

var y3 = 400;

var centerX = canvas.width / 8;

var centerY = canvas.height / 3;

var radius = 80;

//Background Linear Gradient

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 20;

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0, 'rgb(90, 100, 0)');

grd.addColorStop(1, 'rgb(100, 0, 100)');

context.fillStyle = grd;

context.fill();

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

context.stroke();

//Triangle

context.beginPath();

context.moveTo(x1, y1);

context.lineTo(x2, y2);

context.lineTo(x3, y3);

context.lineTo(x1, y1);

context.lineWidth = 5;

context.strokeStyle = '303030';

context.fillStyle = '#333366';

context.fill();

context.stroke();

//Bezier CurveOne

context.beginPath();

context.moveTo(288, 230);

context.bezierCurveTo(940, 10, 488, 650, 388, 370);

context.lineWidth = 7;

context.strokeStyle = 'ADFF2F';

context.stroke();

//Line

context.beginPath();

context.moveTo(400, 300);

context.lineTo(500, 500);

context.lineWidth = 10;

context.strokeStyle = '#9999CC';

context.stroke();

//RectangleOne

context.beginPath();

context.rect(188, 50, 200, 100);

context.fillStyle = '#CC9933';

context.fill();

context.lineWidth = 10;

context.strokeStyle = 'black';

context.stroke();

//RectangleTwo

context.beginPath();

context.rect(100, 300, 250, 250);

context.fillStyle = '#FF3366';

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#99CCFF';

context.stroke();

//RectangleThree

context.beginPath();

context.rect(676, 150, 100, 350);

context.fillStyle = '#00CC99';

context.fill();

context.lineWidth = 5;

context.strokeStyle = '#CC3333';

context.stroke();

//Bezier CurveTwo

context.beginPath();

context.moveTo(688, 530);

context.bezierCurveTo(540, 550, 588, 250, 590, 550);

context.lineWidth = 7;

context.strokeStyle = 'FF00FF';

context.stroke();

//JESSICAText

context.font = 'italic 60pt  KG Eyes Wide Open';

context.fillStyle = '#FFFF00';

context.fillText('Jessica!', 550, 100);

//RedCircle

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

context.fillStyle = '#CC0000';

context.fill();

context.lineWidth = 10;

context.strokeStyle = '#CC0000';

context.stroke();

//Line

context.beginPath();

context.moveTo(80, 300);

context.lineTo(505, 500);

context.lineWidth = 5;

context.strokeStyle = '#66FFFF';

context.stroke();

//QuadraticCurve

context.beginPath();

context.moveTo(188, 350);

context.quadraticCurveTo(388, 550, 588, 550);

context.lineWidth = 20;

context.strokeStyle = '#FF9933';

context.stroke();