Friday, February 22, 2013
Monday, February 18, 2013
Logos
I think that the Target is very successful. It clearly depicts the name of the company in the visual, and it also stands out. This simply "target" can be seen and recognized anywhere. Not only does this logo symbolize the name, but the feelings and attitude the store has grown to embody. People of all ages would be able to spot and identify the Target logo.
The Kodak logo no only resembles a K, but also a flash, especially because of the color. This may also help people recognize that is related to a camera, despite the renown name. Although I am not a fan of yellow and red together, I think that the yellow is important because it looks like a flash from a camera. The red also makes it pop. I think this is a successful logo that is well-known from all age groups.The FedEx logo is one of my favorites because it has the name of the brand in the logo, but it also includes the hidden arrow between the E and the X to demonstrate something going some where, which works for this shipping company. It also pops because the colors are almost complimentary. It is plain, and simple and gets the idea across.
The Toys R Us logo is obviously geared towards kids, and is definitely successful. Despite the fact that all kids love toy stores, the colorful logo can be spotted from miles away. It is fun and inviting from the font and colors, which also makes it very effective. This logo can be recognized throughout families all across the country, and maybe even the world.
Amazon has become a very popular website, with a very thoughtful and successful logo. It is plain, and simple with a creative hidden meaning. The arrow from the A to the Z shows that this online store has everything from A to Z, which they really do. It is recognizable and known by almost everyone. The simplicity makes it work, considering there is a lot going on within the website.
Sunday, February 17, 2013
Ideas
*Decorative Garbage Bags
People buy nice garbage cans to go with their house, and then put an ugly garbage bag in it to line and protect the can. These garbage bags do the same job, but with style.
*Phone case & Wallet
This phone case holds credit cards, IDs, and money, along with a phone case that allows you to use your phone without opening the case at all. This saves time, and things from falling out!
*Left Overs
Left over food from the week that goes uneaten, but you don't want to waste it. This website allows you to put in all your left over ingredients, choose a style your craving, and then generates a recipe that includes most if not all of your ingredients.
*Personal Shopper App
Type in all of your favorite brands or websites, and this app will update you on their sales or new items.
*Greenpac
Reusable boxes
People buy nice garbage cans to go with their house, and then put an ugly garbage bag in it to line and protect the can. These garbage bags do the same job, but with style.
*Phone case & Wallet
This phone case holds credit cards, IDs, and money, along with a phone case that allows you to use your phone without opening the case at all. This saves time, and things from falling out!
*Left Overs
Left over food from the week that goes uneaten, but you don't want to waste it. This website allows you to put in all your left over ingredients, choose a style your craving, and then generates a recipe that includes most if not all of your ingredients.
*Personal Shopper App
Type in all of your favorite brands or websites, and this app will update you on their sales or new items.
*Greenpac
Reusable boxes
Tuesday, February 12, 2013
Project 1: Octopus
Coming from the Jersey Shore, I love the beach. I also wanted to practice curves in the HTML format, so I chose to create an octopus because it incorporated both. I started with the head and body, then added the arms. I love how my octopus came out, although it is not exactly the same as my beginning sketches. I was able to overcome my challenges of curves, in addition to expressing my love for the ocean.
<!DOCTYPE HTML
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Background
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//HEAD
var radius = 100;
context.beginPath();
context.arc(200, 300, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//EYES
var radius = 17;
context.beginPath();
context.arc(155, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();
var radius = 17;
context.beginPath();
context.arc(230, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();
//PUPIL
var radius = 5;
context.beginPath();
context.arc(155, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
var radius = 5;
context.beginPath();
context.arc(230, 285, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
//SMILE
context.beginPath();
context.moveTo(155,330);
context.quadraticCurveTo(195, 360, 230, 330);
context.strokeStyle = 'black';
context.lineWidth = 5;
context.lineCap = 'round';
context.stroke();
//Neck and Body
var x = 150;
var y = 375;
var controlX = 180;
var controlY = 400;
var endX = 160;
var endY = 440;
var controlX2 = 50;
var controlY2 = 500;
var endX2 = 80;
var endY2 = 610;
var controlX3 = 400;
var controlY3 = 475;
var endX3 = 240;
var endY3 = 440;
var controlX4 = 230;
var controlY4 = 375;
var endX4 = 250;
var endY4 = 380;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.lineTo(375, 610);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.strokeStyle = 'rgb(235,142,42)';
context.stroke();
/*
//NECK
var x = 175;
var y = 390;
var controlX= 180;
var controlY= 450;
var endX = 125;
var endY = 450;
var x1 = 250;
var y1 = 275;
var controlX1= 225;
var controlY1= 450;
var endX1 = 275;
var endY1 = 425;
context.beginPath();
context.moveTo(x,y);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.stroke();
context.beginPath();
context.moveTo(x1,y1);
context.quadraticCurveTo(controlX1, controlY1, endX1, endY1);
context.stroke();
//BODY
//line1
context.beginPath();
context.moveTo(200,390);
context.lineTo(75,525);
context.stroke();
//line2
context.beginPath();
context.moveTo(225,375);
context.lineTo(325,475);
context.stroke();
//line3
context.beginPath();
context.moveTo(325,475);
context.lineTo(375,500);
context.stroke();
//line4
context.beginPath();
context.moveTo(375,500);
context.lineTo(375,525);
context.stroke();
//line5
context.beginPath();
context.moveTo(375,525);
context.lineTo(350,550);
context.stroke();
//line6
context.beginPath();
context.moveTo(350,550);
context.lineTo(275,525);
context.stroke();
//line7
context.beginPath();
context.moveTo(275,525);
context.lineTo(200,550);
context.stroke();
//line8
context.beginPath();
context.moveTo(200,550);
context.lineTo(125,550);
context.stroke();
//line9
context.beginPath();
context.moveTo(125,550);
context.lineTo(75,525);
context.stroke();
*/
//Bottom Legs
//A
context.beginPath();
context.moveTo(75,605);
context.quadraticCurveTo(125, 550, 130, 605);
context.lineTo(100,605);
context.closePath();
context.strokeStyle = 'rgb(16,66,122)';
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//A1
context.beginPath();
context.moveTo(100,500);
context.lineTo(125,560);
context.bezierCurveTo(75, 625, 25, 610, -20, 575);
context.bezierCurveTo(0, 575, 50, 575, 120, 465);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//B
context.beginPath();
context.moveTo(185,605);
context.quadraticCurveTo(200, 550, 225, 605);
context.lineTo(100,605);
context.closePath();
context.strokeStyle = 'rgb(16,66,122)';
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//C
context.beginPath();
context.moveTo(275,600);
context.bezierCurveTo(255, 550, 275, 525, 365, 605);
context.closePath();
context.strokeStyle = 'rgb(16,66,122)';
context.fillStyle = 'rgb(16,66,122)';
context.fill();
context.stroke();
//C1
context.beginPath();
context.moveTo(365,525);
context.bezierCurveTo(450, 575, 550, 525, 600, 460);
context.bezierCurveTo(610, 425, 650, 430, 655, 450);
context.quadraticCurveTo(550, 650, 375, 600);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arms
//Arm1 (left)
context.beginPath();
context.moveTo(175,475);
context.bezierCurveTo(75, 425, 50, 350, 50, 300);
context.bezierCurveTo(60, 250, 70, 200, 75, 200);
context.bezierCurveTo(150, 40, 100, 25, 75, 75);
context.quadraticCurveTo(-10, 300, 100, 550);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arm 2 (Middle Right)
context.beginPath();
context.moveTo(300,550);
context.bezierCurveTo(450, 500, 500, 350, 700, 330);
context.quadraticCurveTo(720, 300, 650, 300);
context.quadraticCurveTo(470, 300, 410, 425);
context.quadraticCurveTo(390, 450, 330, 500);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arm 3 (Top Right)
context.beginPath();
context.moveTo(250,490);
context.bezierCurveTo(325, 475, 375, 425, 400, 375);
context.bezierCurveTo(475, 275, 550, 200, 550, 150);
context.bezierCurveTo(550, 100, 500, 100, 400, 300);
context.quadraticCurveTo(350, 375, 200, 550);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//Arm 4 (Left Middle)
context.beginPath();
context.moveTo(175,525);
context.quadraticCurveTo(25, 475, -20, 400);
context.quadraticCurveTo(15, 550, 150, 525);
context.closePath();
context.strokeStyle = 'rgb(235,142,42)';
context.fillStyle = 'rgb(235,142,42)';
context.fill();
context.stroke();
//BUBBLES
var radius = 17;
context.beginPath();
context.arc(300, 100, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 20;
context.beginPath();
context.arc(350, 150, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 27;
context.beginPath();
context.arc(375, 250, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 15;
context.beginPath();
context.arc(305,200, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 25;
context.beginPath();
context.arc(600, 200, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 20;
context.beginPath();
context.arc(650, 250, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 17;
context.beginPath();
context.arc(625, 150, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 5;
context.beginPath();
context.arc(700, 200, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 30;
context.beginPath();
context.arc(685, 100, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 10;
context.beginPath();
context.arc(600, 260, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 30;
context.beginPath();
context.arc(700, 550, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
var radius = 15;
context.beginPath();
context.arc(675, 475, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(119,198,237)';
context.fillStyle = 'rgb(119,198,237)';
context.fill();
context.stroke();
var radius = 10;
context.beginPath();
context.arc(650, 545, radius, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(178,208,237)';
context.fillStyle = 'rgb(178,208,237)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Wednesday, February 6, 2013
Heart Activity
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//rectangle (background)
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'rgb(37,78,87)';
context.fill();
context.strokeStyle = 'rgb(37,78,87)';
context.stroke();
//Bezier Curve (left side)
var x = 390;
var y = 175;
var controlX1 = 285;
var controlY1 = 25;
var controlX2 = 125;
var controlY2 = 175;
var endX = 300;
var endY = 340;
//Quadratic Curve (left side)
var controlX = 350;
var controlY = 390;
var endX1 = 390;
var endY2 = 470;
//Bezier Curve (right side)
var controlX15 = 655;
var controlY15 = 185;
var controlX25 = 510;
var controlY25 = 18;
var endX5 = 390;
var endY5 = 175;
//Quadratic Curve (right side)
var controlX4 = 430;
var controlY4 = 390;
var endX4 = 470;
var endY4 = 350;
context.beginPath();
context.moveTo(x,y);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.quadraticCurveTo(controlX, controlY, endX1, endY2);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.bezierCurveTo(controlX15, controlY15, controlX25, controlY25, endX5, endY5);
context.closePath();
context.lineWidth = 20;
context.lineCap = 'round';
context.strokeStyle = 'rgb(39,159,185)';
context.fillStyle = 'rgb(23,193,227)';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)