Home

Home
"There are places I remember all my life." The Beatles

Tuesday, February 26, 2013

logos

I think the LEGO logo is very effective. Its target audience is children, and i think both the simplicity of the design and the colors cater to this audience. The first logo was introduced in 1939, and was a lot more complex than the current. It has been simplified to be reproduced on the internet and worldwide. Although based on German words; the logo is renowned Worldwide.

This logo is clever because it easily shows the BR, but also hidden in this the number 31, representing the number of flavours or ice cream. previous logos did not manage to incorporate the 31 into the name. the colors are also affective because the pink represents the pink spoon you are given to sample flavors. they were one of the first ice cream places to allow this, so it has become a trademark for them. i feel it is a successful logo that has become universally recognised.


This logo is universally recognised. since they became involved in the video game industry their logo has not changed. i think this is particularly effective, and there would be many enthusiasts left unhappy if they were to change it. it is a simple rounded logo, and i think the lack of any sharp edges is appealing to the eye. it is also in an eye catching color, and very memorable because of this.

This is yet another logo that is recognisable world wide. perhaps the most successful i have covered yet in that the logo in itself has become a recognisable icon of london. it has become a pop culture symbol. The shape is simple, a rectangle and a circle, but the symmetry of they whole thing makes it very easy to look at. the colors are also very bold primary colors, making it even more recognisable. i think this is one of the most recognised and affective logos.


This last logo is perhaps slightly less known. It is the beats by dre logo. it is a simple logo, of a lower case b inside of a red circle. it is known to be a "cool" logo, with the b being slightly offset. it is in powerful colors, reflecting the companies passion for music. the red signifies to me passion, while the black indicates power. it is a very effective logo, and when not on a headphone the shape of it looks like the ear pieces on a headphone.

Sunday, February 17, 2013

Company Ideas

Disney Wishes - a company that raises money through fundraising around disney to allow families without the funds available to go to experience the holiday of a life time. 

Quicksons - a painting and maintenance company inspired by the surname Quick and a family business with the sons of the family. 

Coral - a small scuba shop running training and expeditions. providing their own equipment and giving the opportunity for students they train to go on and become instructors within the company. 

Acoustic Beats - a small music production company specialized in alternative acoustic music with a beat (not just using a guitar), provides the necessary staff and instruments to allow people to transform accapella or simple acoustic music into music with bass and a beat. From beat boxers to drum boxes. 

High Tea - an English afternoon tea shop. Serves traditional English breakfast (with imported bacon!) on the weekend mornings. From 3-5 every day serves traditional English tea, run by an English staff. House special teas change each week, and cakes and sandwiches made fresh each day with traditional English ingredients imported. Using fortnum and mason for inspiration.

Wednesday, February 13, 2013


This was my original drawing, so my real graphic turned out very similar which i was really happy about!


I am somewhat known among my friends for my love of mustaches, and also my love of DZ..i recently joined DZ, and in being so far away from home it has done a lot to make me feel at home here. They are looking for any new images, so I decided to try to combine these two things in a somewhat humorous way, because I'm also known to not take everything too seriously! Pink and green are the colors of Delta Zeta, and I chose my favourite tones of these colors for my image. The turtle is also the national symbol, and as a bonus its one of my favourite animals too. I think this turned out well, and better than i was expecting. I struggled with the small mustache on the turtle, and also with his green body shape. From this project however i realised that i really like programming, and i found this a lot of fun!

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

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

var rectx1 = 0;
var recty1 = 0;
var rectwidth1 = 800;
var rectheight1 = 600;
var startx = 0
var starty = 0
var endx = 600
var endy = 800

//rectangle
context.beginPath();
context.rect(rectx1, recty1, rectwidth1, rectheight1);
context.strokeStyle = 'rgb(153, 102, 255)';
//context.fillStyle = 'rgb(255, 204, 204)';
var grd = context.createLinearGradient (startx, starty, endx, endy);
grd.addColorStop (0, 'rgb(204, 255, 204)');
grd.addColorStop (1, 'rgb(255, 170, 220)');
context.fillStyle = grd;
context.fill();
context.stroke();

//triangle
context.beginPath();
context.moveTo(150, 50);
context.lineTo(250, 250);
context.lineTo(50, 250);
context.lineTo(150, 50);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 102, 170)';
context.lineCap = 'round'
context.fillStyle = 'rgba(255, 102, 153, 0.4)';
context.fill();
context.stroke();

//Z
context.beginPath();
context.moveTo (275, 50);
context.lineTo(450, 50);
context.lineTo(275, 250);
context.lineTo(455, 250);
context.lineWidth = 10
context.strokeStyle = 'rgb(255, 102, 170)';
context.lineCap = 'round'
context.stroke();

//top mustache
context.beginPath();
context.moveTo(150,175);
context.bezierCurveTo(115, 115, 100, 215, 50,160);
context.quadraticCurveTo(100, 225, 150, 185);
context.quadraticCurveTo(200, 225, 250, 160);
context.bezierCurveTo(200, 215, 185, 115, 150, 175);
context.closePath();
context.fillStyle = 'black'
context.fill();
context.strokeStyle = 'black'
context.lineWidth = 5
context.stroke();


//turtleshell
context.beginPath();
context.moveTo(450, 500);
context.quadraticCurveTo(600,250, 750, 500);
context.closePath();
context.strokeStyle = 'rgb(219, 49 , 140)';
context.fillStyle = 'rgba(255, 102, 170, .7)';
var grd = context.createRadialGradient(550, 400, 140, 650, 500, 100);
grd.addColorStop(.3, 'rgb(255, 225, 255)');
grd.addColorStop(1, 'rgb(255, 110, 199)');
context.fillStyle = grd
context.fill();
context.stroke();

//turtle
context.beginPath();
context.moveTo(450, 500);
context.bezierCurveTo(380, 435, 455, 390, 440,350);
context.bezierCurveTo(420, 305, 370, 305, 355, 350);
context.bezierCurveTo(340, 390, 415, 435, 390, 490);
context.bezierCurveTo(380, 510, 380, 535, 430, 540);
context.quadraticCurveTo(585, 550, 740, 540);
context.quadraticCurveTo(785, 537, 795, 460);
context.quadraticCurveTo(765, 505, 750,500);
context.closePath();
context.strokeStyle= 'rgb(0, 102, 0)';
context.fillStyle = 'rgb(51, 170, 0)';
context.fill();
context.stroke();


//foot left
context.beginPath();
context.moveTo(500, 545);
context.bezierCurveTo(510, 570, 558, 570, 563, 545);
context.closePath();
context.fillStyle = 'rgb(51, 170, 0)';
context.fill();
context.stroke();
//right foot
context.beginPath();
context.moveTo(627, 545);
context.bezierCurveTo(637, 570, 685, 570, 690, 545);
context.closePath();
context.fillStyle = 'rgb(51, 170, 0)';
context.fill();
context.stroke();

//left eye
context.beginPath();
context.arc(382, 350, 5, 0, 2 * Math.PI, false);
context.lineWidth = 1
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
//right eye
context.beginPath();
context.arc(412, 350, 5, 0, 2 * Math.PI, false);
context.lineWidth = 1
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();

//turtle mustache
context.beginPath();
context.moveTo(397, 380);
context.bezierCurveTo(383, 362, 378, 390, 367, 375);
context.quadraticCurveTo(380, 392, 397, 383);
context.quadraticCurveTo(414, 392, 427, 375);
context.bezierCurveTo(416, 390, 411, 362, 397,380);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.stroke();

//turtle shell
context.beginPath();
context.moveTo(550, 425);
context.bezierCurveTo(540, 440, 528, 430, 525, 460);
context.bezierCurveTo(534, 480, 555, 450, 568, 445);
context.bezierCurveTo(570, 438, 560, 420, 550, 425);
context.closePath();
context.strokeStyle = 'rgb(219, 49 , 140)';
context.fillStyle = 'rgba(219, 49, 140, 0.7)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(620, 450);
context.bezierCurveTo(650, 458, 665, 475, 650, 498);
context.lineTo(625,498);
context.bezierCurveTo(600, 475, 625, 460, 620, 450);
context.strokeStyle = 'rgb(219, 49 , 140)';
context.fillStyle = 'rgba(219, 49, 140, 0.7)';
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

This is my second heart attempt..I'm much happier with it! i even managed to add a bit of a gradient, even if that part didn't go too well! I realised i needed to use bezier and quadratic curves to make the perfect heart..I'm happy with all the code i used in this image!

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var rectx1 = 0;
var recty1 = 0;
var rectwidth1 = 800;
var rectheight1 = 600;
var startx = 0
var starty = 0
var endx = 600
var endy = 800

//rectangle
context.beginPath();
context.rect(rectx1, recty1, rectwidth1, rectheight1);
context.strokeStyle = 'rgb(153, 102, 255)';
//context.fillStyle = 'rgb(255, 204, 204)';
var grd = context.createLinearGradient (startx, starty, endx, endy);
grd.addColorStop (0, 'white');
grd.addColorStop (.25, 'rgb(0, 255, 255)');
grd.addColorStop (.75, 'rgb(255, 0, 255)');

context.fillStyle = grd;
context.fill();
context.stroke();

//bezier curve left
var x = 450;
var y = 160
var controlX1 = 350;
var controlY1 = 15;
var controlX2 = 155;
var controlY2 = 160;
var endX = 350
var endY = 325

//quadratic curve left
var controlx3 = 425;
var controly3 = 385;
var endx3 = 450;
var endy3 = 480;
//quadratic curve right
var controlx4 = 475;
var controly4 = 375;
var endx4 = 550;
var endy4 = 325;
//bezier curve right
var controlx5 = 755;
var controly5 = 180;
var controlx6 = 550;
var controly6 = 15;


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, x, y);
context.closePath();
context.fillStyle = 'rgb(255, 100, 150)';
context.fill();
context.lineWidth = 7
context.strokeStyle = 'maroon'
var grd = context.createRadialGradient(285, 150, 200, 525, 430, 300);
grd.addColorStop(.7, 'white');
grd.addColorStop(1, 'rgb(255, 51, 153)');
context.fillStyle = grd
context.fill();
context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
First attempt at heart assignment!..I only used 2 curves so it is a slightly funny shape!

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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var rectx1 = 0;
var recty1 = 0;
var rectwidth1 = 800;
var rectheight1 = 600;
var startx = 400
var starty = 0
var endx = 400
var endy = 800

//rectangle
context.beginPath();
context.rect(rectx1, recty1, rectwidth1, rectheight1);
context.strokeStyle = 'rgb(153, 102, 255)';
//context.fillStyle = 'rgb(255, 204, 204)';
var grd = context.createLinearGradient (startx, starty, endx, endy);
grd.addColorStop (0, 'rgb(102, 255, 255)');
grd.addColorStop (1, 'rgb(255, 0, 255)');
context.fillStyle = grd;
context.fill();
context.stroke();

//left curve
context.beginPath();
context.moveTo (300, 225);
context.bezierCurveTo (150, 25, 125, 350, 300, 450);
context.bezierCurveTo (475, 350, 450, 25, 300, 225);
context.closePath();
context.fillStyle = 'rgb(255, 100, 150)';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'maroon'
context.lineCap = 'round';
context.stroke();



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

};

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