Cakes & Bakes

Cakes & Bakes is a bakery that provides baking lessons as well. I chose to make the logo pink and green because the colors are eye-popping. In addition, frosting pastries is a big part of appealing treats and its part of any class baking class so I wanted to incorporate it into the logo. The frosting is pink because pink frosting is used all over the world in bakeries to attract customers. I traced the icing bag from the image on the bottom. I had trouble deciding which tool to use and how to trace it. Making the lines was even kind of difficult. I outlined the name of the bakery with the frosting to emphasize the name and I used the frosting bag kind of like an explanation point. 

Under the Sea

For my caligramme project I decided to do a crab. At first it was a random thought but then I started to play the movie The Little Mermaid in my head. As a result, I ended up filling the crab with the lyrics of "Under the Sea" along with other random sentences to make my crab. 

Cakes & Bakes

These are my logos for my company, Cakes & Bakes. I am still unsure of which one I want to use but I like the one with the frosting bag, the rolling pin, and the one with the cupcake inside the circle. 

The Logos of Our Time

Starbucks. The Starbucks logo is probably one of the most effective and recognizable logos of our time. Anywhere you go in the world, you can recognize that it is a Starbucks shop just by looking at the green logo. The color and symbol of the mermaid are unique. Additionally, because Starbucks doesn't do commercials or advertising, the logo needs to stand out among other coffee shops. 

Nike. The Nike symbol is easily the most recognizable logo worldwide. Although its seems like an insignificant check mark, the Nike checkmark can be seen big or small on any product or billboard but it is effective because of its simplicity. In addition, the "Just Do It" saying complements the simplicity of the logo.

Disney. The Walt Disney logo is probably the first logo I memorized. It was the beginning of every Disney movie I watched and it was on everything Disney related. The castle represent the magic that Disney as a whole and the unique font gives the logo the creative touch that Disney inspires. It is a recognizable logo worldwide.

Chili's. Chili's is probably one of the simplest and most outspoken logos of our time. The logo doesn't even use letters to represent the brand name of the restaurant. The logo is also red which is a color that stands out compared to other colors. 

Target. Target's logo of the two circles is an ingenious idea. The symbol of a bullseye and the color red appeals to the eye of the consumer, almost instantaneously. I think target is an easily recognizable logo because of its simplicity and attraction. 

Making A Mark

Cakes & Bakes.  This business will be a bakery where you will not only will be able to eat delicious treats but learn how to bake them as well.

Become Another Person. This business will sell costumes throughout the year for every occasion.

Connect Yourself. This product is a universal phone charger.

Strike Em' Out. This company provides people with resources and networks to learn the game of baseball.

Deliver. This company provides the service of picking up any food item from any restaurant and delivering to your doorstep without any hassle and having to deal with the restaurants.

In A Galaxy Far Far Away

For this project I decided to create the solar system. You have all the planets, the sun, and even a shooting star to portray such a majestic canvas. You have the sun, Mercury, Venus, Earth and its moon, Mars, Jupiter, Saturn, Uranus, Neptune, and a shooting star to convey what the solar system looks like through my eyes. Originally, all the planets were a single color, but the more I stared at the image I had created, the more I realized it needed something so I added a radial gradient to a couple of the planets. Then I tried to convey a 3-D effect for Saturn's ring using a quadratic curve. I started with the sun and made my way out all the way to Neptune, since Pluto has recently been considered a dwarf planet. I think I was successful in creating this piece because you can truly tell it is the solar system.

var x = 0;
var y = 0;
var height = 800;
var width = 600;

//Background
context.beginPath();
context.rect(x, y, height, width);
context.fillStyle = '#000033';
context.fill();
context.stroke();

var centerx = 0;
var centery = 0;
var radius = 250;
var startx1 = 0;
var starty1 = 0;
var startRadius1 = 300;
var endx1 = 250;
var endy1 = 220;
var endRadius1 = 230;

//Sun
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx1, starty1, startRadius1, endx1, endy1, endRadius1);
grd.addColorStop(.7, '#FF6600');
grd.addColorStop(1, 'yellow');
context.fillStyle = grd;
context.fill();
context.stroke();

var x2 = 300;
var y2 = 0;
var controlx1 = 290;
var controly1 = 290;
var endx1 = 0;
var endy1 = 300;

//Mercury Ring
context.beginPath();
context.moveTo(x2, y2);
context.quadraticCurveTo(controlx1, controly1, endx1, endy1);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx1 = 285;
var centery1 = 100;
var radius1 = 20;

//Mercury
context.beginPath();
context.arc(centerx1, centery1, radius1, 0, 2*Math.PI, false);
context.fillStyle = 'grey';
context.fill();
context.strokeStyle = 'grey';
context.stroke();

var x3 = 350;
var y3 = 0;
var controlx2 = 350;
var controly2 = 350;
var endx2 = 0;
var endy2 = 350;

//Venus Ring
context.beginPath();
context.moveTo(x3, y3);
context.quadraticCurveTo(controlx2, controly2, endx2, endy2);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx2 = 150;
var centery2 = 330;
var radius2 = 40;

//Venus
context.beginPath();
context.arc(centerx2, centery2, radius2, 0, 2*Math.PI, false);
context.fillStyle = 'burlywood';
context.fill();
context.strokeStyle = 'cornsilk';
context.stroke();

var x4 = 400;
var y4 = 0;
var controlx3 = 430;
var controly3 = 430;
var endx3 = 0;
var endy3 = 400;

//Earth Ring
context.beginPath();
context.moveTo(x4, y4);
context.quadraticCurveTo(controlx3, controly3, endx3, endy3);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx3 = 375;
var centery3 = 200;
var radius3 = 40;
var startx = 375;
var starty = 200;
var startRadius = 40;
var endx = 395;
var endy = 220;
var endRadius = 40;

//Earth
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx, starty, startRadius, endx, endy, endRadius);
grd.addColorStop(0, 'green');
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
context.stroke();


var centerx3 = 430;
var centery3 = 150;
var radius3 = 10;

//Moon
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI, false);
context.fillStyle = 'silver';
context.fill();
context.strokeStyle = 'silver';
context.stroke();

var x5 = 450;
var y5 = 0;
var controlx4 = 500;
var controly4 = 500;
var endx4 = 0;
var endy4 = 450;

//Mars Ring
context.beginPath();
context.moveTo(x5, y5);
context.quadraticCurveTo(controlx4, controly4, endx4, endy4);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx4 = 200;
var centery4 = 435;
var radius4 = 35;

//Mars
context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
context.fillStyle = 'maroon';
context.fill();
context.strokeStyle = 'brown';
context.stroke();

var x6 = 550;
var y6 = 0;
var controlx5 = 600;
var controly5 = 600;
var endx5 = 0;
var endy5 = 550;

//Jupiter Ring
context.beginPath();
context.moveTo(x6, y6);
context.quadraticCurveTo(controlx5, controly5, endx5, endy5);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx4 = 535;
var centery4 = 270;
var radius4 = 95;
var startx2 = 535;
var starty2 = 270;
var startRadius2 = 205;
var endx2 = 630;
var endy2 = 365;
var endRadius2 = 95;

//Jupiter
context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx2, starty2, startRadius2, endx2, endy2, endRadius2);
grd.addColorStop(.7, 'peru');
grd.addColorStop(1, 'goldenrod');
context.fillStyle = grd;
context.fill();
context.stroke();

var x7 = 100;
var y7 = 600;
var controlx6 = 700;
var controly6 = 700;
var endx6 = 650;
var endy6 = 0;

//Saturn Ring
context.beginPath();
context.moveTo(x7, y7);
context.quadraticCurveTo(controlx6, controly6, endx6, endy6);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx5 = 650;
var centery5 = 100;
var radius5 = 60;
var startx3 = 650;
var starty3 = 100;
var startRadius3 = 80;
var endx3 = 710;
var endy3 = 160;
var endRadius3 = 90;

//Saturn
context.beginPath();
context.arc(centerx5, centery5, radius5, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(startx3, starty3, startRadius3, endx3, endy3, endRadius3);
grd.addColorStop(.7, 'navajowhite');
grd.addColorStop(1, 'linen');
context.fillStyle = grd;
context.fill();
context.lineWidth = 3;
context.stroke();

var x8 = 150;
var y8 = 600;
var controlx7 = 800;
var controly7 = 800;
var endx7 = 730;
var endy7 = 0;

//Uranus Ring
context.beginPath();
context.moveTo(x8, y8);
context.quadraticCurveTo(controlx7, controly7, endx7, endy7);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx6 = 640;
var centery6 = 530;
var radius6 = 55;

//Uranus
context.beginPath();
context.arc(centerx6, centery6, radius6, 0, 2*Math.PI, false);
context.fillStyle = 'MediumTurquoise';
context.fill();
context.strokeStyle = 'lightblue';
context.stroke();

var x9 = 90;
var y9 = 600;
var controlx8 = 900;
var controly8 = 900;
var endx8 = 790;
var endy8 = 0;

//Neptune Ring
context.beginPath();
context.moveTo(x9, y9);
context.quadraticCurveTo(controlx8, controly8, endx8, endy8);
context.strokeStyle = 'black';
context.lineWidth = 3;
context.stroke();

var centerx7 = 745;
var centery7 = 460;
var radius7 = 50;

//Neptune
context.beginPath();
context.arc(centerx7, centery7, radius7, 0, 2*Math.PI, false);
context.fillStyle = 'RoyalBlue';
context.fill();
context.strokeStyle = 'lightblue';
context.stroke();

var x10 = 590;
var y10 = 100;
var controlx10 = 520;
var controly10 = 90;
var endx10 = 725;
var endy10 = 100;

//Saturn's Rings
context.beginPath();
context.moveTo(x10, y10);
context.quadraticCurveTo(controlx10, controly10, endx10, endy10);
context.strokeStyle = 'orange';
context.lineWidth = 10
context.stroke();

var centerx20 = 300;
var centery20 = 500;
var radius20 = 10;

//Shooting Star
context.beginPath();
context.arc(centerx20, centery20, radius20, 0, 2*Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'grey';
context.lineWidth = 3
context.stroke();

context.beginPath();
context.moveTo(310, 500);
context.bezierCurveTo(340, 500, 370, 500, 390, 530);
context.bezierCurveTo(330, 490, 360, 490, 380, 520);
context.stroke();

Hearts Pump

This was my first ever project on HTML 5. I was cool to see how a "simple" could can create something like this heart. It definitely takes a lot to create something on HTML 5 but this is a great first assignment to take me into my project. 

//Box
var x = 0;
var y = 0;
var width = 700;
var height = 600;
var grdstartx = 175;
var grdstarty = 125;
var grdendx = 525;
var grdendy = 410;

context.beginPath();
context.rect(x, y, width, height);
var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);
grd.addColorStop(0, 'rgb(100, 0, 150)');
grd.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = grd;
context.fill();
context.stroke();

//Top Left
var startx = 300;
var starty = 200;
var controlx1 = 200;
var controly1 =  50;
var controlx2 = 3;
var controly2 = 200;
var endx1 = 200;
var endy1 = 350;

//Bottom Left
var controlx3 = 300;
var controly3 = 410;
var endx2 = 350;
var endy2 = 500;

//Bottom Right
var controlx4 = 375;
var controly4 = 410;
var endx3 = 450;
var endy3 = 325;

//Top Right
var controlx5 = 575;
var controly5 = 200;
var controlx6 = 400;
var controly6 = 50;

//Heart
context.beginPath();
context.moveTo(startx, starty);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx1, endy1);
context.quadraticCurveTo(controlx3, controly3, endx2, endy2);
context.quadraticCurveTo(controlx4, controly4, endx3, endy3);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, startx, starty);
context.closePath();
context.lineWidth = 5;
context.fillStyle = 'rgb(200, 0, 0)';
context.fill();
context.stroke();