Chelsea Sinclair Has Finally Made a Blog...: February 2013

Wednesday, February 20, 2013

The Alex and Ani logo seems perfect to me. It uses the right amount of space so that the logo may fit on their products if shrunken. The font is clear to read especially with the use of bold letters. However, the picture of the flower seems irrelevant to the products that they make which are jewelry.

The Chipotle logo is well done. The font is clear and easy to read. The logo gets right to the point and by looking at this image the viewer is made aware that this is a Mexican restaurant. The pepper also implies that the food is spicy. The colors are also relevant to the company/products. The color red is usually associated with heat which makes perfect sense in this case. The different shade of red in the middle of the circle is a nice contrast.

Blacksmith Tavern's logo may need a bit of work. I predict that when the font is minimized to put on products, it may become harder to read due to the type of font. However, the medieval text is perfect for the type of place it is. I would probably chose a different background to go with the logo to somehow allude to the fact that this place is a sports bar. I would also keep the fonts the same or keep the same size or font color to maintain consistency.

The Carrabba's logo is very plain yet well done. It is an Italian restaurant which is blatantly shown on the logo and they also demonstrated this using the Italian flag's colors. Another plus is that the font is easy to read even when shrunken down to place on plates, napkins, to go boxes, etc.

The Wendy's logo is one of the most poorly done logo's. Although it is a well known logo and very mainstream, the actual logo has way too much going on. There is too much text, using the mission statement "Quality is Our Recipe" along with "Old Fashioned Hamburgers" and the company name "Wendy's" is throwing a lot of information at the viewer. Also, I don't feel as though the colors blend well together. Red and yellow reminds me of McDonald's, however, with McDonald's it makes sense because of the golden arches. If I were to remake this image, I would use the portrait of Wendy and eliminate the mission statement and the old fashioned hamburgers

Sunday, February 17, 2013

My Five Companies

Delicate Petal
A vibrant florist located on the South Shore of Long Island. Known for their elegant arrangements seen at some of New York's finest events.

Sinclair Vineyards
Located on the East End's South Shore of Long Island, this vineyard spans over 200 acres and grows an array of exotic berries and grapes for exquisite wine making. Also includes a brewery and complimentary favors for booking both! Hosts weddings and other special events.

Blacksmith Tavern
Billiard, Beers, and Beautiful people at Blacksmith Tavern. All week specials. Half price apps Noon-8pm, Happy Hour 4-8pm (Half price drinks) and Sunday Fun-day specials! Live bands and DJ spinning after midnight!

Manhattan Madness
Carries only what the celebs are wearing! Designer clothes, bags, shoes, and jewelery for a discounted price.

Abbondola's
Pizzeria and sit down restaurant that explores all of the tastes of Italy. Dishes made from scratch, only with the finest herbs and spices imported from Italy and of course, the Abbondola family's secret ingredient! Orders may be placed for delivery and catering.

Tuesday, February 12, 2013

"My First Coding Project...Ever"

Never in my life have I taken any computer graphics or digital arts courses. Coding was like a foreign language to me. However, from what I learned, I have come to appreciate how creative and talented people must be to work with coding everyday. For my project, I decided to take a more abstract route and incorporate a plethora of shapes with various colors and gradients. I began with a blank page and a rectangle and from there I attempted to intertwine different shapes into one another. I hope to further my skills through out the remainder of this course and hopefully be able to recreate some of my favorite pieces of art.

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

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

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

////////////////////////////////////// start here

//Rectangle 1
var rectx =0;
var recty =0;
var rectwidth = canvas.width;
var rectheight = canvas.height;
var startx = 800;
var starty = 600;
var endx = 0;
var endy = 0;

//Rectangle 1
context.beginPath();
context.rect(rectx,recty,rectwidth,rectheight);

//Rect Color 1
var grd= context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(250,0,250)');
grd.addColorStop(1,'rgb(0,0,0)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(155,0,155)';
context.stroke();

//Circle 1 Variables
var centerX1= 800
var centerY1= 400
var radius1= 100

//Circle 1
context.beginPath();
context.arc(0, 0, 300, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = "pink";
//context.fill();
//context.lineWidth = 70;
//context.strokeStyle = 'rgb(177,0,188)';
//context.stroke();

//Circle 2 Variables
var centerX2= 100
var centerY2= 50
var radius2= 20

//Circle 2
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = 'rgb(177,0,188)';
//context.fill();
//context.lineWidth = 70;
//context.strokeStyle = "pink";
//context.stroke();

//Circle 3 Variables
var centerX3= 200
var centerY3= 100
var radius3= 50

//Circle 3
context.beginPath();
context.arc(400, 50, 50, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = 'rgb(177,0,188)';
context.fill();
context.lineWidth = 70;
//context.strokeStyle = "pink";
context.stroke();

//Circle 4 Variables
var centerX4= 200
var centerY4= 100
var radius4= 50

//Circle 4
context.beginPath();
context.arc(500, 50, 50, 0, 2 * Math.PI, false);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#9F5F9F');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
//context.fillStyle = 'rgb(177,0,188)';
context.fill();
context.lineWidth = 70;
//context.strokeStyle = "pink";
context.stroke();

//Circle 5 Variables
var centerX5= 100
var centerY5= 400
var radius5= 200

//Circle 5
context.beginPath();
context.arc(100, 400, 200, 0, 2 * Math.PI, false);
context.fillStyle = "pink";
context.fill();
context.lineWidth = 70;
context.strokeStyle = 'rgb(177,0,188)';

//Circle 5 Gradience
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#CC3299');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
context.stroke();

//Circle 6 Variables
var centerX6= 800
var centerY6= 390
var radius6= 200

//Circle 6
context.beginPath();
context.arc(800, 390, 200, 0, 2 * Math.PI, false);
context.fillStyle = "pink";
context.fill();
context.lineWidth = 70;
context.strokeStyle = 'rgb(177,0,188)';

//Circle 6 Gradience
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#CC3299');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
context.stroke();
context.stroke();

// Bezier Curve Variables For Heart
var x = 450;
var y = 150;
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350;
var endY = 325;

//Quadratic Curve Variables For Heart
var controlX3 = 425;
var controlY3 = 385;
var endX3 = 450;
var endY3 = 480;

//Quadratic Curve Variables For Heart
var controlX4= 475;
var controlY4= 375;
var endX4= 550;
var endY4= 325;

//Bezier Curve Variables For Heart
var controlX5 = 745;
var controlY5 = 160;
var controlX6 = 550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;

// Heart
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
var grd= context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#CC3299');
grd.addColorStop(1, '#ADEAEA');
context.fillStyle=grd
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'rgb(177,0,188)';
context.stroke();

//Rectangle 2
var rectx1 =0;
var recty1 =520;
var rectwidth1 = canvas.width;
var rectheight1 = canvas.height;
var startx1 = 100;
var starty1 = 200;
var endx1 = 0;
var endy1 = 0;

//Rectangle 2
context.beginPath();
context.rect(rectx1,recty1,rectwidth1,rectheight1);

//Rect Color 2
var grd= context.createLinearGradient(startx1, starty1, endx1, endy1);
grd.addColorStop(0,'rgb(177,0,188)');
grd.addColorStop(.5,'rgb(173,234,255)');
grd.addColorStop(1,'rgb(173,234,234)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(173,234,234)';
context.stroke();

//Chelsea Variables
var x=630
var y=100

//Chelsea
context.font='italic 30pt Script';
context.lineWidth=3;
context.strokeStyle='#ADEAEA';
context.strokeText('CHELSEA', x, y);

////////////////////////////////////// end here

};

</script>

<title>South Park Character</title></head>

<body>

<canvas id="chrisButler" width="800" height="600"></canvas>

</body>

</html>

Wednesday, February 6, 2013

In Class Heart

Happy Almost Valentines Day!!
xoxo,
Chelsea

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle
var rectx =0;
var recty =0;
var rectwidth = canvas.width;
var rectheight = canvas.height;
var startx = 800;
var starty = 600;
var endx = 0;
var endy = 0;

// Bezier Curve
var x = 450;
var y = 150;
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350;
var endY = 325;

//Quadratic Curve
var controlX3 = 425;
var controlY3 = 385;
var endX3 = 450;
var endY3 = 480;

//Quadratic Curve Variables
var controlX4= 475;
var controlY4= 375;
var endX4= 550;
var endY4= 325;

//Bezier Curve Variables
var controlX5 = 745;
var controlY5 = 160;
var controlX6 = 550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;

//Rectangle
context.beginPath();
context.rect(rectx,recty,rectwidth,rectheight);

//Rect Color
var grd= context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(250,0,150)');
grd.addColorStop(1,'rgb(200,0,200)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(155,0,155)';
context.stroke();

//Entire Heart
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX5, endY5);
var grd= context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(155,0,155)');
grd.addColorStop(1,'rgb(255,255,255)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(155,0,155)';
context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Tuesday, February 5, 2013

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle
var x =0;
var y =0;
var width = canvas.width;
var height = canvas.height;
var startx = 800
var starty = 600
var endx = 0
var endy = 0

//Rectangle
context.beginPath();
context.rect(x,y,width,height);

//Rect Color
var grd= context.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0,'rgb(100,0,100)');
grd.addColorStop(.5,'rgb(200,0,200)');
grd.addColorStop(1,'rgb(255,0,255)');
context.fillStyle=grd;
context.lineWidth = 0;
context.fill();
context.strokeStyle = 'rgb(155,0,155)';
context.stroke();

//Heart
var xa = 400;
var ya = 160;
var xb = 400;
var yb = 400;
var controlx1 = 260;
var controly1 = -50;
var controlx2 = 125;
var controly2 = 255;
var controlx3 = 660;
var controly3 = 255;
var controlx4 = 535;
var controly4 = -50;

context.beginPath();
context.moveTo(xa, ya);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, xb, yb);
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, xa, ya);
context.lineWidth = 30;

//Heart Color
context.linestrokeStyle = 'rgb(0, 0, 0)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 255)';
context.fill()
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>