Project Two: Logo

Five Fictional, Non-Traditional Companies:

1. The Gym- I've always thought it would be cool to open a bar called "The Gym". The outside of the bar would resemble that of a workout facility, with tall glass windows displaying treadmills and weight machines. The logo for the company would be a man holding up a bar bell, but instead of weights on the side, there would be kegs. I think the comical reality of what the establishment actually is wouldn't require much advertising to stick into people's memories.
2. Talk to Me- A chewing gum company that keeps your breathe minty fresh long after your gum is gone. The logo would  be the basic outline of a tooth brush, but instead of brussels it would be a piece of the gum. The handle of the tooth brush would read "Talk to Me", the company name.
3. Kiss- A lipstick/lip gloss company that's logo is a pair of lips that has a stamped effect. Lips are a commonly used symbol, so in order to stand out the company would have to to manipulate the color, size, and angle of the lips to make it specific to them.
 4. Candle company- Ive always been obsessed with candles. A longer burning candle company could use a logo of a little candle with a flame above it in the shape of the infinity sign. This would symbolize the candle forever burning, making people more inclined to remember the image and what it stood for, rather than a random brand name.
5. Full- A gas station that claims to have a better quality gasoline that allows your car to get better gas mileage. The logo would be the symbol on a standard car's gas gauge when completely full. This would be simple, and tied directly to the company and what they are selling.

Logo Critiques

1. The Harley-Davidson logo is unmistakable. It has proven to be an icon of not only a brand but an entire lifestyle. It's great because it displays the brand name as well as the product for sale, all in the logo. However because of the company's success, at this point the logo is recognizable even without the words.

2. I really like the Red Bull logo. Making red the primary color of any logo is always a sure way to make it stand out. Using the images of the bulls is good way to catch consumer's eyes. A lot of successful logos have the simplest of designs, but I think the extra detail here works to the advantage.

3. The golden arches speak for themselves. MacDonald's has gone back and forth with adding the company name, or "I'm lovin' it" under the arches, but essentially it doesn't really make a difference. MacDonald's has been able to take their company world wide and create a universal logo. People across the world, that speak various different languages, can identify the company simply by its logo. The simple shape and bright color makes it easy to remember.
                                   
4. The Subaru car logo is one that I think could be re-done. Most other car logos have the brand name of the car within the logo, making it easier to remember which logo goes with each brand. Honda's logo for example is a big "H" in a square, making it less likely to be confused with other companies that begin with different letters. There are also to many symbols within the logo to make a lasting memory with a quick glance. A better approach I believe would be to get rid of the five little stars to the right, and just leave one big prominent star in the middle. They could also consider incorporating an "S" somewhere in the design.

5. The netflix logo is another that I think could use some work. I really don't even consider it a logo, its really just the name of the company in a red box. I mentioned that using the color red in the Red Bull logo made it stick out more, but the Netflix logo adversely looks like its being flushed out by the color. The company should consider coming up with a symbol to go along with the name, and play around with other eye-catching color schemes.

Project 1: ASCII

 When first receiving this homework assignment, I had very low hopes for what my final project would turn out to be. Trying to draw a heart last week was the most difficult, and frustrating experience. However; after professor Corrigan demonstrated how to do it correctly in class, using a graph to pick the points, everything suddenly clicked. My mind works much better mathematically than artistically; I realized the key to making a good figure is as simple as plotting points. I printed out graph paper and began picking symmetrical points that were easy to work with (ex. 300,500). In a fourth of the time it took me to sketch the heart, my ice cream cone was complete. I then tried to include as many shapes off the HTML 5 Canvas tutorials as possible. Learning in class that placing a curve code under another curve code, connects the two curves, also was a huge help and wave of frustration released. My little ice cream cone and two candies by the side is a little silly looking, but I'm very proud of my work, even just as a personal feat.

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

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

//Cone
context.beginPath();
context.moveTo(300,300);
context.lineTo(400,500);
context.lineTo(500,300);
context.lineTo(300,300);
context.strokeStyle = 'rgb(255,204,153)';
context.lineWidth = 10;
  var grd = context.createLinearGradient(300, 300, 500, 500);
  grd.addColorStop(0, 'rgb(255,153,51)');
   grd.addColorStop(1, 'rgb(204,153,102)');
   context.fillStyle = grd;
   context.lineCap = "round";
context.fill();
context.stroke();

// Cone horizontal line  middle
context.beginPath();
context.moveTo(300,300);
context.lineTo(450,400);
context.stroke();

//Cone horizontal line bottom
context.beginPath();
context.moveTo(345,385);
context.lineTo(425,450);
context.stroke();

//Cone horizontal line top
context.beginPath();
context.moveTo(375,300);
context.lineTo(475,350);
context.stroke();

//Cone vertical right line
context.beginPath();
context.moveTo(450,300);
context.lineTo(375,440);
context.stroke();

//Cone vertical left line
context.beginPath();
context.moveTo(388,300);
context.lineTo(345,385);
context.stroke();



var controlX1 = 220;
var controlY1 = 300;
var controlX2 = 220;
var controlY2 = 220;
var endX = 300;
var endY = 225;
var controlX3 = 270;
var controlY3 = 20;
var controlX4 = 530;
var controlY4 = 20;
var endX1 = 500;
var endY1 = 225;
var controlX5 = 580;
var controlY5 = 220;
var controlX6 = 580;
var controlY6 = 300;
var endX2 = 500;
var endY2 = 300;


//Ice cream
context.beginPath();
context.moveTo(300,300);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, endX1, endY1);
context.bezierCurveTo(controlX5, controlY5, controlX6, controlY6, endX2, endY2);
context.strokeStyle = 'rgb(255,204,255)';
context.lineWidth = 10;
  var grd = context.createLinearGradient(300, 300, 500, 500);
  grd.addColorStop(0, 'rgb(255,153,204)');
   grd.addColorStop(1, 'rgb(255,51,153)');
   context.fillStyle = grd;
   context.lineCap = "round";
context.fill();
context.stroke();


//Eyes Arc left
context.beginPath();
context.arc(360, 175, 20, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(255,204,153)';
context.fillStyle = 'rgb(153,102,51)';
context.fill();
context.stroke();

//Eyes Arc right
context.beginPath();
context.arc(440, 175, 20, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(255,204,153)';
context.fillStyle = 'rgb(153,102,51)';
context.fill();
context.stroke();

//Mouth curve
context.beginPath();
context.moveTo(350,225);
context.quadraticCurveTo(400, 275, 450, 225);
context.stroke();

//Cherry Arc
context.beginPath();
context.arc(400, 75, 28, 0, 2*Math.PI, false);
context.strokeStyle = 'rgb(255,102,102)';
context.fillStyle = 'rgb(255,102,102)';
context.fill();
context.stroke();

//Cherry Stem
context.beginPath();
context.moveTo(400,50);
context.quadraticCurveTo(430, 30, 400, 20);
context.stroke();

// green sprinkle
context.beginPath();
context.moveTo(310,240);
context.lineTo(290,250);
context.strokeStyle = 'rgb(204,255,153)';
context.stroke();

// red sprinkle
context.beginPath();
context.moveTo(375,270);
context.lineTo(355,280);
context.strokeStyle = 'rgb(255,51,0)';
context.stroke();

//yellow sprinkle
context.beginPath();
context.moveTo(480,250);
context.lineTo(460,260);
context.strokeStyle = 'rgb(255,255,102)';
context.stroke();

// purple sprinkle
context.beginPath();
context.moveTo(530,270);
context.lineTo(510,280);
context.strokeStyle = 'rgb(153,51,255)';
context.stroke();

// orange sprinkle
context.beginPath();
context.moveTo(360,120);
context.lineTo(340,130);
context.strokeStyle = 'rgb(255,153,0)';
context.stroke();

//blue sprinkle
context.beginPath();
context.moveTo(460,120);
context.lineTo(440,130);
context.strokeStyle = 'rgb(153,255,255)';
context.stroke();

// right candy
context.beginPath();
context.beginPath();
context.moveTo(100,450);
context.quadraticCurveTo(150, 400, 200, 450);
context.moveTo(200,450);
context.quadraticCurveTo(150, 500, 100, 450);
context.strokeStyle = 'rgb(255,153,204)';
context.fillStyle = 'rgb(255,202,255)';
context.fill();
//candy wrapper
context.moveTo(200,450);
context.bezierCurveTo(215, 425, 225, 450, 200, 450);
context.bezierCurveTo(225, 450, 200, 475, 200, 450);
context.moveTo(100,450);
context.bezierCurveTo(85, 425, 75, 450, 100, 450);
context.bezierCurveTo(75, 450, 100, 475, 100, 450);
context.stroke();

//left candy
context.beginPath();
context.moveTo(600,450);
context.quadraticCurveTo(650, 500, 700, 450);
context.moveTo(700,450);
context.quadraticCurveTo(650, 400, 600, 450);
context.strokeStyle = 'rgb(255,153,204)';
context.fillStyle = 'rgb(255,202,255)';
context.fill();
//candy wrapper
context.moveTo(700,450);
context.bezierCurveTo(715, 425, 725, 450, 700, 450);
context.bezierCurveTo(725, 450, 700, 475, 700, 450);
context.moveTo(600,450);
context.bezierCurveTo(585, 425, 575, 450, 600, 450);
context.bezierCurveTo(575, 450, 600, 475, 600, 450);
context.stroke();


//words
context.beginPath();
context.font = 'italic 20pt Calibri';
        context.fillText('You Scream!', 150, 100);
        context.fillText('I Scream!', 530, 100);
        context.fillText('We All Scream, for Ice Cream!', 240, 550);
context.stroke();



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

};

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

Heart Homework

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

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

var controlX1 = 300;
var controlY1 = 0;
var controlX2 = 100;
var controlY2 = 200;
var endX = 250;
var endY = 325;

var controlX3 = 380;
var controlY3 = 450;
var endX3 = 400;
var endY3 = 500;

var controlX4 = 435;
var controlY4 = 400;
var endX4 = 550;
var endY4 = 325; 

var controlX5 = 700;
var controlY5 = 200;
var controlX6 = 500;
var controlY6 = 0;
var endX5 = 400;
var endY5 = 200;

var grdstartX = 0;
var grdstartY = 0;
var grdendX = 600;
var grdendY = 800;

//Rectangle 
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
 var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
  grd.addColorStop(0,'rgb(204,204,204)' );
  grd.addColorStop(1,'rgb(102,102,102)' );
  context.fillStyle = grd; 
  context.fill();
context.stroke();



//Heart 
context.beginPath();
context.moveTo(400,200);
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);
context.strokeStyle = 'rgb(255,204,204)'; 
context.fillStyle = 'rgb(153,204,255)';
context.lineCap = 'round'; 
context.fill();
context.lineWidth = 10;
context.stroke();









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

};

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

Heart HTML 5 Homework 

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

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

 //Quadratic Curve 
 context.beginPath();
        context.moveTo(200, 200);
        context.quadraticCurveTo(300, 0, 400, 150);
        context.quadraticCurveTo(500, 0, 600, 200);
        context.quadraticCurveTo(500, 300, 400, 400);
        context.quadraticCurveTo(300, 300, 200, 200); 
        context.lineJoin = 'round'
        context.lineCap = 'round'
        context.lineWidth = 10;
        // line color
        context.strokeStyle = "rgb(255,51,153)";
        context.stroke();
   
        





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

};

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