Wednesday, February 20, 2013

Logos

The Audi logo has a very sleek and modern design. This logo always reminds me of the Olympic rings kinda showing how they above everyone else. I think its simple and recognizable, and even though it does not have the nam of the company on it, everyone still knows that is its Audi.



Target has always been a logo that has stood to me. It is very simple yet very rememberable. Even when the word "Target" isn't written underneath you still know that it is for Target. They use the logo in various different ways always making it stand out to the customers always remember it.

Although Taco Bell has a easy and rememberable logo, I do not really know what it has to do with the product. Looking at it, it is rememberable but has nothing to do with food. I do think that it is a good logo because its simple and use very little color so it makes the bell really pop out.



Pepsi is a simple and sleek logo. This is a logo that has changed many times however still keeps its theme so the customers can recognize it. In the picture above it does not have the name "Pepsi" however you can still that it is the Pepsi logo.

The logo for google is simple and sleek. Although the logo has changed a little over time it maintains the same look. I like how they can incorporate different things with logo and still keep its sleekness.
Posted by at No comments:

Sunday, February 17, 2013

Five Made-Up Companies


Energy Ice- A company that creates energy popsicles and ice cubes. The ice cubes can be added to any drink to add a little flavor and energy. The popsicles are easy for on the go energy and perfect for a hot day.

Chic Greek: A store for all you Greek needs. Makes custom shirts and bags for all Sororities. Carry all novelty items and crafting supplies!

Tip Tap Toe: A Place you can go for all your dance supply needs. While most dance stores only carry dance shoes, leotards and tights, Tip Tap Toe carries custom costumes as well. Making it an easy and efficient place for everything you could need.

Wine N’ Shine: A company that makes hand painted custom wine glasses. They specialize in glitter wine glasses that can be monogrammed with someone’s initials or Sorority letters.

Quicker Liquor: A liquor store that delivers your alcohol to you. Easier for the customers and could prevent drinking and driving!
Posted by at No comments:

Wednesday, February 13, 2013

Project 1





When the Professor first mentioned this project the first thing I thought of doing was Spongebob Squarepants, which lead into me making his pineapple house instead. I was definitely tedious at times having the little details, and trying to replicate something that is round. I enjoyed working on this project and seeing my image progress.
Code:

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//rectangle and gradient
context.beginPath();
context.rect(0,50,800,600);
var grd=context.createLinearGradient(400,0,400,600);
grd.addColorStop(0,'rgb(50,250,250)');
grd.addColorStop(.74,'rgb(100,100,200)');
grd.addColorStop(.75,'rgb(0,0,0)');
grd.addColorStop(.76,'rgb(100,100,100)');
grd.addColorStop(1,'rgb(255,255,225)');
context.fillStyle = grd;
context.fill();
context.stroke();

//top part of pineapple
context.beginPath();
context.moveTo(310,280);
context.bezierCurveTo(230,130,250,130,340,255);
context.strokeStyle='rgb(8,152,78)';
var grd=context.createLinearGradient(230,135,250,340,255);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.moveTo(330,250)
context.bezierCurveTo(275,75,275,75,370,235);
var grd=context.createLinearGradient(330,75,275,325,275,75);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(.5,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.moveTo(360,235)
context.bezierCurveTo(330,40,350,40,400,225);
var grd=context.createLinearGradient(360,50,350,150,360,150);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.moveTo(390,225)
context.bezierCurveTo(410,25,410,25,435,225);
var grd=context.createLinearGradient(410,25,350,100,200,150);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.moveTo(425,225)
context.bezierCurveTo(500,40,500,40,470,250);
var grd=context.createLinearGradient(425,0,350,90,470,250);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.moveTo(460,240)
context.bezierCurveTo(575,130,575,130,490,270);
var grd=context.createLinearGradient(600,0,500,0,500,300);
grd.addColorStop(0,'rgb(255,255,255)');
grd.addColorStop(1,'rgb(8,152,78)');
context.fillStyle=grd
context.fill();
context.stroke();

//pinapple shape
context.beginPath();
context.moveTo(225,600);
context.bezierCurveTo(225, 100, 575, 100, 575, 600);
context.strokeStyle='rgb(143,92,16)';
context.lineWidth=5;
var grd=context.createLinearGradient(75,100,500,600);
grd.addColorStop(0.,'rgb(255,255,255)');
grd.addColorStop(.75,'rgb(212,101,16)');
context.fillStyle=grd;
context.fill();
context.stroke();

//lines in pineapple
context.beginPath();
context.moveTo(365,230);
context.quadraticCurveTo(500,300,560,450);
context.stroke();

context.beginPath();
context.moveTo(305,275);
context.quadraticCurveTo(450,350,575,600);
context.stroke();

context.beginPath();
context.moveTo(265,350);
context.quadraticCurveTo(375,400,500,600);
context.stroke();

context.beginPath();
context.moveTo(245,425);
context.quadraticCurveTo(300,450,425,600);
context.stroke();

context.beginPath();
context.moveTo(230,500);
context.quadraticCurveTo(225,475,350,600);
context.stroke();

context.beginPath();
context.moveTo(225,600);
context.quadraticCurveTo(275,475,490,270);
context.stroke();

context.beginPath();
context.moveTo(235,450);
context.quadraticCurveTo(375,250,440,235);
context.stroke();

context.beginPath();
context.moveTo(300,600);
context.quadraticCurveTo(400,450,525,325);
context.stroke();

context.beginPath();
context.moveTo(400,600);
context.quadraticCurveTo(500,450,550, 400);
context.stroke();

context.beginPath();
context.moveTo(500,600);
context.quadraticCurveTo(575,475,570, 485);
context.stroke();

//little vertical lines in pineapple
context.beginPath();
context.moveTo(405,305);
context.lineTo(405,290);
context.stroke();

context.beginPath();
context.moveTo(405,400);
context.lineTo(405,415);
context.stroke();

context.beginPath();
context.moveTo(455,340);
context.lineTo(455,355);
context.stroke();

context.beginPath();
context.moveTo(450,450);
context.lineTo(450,465);
context.stroke();

context.beginPath();
context.moveTo(500,400);
context.lineTo(500,415);
context.stroke();

context.beginPath();
context.moveTo(300,405);
context.lineTo(300,420);
context.stroke();

context.beginPath();
context.moveTo(350,255);
context.lineTo(350,270);
context.stroke();

context.beginPath();
context.moveTo(450,255);
context.lineTo(450,270);
context.stroke();

context.beginPath();
context.moveTo(500,305);
context.lineTo(500,290);
context.stroke();

context.beginPath();
context.moveTo(300,310);
context.lineTo(300,295);
context.stroke();

context.beginPath();
context.moveTo(300,500);
context.lineTo(300,515);
context.stroke();

context.beginPath();
context.moveTo(350,450);
context.lineTo(350,465);
context.stroke();

context.beginPath();
context.moveTo(260,460);
context.lineTo(260,475);
context.stroke();

context.beginPath();
context.moveTo(270,555);
context.lineTo(270,570);
context.stroke();

context.beginPath();
context.moveTo(240,530);
context.lineTo(240,545);
context.stroke();

context.beginPath();
context.moveTo(490,530);
context.lineTo(490,545);
context.stroke();

context.beginPath();
context.moveTo(450,570);
context.lineTo(450,585);
context.stroke();

context.beginPath();
context.moveTo(535,570);
context.lineTo(535,585);
context.stroke();

context.beginPath();
context.moveTo(535,450);
context.lineTo(535,465);
context.stroke();

context.beginPath();
context.moveTo(260,375);
context.lineTo(260,390);
context.stroke();

//windows
context.beginPath();
context.arc(325,350,40,0,2 * Math.PI,false);
context.lineWidth=15;
context.strokeStyle='rgb(125,129,149)';
var grd=context.createLinearGradient(275,345,380,355);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(.50,'rgb(42,155,241)');
grd.addColorStop(1,'rgb(12,223,216)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.arc(525,525,30,0,2 * Math.PI,false);
context.lineWidth=15;
context.strokeStyle='rgb(125,129,149)';
var grd=context.createLinearGradient(500,550,575,550);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(.5,'rgb(42,155,241)');
grd.addColorStop(1,'rgb(12,223,216)');
context.fillStyle=grd;
context.fill();
context.stroke();

//door
context.beginPath();
context.moveTo(300,600);
context.bezierCurveTo(300, 410, 440, 410, 440, 600);
context.strokeStyle='rgb(125,129,149)';
context.lineWidth=10;
context.fillStyle='rgb(149,153,169)';
context.fill();
context.stroke();

context.beginPath();
context.arc(370,540,0,0,2 * Math.PI,false);
context.lineWidth=12;
context.strokeStyle='rgb(125,129,149)';
context.stroke();

context.beginPath();
context.moveTo(367,505)
context.lineTo(367,495)
context.lineCap='round'
context.lineWidth=10;
context.strokeStyle='rgb(125,129,149)';
context.stroke();

context.beginPath();
context.moveTo(400,525)
context.lineTo(410,520)
context.stroke();

context.beginPath();
context.moveTo(335,525)
context.lineTo(325,520)
context.stroke();

context.beginPath();
context.moveTo(345,565)
context.lineTo(335,575)
context.stroke();

context.beginPath();
context.moveTo(390,565)
context.lineTo(400,575)
context.stroke();

context.beginPath();
context.arc(368,540,30,0,2 * Math.PI,false);
context.lineWidth=9;
context.strokeStyle='rgb(125,129,149)';
context.stroke();

//pipe on house
context.beginPath();
context.moveTo(515,360);
context.lineTo(590,355);
context.strokeStyle='rgb(79,107,137)';
context.lineCap='square'
context.lineWidth=20;
context.stroke();

context.beginPath();
context.moveTo(515,365);
context.lineTo(590,370);
context.lineWidth=20;
context.stroke();

context.beginPath();
context.moveTo(585,365);
context.lineTo(580,275);
context.lineWidth=20;
context.stroke();

context.beginPath();
context.moveTo(590,365);
context.lineTo(595,275);
context.lineWidth=20;
context.stroke();

context.beginPath();
context.moveTo(575,330);
context.lineTo(600,330);
context.lineWidth=3;
context.strokeStyle= 'rgb(57,60,74)';
context.stroke();

context.beginPath();
context.moveTo(560,350);
context.lineTo(560,375);
context.lineWidth=3;
context.strokeStyle= 'rgb(57,60,74)';
context.stroke();

//flowers
context.beginPath();
context.moveTo(500,600)
context.bezierCurveTo(425,550,500,525,520,600);
context.lineWidth=5;
context.strokeStyle='hotpink';
context.stroke();

context.beginPath();
context.moveTo(520,600)
context.bezierCurveTo(520,550,610,525,540,600);
context.lineWidth=5;
context.strokeStyle='hotpink';
context.stroke();

context.beginPath();
context.moveTo(450,600)
context.bezierCurveTo(420,575,475,575,475,600);
context.lineWidth=5;
context.strokeStyle='limegreen';
context.stroke();

context.beginPath();
context.moveTo(475,600)
context.bezierCurveTo(450,575,525,575,500,600);
context.lineWidth=5;
context.strokeStyle='limegreen';
context.stroke();

context.beginPath();
context.moveTo(550,600)
context.bezierCurveTo(520,575,575,575,575,600);
context.lineWidth=5;
context.strokeStyle='purple';
context.stroke();

context.beginPath();
context.moveTo(575,600)
context.bezierCurveTo(550,575,625,575,600,600);
context.lineWidth=5;
context.strokeStyle='purple';
context.stroke();

context.beginPath();
context.moveTo(250,600)
context.bezierCurveTo(175,550,250,525,270,600);
context.lineWidth=5;
context.strokeStyle='rgb(227,245,91)';
context.stroke();

context.beginPath();
context.moveTo(270,600)
context.bezierCurveTo(270,550,360,525,290,600);
context.lineWidth=5;
context.strokeStyle='rgb(227,245,91)';
context.stroke();

context.beginPath();
context.moveTo(220,600)
context.bezierCurveTo(190,575,245,575,245,600);
context.lineWidth=5;
context.strokeStyle='rgb(102,204,252)';
context.stroke();

context.beginPath();
context.moveTo(245,600)
context.bezierCurveTo(220,575,290,575,270,600);
context.lineWidth=5;
context.strokeStyle='rgb(102,204,252)';
context.stroke();

//bubbles
context.beginPath();
context.arc(575,225,25,0,2 * Math.PI,false);
context.lineWidth=2;
var grd=context.createLinearGradient(550,220,590,250);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(1,'rgb(42,155,241)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.arc(605,155,20,0,2 * Math.PI,false);
context.lineWidth=2;
var grd=context.createLinearGradient(585,150,620,180);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(1,'rgb(42,155,241)');
context.fillStyle=grd
context.fill();
context.stroke();

context.beginPath();
context.arc(575,100,15,0,2 * Math.PI,false);
context.lineWidth=2;
var grd=context.createLinearGradient(565,95,590,125);
grd.addColorStop(0, 'rgb(172,246,244)');
grd.addColorStop(1,'rgb(42,155,241)');
context.fillStyle=grd
context.fill();
context.stroke();





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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at No comments:

Wednesday, February 6, 2013

HTML Code Heart


I started out my project with the heart, just trying different codes until I liked the shape of the heart. I then did the outside rectangles just to add a little more to the project. I finally came up with arrow because hearts remind me of my least favorite holiday, Valentine's Day!


Code

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// outside rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 20;
context.strokeStyle = 'rgb(200, 100, 100)';
var grd = context.createLinearGradient(0, 0, 800, 600);
grd.addColorStop(0, 'rgb(255, 255, 225)');
grd.addColorStop(.35, 'rgb(200, 125, 150)');
grd.addColorStop(0.5, 'rgb(100, 200, 210)');
grd.addColorStop(.65, 'rgb(200, 125, 150)');
grd.addColorStop(1, 'rgb(255,255, 225)');
context.fillStyle = grd;
context.fill();
context.stroke();

//second rectangle
context.beginPath();
context.rect(50,50,700,500);
context.lineWidth=10;
context. strokeStyle='rgb(200,100,100)';
context. stroke();

//third rectangle
context.beginPath();
context.rect(25,25, 750,550);
context.lineWidth=10;
context. strokeStyle='rgb(200,100,100)';
context. stroke();

//arrow line
context.beginPath();
context.moveTo(75,75);
context.lineTo(675,475);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.lineCap='round';
context.stroke();

//end lines
context.beginPath();
context.moveTo(150,55);
context.lineTo(80,150);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';

context.stroke();
context.beginPath();
context.moveTo(170,60);
context.lineTo(100,160);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.stroke();

//arrow head
context.beginPath();
context.moveTo(620,375);
context.lineTo(675,475);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.lineCap='round';
context.stroke();

context.beginPath();
context.moveTo(570,475);
context.lineTo(675,475);
context.lineWidth=10;
context.strokeStyle='rgb(200,100,100)';
context.lineCap='round';
context.stroke();

// heart
context.beginPath();
context.moveTo(400,200);
context.bezierCurveTo(200, 0, 100, 200, 250, 325);
context.quadraticCurveTo(360,400, 400, 500)
context.quadraticCurveTo(460,400, 550, 325)
context.bezierCurveTo(700, 200, 600, 0, 400, 200);
context.lineWidth = 40;
context.strokeStyle = 'rgb(200,100, 100)';
context.lineCap = 'round';
context.fillStyle = 'rgb(255, 255, 225)';
context.fill();
context.stroke();

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

};

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


Posted by at No comments:
Subscribe to: Posts (Atom)