Superficial Existence : February 2013

Wednesday, February 27, 2013

Rough Draft of Logos

Tuesday, February 19, 2013

Logos Analysis
1)

Sony is a electronic brand, their logo is quite successful, the logo has a digital design = electronics. Their logo have change a few times over the years.

2)

The tostitos is a game time snack, their targeted audience are people middle age people. If you look at the center of this logo, you can see two people enjoying a Tostito chip with a bowl of salsa. This logo conveys an idea of people connecting with each other.

3)

In the Baskin Robins logo, the BR creates the number 31 for how many flavors they have which is pretty clever. Personally I don't think their logo is that successful, people don't go to Baskin Robins has often anymore, they go to Diary Queen.

4) amazon.com has everything from a to z and it also represents the smile brought to the customer’s face. The amazon logo is really successful, targeted audience are mainly people who are looking for discounted electronic devices and college students buying books.

Monday, February 18, 2013

5 Logos for fictional company !!!!

1)Chubbys

(Boy meets girl -- pertaining to fat people that can't find love )

2)Magica Kitchens

(lean cuisine foods - Italian, French, Caribbean)

3)Fandom Cupcakes

(cupcakes made into your favorite celebrity)

4) RDX logos - Ridiculous Designz

(create shirts - get the design of your life)

5)Chi Chia

(yoga Gym - relaxation for all ages) - Zen for all of you

6) Happy Feet

(rescue lost and endangered penguins)

Wednesday, February 13, 2013

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

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

//Rectangle Variables
var rectx = 0;
var recty = 0;

//Rectangle Linear Gradient Variables
var startX = 0;
var startY = 0;
var grdendX = canvas.width;
var grdendY = canvas.height;

//Background Rectangle
context.beginPath();
context.rect(rectx, recty, canvas.width, canvas.height);
var grd = context.createLinearGradient(startX, startY, grdendX, grdendY);
grd.addColorStop(0, 'rgb(0, 0, 0)');
grd.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = grd;
context.fill();

//face
context.beginPath();
context.arc(150, 140, 150, 0, 2 * Math.PI, false);
context.closePath();
context.lineWidth = 10;
context.fillStyle = "grey";
context.strokeStyle = "black";
context.stroke();
context.fill();

//pupil
context.beginPath();
context.arc(120, 130, 20, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(255, 255, 255)";
context.stroke();
context.fill();

//2nd pupil
context.beginPath();
context.arc(123, 133, 4, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(0, 0, 255)";
context.stroke();
context.fill();

//1st eye
context.beginPath();
context.arc(180, 130, 20, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(255, 255, 255)";
context.strokeStyle = "black";
context.stroke();
context.fill();

//2nd eye
context.beginPath();
context.arc(183, 133, 4, 0, 2 * Math.PI, false);
context.closePath();
context.fillStyle = "rgb(0, 0, 255)";
context.strokeStyle = "black";
context.stroke();
context.fill();

//smile
context.beginPath();
context.arc(150, 170, 60, 0, 3, false);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "#C0C0C0";
context.fillStyle = "black";
context.stroke();
context.fill();

//Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 300;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 280;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 300;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 100)";
context.fillStyle = 'rgb(0, 0, 100)';
context.fill();
context.stroke();

//Second Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 250;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 150)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();

//Third Waves
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 8.5;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 180)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "rgb(0, 0, 180)";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 1.1;
var y = canvas.height / 1;
var radius = 200;
var startAngle = 1 * Math.PI;
var endAngle = 2 * Math.PI;
var counterClockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "00BFFF";
context.fillStyle = '00BFFF';
context.fill();
context.stroke();

//circle
context.beginPath();
context.arc(700, 100, 40, 0, 2 * Math.PI, false);
context.fillStyle = "gold";
context.fill();
context.lineWidth = 200;
context.strokeStyle = "black";
context.stroke

context.font = 'italic 40pt Calibri';
context.fillStyle = 'silver';
context.fillText('Talking to the Moon', 300, 250);

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

};

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

Wednesday, February 6, 2013

Heart. HTML

Omg kill me now!!!

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Bezier Curve Variables
var x = 450;
var y = 160;
var controlX1 = 150;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350;
var endY = 325;

//Quadratic Curve Variables
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 = 755;
var controlY5 = 160;
var controlX6 = 550;
var controlY6 = 15;
var endX5 = x;
var endY5 = y;

//Rectangle Variables
var rectX = 0;
var rectY = 0;

//Rectangle Linear Variables
var startX = 0;
var startY = 0;
var grdendX = canvas.width;
var grdendY = canvas.height;

context.beginPath();
context.rect(rectX, rectY, canvas.width, canvas.height);
var grd = context.createLinearGradient(startX, startY, grdendX, grdendY);
grd.addColorStop(0, 'rgb(255, 255, 255)');
grd.addColorStop(1, 'rgb(155, 0, 155)');
context.lineWidth = 10;
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'black';
context.stroke();

//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);
context.closePath();
context.fillStyle = 'rgb(250, 180, 250)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.stroke();

context.font = 'italic 40pt Calibri';
context.fillText('DONT BREAK MY HEART', 150, 100);
context.lineWidth = 3;
// stroke color
context.strokeStyle = 'black';
context.strokeText('DONT BREAK MY HEART', 150, 100);

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

};

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